Disable button during upload

This commit is contained in:
Christian Cueni 2023-01-09 09:08:09 +01:00
parent cb9249328e
commit 579758037e
2 changed files with 8 additions and 2 deletions

View File

@ -1,12 +1,13 @@
<script setup lang="ts"> <script setup lang="ts">
import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue"; import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue";
import type { DocumentUploadData, DropdownSelectable } from "@/types"; import type { DocumentUploadData, DropdownSelectable } from "@/types";
import { onMounted, reactive } from "vue"; import { reactive } from "vue";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
interface Props { interface Props {
learningSequences: DropdownSelectable[]; learningSequences: DropdownSelectable[];
showUploadErrorMessage: boolean; showUploadErrorMessage: boolean;
isUploading: boolean;
} }
const { t } = useI18n(); const { t } = useI18n();
@ -14,6 +15,7 @@ const { t } = useI18n();
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
learningSequences: () => [], learningSequences: () => [],
showUploadErrorMessage: false, showUploadErrorMessage: false,
isUploading: false,
}); });
const emit = defineEmits<{ const emit = defineEmits<{
@ -128,7 +130,7 @@ function showFileInformation() {
</p> </p>
</div> </div>
<div class="-mx-8 px-8 pt-4 border-t"> <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") }} {{ $t("general.save") }}
</button> </button>
</div> </div>

View File

@ -35,6 +35,7 @@ log.debug("CirclePage created", props.readonly, props.profileUser);
const showUploadModal = ref(false); const showUploadModal = ref(false);
const showUploadErrorMessage = ref(false); const showUploadErrorMessage = ref(false);
const isUploading = ref(false);
const appStore = useAppStore(); const appStore = useAppStore();
appStore.showMainNavigationBar = true; appStore.showMainNavigationBar = true;
@ -108,6 +109,7 @@ onMounted(async () => {
}); });
async function uploadDocument(data: DocumentUploadData) { async function uploadDocument(data: DocumentUploadData) {
isUploading.value = true;
showUploadErrorMessage.value = false; showUploadErrorMessage.value = false;
try { try {
if (!courseSessionsStore.courseSessionForRoute) { if (!courseSessionsStore.courseSessionForRoute) {
@ -120,9 +122,11 @@ async function uploadDocument(data: DocumentUploadData) {
const courseSessionStore = useCourseSessionsStore(); const courseSessionStore = useCourseSessionsStore();
courseSessionStore.addDocument(newDocument); courseSessionStore.addDocument(newDocument);
showUploadModal.value = false; showUploadModal.value = false;
isUploading.value = false;
} catch (error) { } catch (error) {
log.error(error); log.error(error);
showUploadErrorMessage.value = true; showUploadErrorMessage.value = true;
isUploading.value = false;
} }
} }
</script> </script>