Pass state to absence-creation-form

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

@@ -21,6 +21,11 @@
     </template>
     <template #content>
     <absence-creation-form v-if="form"
+      :persons="persons"
+      :start-date="startDate"
+      :end-date="endDate"
+      :comment="comment"
+      :absence-reason="absenceReason"
       @persons="persons = $event"
       @start-date="startDate = $event"
       @end-date="endDate = $event"
@@ -85,7 +90,7 @@ export default {
       startDate: "",
       endDate: "",
       comment: "",
-      absenceReason: null,
+      absenceReason: "",
     };
   },
   methods: {
@@ -95,6 +100,7 @@ export default {
     },
     confirm() {
       // TODO: Send mutation (shown in absence-creation-summary)
+      //       Clear form fields
       popup = false;
     },
   },

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

@@ -7,6 +7,7 @@
         item-text="fullName"
         return-object
         multiple
+        :value="persons"
         @input="$emit('persons', $event)"
       />
     </v-row>
@@ -19,6 +20,7 @@
         <date-field
           :label="$t('forms.labels.start')"
           :max="endDate"
+          :value="startDate"
           @input="$emit('start-date', $event)"
           />
       </v-col>
@@ -29,6 +31,7 @@
         <date-field
           :label="$t('forms.labels.end')"
           :min="startDate"
+          :value="endDate"
           @input="$emit('end-date', $event)"
           />
       </v-col>
@@ -36,11 +39,13 @@
     <v-row>
       <v-text-field
         :label="$t('forms.labels.comment')"
+        :value="comment"
         @input="$emit('comment', $event)"
       />
     </v-row>
     <v-row>
       <absence-reason-group-select
+        :value="absenceReason"
         @input="$emit('absence-reason', $event)"
       />
     </v-row>
@@ -65,5 +70,27 @@ export default {
     // KolegoAbsences for!
     allPersons: persons,
   },
+  props: {
+    persons: {
+      type: Array,
+      required: true,
+    },
+    startDate: {
+      type: String,
+      required: true,
+    },
+    endDate: {
+      type: String,
+      required: true,
+    },
+    comment: {
+      type: String,
+      required: true,
+    },
+    absenceReason: {
+      type: String,
+      required: true,
+    },
+  },
 };
 </script>