From f19328f5ae445eafc4feb066f0b0b6edb3df7051 Mon Sep 17 00:00:00 2001
From: Matt Szczerba <matthew.szczerba@canada.ca>
Date: Fri, 7 Jun 2024 11:40:09 -0400
Subject: [PATCH] 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

---
 src/components/metadata-editor.vue | 35 ++++++++++++++++++------------
 src/stores/userStore.ts            |  1 +
 2 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/src/components/metadata-editor.vue b/src/components/metadata-editor.vue
index f2c3d471d..dba2ee200 100644
--- 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,9 +971,15 @@ 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 {
@@ -980,9 +987,15 @@ 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);
+                                });
                         }
 
                         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);
                 });
         });
 
diff --git a/src/stores/userStore.ts b/src/stores/userStore.ts
index 57b28b553..2a40264e9 100644
--- 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;
 }