Display success message after marking people as absent

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

@@ -3,6 +3,7 @@ import AbsenceReasonButtons from "aleksis.apps.kolego/components/AbsenceReasonBu
 import AbsenceReasonChip from "aleksis.apps.kolego/components/AbsenceReasonChip.vue";
 import AbsenceReasonGroupSelect from "aleksis.apps.kolego/components/AbsenceReasonGroupSelect.vue";
 import DialogCloseButton from "aleksis.core/components/generic/buttons/DialogCloseButton.vue";
+import SecondaryActionButton from "aleksis.core/components/generic/buttons/SecondaryActionButton.vue";
 import MobileFullscreenDialog from "aleksis.core/components/generic/dialogs/MobileFullscreenDialog.vue";
 import updateParticipationMixin from "./updateParticipationMixin.js";
 import deepSearchMixin from "aleksis.core/mixins/deepSearchMixin.js";
@@ -13,6 +14,7 @@ import ExtraMarkChip from "../../extra_marks/ExtraMarkChip.vue";
 import TardinessChip from "./TardinessChip.vue";
 import TardinessField from "./TardinessField.vue";
 import ExtraMarkButtons from "../../extra_marks/ExtraMarkButtons.vue";
+import MessageBox from "aleksis.core/components/generic/MessageBox.vue";
 
 export default {
   name: "ManageStudentsDialog",
@@ -26,7 +28,9 @@ export default {
     AbsenceReasonButtons,
     PersonalNotes,
     LessonInformation,
+    MessageBox,
     MobileFullscreenDialog,
+    SecondaryActionButton,
     SlideIterator,
     TardinessField,
     DialogCloseButton,
@@ -39,6 +43,11 @@ export default {
       loadSelected: false,
       selected: [],
       isExpanded: false,
+      markAsAbsentDay: {
+        showAlert: false,
+        num: 0,
+        reason: "no reason",
+      },
     };
   },
   props: {
@@ -69,6 +78,10 @@ export default {
       this.$set(this.selected, []);
       this.$refs.iterator.selected = [];
     },
+    activateFullDayDialog() {
+      // Separate method as there may be additional logic here in the future
+      this.markAsAbsentDay.showAlert = true;
+    }
   },
 };
 </script>
@@ -106,6 +119,28 @@ export default {
           class="pt-4 full-width"
         />
       </v-scroll-x-transition>
+      <message-box
+        v-model="markAsAbsentDay.showAlert"
+        color="success"
+        icon="$success"
+        transition="slide-y-transition"
+        dismissible
+        class="mt-4 mb-0 full-width"
+      >
+        <div class="text-subtitle-2">
+          {{ $tc("alsijil.coursebook.mark_as_absent_day.title", markAsAbsentDay.num, markAsAbsentDay) }}
+        </div>
+        <p class="text-body-2 pa-0 ma-0" style="word-break: break-word">
+          {{ $t("alsijil.coursebook.mark_as_absent_day.description", markAsAbsentDay) }}
+        </p>
+
+        <secondary-action-button
+          color="success"
+          i18n-key="alsijil.coursebook.mark_as_absent_day.action_button"
+          class="mt-2"
+          @click="markAsAbsentDay.showAlert = false"
+        />
+      </message-box>
     </template>
     <template #content>
       <slide-iterator

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

@@ -111,6 +111,11 @@
         "lessons": "No lessons | 1 lesson | {count} lessons",
         "success": "The absences were registered successfully.",
         "warning": "The following lessons are in the selected time period. Please check that you want to register the absences for these lessons before confirming."
+      },
+      "mark_as_absent_day": {
+        "title": "Error: no person | Successfully marked as '{reason}' | Successfully marked {n} people as '{reason}'",
+        "description": "Do you want to mark them as '{reason}' for the rest of their day?",
+        "action_button": "Extend absence"
       }
     },
     "personal_notes": {