Create better stats in LessonNotes

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>
 

aleksis/apps/alsijil/frontend/messages/de.json

@@ -49,7 +49,8 @@
           }
         }
       },
-      "title_plural": "Kursbuch"
+      "title_plural": "Kursbuch",
+      "present_number": "{present}/{total} anwesend"
     },
     "excuse_types": {
       "menu_title": "Entschuldigungsarten"

aleksis/apps/alsijil/frontend/messages/en.json

@@ -74,6 +74,7 @@
         "courses": "Courses",
         "filter_for_obj": "Filter for group and course"
       },
+      "present_number": "{present}/{total} present",
       "no_data": "No lessons for the selected groups and courses in this period",
       "no_results": "No search results for {search}"
     }