Added a warning to inform the user of potentially long save times and…

… disabled the button until complete. Added the title and a scrollbar to UUID dropdown
ramp4-pcar4 · Jun 10, 2024 · aa4b657 · aa4b657
1 parent 35b4caf
commit aa4b657
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 16 deletions.
diff --git a/src/components/metadata-editor.vue b/src/components/metadata-editor.vue
@@ -58,7 +58,7 @@
                                 :class="{ 'input-error': error || !reqFields.uuid }"
                             />
                             <div
-                                class="absolute z-10 w-full bg-white border border-gray-200 mt-1"
+                                class="absolute z-10 w-full bg-white border border-gray-200 mt-1 max-h-96 overflow-y-auto"
                                 v-show="showDropdown"
                             >
                                 <ul>
@@ -71,7 +71,7 @@
                                             storyline.isUserStoryline ? 'bg-gray-200' : ''
                                         ]"
                                     >
-                                        {{ storyline.uuid }}
+                                        {{ storyline.uuid + ' - ' + storyline.title }}
                                     </li>
                                 </ul>
                             </div>
@@ -944,6 +944,7 @@ export default class MetadataEditorV extends Vue {
             const formData = new FormData();
             formData.append('data', content, `${this.uuid}.zip`);
             const headers = { 'Content-Type': 'multipart/form-data' };
+            Message.warning('Please wait. This may take several minutes.');
 
             axios
                 .post(this.apiUrl + '/upload', formData, { headers })
@@ -953,13 +954,13 @@ export default class MetadataEditorV extends Vue {
                     responseData.status; // HTTP status
                     this.unsavedChanges = false;
                     this.loadExisting = true; // if editExisting was false, we can now set it to true
-                    Message.success('Successfully saved changes!');
 
                     if (process.env.VUE_APP_CURR_ENV !== '#{CURR_ENV}#') {
                         if (responseData.new) {
                             axios
                                 .post(process.env.VUE_APP_NET_API_URL + '/api/user/register', {
-                                    uuid: this.uuid
+                                    uuid: this.uuid,
+                                    title: this.metadata.title ?? ''
                                 })
                                 .then((response: any) => {
                                     const userStore = useUserStore();
@@ -970,19 +971,31 @@ export default class MetadataEditorV extends Vue {
                                     axios
                                         .post(process.env.VUE_APP_NET_API_URL + '/api/version/commit', formData)
                                         .then((response: any) => {
-                                            console.log('Version saved successfully.');
+                                            Message.success('Successfully saved changes!');
                                         })
-                                        .catch((error: any) => console.log(error.response || error));
+                                        .catch((error: any) => console.log(error.response || error))
+                                        .finally(() => {
+                                            // padding to prevent save button from being clicked rapidly
+                                            setTimeout(() => {
+                                                this.saving = false;
+                                            }, 500);
+                                        });
                                 })
                                 .catch((error: any) => console.log(error.response || error));
                         } else {
                             formData.append('uuid', this.uuid);
                             axios
                                 .post(process.env.VUE_APP_NET_API_URL + '/api/version/commit', formData)
                                 .then((response: any) => {
-                                    console.log('Version saved successfully.');
+                                    Message.success('Successfully saved changes!');
                                 })
-                                .catch((error: any) => console.log(error.response || error));
+                                .catch((error: any) => console.log(error.response || error))
+                                .finally(() => {
+                                    // padding to prevent save button from being clicked rapidly
+                                    setTimeout(() => {
+                                        this.saving = false;
+                                    }, 500);
+                                });
                         }
 
                         fetch(this.apiUrl + `/retrieveMessages`)
@@ -1001,12 +1014,6 @@ export default class MetadataEditorV extends Vue {
                 })
                 .catch(() => {
                     Message.error('Failed to save changes.');
-                })
-                .finally(() => {
-                    // padding to prevent save button from being clicked rapidly
-                    setTimeout(() => {
-                        this.saving = false;
-                    }, 500);
                 });
         });
 
@@ -1276,8 +1283,13 @@ export default class MetadataEditorV extends Vue {
 
         let combined = [...userStorylines, ...allStorylines];
 
-        if (this.uuid)
-            combined = combined.filter((storyline) => storyline.uuid.toLowerCase().includes(this.uuid.toLowerCase()));
+        if (this.uuid) {
+            combined = combined.filter(
+                (storyline) =>
+                    storyline.uuid.toLowerCase().includes(this.uuid.toLowerCase()) ||
+                    (storyline.title && storyline.title.toLowerCase().includes(this.uuid.toLowerCase()))
+            );
+        }
 
         return combined;
     }

diff --git a/src/stores/userStore.ts b/src/stores/userStore.ts
@@ -2,6 +2,7 @@ import { defineStore } from 'pinia';
 
 interface Storyline {
     uuid: string;
+    title: string;
     isUserStoryline?: boolean;
 }