Integrate absences overview into coursebook main component

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

@@ -15,10 +15,15 @@
   >
     <template #additionalActions="{ attrs, on }">
       <coursebook-filters v-model="filters" />
+      <absence-reason-buttons
+        v-if="pageType === 'absences' && selectedParticipations.length"
+        allow-empty
+        empty-value="present"
+      />
     </template>
 
     <template #item="{ item, lastQuery }">
-      <component :is="itemComponent" :documentation="item" :affectedQuery="lastQuery" />
+      <component :is="itemComponent" :documentation="item" :affectedQuery="lastQuery" @selectParticipation="changeSelectedParticipations()" />
     </template>
 
     <template #loading>
@@ -49,6 +54,7 @@
 import InfiniteScrollingDateSortedCRUDIterator from "aleksis.core/components/generic/InfiniteScrollingDateSortedCRUDIterator.vue";
 import { DateTime, Interval } from "luxon";
 import { documentationsForCoursebook } from "./coursebook.graphql";
+import AbsenceReasonButtons from "aleksis.apps.kolego/components/AbsenceReasonButtons.vue";
 import CoursebookFilters from "./CoursebookFilters.vue";
 import CoursebookLoader from "./CoursebookLoader.vue";
 import CoursebookEmptyMessage from "./CoursebookEmptyMessage.vue";
@@ -118,6 +124,7 @@ export default {
       initDate: false,
       currentDate: "",
       hashUpdater: false,
+      selectedParticipations: [1],
     };
   },
   computed: {
@@ -182,6 +189,12 @@ export default {
       }
     },
   },
+  methods: {
+    changeSelectedParticipations(participations) {
+      console.log(participations);
+      this.selectedParticipations = participations;
+    }
+  },
 };
 </script>
 

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

@@ -12,13 +12,12 @@
       }"
     >
       <lesson-information v-if="compact" v-bind="documentationPartProps" />
-      <div>
-        <div v-for="participation in documentation.participations">
-          {{ participation }}
-        </div>
-      </div>
+      <v-spacer />
       <lesson-notes v-bind="documentationPartProps" />
     </v-card-text>
+    <v-card-text>
+      <participation-list v-bind="documentationPartProps" @select="$emit('selectParticipation', $event)" />
+    </v-card-text>
     <v-spacer />
     <v-divider />
     <v-card-actions v-if="!compact">
@@ -43,6 +42,7 @@
 </template>
 
 <script>
+import ParticipationList from "./ParticipationList.vue";
 import LessonInformation from "../documentation/LessonInformation.vue";
 import LessonNotes from "../documentation/LessonNotes.vue";
 
@@ -56,17 +56,19 @@ import documentationPartMixin from "../documentation/documentationPartMixin";
 export default {
   name: "DocumentationAbsences",
   components: {
+    ParticipationList,
     LessonInformation,
     LessonNotes,
     SaveButton,
     CancelButton,
   },
-  emits: ["open", "close"],
+  emits: ["open", "close", "selectParticipation"],
   mixins: [documentationPartMixin],
   data() {
     return {
       loading: false,
       documentationsMutation: createOrUpdateDocumentations,
+      selectedParticipations: [],
     };
   },
   methods: {

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

+<script setup>
+import MobileFullscreenDialog from "aleksis.core/components/generic/dialogs/MobileFullscreenDialog.vue";
+
+import AbsenceReasonChip from "aleksis.apps.kolego/components/AbsenceReasonChip.vue";
+import AbsenceReasonGroupSelect from "aleksis.apps.kolego/components/AbsenceReasonGroupSelect.vue";
+import documentationPartMixin from "../documentation/documentationPartMixin";
+</script>
+
+<template>
+  <v-list>
+    <v-divider v-if="filteredParticipations.length" />
+    <p v-else>no participations</p>
+    <v-list-item-group multiple v-model="selectedParticipations">
+      <template v-for="(participation, index) in filteredParticipations">
+        <v-list-item
+          :key="`documentation-${documentation.id}-participation-${participation.id}`"
+          :value="participation"
+          v-bind="$attrs"
+          v-on="$listeners"
+        >
+          <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-subtitle v-if="participation.absenceReason">
+              <absence-reason-chip small :absence-reason="participation.absenceReason" />
+            </v-list-item-subtitle>
+            <v-list-item-action>
+              <v-icon>
+                mdi-chevron-right
+              </v-icon>
+            </v-list-item-action>
+          </template>
+        </v-list-item>
+        <v-divider
+          v-if="index < filteredParticipations.length - 1"
+          :key="index"
+        ></v-divider>
+        <mobile-fullscreen-dialog v-model="participationDialogs" max-width="500px">
+          test
+        </mobile-fullscreen-dialog>
+      </template>
+    </v-list-item-group>
+      
+  
+    <!--<template #expandedItem="{ item, close }">-->
+    <!--  <v-card-title>-->
+    <!--    <v-tooltip bottom>-->
+    <!--      <template #activator="{ on, attrs }">-->
+    <!--        <v-btn v-bind="attrs" v-on="on" icon @click="close">-->
+    <!--          <v-icon>$prev</v-icon>-->
+    <!--        </v-btn>-->
+    <!--      </template>-->
+    <!--      <span v-t="'actions.back_to_overview'" />-->
+    <!--    </v-tooltip>-->
+    <!--    {{ item.person.fullName }}-->
+    <!--  </v-card-title>-->
+    <!--  <v-card-text>-->
+    <!--    <absence-reason-group-select-->
+    <!--      allow-empty-->
+    <!--      empty-value="present"-->
+    <!--      :loadSelectedChip="loading"-->
+    <!--      :value="item.absenceReason?.id || 'present'"-->
+    <!--      @input="sendToServer([item], 'absenceReason', $event)"-->
+    <!--    />-->
+    <!--  </v-card-text>-->
+    <!--</template>-->
+  </v-list>
+</template>
+
+<script>
+export default {
+  name: "ParticipationList",
+  emits: ["select"],
+  mixins: [documentationPartMixin],
+  data() {
+    return {
+      loading: false,
+      selectedParticipations: [],
+      participationDialogs: false,
+      isExpanded: false,
+    };
+  },
+  props: {
+    includePresent: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+  },
+  computed: {
+    filteredParticipations() {
+      if (!this.includePresent) {
+        return this.documentation.participations.filter((p) => !!p.absenceReason);
+      } else {
+        return this.documentation.participations;
+      }
+    },
+    selectedParticipationIDs() {
+      return this.selectedParticipations.map((p) => p.id);
+    },
+  },
+  watch: {
+    selectedParticipationIDs: {
+      handler() {
+        this.$emit("select", this.selectedParticipationIDs);
+      },
+    },
+  }
+};
+</script>
\ No newline at end of file