Factor out ParticipationStatus editing into own component

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

 <script>
 import AbsenceReasonButtons from "aleksis.apps.kolego/components/AbsenceReasonButtons.vue";
 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";
 import LessonInformation from "../documentation/LessonInformation.vue";
-import {
-  extendParticipationStatuses,
-  updateParticipationStatuses,
-} from "./participationStatus.graphql";
+import { extendParticipationStatuses } from "./participationStatus.graphql";
 import SlideIterator from "aleksis.core/components/generic/SlideIterator.vue";
 import PersonalNotes from "../personal_notes/PersonalNotes.vue";
 import PersonalNoteChip from "../personal_notes/PersonalNoteChip.vue";
@@ -20,6 +16,7 @@ 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";
+import UpdateParticipation from "./UpdateParticipation.vue";
 
 export default {
   name: "ManageStudentsDialog",
@@ -29,7 +26,6 @@ export default {
     TardinessChip,
     ExtraMarkChip,
     AbsenceReasonChip,
-    AbsenceReasonGroupSelect,
     AbsenceReasonButtons,
     PersonalNotes,
     PersonalNoteChip,
@@ -39,6 +35,7 @@ export default {
     SecondaryActionButton,
     SlideIterator,
     TardinessField,
+    UpdateParticipation,
     DialogCloseButton,
   },
   mixins: [updateParticipationMixin, deepSearchMixin],
@@ -120,6 +117,11 @@ export default {
         this.$once("save", this.activateFullDayDialog);
       }
     },
+    afterInnerSendToServer(_participations, field, value) {
+      if (field === "absenceReason" && value !== "present") {
+        this.$refs.editor.$once("save", this.activateFullDayDialog);
+      }
+    },
     markAsAbsentDayClick() {
       this.markAsAbsentDay.loading = true;
 
@@ -309,20 +311,14 @@ export default {
             </v-tooltip>
           </v-card-title>
           <v-card-text>
-            <absence-reason-group-select
-              allow-empty
-              :load-selected-chip="loading"
-              :value="item.absenceReason?.id || 'present'"
-              :custom-absence-reasons="absenceReasons"
-              @input="sendToServer([item], 'absenceReason', $event)"
-            />
-            <tardiness-field
+            <update-participation
+              ref="editor"
               v-bind="documentationPartProps"
-              :loading="loading"
-              :disabled="loading"
-              :participations="[item]"
-              :value="item.tardiness"
-              @input="sendToServer([item], 'tardiness', $event)"
+              :participation="item"
+              :force-loading="loading"
+              @beforeSendToServer="beforeSendToServer"
+              @duringSendToServer="duringUpdateSendToServer"
+              @afterSendToServer="afterInnerSendToServer"
             />
           </v-card-text>
           <v-divider />
@@ -368,5 +364,3 @@ export default {
     </template>
   </mobile-fullscreen-dialog>
 </template>
-
-<style scoped></style>

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

+<template>
+  <div>
+    <absence-reason-group-select
+      class="mb-2"
+      allow-empty
+      :load-selected-chip="loadingIndicator"
+      :value="participation.absenceReason?.id || 'present'"
+      :custom-absence-reasons="absenceReasons"
+      @input="sendToServer([participation], 'absenceReason', $event)"
+    />
+    <tardiness-field
+      v-bind="documentationPartProps"
+      :loading="loadingIndicator"
+      :disabled="loadingIndicator"
+      :participations="[participation]"
+      :value="participation.tardiness"
+      @input="sendToServer([participation], 'tardiness', $event)"
+    />
+  </div>
+</template>
+<script>
+import AbsenceReasonGroupSelect from "aleksis.apps.kolego/components/AbsenceReasonGroupSelect.vue";
+import TardinessField from "./TardinessField.vue";
+import updateParticipationMixin from "./updateParticipationMixin";
+
+export default {
+  name: "UpdateParticipation",
+  mixins: [updateParticipationMixin],
+  components: { AbsenceReasonGroupSelect, TardinessField },
+  props: {
+    participation: {
+      type: Object,
+      required: true,
+    },
+    forceLoading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  emits: ["beforeSendToServer", "duringSendToServer", "afterSendToServer"],
+  methods: {
+    beforeSendToServer() {
+      this.$emit("beforeSendToServer");
+    },
+    duringUpdateSendToServer(participations, field, value, incomingStatuses) {
+      this.$emit(
+        "duringSendToServer",
+        participations,
+        field,
+        value,
+        incomingStatuses,
+      );
+    },
+    afterSendToServer(participations, field, value) {
+      this.$emit("afterSendToServer", participations, field, value);
+    },
+  },
+  computed: {
+    loadingIndicator() {
+      return this.loading || this.forceLoading;
+    },
+  },
+};
+</script>