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);
-      }
+    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,45 +3,51 @@ 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
-      v-for="(participation, index) in filteredParticipations"
-      :key="`documentation-${documentation.id}-participation-${participation.id}`"
-      :value="participation"
-      v-bind="$attrs"
-      v-on="$listeners"
+
+    <v-list-item-group
+      :value="value"
+      multiple
+      @change="changeSelect"
     >
-      <template #default="{ active }">
-        <v-list-item-action>
-          <v-checkbox
-            :input-value="active"
-            @change="handleParticipationSelect($event, participation)"
-          />
-        </v-list-item-action>
-        <v-list-item-title>
-          {{ participation.person.fullName }}
-        </v-list-item-title>
-        <v-list-item-action v-if="participation.absenceReason" class="full-width">
-          <absence-reason-group-select
-            allow-empty
-            empty-value="present"
-            :loadSelectedChip="loading"
-            :value="participation.absenceReason?.id || 'present'"
-            @input="sendToServer([participation], 'absenceReason', $event)"
-          />
-        </v-list-item-action>
+      <template v-for="(participation, index) in filteredParticipations">
+        <v-list-item
+          :key="`documentation-${documentation.id}-participation-${participation.id}`"
+          :value="participation.id"
+          v-bind="$attrs"
+        >
+          <template #default="{ active }">
+            <v-list-item-action>
+              <v-checkbox
+                :input-value="active"
+              />
+            </v-list-item-action>
+            <v-list-item-title>
+              {{ participation.person.fullName }}
+            </v-list-item-title>
+            <v-list-item-action v-if="participation.absenceReason" class="full-width">
+              <absence-reason-group-select
+                allow-empty
+                empty-value="present"
+                :loadSelectedChip="loading"
+                :value="participation.absenceReason?.id || 'present'"
+                @input="sendToServer([participation], 'absenceReason', $event)"
+              />
+            </v-list-item-action>
+          </template>
+        </v-list-item>
+        <v-divider
+          v-if="index < filteredParticipations.length - 1"
+          :key="index"
+        ></v-divider>
       </template>
-    </v-list-item>
-    <v-divider
-      v-if="index < filteredParticipations.length - 1"
-      :key="index"
-    ></v-divider>
+    </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>