Re-set start datetime when end datetime gets set to an earlier value (and vice...

Re-set start datetime when end datetime gets set to an earlier value (and vice versa) in absence creation dialog

aleksis/apps/alsijil/frontend/components/coursebook/absences/AbsenceCreationForm.vue

@@ -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,23 @@ 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);
+    },
+    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);
+    },
+  },
 };
 </script>