Allow editing of absence reasons of participation statuses

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

 <script>
+import AbsenceReasonChip from "aleksis.apps.kolego/components/AbsenceReasonChip.vue";
 import AbsenceReasonGroupSelect from "aleksis.apps.kolego/components/AbsenceReasonGroupSelect.vue";
 import CancelButton from "aleksis.core/components/generic/buttons/CancelButton.vue";
 import MobileFullscreenDialog from "aleksis.core/components/generic/dialogs/MobileFullscreenDialog.vue";
+import mutateMixin from "aleksis.core/mixins/mutateMixin.js";
 import documentationPartMixin from "../documentation/documentationPartMixin";
 import LessonInformation from "../documentation/LessonInformation.vue";
+import updateParticipationStatuses from "./participationStatus.graphql";
 import SlideIterator from "aleksis.core/components/generic/SlideIterator.vue";
 
 export default {
   name: "ManageStudentsDialog",
   extends: MobileFullscreenDialog,
   components: {
+    AbsenceReasonChip,
     AbsenceReasonGroupSelect,
     CancelButton,
     LessonInformation,
     MobileFullscreenDialog,
     SlideIterator,
   },
-  mixins: [documentationPartMixin],
+  mixins: [documentationPartMixin, mutateMixin],
   data() {
     return {
       dialog: false,
@@ -32,8 +36,57 @@ export default {
   },
   methods: {
     sendToServer(participation, field, value) {
-      console.log(participation, field, value);
-    }
+      if (field !== "absenceReason") return;
+
+      this.mutate(
+        updateParticipationStatuses,
+        {
+          input: [
+            {
+              id: participation.id,
+              absenceReason: value === "present" ? null : value,
+            },
+          ],
+        },
+        (storedDocumentations, incomingStatuses) => {
+          const newStatus = incomingStatuses[0];
+          const documentation = storedDocumentations.find(
+            (doc) => doc.id === newStatus.relatedDocumentation.id,
+          );
+          const participationStatus = documentation.participations.find(
+            (part) => part.id === newStatus.id,
+          );
+          participationStatus.absenceReason = newStatus.absenceReason;
+          participationStatus.isOptimistic = newStatus.isOptimistic;
+
+          return storedDocumentations;
+        },
+        // {
+        //   optimisticResponse: {
+        //     updateParticipationStatuses: {
+        //       items: [
+        //         {
+        //           id: participation.id,
+        //           isOptimistic: true,
+        //           relatedDocumentation: {
+        //             id: this.documentation.id,
+        //             __typename: "DocumentationType",
+        //           },
+        //           absenceReason: value === "present" ? null : {
+        //             id: value,
+        //             name: "",
+        //             shortName: "",
+        //             __typename: "AbsenceReasonType",
+        //           },
+        //           __typename: "ParticipationStatusType",
+        //         },
+        //       ],
+        //       __typename: "ParticipationStatusBatchPatchMutation",
+        //     },
+        //   },
+        // },
+      );
+    },
   },
 };
 </script>
@@ -84,9 +137,7 @@ export default {
             {{ item.person.fullName }}
           </v-list-item-title>
           <v-list-item-subtitle v-if="item.absenceReason">
-            <v-chip dense>
-              {{ item.absenceReason.name }}
-            </v-chip>
+            <absence-reason-chip dense :absence-reason="item.absenceReason" />
           </v-list-item-subtitle>
         </template>
 
@@ -106,6 +157,7 @@ export default {
             <absence-reason-group-select
               allow-empty
               empty-value="present"
+              :loadSelectedChip="loading"
               :value="item.absenceReason?.id || 'present'"
               @input="sendToServer(item, 'absenceReason', $event)"
             />

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

@@ -34,7 +34,7 @@ export default {
 </script>
 
 <template>
-  <manage-students-dialog v-bind="documentationPartProps">
+  <manage-students-dialog v-bind="documentationPartProps" @update="() => null">
     <template #activator="{ attrs, on }">
       <v-chip
         dense

aleksis/apps/alsijil/frontend/components/coursebook/documentation/documentationPartMixin.js

@@ -10,6 +10,13 @@ export default {
       type: Object,
       required: true,
     },
+    /**
+     * The query used by the coursebook. Used to update the store when data changes.
+     */
+    affectedQuery: {
+      type: Object,
+      required: true,
+    },
     /**
      * Whether the documentation is currently in the compact mode (meaning coursebook row)
      */
@@ -38,6 +45,7 @@ export default {
         documentation: this.documentation,
         compact: this.compact,
         dialogActivator: this.dialogActivator,
+        affectedQuery: this.affectedQuery,
       };
     },
   },