Automatically deselect participations after action is finished

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

@@ -19,7 +19,7 @@
         <v-card
           outlined
           class="full-width"
-          v-show="pageType === 'absences' && selectedParticipations.length"
+          v-show="pageType === 'absences' && combinedSelectedParticipations.length"
         >
           <v-card-text>
             <v-row align="center">
@@ -27,7 +27,7 @@
                 {{
                   $tc(
                     "alsijil.coursebook.absences.action_for_selected",
-                    selectedParticipations.length,
+                    combinedSelectedParticipations.length,
                   )
                 }}
               </v-col>
@@ -49,8 +49,8 @@
         :is="itemComponent"
         :documentation="item"
         :affectedQuery="lastQuery"
-        @select="addSelectedParticipation"
-        @deselect="removeSelectedParticipation"
+        :value="selectedParticipations[item.id] ??= []"
+        @input="selectParticipation(item.id, $event)"
       />
     </template>
 
@@ -157,7 +157,7 @@ export default {
       initDate: false,
       currentDate: "",
       hashUpdater: false,
-      selectedParticipations: [],
+      selectedParticipations: {},
     };
   },
   computed: {
@@ -228,23 +228,18 @@ export default {
         return "DocumentationAbsencesModal";
       }
     },
+    combinedSelectedParticipations() {
+      return Object.values(this.selectedParticipations).flat();
     },
-  methods: {
-    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);
-      }
+  methods: {
+    selectParticipation(id, value) {
+      this.selectedParticipations = Object.assign({}, this.selectedParticipations, { [id]: value });
     },
     handleMultipleAction(absenceReasonId) {
       this.loadSelectedParticiptions = true;
       this.sendToServer(
-        this.selectedParticipations,
+        this.combinedSelectedParticipations,
         "absenceReason",
         absenceReasonId,
       );
@@ -252,7 +247,7 @@ export default {
     },
     resetMultipleAction() {
       this.loadSelectedParticiptions = false;
-      this.$set(this.selectedParticipations, []);
+      this.selectedParticipations = {};
     },
   },
 };

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

@@ -18,7 +18,8 @@
         :include-present="false"
         class="participation-list"
         v-bind="documentationPartProps"
-        v-on="selectListeners"
+        :value="value"
+        @input="$emit('input', $event)"
       />
     </v-card-text>
     <v-spacer />
@@ -54,7 +55,6 @@ 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 {
@@ -67,7 +67,7 @@ export default {
     CancelButton,
   },
   emits: ["open", "close"],
-  mixins: [documentationPartMixin, selectParticipationMixin],
+  mixins: [documentationPartMixin],
   data() {
     return {
       loading: false,
@@ -75,6 +75,12 @@ export default {
       selectedParticipations: [],
     };
   },
+  props: {
+    value: {
+      type: Array,
+      required: true,
+    },
+  },
   methods: {
     save() {
       this.$refs.summary.save();

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

@@ -8,7 +8,8 @@
         compact
         v-bind="$attrs"
         :dialog-activator="activator"
-        v-on="selectListeners"
+        :value="value"
+        @input="$emit('input', $event)"
       />
     </template>
     <!-- dialog view -> deactivate dialog -->
@@ -16,7 +17,6 @@
     <documentation-absences
       v-bind="$attrs"
       @close="popup = false"
-      v-on="selectListeners"
     />
   </mobile-fullscreen-dialog>
 </template>
@@ -25,19 +25,22 @@
 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,
     };
   },
+  props: {
+    value: {
+      type: Array,
+      required: true,
+    },
+  },
 };
 </script>

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

@@ -3,25 +3,28 @@ import MobileFullscreenDialog from "aleksis.core/components/generic/dialogs/Mobi
 
 import AbsenceReasonGroupSelect from "aleksis.apps.kolego/components/AbsenceReasonGroupSelect.vue";
 
-import selectParticipationMixin from "./selectParticipationMixin.js";
 import updateParticipationMixin from "./updateParticipationMixin.js";
 </script>
 
 <template>
   <v-list v-if="filteredParticipations.length">
     <v-divider />
+
+    <v-list-item-group
+      :value="value"
+      multiple
+      @change="changeSelect"
+    >
+      <template v-for="(participation, index) in filteredParticipations">
         <v-list-item
-      v-for="(participation, index) in filteredParticipations"
           :key="`documentation-${documentation.id}-participation-${participation.id}`"
-      :value="participation"
+          :value="participation.id"
           v-bind="$attrs"
-      v-on="$listeners"
         >
           <template #default="{ active }">
             <v-list-item-action>
               <v-checkbox
                 :input-value="active"
-            @change="handleParticipationSelect($event, participation)"
               />
             </v-list-item-action>
             <v-list-item-title>
@@ -42,6 +45,9 @@ import updateParticipationMixin from "./updateParticipationMixin.js";
           v-if="index < filteredParticipations.length - 1"
           :key="index"
         ></v-divider>
+      </template>
+    </v-list-item-group>
+
     <mobile-fullscreen-dialog v-model="participationDialogs" max-width="500px">
       test
     </mobile-fullscreen-dialog>
@@ -74,7 +80,7 @@ import updateParticipationMixin from "./updateParticipationMixin.js";
 <script>
 export default {
   name: "ParticipationList",
-  mixins: [selectParticipationMixin, updateParticipationMixin],
+  mixins: [updateParticipationMixin],
   data() {
     return {
       loading: false,
@@ -88,6 +94,10 @@ export default {
       required: false,
       default: true,
     },
+    value: {
+      type: Array,
+      required: true,
+    },
   },
   computed: {
     filteredParticipations() {
@@ -101,13 +111,10 @@ export default {
     },
   },
   methods: {
-    handleParticipationSelect(value, participation) {
-      if (value) {
-        this.handleSelect(participation.id);
-      } else {
-        this.handleDeselect(participation.id);
-      }
-    },
+    changeSelect(value) {
+      console.log(value);
+      this.$emit("input", value);
     },
+  }
 };
 </script>