diff --git a/aleksis/apps/alsijil/frontend/components/coursebook/absences/AbsenceCreationForm.vue b/aleksis/apps/alsijil/frontend/components/coursebook/absences/AbsenceCreationForm.vue index 74f07cc4dcc9c24ccd42c0c8345182e5e60c6a9b..19dc5721608145010d96a7bbcbd0a8a6051e5e32 100644 --- a/aleksis/apps/alsijil/frontend/components/coursebook/absences/AbsenceCreationForm.vue +++ b/aleksis/apps/alsijil/frontend/components/coursebook/absences/AbsenceCreationForm.vue @@ -1,5 +1,5 @@ <template> - <v-form @input="$emit('valid', $event)"> + <v-form ref="form" @input="$emit('valid', $event)"> <v-container> <v-row> <div aria-required="true" class="full-width"> @@ -30,9 +30,10 @@ :label="$t('forms.labels.start')" :max-date="endDate" :max-time="maxStartTime" + :limit-selectable-range="false" :rules="$rules().required.build()" :value="startDate" - @input="$emit('start-date', $event)" + @input="handleStartDate" /> </div> </v-col> @@ -42,9 +43,10 @@ :label="$t('forms.labels.end')" :min-date="startDate" :min-time="minEndTime" + :limit-selectable-range="false" :rules="$rules().required.build()" :value="endDate" - @input="$emit('end-date', $event)" + @input="handleEndDate" /> </div> </v-col> @@ -141,5 +143,33 @@ export default { return start.plus({ minutes: 5 }).toFormat("HH:mm"); }, }, + methods: { + handleStartDate(startDate) { + const parsedStart = DateTime.fromISO(startDate); + const parsedEnd = DateTime.fromISO(this.endDate); + if (parsedStart >= parsedEnd) { + this.$emit( + "end-date", + parsedStart.plus({ minutes: 5 }).toISO({ suppressSeconds: true }), + ); + } + this.$emit("start-date", startDate); + this.$refs.form.resetValidation(); + this.$refs.form.validate(); + }, + handleEndDate(endDate) { + const parsedStart = DateTime.fromISO(this.startDate); + const parsedEnd = DateTime.fromISO(endDate); + if (parsedEnd <= parsedStart) { + this.$emit( + "start-date", + parsedEnd.minus({ minutes: 5 }).toISO({ suppressSeconds: true }), + ); + } + this.$emit("end-date", endDate); + this.$refs.form.resetValidation(); + this.$refs.form.validate(); + }, + }, }; </script>