128 lines
4.1 KiB
Vue
128 lines
4.1 KiB
Vue
<template>
|
|
<div class="mt-8 block border p-6">
|
|
<h3 class="text-blue-dark">
|
|
{{ $t("circlePage.documents.title") }}
|
|
</h3>
|
|
<div>
|
|
<div class="mt-4 leading-relaxed">
|
|
<template v-if="!courseSessionsStore.canUploadCircleDocuments">
|
|
{{ $t("circlePage.documents.userDescription") }}
|
|
</template>
|
|
<template v-else>
|
|
{{ $t("circlePage.documents.expertDescription") }}
|
|
</template>
|
|
</div>
|
|
</div>
|
|
<ul
|
|
v-if="courseSessionsStore.circleDocuments.length"
|
|
class="mt-8 border-t border-t-gray-500"
|
|
>
|
|
<template
|
|
v-for="learningSequence of courseSessionsStore.circleDocuments"
|
|
:key="learningSequence.id"
|
|
>
|
|
<DocumentListItem
|
|
v-for="doc of learningSequence.documents"
|
|
:key="doc.url"
|
|
:subtitle="learningSequence.title"
|
|
:can-delete="courseSessionsStore.canUploadCircleDocuments"
|
|
:doc="doc"
|
|
@delete="deleteDocument(doc)"
|
|
/>
|
|
</template>
|
|
</ul>
|
|
<div v-if="courseSessionsStore.canUploadCircleDocuments">
|
|
<button class="btn-primary mt-8 text-xl" @click="showUploadModal = true">
|
|
{{ $t("circlePage.documents.action") }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<ItModal v-model="showUploadModal">
|
|
<template #title>{{ $t("circlePage.documents.action") }}</template>
|
|
<template #body>
|
|
<DocumentUploadForm
|
|
:learning-sequences="dropdownLearningSequences"
|
|
:show-upload-error-message="showUploadErrorMessage"
|
|
:is-uploading="isUploading"
|
|
@form-submit="uploadDocument"
|
|
/>
|
|
</template>
|
|
</ItModal>
|
|
<div
|
|
v-if="courseSessionsStore.canUploadCircleDocuments"
|
|
class="mt-8 flex flex-col gap-y-4 border p-6"
|
|
>
|
|
<h3 class="text-blue-dark">
|
|
{{ $t("circlePage.documents.trainerTitle") }}
|
|
</h3>
|
|
<div class="leading-relaxed">
|
|
{{ $t("circlePage.documents.trainerDescription") }}
|
|
</div>
|
|
<a target="_blank" class="link" :href="$t('circlePage.documents.trainerLinkSrc')">
|
|
{{ $t("circlePage.documents.trainerLinkText") }}
|
|
</a>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import ItModal from "@/components/ui/ItModal.vue";
|
|
import { uploadCircleDocument } from "@/services/files";
|
|
import { useCircleStore } from "@/stores/circle";
|
|
import { useCourseSessionsStore } from "@/stores/courseSessions";
|
|
import type { CircleDocument, DocumentUploadData } from "@/types";
|
|
import dialog from "@/utils/confirm-dialog";
|
|
import log from "loglevel";
|
|
import { computed, ref, watch } from "vue";
|
|
import { useI18n } from "vue-i18n";
|
|
import DocumentListItem from "./DocumentListItem.vue";
|
|
import DocumentUploadForm from "./DocumentUploadForm.vue";
|
|
|
|
const courseSessionsStore = useCourseSessionsStore();
|
|
const circleStore = useCircleStore();
|
|
const showUploadModal = ref(false);
|
|
const showUploadErrorMessage = ref(false);
|
|
const isUploading = ref(false);
|
|
const dropdownLearningSequences = computed(() =>
|
|
circleStore.circle?.learningSequences.map((sequence) => ({
|
|
id: sequence.id,
|
|
name: sequence.title,
|
|
}))
|
|
);
|
|
|
|
// confirm dialog
|
|
const { t } = useI18n();
|
|
const deleteDocument = async (doc: CircleDocument) => {
|
|
const options = {
|
|
title: t("circlePage.documents.deleteModalTitle"),
|
|
content: t("circlePage.documents.deleteModalWarning", { title: doc.name }),
|
|
};
|
|
try {
|
|
await dialog.confirm(options);
|
|
courseSessionsStore.removeDocument(doc.id);
|
|
} catch (e) {
|
|
log.debug("rejected");
|
|
}
|
|
};
|
|
watch(showUploadModal, () => (showUploadErrorMessage.value = false));
|
|
async function uploadDocument(data: DocumentUploadData) {
|
|
isUploading.value = true;
|
|
showUploadErrorMessage.value = false;
|
|
try {
|
|
if (!courseSessionsStore.currentCourseSession) {
|
|
throw new Error("No course session found");
|
|
}
|
|
const newDocument = await uploadCircleDocument(
|
|
data,
|
|
courseSessionsStore.currentCourseSession.id
|
|
);
|
|
courseSessionsStore.addDocument(newDocument);
|
|
showUploadModal.value = false;
|
|
isUploading.value = false;
|
|
} catch (error) {
|
|
log.error(error);
|
|
showUploadErrorMessage.value = true;
|
|
isUploading.value = false;
|
|
}
|
|
}
|
|
</script>
|