Make absence creation frontend form send datetimes instead of dates

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

@@ -93,6 +93,7 @@ import SecondaryActionButton from "aleksis.core/components/generic/buttons/Secon
 import loadingMixin from "aleksis.core/mixins/loadingMixin.js";
 import permissionsMixin from "aleksis.core/mixins/permissions.js";
 import mutateMixin from "aleksis.core/mixins/mutateMixin.js";
+import { DateTime } from "luxon";
 
 import { createAbsencesForPersons } from "./absenceCreation.graphql";
 
@@ -122,6 +123,7 @@ export default {
   },
   mounted() {
     this.addPermissions(["alsijil.view_register_absence_rule"]);
+    this.clearForm();
   },
   methods: {
     cancel() {
@@ -131,8 +133,8 @@ export default {
     },
     clearForm() {
       this.persons = [];
-      this.startDate = "";
-      this.endDate = "";
+      this.startDate = DateTime.now().startOf("day").toISO({ suppressSeconds: true });
+      this.endDate = DateTime.now().endOf("day").toISO({ suppressSeconds: true });
       this.comment = "";
       this.absenceReason = "";
     },
@@ -142,8 +144,8 @@ export default {
         createAbsencesForPersons,
         {
           persons: this.persons.map((p) => p.id),
-          start: this.startDate,
-          end: this.endDate,
+          start: this.$toUTCISO(this.$parseISODate(this.startDate)),
+          end: this.$toUTCISO(this.$parseISODate(this.endDate)),
           comment: this.comment,
           reason: this.absenceReason,
         },

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

@@ -26,9 +26,10 @@
       <v-row>
         <v-col cols="12" :sm="6" class="pl-0">
           <div aria-required="true">
-            <date-field
+            <date-time-field
               :label="$t('forms.labels.start')"
-              :max="endDate"
+              :max-date="endDate"
+              :max-time="maxStartTime"
               :rules="$rules().required.build()"
               :value="startDate"
               @input="$emit('start-date', $event)"
@@ -37,9 +38,10 @@
         </v-col>
         <v-col cols="12" :sm="6" class="pr-0">
           <div aria-required="true">
-            <date-field
+            <date-time-field
               :label="$t('forms.labels.end')"
-              :min="startDate"
+              :min-date="startDate"
+              :min-time="minEndTime"
               :rules="$rules().required.build()"
               :value="endDate"
               @input="$emit('end-date', $event)"
@@ -69,15 +71,16 @@
 
 <script>
 import AbsenceReasonGroupSelect from "aleksis.apps.kolego/components/AbsenceReasonGroupSelect.vue";
-import DateField from "aleksis.core/components/generic/forms/DateField.vue";
+import DateTimeField from "aleksis.core/components/generic/forms/DateTimeField.vue";
 import { persons } from "./absenceCreation.graphql";
 import formRulesMixin from "aleksis.core/mixins/formRulesMixin.js";
+import { DateTime } from "luxon";
 
 export default {
   name: "AbsenceCreationForm",
   components: {
     AbsenceReasonGroupSelect,
-    DateField,
+    DateTimeField,
   },
   mixins: [formRulesMixin],
   emits: [
@@ -113,5 +116,25 @@ export default {
       required: true,
     },
   },
+  computed: {
+    maxStartTime() {
+      // Only if on the same day
+      const start = DateTime.fromISO(this.startDate);
+      const end = DateTime.fromISO(this.endDate);
+
+      if (start.day !== end.day) return;
+
+      return end.minus({ minutes: 5, }).toFormat("HH:mm");
+    },
+    minEndTime() {
+      // Only if on the same day
+      const start = DateTime.fromISO(this.startDate);
+      const end = DateTime.fromISO(this.endDate);
+
+      if (start.day !== end.day) return;
+
+      return start.plus({ minutes: 5, }).toFormat("HH:mm");
+    },
+  },
 };
 </script>