Show student names grouped by absence reason

aleksis/apps/alsijil/frontend/components/coursebook/absences/participationStatus.graphql

@@ -26,6 +26,7 @@ mutation touchDocumentation($documentationId: ID!) {
         id
         person {
           id
+          firstName
           fullName
         }
         absenceReason {

aleksis/apps/alsijil/frontend/components/coursebook/coursebook.graphql

@@ -70,6 +70,7 @@ query documentationsForCoursebook(
       id
       person {
         id
+        firstName
         fullName
       }
       absenceReason {

aleksis/apps/alsijil/frontend/components/coursebook/documentation/LessonNotes.vue

@@ -10,12 +10,29 @@ import AbsenceReasonChip from "aleksis.apps.kolego/components/AbsenceReasonChip.
       {{ $t("alsijil.coursebook.present_number", { present, total }) }}
     </v-chip>
     <absence-reason-chip
-      v-for="participation in absences"
-      :key="'absence-' + participation.id"
-      :absence-reason="participation.absenceReason"
+      v-for="[reasonId, participations] in Object.entries(absences)"
+      :key="'reason-' + reasonId"
+      :absence-reason="participations[0].absenceReason"
       dense
     >
-      <template #prepend> {{ participation.person.fullName }}: </template>
+      <template #append>
+        <span
+          >:
+          <span>
+            {{
+              participations
+                .slice(0, 5)
+                .map((participation) => participation.person.firstName)
+                .join(", ")
+            }}
+          </span>
+          <span v-if="participations.length > 5">
+            <!-- eslint-disable @intlify/vue-i18n/no-raw-text -->
+            +{{ participations.length - 5 }}
+            <!-- eslint-enable @intlify/vue-i18n/no-raw-text -->
+          </span>
+        </span>
+      </template>
     </absence-reason-chip>
 
     <manage-students-trigger v-bind="documentationPartProps" />
@@ -41,8 +58,11 @@ export default {
     },
     absences() {
       // Get all course attendants who have an absence reason
-      return this.documentation.participations.filter(
-        (p) => p.absenceReason !== null,
+      return Object.groupBy(
+        this.documentation.participations.filter(
+          (p) => p.absenceReason !== null,
+        ),
+        ({ absenceReason }) => absenceReason.id,
       );
     },
   },