Separate mixins to silence errors

aleksis/apps/alsijil/frontend/components/coursebook/Coursebook.vue

@@ -50,6 +50,7 @@
       <template #item="{ item, lastQuery }">
         <component
           :is="itemComponent"
+          :extraMarks="extraMarks"
           :documentation="item"
           :affectedQuery="lastQuery"
           :value="(selectedParticipations[item.id] ??= [])"
@@ -94,13 +95,15 @@ import CoursebookEmptyMessage from "./CoursebookEmptyMessage.vue";
 import DocumentationModal from "./documentation/DocumentationModal.vue";
 import DocumentationAbsencesModal from "./absences/DocumentationAbsencesModal.vue";
 import AbsenceCreationDialog from "./absences/AbsenceCreationDialog.vue";
-import updateParticipationMixin from "./absences/updateParticipationMixin.js";
 import { extraMarks } from "../extra_marks/extra_marks.graphql";
+import DocumentationLoader from "./documentation/DocumentationLoader.vue";
+import sendToServerMixin from "./absences/sendToServerMixin";
 
 
 export default {
   name: "Coursebook",
   components: {
+    DocumentationLoader,
     AbsenceReasonButtons,
     CoursebookEmptyMessage,
     CoursebookFilters,
@@ -110,7 +113,7 @@ export default {
     InfiniteScrollingDateSortedCRUDIterator,
     AbsenceCreationDialog,
   },
-  mixins: [updateParticipationMixin],
+  mixins: [sendToServerMixin],
   props: {
     filterType: {
       type: String,

aleksis/apps/alsijil/frontend/components/coursebook/absences/sendToServerMixin.js

+/**
+ * Mixin to provide shared functionality needed to send updated participation data to the server
+ */
+import { updateParticipationStatuses } from "./participationStatus.graphql";
+import mutateMixin from "aleksis.core/mixins/mutateMixin.js";
+
+export default {
+  mixins: [mutateMixin],
+  methods: {
+    sendToServer(participations, field, value) {
+      let fieldValue;
+
+      if (field === "absenceReason") {
+        fieldValue = {
+          absenceReason: value === "present" ? null : value,
+        };
+      } else if (field === "tardiness") {
+        fieldValue = {
+          tardiness: value,
+        };
+      } else {
+        console.error(`Wrong field '${field}' for sendToServer`);
+        return;
+      }
+
+      this.mutate(
+        updateParticipationStatuses,
+        {
+          input: participations.map((participation) => ({
+            id: participation?.id || participation,
+            ...fieldValue,
+          })),
+        },
+        (storedDocumentations, incomingStatuses) => {
+          // TODO: what should happen here in places where there is more than one documentation?
+          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.tardiness = newStatus.tardiness;
+            participationStatus.isOptimistic = newStatus.isOptimistic;
+          });
+
+          return storedDocumentations;
+        },
+      );
+    },
+  },
+};

aleksis/apps/alsijil/frontend/components/coursebook/absences/updateParticipationMixin.js

 /**
  * Mixin to provide shared functionality needed to update participations
  */
-import { updateParticipationStatuses } from "./participationStatus.graphql";
-import mutateMixin from "aleksis.core/mixins/mutateMixin.js";
 import documentationPartMixin from "../documentation/documentationPartMixin";
+import sendToServerMixin from "./sendToServerMixin";
 
 export default {
-  mixins: [documentationPartMixin, mutateMixin],
-  methods: {
-    sendToServer(participations, field, value) {
-      if (field !== "absenceReason") return;
-
-      this.mutate(
-        updateParticipationStatuses,
-        {
-          input: participations.map((participation) => ({
-            id: Object.hasOwn(participation, "id")
-              ? participation.id
-              : participation,
-            absenceReason: value === "present" ? null : value,
-          })),
-        },
-        (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;
-        },
-        // {
-        //   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",
-        //     },
-        //   },
-        // },
-      );
-    },
-  },
+  mixins: [documentationPartMixin, sendToServerMixin],
 };