Improve behavior and design of absence creation dialog

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

 <template>
-  <mobile-fullscreen-dialog v-model="popup">
+  <mobile-fullscreen-dialog v-model="popup" persistent>
     <template #activator="activator">
       <create-button
         style="z-index: 5"
@@ -29,7 +29,6 @@
     </template>
     <template #content>
       <absence-creation-form
-        v-if="form"
         :persons="persons"
         :start-date="startDate"
         :end-date="endDate"
@@ -41,9 +40,12 @@
         @end-date="endDate = $event"
         @comment="comment = $event"
         @absence-reason="absenceReason = $event"
+        :class="{
+          'd-none': !form,
+        }"
       />
       <absence-creation-summary
-        v-else
+        v-if="!form"
         :persons="persons"
         :start-date="startDate"
         :end-date="endDate"
@@ -52,7 +54,16 @@
     </template>
     <template #actions>
       <!-- secondary -->
-      <cancel-button @click="cancel" :disabled="loading" />
+      <cancel-button @click="cancel" />
+      <secondary-action-button
+        @click="form = true"
+        v-if="!form"
+        :disabled="loading"
+        i18n-key="actions.back"
+      >
+        <v-icon left>$prev</v-icon>
+        {{ $t("actions.back") }}
+      </secondary-action-button>
       <!-- primary -->
       <save-button
         v-if="form"
@@ -80,6 +91,7 @@ import AbsenceCreationSummary from "./AbsenceCreationSummary.vue";
 import CreateButton from "aleksis.core/components/generic/buttons/CreateButton.vue";
 import CancelButton from "aleksis.core/components/generic/buttons/CancelButton.vue";
 import SaveButton from "aleksis.core/components/generic/buttons/SaveButton.vue";
+import SecondaryActionButton from "aleksis.core/components/generic/buttons/SecondaryActionButton.vue";
 import loadingMixin from "aleksis.core/mixins/loadingMixin.js";
 import permissionsMixin from "aleksis.core/mixins/permissions.js";
 import mutateMixin from "aleksis.core/mixins/mutateMixin.js";
@@ -95,6 +107,7 @@ export default {
     CreateButton,
     CancelButton,
     SaveButton,
+    SecondaryActionButton,
   },
   mixins: [loadingMixin, mutateMixin, permissionsMixin],
   data() {
@@ -116,6 +129,7 @@ export default {
     cancel() {
       this.popup = false;
       this.form = true;
+      this.clearForm();
     },
     clearForm() {
       this.persons = [];
@@ -154,7 +168,6 @@ export default {
       this.$once("save", this.handleSave);
     },
     handleSave() {
-      this.clearForm();
       this.cancel();
       this.$toastSuccess("alsijil.coursebook.absences.success");
     },

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

@@ -3,14 +3,18 @@
     <v-container>
       <v-row>
         <div aria-required="true" class="full-width">
+          <!-- FIXME Vue 3: clear-on-select -->
           <v-autocomplete
             :label="$t('forms.labels.persons')"
             :items="allPersons"
             item-text="fullName"
             return-object
             multiple
+            chips
+            deletable-chips
             :rules="rules"
             :value="persons"
+            :loading="$apollo.queries.allPersons.loading"
             @input="$emit('persons', $event)"
           />
         </div>
@@ -79,9 +83,6 @@ export default {
     "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,
   },
   props: {

aleksis/apps/alsijil/frontend/messages/de.json

@@ -55,8 +55,8 @@
         "title": "Abwesenheiten erfassen",
         "summary": "Zusammenfassung",
         "lessons": "Keine Stunden | 1 Stunde | {count} Stunden",
-        "success": "Die Abwesenheiten wurden erfolgreich erstellt.",
-        "warning": "Die Abwesenheiten können mit diesem Menü nicht mehr geändert werden, wenn sie einmal bestätigt wurden."
+        "success": "Die Abwesenheiten wurden erfolgreich erfasst.",
+        "warning": "Die folgenden Stunden liegen im ausgewählten Zeitraum. Bitte überprüfen Sie vor dem Bestätigen, ob Sie die Abwesenheiten für diese Stunden erfassen möchten."
       }
     },
     "excuse_types": {

aleksis/apps/alsijil/frontend/messages/en.json

@@ -81,8 +81,8 @@
         "title": "Capture absences",
         "summary": "Summary",
         "lessons": "No lessons | 1 lesson | {count} lessons",
-        "success": "The absences were created successfully.",
-        "warning": "Changes are permanent and can not be altered again from this menu once confirmed."
+        "success": "The absences were captured successfully.",
+        "warning": "The following lessons are in the selected time period. Please check that you want to capture the absences for these lessons before confirming."
       }
     }
   },