Adapt longterm-absences-frontend to optionally show periods

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

@@ -24,32 +24,46 @@
         </div>
       </v-row>
       <v-row>
-        <v-col cols="12" :sm="6" class="pl-0">
+        <v-col cols="12" :sm="startPeriods ? 4 : 6" class="pl-0">
           <div aria-required="true">
             <date-time-field
               :label="$t('forms.labels.start')"
-              :max-date="maxStartDate"
-              :max-time="maxStartTime"
-              :limit-selectable-range="false"
               :rules="$rules().required.build()"
-              :value="startDate"
+              :value="start.toISO()"
               @input="handleStartDate"
             />
           </div>
         </v-col>
-        <v-col cols="12" :sm="6" class="pr-0">
+        <v-col cols="12" :sm="2"  v-if="startPeriods" align-self="end">
+            <v-select
+              :label="$t('lesrooster.slot.period')"
+              :items="startPeriods"
+              item-text="period"
+              :value="startSlot"
+              @input="handleStartSlot"
+              return-object
+            />
+        </v-col>
+        <v-col cols="12" :sm="endPeriods ? 4 : 6" class="pr-0">
           <div aria-required="true">
             <date-time-field
               :label="$t('forms.labels.end')"
-              :min-date="minEndDate"
-              :min-time="minEndTime"
-              :limit-selectable-range="false"
               :rules="$rules().required.build()"
-              :value="endDate"
+              :value="end.toISO()"
               @input="handleEndDate"
             />
           </div>
         </v-col>
+        <v-col cols="12" :sm="2" v-if="endPeriods" align-self="end">
+            <v-select
+              :label="$t('lesrooster.slot.period')"
+              :items="endPeriods"
+              item-text="period"
+              :value="endSlot"
+              @input="handleEndSlot"
+              return-object
+            />
+        </v-col>
       </v-row>
       <v-row>
         <v-text-field
@@ -75,7 +89,10 @@
 <script>
 import AbsenceReasonGroupSelect from "aleksis.apps.kolego/components/AbsenceReasonGroupSelect.vue";
 import DateTimeField from "aleksis.core/components/generic/forms/DateTimeField.vue";
-import { persons } from "./absenceCreation.graphql";
+import { 
+  periodsByDay,
+  persons,
+} from "./absenceCreation.graphql";
 import formRulesMixin from "aleksis.core/mixins/formRulesMixin.js";
 import { DateTime } from "luxon";
 
@@ -96,6 +113,13 @@ export default {
   ],
   apollo: {
     allPersons: persons,
+    periodsByDay: {
+      query: periodsByDay,
+      result({ data: { periodsByDay } }) {
+        this.handleStartDate(this.start);
+        this.handleEndDate(this.end);
+      },
+    },
   },
   props: {
     persons: {
@@ -123,60 +147,91 @@ export default {
       required: true,
     },
   },
+  data() {
+    return {
+      startDT: DateTime.fromISO(this.startDate),
+      endDT: DateTime.fromISO(this.endDate),
+      startPeriods: false,
+      endPeriods: false,
+      startSlot: undefined,
+      endSlot: undefined,
+    };
+  },
   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");
+    start: {
+      get() {
+        return this.startDT;
+      },
+      set(dt) {
+        this.startDT = dt;
+        if (dt >= this.end) {
+          this.end = dt.plus({ minutes: 5 });
+        }
+        this.$emit("start-date", dt.toISO());
+        console.log("Set start", this.startDT.toISO());
+      },
     },
-    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");
-    },
-    maxStartDate() {
-      const end = DateTime.fromISO(this.endDate);
-      return end.toISODate();
-    },
-    minEndDate() {
-      const start = DateTime.fromISO(this.startDate);
-      return start.toISODate();
+    end: {
+      get() {
+        return this.endDT;
+      },
+      set(dt) {
+        this.endDT = dt;
+        if (dt <= this.start) {
+          this.start = dt.minus({ minutes: 5 });
+        }
+        this.$emit("end-date", dt.toISO());
+      },
     },
   },
   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 }),
-        );
+    getPeriodsForWeekday(weekday) {
+      // Adapt from python conventions
+      const pythonWeekday = weekday - 1;
+      return this.periodsByDay.find((period) => period.weekday === pythonWeekday).periods;
+    },
+    handleStartDate(date) {
+      console.log("handleStartDate", date);
+      this.start = DateTime.fromISO(date);
+      
+      if (this.periodsByDay.length > 0) {
+        // Select periods for day
+        this.startPeriods = this.getPeriodsForWeekday(this.start.weekday);
+        // Sync PeriodSelect
+        const startTime = this.start.toFormat("HH:mm:ss")
+        console.log("syncing to ", startTime)
+        this.startSlot = this.startPeriods.find((period) => period.timeStart === startTime)
+        console.log("startSlot ", this.startSlot)
       }
-      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 }),
-        );
+    handleEndDate(date) {
+      this.end = DateTime.fromISO(date);
+
+      if (this.periodsByDay.length > 0) {
+        // Select periods for day
+        this.endPeriods = this.getPeriodsForWeekday(this.end.weekday);
+        // Sync PeriodSelect
+        const endTime = this.end.toFormat("HH:mm:ss")
+        this.endSlot = this.endPeriods.find((period) => period.endTime === endTime)
       }
-      this.$emit("end-date", endDate);
-      this.$refs.form.resetValidation();
-      this.$refs.form.validate();
+    },
+    handleStartSlot(slot) {
+      // Sync TimeSelect
+      const startTime = DateTime.fromISO(slot.timeStart)
+      this.start = this.start.set({
+        hour: startTime.hour,
+        minute: startTime.minute,
+        second: startTime.second,
+      });
+    },
+    handleEndSlot(slot) {
+      // Sync TimeSelect
+      const endTime = DateTime.fromISO(slot.timeEnd)
+      this.end = this.end.set({
+        hour: endTime.hour,
+        minute: endTime.minute,
+        second: endTime.second,
+      });
     },
   },
 };

aleksis/apps/alsijil/frontend/components/coursebook/absences/absenceCreation.graphql

@@ -6,6 +6,17 @@ query persons {
   }
 }
 
+query periodsByDay {
+  periodsByDay: periodsByDay {
+    weekday
+    periods {
+      period
+      timeStart
+      timeEnd
+    }
+  }
+}
+
 query lessonsForPersons($persons: [ID]!, $start: DateTime!, $end: DateTime!) {
   items: lessonsForPersons(persons: $persons, start: $start, end: $end) {
     id