Use mutateMixin to update participations after saving in AbsenceCreationDialog

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

@@ -78,6 +78,9 @@ import CreateButton from "aleksis.core/components/generic/buttons/CreateButton.v
 import CancelButton from "aleksis.core/components/generic/buttons/CancelButton.vue";
 import SaveButton from "aleksis.core/components/generic/buttons/SaveButton.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";
+
 import { createAbsencesForPersons } from "./absenceCreation.graphql";
 
 export default {
@@ -90,7 +93,7 @@ export default {
     CancelButton,
     SaveButton,
   },
-  mixins: [loadingMixin],
+  mixins: [loadingMixin, mutateMixin, permissionsMixin],
   data() {
     return {
       popup: false,
@@ -117,29 +120,37 @@ export default {
     },
     confirm() {
       this.handleLoading(true);
-      this.$apollo
-        .mutate({
-          mutation: createAbsencesForPersons,
-          variables: {
-            persons: this.persons.map((p) => p.id),
-            start: this.startDate,
-            end: this.endDate,
-            comment: this.comment,
-            reason: this.absenceReason,
-          },
-        })
-        .then(() => {
-          this.clearForm();
-          this.cancel();
-          this.$toastSuccess("alsijil.coursebook.absences.success");
-        })
-        .catch((error) => {
-          this.popup = false;
-          this.handleError(error);
-        })
-        .finally(() => {
-          this.handleLoading(false);
-        });
+      this.mutate(
+        createAbsencesForPersons,
+        {
+          persons: this.persons.map((p) => p.id),
+          start: this.startDate,
+          end: this.endDate,
+          comment: this.comment,
+          reason: this.absenceReason,
+        },
+        (storedDocumentations, incomingStatuses) => {
+          const documentation = storedDocumentations.find(
+            (doc) => doc.id === this.documentation.id,
+          );
+
+          incomingStatuses.forEach((newStatus) => {
+            const participationStatus = documentation.participations.find(
+              (part) => part.id === newStatus.id,
+            );
+            participationStatus.absenceReason = newStatus.absenceReason;
+            participationStatus.isOptimistic = newStatus.isOptimistic;
+          });
+
+          return storedDocumentations;
+        },
+      );
+      this.$once("save", this.handleSave);
+    },
+    handleSave() {
+      this.clearForm();
+      this.cancel();
+      this.$toastSuccess("alsijil.coursebook.absences.success");
     },
   },
 };