Show text-based personal notes in student overview

aleksis/apps/alsijil/frontend/components/coursebook/absences/ManageStudentsDialog.vue

@@ -153,27 +153,39 @@ export default {
           <v-list-item-subtitle
             v-if="
               item.absenceReason ||
+              item.notesWithNote?.length > 0 ||
               item.notesWithExtraMark?.length > 0 ||
               item.noteWithTardiness
             "
+            class="d-flex flex-wrap gap"
           >
             <absence-reason-chip
               v-if="item.absenceReason"
               small
               :absence-reason="item.absenceReason"
-              class="mr-1"
             />
+            <v-chip
+              v-for="note in item.notesWithNote"
+              :key="'text-note-note-overview-' + note.id"
+              small
+            >
+              <v-avatar left>
+                <v-icon small>mdi-note-outline</v-icon>
+              </v-avatar>
+              <span class="text-truncate" style="max-width: 30ch">
+                {{ note.note }}
+              </span>
+            </v-chip>
             <extra-mark-chip
               v-for="note in item.notesWithExtraMark"
               :key="'extra-mark-note-overview-' + note.id"
               :extra-mark="extraMarks.find((e) => e.id === note.extraMark.id)"
               small
-              class="mr-1"
             />
             <tardiness-chip
               v-if="item.noteWithTardiness"
               :tardiness="item.noteWithTardiness.tardiness"
-              class="mr-1"
+              small
             />
           </v-list-item-subtitle>
         </template>