Explain and simplify computed properties of the LessonNotes.vue component

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

@@ -103,13 +103,18 @@ export default {
     total() {
       return this.documentation.participations.length;
     },
+    /**
+     * Return the number of present people.
+     */
     present() {
       return this.documentation.participations.filter(
         (p) => p.absenceReason === null,
       ).length;
     },
+    /**
+     * Get all course attendants who have an absence reason, grouped by that reason.
+     */
     absences() {
-      // Get all course attendants who have an absence reason
       return Object.groupBy(
         this.documentation.participations.filter(
           (p) => p.absenceReason !== null,
@@ -117,23 +122,39 @@ export default {
         ({ absenceReason }) => absenceReason.id,
       );
     },
+    /**
+     * Parse and combine all extraMark notes.
+     *
+     * Notes with extraMarks are grouped by ExtraMark. ExtraMarks with the showInCoursebook property set to false are ignored.
+     * @return An object where the keys are extraMark IDs and the values have the structure [extraMark, note1, note2, ..., noteN]
+     */
     extraMarkChips() {
+      // Apply the inner function to each participation, with value being the resulting object
       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,
-              ];
-            }
+        // Go through every extra mark of this participation
+        for (const { extraMark } of p.notesWithExtraMark) {
+          // Only proceed if the extraMark should be displayed here
+          if (!extraMark.showInCoursebook) {
+            continue;
           }
-        });
+
+          // value[extraMark.id] is an Array with the structure [extraMark, note1, note2, ..., noteN]
+          if (value[extraMark.id]) {
+            value[extraMark.id].push(p);
+          } else {
+            value[extraMark.id] = [
+              this.extraMarks.find((e) => e.id === extraMark.id),
+              p,
+            ];
+          }
+        }
+
         return value;
       }, {});
     },
+    /**
+     * Return a list Participations with a set tardiness
+     */
     tardyParticipations() {
       return this.documentation.participations.filter(
         (p) => p.noteWithTardiness != null && p.noteWithTardiness.tardiness > 0,