From 70b82c532efd4f8efe7280a77c4b74e5c17bb6e7 Mon Sep 17 00:00:00 2001
From: Jonathan Weth <git@jonathanweth.de>
Date: Tue, 25 Jun 2024 22:00:42 +0200
Subject: [PATCH] Improve behavior and design of absence creation dialog
---
.../absences/AbsenceCreationDialog.vue | 23 +++++++++++++++----
.../absences/AbsenceCreationForm.vue | 7 +++---
.../apps/alsijil/frontend/messages/de.json | 4 ++--
.../apps/alsijil/frontend/messages/en.json | 4 ++--
4 files changed, 26 insertions(+), 12 deletions(-)
diff --git a/aleksis/apps/alsijil/frontend/components/coursebook/absences/AbsenceCreationDialog.vue b/aleksis/apps/alsijil/frontend/components/coursebook/absences/AbsenceCreationDialog.vue
index e68d40980..b690d3e9f 100644
--- a/aleksis/apps/alsijil/frontend/components/coursebook/absences/AbsenceCreationDialog.vue
+++ b/aleksis/apps/alsijil/frontend/components/coursebook/absences/AbsenceCreationDialog.vue
@@ -1,5 +1,5 @@
<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");
},
diff --git a/aleksis/apps/alsijil/frontend/components/coursebook/absences/AbsenceCreationForm.vue b/aleksis/apps/alsijil/frontend/components/coursebook/absences/AbsenceCreationForm.vue
index c66bfc93b..897a1f1aa 100644
--- a/aleksis/apps/alsijil/frontend/components/coursebook/absences/AbsenceCreationForm.vue
+++ b/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: {
diff --git a/aleksis/apps/alsijil/frontend/messages/de.json b/aleksis/apps/alsijil/frontend/messages/de.json
index a3ea04ab9..321fddf6a 100644
--- a/aleksis/apps/alsijil/frontend/messages/de.json
+++ b/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": {
diff --git a/aleksis/apps/alsijil/frontend/messages/en.json b/aleksis/apps/alsijil/frontend/messages/en.json
index 61531981c..c245cad7c 100644
--- a/aleksis/apps/alsijil/frontend/messages/en.json
+++ b/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."
}
}
},
--
GitLab