Wire AbsenceCreationForm & AbsenceCreationSummary up

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

@@ -20,8 +20,18 @@
       <!-- Abwesenheit/Entschuldigung Zusammenfassung --> 
     </template>
     <template #content>
-    <absence-creation-form v-if="form" />
-    <absence-creation-summary v-else />
+    <absence-creation-form v-if="form"
+      @persons="persons = $event"
+      @start-date="startDate = $event"
+      @end-date="endDate = $event"
+      @comment="comment = $event"
+      @absence-reason="absenceReason = $event"
+    />
+    <absence-creation-summary v-else
+      :persons="persons"
+      :start-date="startDate"
+      :end-date="endDate"
+    />
     </template>
     <template #actions>
       <!-- secondary -->
@@ -70,6 +80,12 @@ export default {
       popup: false,
       form: true,
       loading: false,
+      // TODO: All needed? Check if sensible defaults.
+      persons: [],
+      startDate: "",
+      endDate: "",
+      comment: "",
+      absenceReason: null,
     };
   },
   methods: {

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

@@ -7,7 +7,7 @@
         item-text="fullName"
         item-value="id"
         multiple
-        @input="persons = $event"
+        @input="$emit('persons', $event)"
       />
     </v-row>
     <!-- TODO: No outer padding. -->
@@ -20,7 +20,7 @@
           :label="$t('forms.labels.start')"
           :disabled="loading"
           :max="endDate"
-          @input="startDate = $event"
+          @input="$emit('start-date', $event)"
           />
       </v-col>
       <v-col
@@ -31,7 +31,7 @@
           :label="$t('forms.labels.end')"
           :disabled="loading"
           :min="startDate"
-          @input="endDate = $event"
+          @input="$emit('end-date', $event)"
           />
       </v-col>
     </v-row>
@@ -39,12 +39,12 @@
       <v-text-field
         :label="$t('forms.labels.comment')"
         :loading="loading"
-        @input="comment = $event"
+        @input="$emit('comment', $event)"
       />
     </v-row>
     <v-row>
       <absence-reason-group-select
-        @input="absenceReason = $event"
+        @input="$emit('absence-reason', $event)"
       />
     </v-row>
   </v-container>
@@ -53,7 +53,7 @@
 <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"
+import { persons } from "./absenceCreation.graphql";
 
 export default {
   name: "AbsenceCreationForm",
@@ -61,22 +61,12 @@ export default {
     AbsenceReasonGroupSelect,
     DateField,
   },
+  emits: ["persons", "start-date", "end-date", "comment", "absence-reason"],
   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/AbsenceCreationSummary.vue

 <template>
   <!-- TODO: Hide header -->
   <c-r-u-d-iterator
-    :gql-query=""
-    :gql-additional-query-args="FROM FORM"
+    :gql-query="gqlQuery"
+    :gql-additional-query-args="gqlArgs"
     :enable-create="false"
     :enable-edit="false"
     :elevated="false"
@@ -15,11 +15,40 @@
 
 <script>
 import CRUDIterator from "aleksis.core/components/generic/CRUDIterator.vue";
+import { lessonsForPersons } from "./absenceCreation.graphql";
 
 export default {
   name: "AbsenceCreationSummary",
   components: {
     CRUDIterator,
   },
+  props: {
+    persons: {
+      type: Array,
+      required: true,
+    },
+    startDate: {
+      type: String,
+      required: true,
+    },
+    endDate: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      gqlQuery: lessonsForPersons,
+    };
+  },
+  computed: {
+    gqlArgs() {
+      return {
+        persons: this.persons.map((person) => person.id),
+        start: this.startDate,
+        end: this.endDate,
+      };
+    },
+  },
 };
 </script>