Implement AbsenceCreationForm's core

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

 <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>

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

 # Uses core persons query
 query persons {
-  persons: persons {
+  allPersons: persons {
     id
-    firstName
-    lastName
+    fullName
   }
 }