136 lines
3.7 KiB
Vue
136 lines
3.7 KiB
Vue
<script setup lang="ts">
|
|
import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue";
|
|
import type { DocumentUploadData, DropdownSelectable } from "@/types";
|
|
import { reactive } from "vue";
|
|
import { useTranslation } from "i18next-vue";
|
|
|
|
export interface Props {
|
|
learningSequences?: DropdownSelectable[];
|
|
showUploadErrorMessage?: boolean;
|
|
isUploading?: boolean;
|
|
}
|
|
|
|
const { t } = useTranslation();
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
learningSequences: () => [],
|
|
showUploadErrorMessage: false,
|
|
isUploading: false,
|
|
});
|
|
|
|
const emit = defineEmits<{
|
|
(e: "formSubmit", data: DocumentUploadData): void;
|
|
}>();
|
|
|
|
const formData = reactive<DocumentUploadData>({
|
|
file: null,
|
|
name: "",
|
|
learningSequence: {
|
|
id: -1,
|
|
name: t("circlePage.documents.chooseSequence"),
|
|
},
|
|
});
|
|
|
|
const formErrors = reactive({
|
|
file: false,
|
|
name: false,
|
|
learningSequence: false,
|
|
});
|
|
|
|
function fileChange(e: Event) {
|
|
const target = e.target as HTMLInputElement;
|
|
if (target === null || target.files === null) {
|
|
return;
|
|
}
|
|
|
|
formData.file = target.files.length > 0 ? target.files[0] : null;
|
|
}
|
|
|
|
function submitForm() {
|
|
if (!validateForm()) {
|
|
return;
|
|
}
|
|
emit("formSubmit", formData);
|
|
resetFormErrors();
|
|
}
|
|
|
|
function validateForm() {
|
|
formErrors.file = formData.file === null;
|
|
formErrors.learningSequence = formData.learningSequence.id === -1;
|
|
formErrors.name = formData.name === "";
|
|
|
|
for (const [, value] of Object.entries(formErrors)) {
|
|
if (value) {
|
|
return false;
|
|
}
|
|
}
|
|
return true;
|
|
}
|
|
|
|
function resetFormErrors() {
|
|
for (let [, value] of Object.entries(formErrors)) {
|
|
value = false; // eslint-disable-line
|
|
}
|
|
}
|
|
|
|
function showFileInformation() {
|
|
return formData.file || formErrors.file;
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<form @submit.prevent="submitForm()">
|
|
<label class="text-bold block" for="upload">
|
|
{{ $t("circlePage.documents.fileLabel") }}
|
|
</label>
|
|
<div class="btn-secondary relative mb-4 mt-4 cursor-pointer text-xl">
|
|
<input id="upload" type="file" class="absolute opacity-0" @change="fileChange" />
|
|
{{ $t("circlePage.documents.modalAction") }}
|
|
</div>
|
|
<div v-if="showFileInformation()" class="mb-4">
|
|
<div v-if="formData.file">
|
|
<p>{{ formData.file.name }}</p>
|
|
</div>
|
|
<div v-if="formErrors.file">
|
|
<p class="text-red-700">{{ $t("circlePage.documents.selectFile") }}</p>
|
|
</div>
|
|
</div>
|
|
<p class="mb-8">{{ $t("circlePage.documents.maxFileSize") }}</p>
|
|
<div class="mb-8">
|
|
<label class="text-bold mb-4 block" for="name">
|
|
{{ $t("circlePage.documents.modalFileName") }}
|
|
</label>
|
|
<input id="name" v-model="formData.name" type="text" class="mb-2 w-1/2" />
|
|
<p>{{ $t("circlePage.documents.modalNameInformation") }}</p>
|
|
<div v-if="formErrors.name">
|
|
<p class="text-red-700">{{ $t("circlePage.documents.chooseName") }}</p>
|
|
</div>
|
|
</div>
|
|
<div class="mb-8">
|
|
<label class="text-bold mb-4 block" for="learningsequnce">
|
|
{{ $t("general.learningSequence") }}
|
|
</label>
|
|
<ItDropdownSelect
|
|
v-model="formData.learningSequence"
|
|
class="mt-4 w-full lg:mt-0 lg:w-96"
|
|
:items="props.learningSequences"
|
|
></ItDropdownSelect>
|
|
<div v-if="formErrors.learningSequence">
|
|
<p class="text-red-700">
|
|
{{ $t("circlePage.documents.chooseLearningSequence") }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div v-if="showUploadErrorMessage">
|
|
<p class="mb-4 text-red-700">
|
|
{{ $t("circlePage.documents.uploadErrorMessage") }}
|
|
</p>
|
|
</div>
|
|
<div class="-mx-8 border-t px-8 pt-4">
|
|
<button class="btn-primary mb-0 text-xl" :disabled="isUploading">
|
|
{{ $t("general.save") }}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</template>
|