From d5e25ac3d005532ce65d029cca9f0bcb8c7eed66 Mon Sep 17 00:00:00 2001
From: Michael Bauer <michael-bauer@posteo.de>
Date: Tue, 11 Jun 2024 19:16:16 +0200
Subject: [PATCH] Implement AbsenceCreationForm's core

---
 .../absences/AbsenceCreationForm.vue          | 56 +++++++++++++++----
 .../absences/absenceCreation.graphql          |  5 +-
 2 files changed, 46 insertions(+), 15 deletions(-)

diff --git a/aleksis/apps/alsijil/frontend/components/coursebook/absences/AbsenceCreationForm.vue b/aleksis/apps/alsijil/frontend/components/coursebook/absences/AbsenceCreationForm.vue
index b8a42945e..1dd08a14a 100644
--- a/aleksis/apps/alsijil/frontend/components/coursebook/absences/AbsenceCreationForm.vue
+++ b/aleksis/apps/alsijil/frontend/components/coursebook/absences/AbsenceCreationForm.vue
@@ -1,50 +1,82 @@
 <template>
   <v-container>
     <v-row>
-      <!-- persons -->
-      <!-- v-autocomplete -->
+      <v-autocomplete
+        :label="$t('forms.labels.persons')"
+        :items="allPersons"
+        item-text="fullName"
+        item-value="id"
+        multiple
+        @input="persons = $event"
+      />
     </v-row>
+    <!-- TODO: No outer padding. -->
     <v-row>
-      <!-- Start -->
       <v-col
         cols="12"
         :sm="6"
         >
         <date-field
-          :value="value"
-          @input="$emit('input', $event)"
-          :label="$t('date_select.label')"
+          :label="$t('forms.labels.start')"
           :disabled="loading"
+          :max="endDate"
+          @input="startDate = $event"
           />
       </v-col>
-      <!-- End -->
       <v-col
         cols="12"
         :sm="6"
         >
         <date-field
-          :value="value"
-          @input="$emit('input', $event)"
-          :label="$t('date_select.label')"
+          :label="$t('forms.labels.end')"
           :disabled="loading"
+          :min="startDate"
+          @input="endDate = $event"
           />
       </v-col>
     </v-row>
     <v-row>
-      <!-- comment -->
+      <v-text-field
+        :label="$t('forms.labels.comment')"
+        :loading="loading"
+        @input="comment = $event"
+      />
     </v-row>
     <v-row>
-      <!-- TODO: Component from Julian -->
+      <absence-reason-group-select
+        @input="absenceReason = $event"
+      />
     </v-row>
   </v-container>
 </template>
 
 <script>
+import AbsenceReasonGroupSelect from "aleksis.apps.kolego/components/AbsenceReasonGroupSelect.vue";
 import DateField from "aleksis.core/components/generic/forms/DateField.vue";
+import { persons } from "./absenceCreation.graphql"
+
 export default {
   name: "AbsenceCreationForm",
   components: {
+    AbsenceReasonGroupSelect,
     DateField,
   },
+  apollo: {
+    // TODO: Query currently returns all persons. But should return
+    // only persons the current user can create ParticipationStati and
+    // KolegoAbsences for!
+    allPersons: persons,
+  },
+  data() {
+    return {
+      // TODO: All needed? Check if sensible defaults.
+      loading: false,
+      persons: [],
+      startDate: "",
+      endDate: "",
+      comment: "",
+      absenceReason: null,
+    };
+  },
 };
 </script>
diff --git a/aleksis/apps/alsijil/frontend/components/coursebook/absences/absenceCreation.graphql b/aleksis/apps/alsijil/frontend/components/coursebook/absences/absenceCreation.graphql
index 79178bfd8..459fa3856 100644
--- a/aleksis/apps/alsijil/frontend/components/coursebook/absences/absenceCreation.graphql
+++ b/aleksis/apps/alsijil/frontend/components/coursebook/absences/absenceCreation.graphql
@@ -1,9 +1,8 @@
 # Uses core persons query
 query persons {
-  persons: persons {
+  allPersons: persons {
     id
-    firstName
-    lastName
+    fullName
   }
 }
 
-- 
GitLab