Fix select/deselect participation mechanism

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

@@ -23,7 +23,7 @@
     </template>
 
     <template #item="{ item, lastQuery }">
-      <component :is="itemComponent" :documentation="item" :affectedQuery="lastQuery" @selectParticipation="changeSelectedParticipations()" />
+      <component :is="itemComponent" :documentation="item" :affectedQuery="lastQuery" @select="addSelectedParticipation" @deselect="removeSelectedParticipation" />
     </template>
 
     <template #loading>
@@ -64,6 +64,7 @@ import DocumentationAbsencesModal from "./absences/DocumentationAbsencesModal.vu
 export default {
   name: "Coursebook",
   components: {
+    AbsenceReasonButtons,
     CoursebookEmptyMessage,
     CoursebookFilters,
     CoursebookLoader,
@@ -124,7 +125,7 @@ export default {
       initDate: false,
       currentDate: "",
       hashUpdater: false,
-      selectedParticipations: [1],
+      selectedParticipations: [],
     };
   },
   computed: {
@@ -190,9 +191,14 @@ export default {
     },
   },
   methods: {
-    changeSelectedParticipations(participations) {
-      console.log(participations);
-      this.selectedParticipations = participations;
+    addSelectedParticipation(participation) {
+      this.selectedParticipations = [...new Set([...this.selectedParticipations, participation])];
+    },
+    removeSelectedParticipation(participation) {
+      const index = this.selectedParticipations.indexOf(participation);
+      if (index>=0) {
+        this.selectedParticipations.splice(index, 1);
+      }
     }
   },
 };

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

@@ -16,7 +16,7 @@
       <lesson-notes v-bind="documentationPartProps" />
     </v-card-text>
     <v-card-text>
-      <participation-list v-bind="documentationPartProps" @select="$emit('selectParticipation', $event)" />
+      <participation-list v-bind="documentationPartProps" v-on="selectListeners" />
     </v-card-text>
     <v-spacer />
     <v-divider />
@@ -51,6 +51,7 @@ import CancelButton from "aleksis.core/components/generic/buttons/CancelButton.v
 
 import { createOrUpdateDocumentations } from "../coursebook.graphql";
 
+import selectParticipationMixin from "./selectParticipationMixin.js";
 import documentationPartMixin from "../documentation/documentationPartMixin";
 
 export default {
@@ -62,8 +63,8 @@ export default {
     SaveButton,
     CancelButton,
   },
-  emits: ["open", "close", "selectParticipation"],
-  mixins: [documentationPartMixin],
+  emits: ["open", "close"],
+  mixins: [documentationPartMixin, selectParticipationMixin],
   data() {
     return {
       loading: false,

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

@@ -4,11 +4,11 @@
   <mobile-fullscreen-dialog v-model="popup" max-width="500px">
     <template #activator="activator">
       <!-- list view -> activate dialog -->
-      <documentation-absences compact v-bind="$attrs" :dialog-activator="activator" />
+      <documentation-absences compact v-bind="$attrs" :dialog-activator="activator" v-on="selectListeners" />
     </template>
     <!-- dialog view -> deactivate dialog -->
     <!-- cancel | save (through lesson-summary) -->
-    <documentation-absences v-bind="$attrs" @close="popup = false" />
+    <documentation-absences v-bind="$attrs" @close="popup = false" v-on="selectListeners" />
   </mobile-fullscreen-dialog>
 </template>
 
@@ -16,12 +16,15 @@
 import MobileFullscreenDialog from "aleksis.core/components/generic/dialogs/MobileFullscreenDialog.vue";
 import DocumentationAbsences from "./DocumentationAbsences.vue";
 
+import selectParticipationMixin from "./selectParticipationMixin.js";
+
 export default {
   name: "DocumentationAbsencesModal",
   components: {
     MobileFullscreenDialog,
     DocumentationAbsences,
   },
+  mixins: [selectParticipationMixin],
   data() {
     return {
       popup: false,

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

@@ -3,13 +3,15 @@ import MobileFullscreenDialog from "aleksis.core/components/generic/dialogs/Mobi
 
 import AbsenceReasonChip from "aleksis.apps.kolego/components/AbsenceReasonChip.vue";
 import AbsenceReasonGroupSelect from "aleksis.apps.kolego/components/AbsenceReasonGroupSelect.vue";
+
+import selectParticipationMixin from "./selectParticipationMixin.js";
 import documentationPartMixin from "../documentation/documentationPartMixin";
 </script>
 
 <template>
   <v-list>
     <v-divider v-if="filteredParticipations.length" />
-    <p v-else>no participations</p>
+    <p v-else>{{ $t("no participations") }}</p>
     <v-list-item-group multiple v-model="selectedParticipations">
       <template v-for="(participation, index) in filteredParticipations">
         <v-list-item
@@ -20,7 +22,7 @@ import documentationPartMixin from "../documentation/documentationPartMixin";
         >
           <template #default="{ active }">
             <v-list-item-action>
-              <v-checkbox :input-value="active" />
+              <v-checkbox :input-value="active" @change="handleParticipationSelect($event, participation)" />
             </v-list-item-action>
             <v-list-item-title>
               {{ participation.person.fullName }}
@@ -74,8 +76,7 @@ import documentationPartMixin from "../documentation/documentationPartMixin";
 <script>
 export default {
   name: "ParticipationList",
-  emits: ["select"],
-  mixins: [documentationPartMixin],
+  mixins: [documentationPartMixin, selectParticipationMixin],
   data() {
     return {
       loading: false,
@@ -103,11 +104,13 @@ export default {
       return this.selectedParticipations.map((p) => p.id);
     },
   },
-  watch: {
-    selectedParticipationIDs: {
-      handler() {
-        this.$emit("select", this.selectedParticipationIDs);
-      },
+  methods: {
+    handleParticipationSelect(value, participation) {
+      if (value) {
+        this.handleSelect(participation.id);
+      } else {
+        this.handleDeselect(participation.id);
+      }
     },
   }
 };

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

+/**
+ * Mixin to provide passing through functionality for the events emitted when (de)selecting participations on the absence overview page
+*/
+export default {
+  emits: ["select", "deselect"],
+  methods: {
+    handleSelect(participation) {
+      this.$emit("select", participation);
+    },
+    handleDeselect(participation) {
+      this.$emit("deselect", participation);
+    },
+  },
+
+  computed: {
+    /**
+    * All necessary listeners bundled together to easily pass to child components
+    * @returns {{select: Function, deselect: Function}}
+    */
+    selectListeners() {
+      return {
+        select: this.handleSelect,
+        deselect: this.handleDeselect,
+      };
+    },
+  },
+};