diff --git a/aleksis/apps/alsijil/assets/components/coursebook/LessonDocumentations.vue b/aleksis/apps/alsijil/assets/components/coursebook/LessonDocumentations.vue index 4524f020d9ba6c1c7d20c9ef09f4899eb04083fe..abca654521d7f1cca019b9c1cc666906bfa41cfd 100644 --- a/aleksis/apps/alsijil/assets/components/coursebook/LessonDocumentations.vue +++ b/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: {},