From 579758037ed2f907751b4299bd28f7074b102c80 Mon Sep 17 00:00:00 2001
From: Christian Cueni <christian.cueni@iterativ.ch>
Date: Mon, 9 Jan 2023 09:08:09 +0100
Subject: [PATCH] Disable button during upload

---
 client/src/components/learningPath/DocumentUploadForm.vue | 6 ++++--
 client/src/pages/learningPath/CirclePage.vue              | 4 ++++
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/client/src/components/learningPath/DocumentUploadForm.vue b/client/src/components/learningPath/DocumentUploadForm.vue
index 4b042c4e..638d0b0d 100644
--- a/client/src/components/learningPath/DocumentUploadForm.vue
+++ b/client/src/components/learningPath/DocumentUploadForm.vue
@@ -1,12 +1,13 @@
 <script setup lang="ts">
 import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue";
 import type { DocumentUploadData, DropdownSelectable } from "@/types";
-import { onMounted, reactive } from "vue";
+import { reactive } from "vue";
 import { useI18n } from "vue-i18n";
 
 interface Props {
   learningSequences: DropdownSelectable[];
   showUploadErrorMessage: boolean;
+  isUploading: boolean;
 }
 
 const { t } = useI18n();
@@ -14,6 +15,7 @@ const { t } = useI18n();
 const props = withDefaults(defineProps<Props>(), {
   learningSequences: () => [],
   showUploadErrorMessage: false,
+  isUploading: false,
 });
 
 const emit = defineEmits<{
@@ -128,7 +130,7 @@ function showFileInformation() {
       </p>
     </div>
     <div class="-mx-8 px-8 pt-4 border-t">
-      <button class="btn-primary text-xl mb-0">
+      <button class="btn-primary text-xl mb-0" :disabled="isUploading">
         {{ $t("general.save") }}
       </button>
     </div>
diff --git a/client/src/pages/learningPath/CirclePage.vue b/client/src/pages/learningPath/CirclePage.vue
index 6a497e56..dc301d1d 100644
--- a/client/src/pages/learningPath/CirclePage.vue
+++ b/client/src/pages/learningPath/CirclePage.vue
@@ -35,6 +35,7 @@ log.debug("CirclePage created", props.readonly, props.profileUser);
 
 const showUploadModal = ref(false);
 const showUploadErrorMessage = ref(false);
+const isUploading = ref(false);
 
 const appStore = useAppStore();
 appStore.showMainNavigationBar = true;
@@ -108,6 +109,7 @@ onMounted(async () => {
 });
 
 async function uploadDocument(data: DocumentUploadData) {
+  isUploading.value = true;
   showUploadErrorMessage.value = false;
   try {
     if (!courseSessionsStore.courseSessionForRoute) {
@@ -120,9 +122,11 @@ async function uploadDocument(data: DocumentUploadData) {
     const courseSessionStore = useCourseSessionsStore();
     courseSessionStore.addDocument(newDocument);
     showUploadModal.value = false;
+    isUploading.value = false;
   } catch (error) {
     log.error(error);
     showUploadErrorMessage.value = true;
+    isUploading.value = false;
   }
 }
 </script>