Skip to content

Commit

Permalink
fix file inputs for school policy and school terms forms
Browse files Browse the repository at this point in the history
  • Loading branch information
@NFriedo
NFriedo committed Mar 6, 2025
1 parent f331fa1 commit de72a1a
Show file tree
Hide file tree
Showing 2 changed files with 26 additions and 44 deletions.
35 changes: 13 additions & 22 deletions src/components/organisms/administration/SchoolPolicyFormDialog.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@
</div>
</v-alert>
<v-file-input
v-model="file"
ref="input-file"
class="input-file mb-2"
data-testid="input-file"
Expand All @@ -41,9 +42,8 @@
t('pages.administration.school.index.schoolPolicy.hints.uploadFile')
"
:persistent-hint="true"
:rules="[rules.required, rules.mustBePdf, rules.maxSize(4194304)]"
:rules="[rules.required, rules.mustBePdf, rules.maxSize]"
@blur="onBlur"
@update:modelValue="onFileChange"
>
<template v-slot:append-inner>
<v-icon
Expand Down Expand Up @@ -96,33 +96,24 @@ export default defineComponent({
const policyForm: Ref<File[]> = ref([]);
const isValid: Ref<boolean> = ref(false);
const isTouched: Ref<boolean> = ref(false);
const files: Ref<File[]> = ref([]);
const file: Ref<File | null> = ref(null);
const school: ComputedRef<School> = computed(() => schoolsModule.getSchool);
const maxFileUploadSizeInKb = 4194304;
const rules = {
required: (value: File[]) =>
!(value.length === 0) || t("common.validation.required"),
mustBePdf: (value: File[]) =>
!(value.length === 0) ||
value[0].type === "application/pdf" ||
required: (value: File | null) =>
!!value || t("common.validation.required"),
mustBePdf: (value: File | null) =>
value?.type === "application/pdf" ||
t("pages.administration.school.index.schoolPolicy.validation.notPdf"),
maxSize: (bytes: number) => (value: File[]) =>
!(value.length === 0) ||
value[0].size <= bytes ||
maxSize: (value: File | null) =>
(!!value && value.size <= maxFileUploadSizeInKb) ||
t(
"pages.administration.school.index.schoolPolicy.validation.fileTooBig"
),
};
const onFileChange = (_files: File[] | File) => {
if (Array.isArray(_files)) {
files.value = _files;
} else {
files.value = [_files];
}
};
const onBlur = () => {
isTouched.value = true;
};
Expand All @@ -139,14 +130,14 @@ export default defineComponent({
};
const submit = async () => {
if (isValid.value) {
if (isValid.value && file.value) {
const newConsentVersion: CreateConsentVersionPayload = {
schoolId: school.value.id,
title: t("pages.administration.school.index.schoolPolicy.fileName"),
consentText: "",
consentTypes: ["privacy"],
publishedAt: currentDate().toString(),
consentData: (await toBase64(files.value[0])) as string,
consentData: (await toBase64(file.value)) as string,
};
emit("close");
Expand All @@ -168,13 +159,13 @@ export default defineComponent({
cancel,
submit,
onBlur,
onFileChange,
isValid,
isTouched,
policyForm,
school,
mdiAlert,
mdiFileReplaceOutline,
file,
};
},
});
Expand Down
35 changes: 13 additions & 22 deletions src/components/organisms/administration/SchoolTermsFormDialog.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@
</div>
</v-alert>
<v-file-input
v-model="file"
ref="input-file"
class="input-file mb-2"
data-testid="input-file"
Expand All @@ -40,9 +41,8 @@
t('pages.administration.school.index.termsOfUse.hints.uploadFile')
"
:persistent-hint="true"
:rules="[rules.required, rules.mustBePdf, rules.maxSize(4194304)]"
:rules="[rules.required, rules.mustBePdf, rules.maxSize]"
@blur="onBlur"
@update:modelValue="onFileChange"
>
<template v-slot:append-inner>
<v-icon
Expand Down Expand Up @@ -95,35 +95,26 @@ export default defineComponent({
const termsForm: Ref<File[]> = ref([]);
const isFormValid: Ref<boolean> = ref(false);
const isFormTouched: Ref<boolean> = ref(false);
const files: Ref<File[]> = ref([]);
const file: Ref<File | null> = ref(null);
const school: ComputedRef<School> = computed(() => schoolsModule.getSchool);
const maxFileUploadSizeInKb = 4194304;
const validationRules = {
required: (value: File[]) =>
!(value.length === 0) || t("common.validation.required"),
mustBePdf: (value: File[]) =>
!(value.length === 0) ||
value[0].type === "application/pdf" ||
required: (value: File | null) =>
!!value || t("common.validation.required"),
mustBePdf: (value: File | null) =>
value?.type === "application/pdf" ||
t("pages.administration.school.index.termsOfUse.validation.notPdf"),
maxSize: (bytes: number) => (value: File[]) =>
!(value.length === 0) ||
value[0].size <= bytes ||
maxSize: (value: File | null) =>
(!!value && value.size <= maxFileUploadSizeInKb) ||
t("pages.administration.school.index.termsOfUse.validation.fileTooBig"),
};
const onBlur = () => {
isFormTouched.value = true;
};
const onFileChange = (_files: File[] | File) => {
if (Array.isArray(_files)) {
files.value = _files;
} else {
files.value = [_files];
}
};
const resetForm = () => {
termsForm.value = [];
isFormValid.value = false;
Expand All @@ -136,14 +127,14 @@ export default defineComponent({
};
const submit = async () => {
if (isFormValid.value) {
if (isFormValid.value && file.value) {
const newConsentVersion: CreateConsentVersionPayload = {
schoolId: school.value.id,
title: t("pages.administration.school.index.termsOfUse.fileName"),
consentText: "",
consentTypes: ["termsOfUse"],
publishedAt: currentDate().toString(),
consentData: (await toBase64(files.value[0])) as string,
consentData: (await toBase64(file.value)) as string,
};
emit("close");
Expand All @@ -165,13 +156,13 @@ export default defineComponent({
cancel,
submit,
onBlur,
onFileChange,
isValid: isFormValid,
isTouched: isFormTouched,
termsForm,
school,
mdiAlert,
mdiFileReplaceOutline,
file,
};
},
});
Expand Down

0 comments on commit de72a1a

Please sign in to comment.