Show extramarks in the coursebook overview

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

@@ -39,6 +39,7 @@ mutation touchDocumentation($documentationId: ID!) {
           id
           extraMark {
             id
+            showInCoursebook
           }
         }
         notesWithNote {

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

@@ -83,6 +83,7 @@ query documentationsForCoursebook(
         id
         extraMark {
           id
+          showInCoursebook
         }
       }
       notesWithNote {

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

 <script setup>
 import AbsenceReasonChip from "aleksis.apps.kolego/components/AbsenceReasonChip.vue";
+import ExtraMarkChip from "../../extra_marks/ExtraMarkChip.vue";
 </script>
 
 <template>
@@ -35,6 +36,32 @@ import AbsenceReasonChip from "aleksis.apps.kolego/components/AbsenceReasonChip.
       </template>
     </absence-reason-chip>
 
+    <extra-mark-chip
+      v-for="[markId, [mark, ...participations]] in Object.entries(extraMarkChips)"
+      :key="'extra-mark-' + markId"
+      :extra-mark="mark"
+      dense
+    >
+      <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>
+    </extra-mark-chip>
+
     <manage-students-trigger v-bind="documentationPartProps" />
   </div>
 </template>
@@ -65,6 +92,20 @@ export default {
         ({ absenceReason }) => absenceReason.id,
       );
     },
+    extraMarkChips() {
+      return this.documentation.participations.reduce((value, p) => {
+        p.notesWithExtraMark.forEach(({ extraMark }) => {
+          if (extraMark.showInCoursebook) {
+            if (value[extraMark.id]) {
+              value[extraMark.id].push(p);
+            } else {
+              value[extraMark.id] = [this.extraMarks.find(e => e.id === extraMark.id), p];
+            }
+          }
+        });
+        return value;
+      }, {});
+    },
   },
 };
 </script>

aleksis/apps/alsijil/frontend/components/extra_marks/ExtraMarkChip.vue

+<script>
+import CounterChip from "aleksis.core/components/generic/chips/CounterChip.vue";
+
+export default {
+  name: "ExtraMarkChip",
+  components: { CounterChip },
+  props: {
+    extraMark: {
+      type: Object,
+      required: true,
+    },
+    short: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  extends: CounterChip,
+  computed: {
+    text() {
+      return this.short
+        ? this.extraMark.shortName
+        : this.extraMark.name;
+    },
+  },
+};
+</script>
+
+<template>
+  <counter-chip
+    :color="extraMark.colourBg"
+    :text-color="extraMark.colourFg"
+    :value="extraMark.id"
+    :count="count"
+    :outlined="false"
+    v-bind="$attrs"
+    v-on="$listeners"
+  >
+    <slot name="prepend" />
+    {{ text }}
+    <slot name="append" />
+    <v-avatar right v-if="loading">
+      <v-progress-circular indeterminate :size="16" :width="2" />
+    </v-avatar>
+  </counter-chip>
+</template>