Disable button during upload

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>

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>