Resolve "Add absence overview page"

Closes #264 (closed)

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

+<script setup>
+import AbsenceReasonChip from "aleksis.apps.kolego/components/AbsenceReasonChip.vue";
+</script>
+
 <template>
   <div
     class="d-flex align-center justify-space-between justify-md-end flex-wrap gap"
   >
-    <!-- eslint-disable @intlify/vue-i18n/no-raw-text -->
-    <v-chip dense color="success">
-      <v-chip small dense class="mr-2" color="green darken-3 white--text">
-        {{ documentation.participations.length }}
-      </v-chip>
-      Schüler
-    </v-chip>
-    <v-chip dense color="warning">
-      <v-chip small dense class="mr-2" color="orange darken-3 white--text"
-        >3</v-chip
-      >
-      entschuldigt
+    <v-chip dense color="success" outlined v-if="total > 0">
+      {{ $t("alsijil.coursebook.present_number", { present, total })}}
     </v-chip>
-    <v-chip dense color="error">
-      <v-chip small dense class="mr-2" color="red darken-3 white--text"
-        >1</v-chip
-      >
-      unentschuldigt
-    </v-chip>
-    <v-chip dense color="grey lighten-1">
-      <v-chip small dense class="mr-2" color="grey darken-1 white--text"
-        >4</v-chip
-      >
-      Hausaufgaben vergessen
-    </v-chip>
-    <!-- eslint-enable @intlify/vue-i18n/no-raw-text -->
+    <absence-reason-chip
+      v-for="participation in absences"
+      :absence-reason="participation.absenceReason"
+      dense
+    >
+      <template #prepend>
+        {{ participation.person.fullName }}:
+      </template>
+    </absence-reason-chip>
+
     <manage-students-trigger v-bind="documentationPartProps" />
   </div>
 </template>
@@ -40,6 +31,18 @@ export default {
   name: "LessonNotes",
   components: { ManageStudentsTrigger },
   mixins: [documentationPartMixin],
+  computed: {
+    total() {
+      return this.documentation.participations.length;
+    },
+    present() {
+      return this.documentation.participations.filter(p => p.absenceReason === null).length;
+    },
+    absences() {
+      // Get all course attendants who have an absence reason
+      return this.documentation.participations.filter(p => p.absenceReason !== null);
+    },
+  },
 };
 </script>