Resolve "Add absence overview page"

Closes #264 (closed)

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

 <script>
+import AbsenceReasonButtons from "aleksis.apps.kolego/components/AbsenceReasonButtons.vue";
 import AbsenceReasonChip from "aleksis.apps.kolego/components/AbsenceReasonChip.vue";
 import AbsenceReasonGroupSelect from "aleksis.apps.kolego/components/AbsenceReasonGroupSelect.vue";
 import CancelButton from "aleksis.core/components/generic/buttons/CancelButton.vue";
@@ -15,6 +16,7 @@ export default {
   components: {
     AbsenceReasonChip,
     AbsenceReasonGroupSelect,
+    AbsenceReasonButtons,
     CancelButton,
     LessonInformation,
     MobileFullscreenDialog,
@@ -25,6 +27,7 @@ export default {
     return {
       dialog: false,
       search: "",
+      loadSelected: false,
       selected: [],
       isExpanded: false,
     };
@@ -42,29 +45,29 @@ export default {
     },
   },
   methods: {
-    sendToServer(participation, field, value) {
+    sendToServer(participations, field, value) {
       if (field !== "absenceReason") return;
 
       this.mutate(
         updateParticipationStatuses,
         {
-          input: [
-            {
-              id: participation.id,
-              absenceReason: value === "present" ? null : value,
-            },
-          ],
+          input: participations.map((participation) => ({
+            id: participation.id,
+            absenceReason: value === "present" ? null : value,
+          })),
         },
         (storedDocumentations, incomingStatuses) => {
-          const newStatus = incomingStatuses[0];
           const documentation = storedDocumentations.find(
-            (doc) => doc.id === newStatus.relatedDocumentation.id,
+            (doc) => doc.id === this.documentation.id,
           );
-          const participationStatus = documentation.participations.find(
-            (part) => part.id === newStatus.id,
-          );
-          participationStatus.absenceReason = newStatus.absenceReason;
-          participationStatus.isOptimistic = newStatus.isOptimistic;
+
+          incomingStatuses.forEach((newStatus) => {
+            const participationStatus = documentation.participations.find(
+              (part) => part.id === newStatus.id,
+            );
+            participationStatus.absenceReason = newStatus.absenceReason;
+            participationStatus.isOptimistic = newStatus.isOptimistic;
+          });
 
           return storedDocumentations;
         },
@@ -94,6 +97,16 @@ export default {
         // },
       );
     },
+    handleMultipleAction(absenceReasonId) {
+      this.loadSelected = true;
+      this.sendToServer(this.selected, "absenceReason", absenceReasonId);
+      this.$once("save", this.resetMultipleAction);
+    },
+    resetMultipleAction() {
+      this.loadSelected = false;
+      this.$set(this.selected, []);
+      this.$refs.iterator.selected = [];
+    },
   },
 };
 </script>
@@ -110,27 +123,36 @@ export default {
     </template>
 
     <template #title>
-      <lesson-information v-bind="documentationPartProps" />
-      <v-slide-x-transition leave-absolute>
+      <lesson-information v-bind="documentationPartProps" :compact="false" />
+      <v-scroll-x-transition leave-absolute>
         <v-text-field
           v-show="!isExpanded"
           type="search"
           v-model="search"
           clearable
           rounded
-          filled
           hide-details
           single-line
           prepend-inner-icon="$search"
           dense
           outlined
           :placeholder="$t('actions.search')"
-          class="pt-4"
+          class="pt-4 full-width"
         />
-      </v-slide-x-transition>
+      </v-scroll-x-transition>
+      <v-scroll-x-transition>
+        <div v-show="selected.length > 0" class="full-width mt-4">
+          <absence-reason-buttons
+            allow-empty
+            empty-value="present"
+            @input="handleMultipleAction"
+          />
+        </div>
+      </v-scroll-x-transition>
     </template>
     <template #content>
       <slide-iterator
+        ref="iterator"
         v-model="selected"
         :items="items"
         :search="search"
@@ -138,7 +160,9 @@ export default {
           (item) => 'documentation-' + documentation.id + '-student-' + item.id
         "
         :is-expanded.sync="isExpanded"
-        :loading="loadingIndicator"
+        :loading="loadingIndicator || loadSelected"
+        :load-only-selected="loadSelected"
+        :disabled="loading"
       >
         <template #listItemContent="{ item }">
           <v-list-item-title>
@@ -167,7 +191,7 @@ export default {
               empty-value="present"
               :loadSelectedChip="loading"
               :value="item.absenceReason?.id || 'present'"
-              @input="sendToServer(item, 'absenceReason', $event)"
+              @input="sendToServer([item], 'absenceReason', $event)"
             />
           </v-card-text>
         </template>