Show personal notes in expandable row

aleksis/apps/alsijil/assets/components/coursebook/LessonDocumentations.vue

@@ -39,16 +39,20 @@
     :items="computedLessonDocumentations"
     @click:row="editLessonDocumentation"
     class="elevation-1"
+    :expanded.sync="expanded"
+    show-expand
   >
     <template v-slot:item.period="{ item }">
       <span class="text-no-wrap">{{ item.date }} Period {{ item.period }}</span>
     </template>
-    <template v-slot:item.personalNotes="{ item }">
-      <template v-for="personalNote in item.personalNotes">
-        <v-chip class="ma-1" close v-if="personalNoteString(personalNote)">
-          {{ personalNote.person.fullName }}: {{ personalNoteString(personalNote) }}
-        </v-chip>
-      </template>
+    <template v-slot:expanded-item="{ headers, item }">
+      <td :colspan="headers.length">
+        <template v-for="personalNote in item.personalNotes">
+          <v-chip class="ma-1" close v-if="personalNoteString(personalNote)">
+            {{ personalNote.person.fullName }}: {{ personalNoteString(personalNote) }}
+          </v-chip>
+        </template>
+      </td>
     </template>
 </v-data-table>
 </div></template>
@@ -62,12 +66,13 @@
     data () {
       return {
         dialog: false,
+        expanded: [],
         headers: [
           { text: "Period", value: "period" },
           { text: "Topic", value: "topic" },
           { text: "Homework", value: "homework" },
           { text: "Group note", value: "groupNote" },
-          { text: "Personal notes", value: "personalNotes" }
+          { text: "Personal notes", value: "data-table-expand" }
         ],
         lessonDocumentationEdit: {},
         selectedLessonperiodDatetime: {},