Redesign documentation table

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

@@ -95,8 +95,12 @@
                 v-model="lessonDocumentationEdit.groupNote"
                 @change="mutate()"
               ></v-textarea>
+              <v-btn right color="primary">
+                Save
+              </v-btn>
             </v-col>
             <v-col cols="12" md="4" lg="3">
+              Personal notes
               <personal-notes
                 :lesson-documentation-id="lessonDocumentationEdit.id"
                 :groups="groups"

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

@@ -39,7 +39,18 @@
     :items="lessonDocumentations"
     @click:row="editLessonDocumentation"
     class="elevation-1"
-  ></v-data-table>
+  >
+    <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-data-table>
 </div></template>
 
 <script>
@@ -52,11 +63,11 @@
       return {
         dialog: false,
         headers: [
-          { text: "Date", value: "date" },
           { text: "Period", value: "period" },
           { text: "Topic", value: "topic" },
           { text: "Homework", value: "homework" },
-          { text: "Group note", value: "groupNote" }
+          { text: "Group note", value: "groupNote" },
+          { text: "Personal notes", value: "personalNotes" }
         ],
         lessonDocumentationEdit: {},
         selectedLessonperiodDatetime: {},
@@ -114,6 +125,33 @@
           let period = item.lessonPeriod ? ", Period " + item.lessonPeriod.period.period : "" // FIXME: Cases without lessonPeriod
           return date_obj.toLocaleDateString(this.$root.languageCode) + period
       },
+      personalNoteString(personalNote) {
+          let personalNoteString = "";
+          if (personalNote.late > 0) {
+              personalNoteString += personalNote.late + " min. ";
+          }
+          if (personalNote.absent) {
+              personalNoteString += "abwesend ";
+          }
+          if (personalNote.excused) {
+              personalNoteString += "entschuldigt ";
+          }
+          if (personalNote.excuseType) {
+              personalNoteString += personalNote.excuseType.name;
+          }
+          if (personalNote.extraMarks.length > 0) {
+              personalNoteString += " (";
+              personalNote.extraMarks.forEach(item => {
+                  personalNoteString += item.name + ", ";
+              });
+              personalNoteString = personalNoteString.substring(0, personalNoteString.length - 2);
+              personalNoteString += ") ";
+          }
+          if (personalNote.remarks) {
+              personalNoteString += "\"" + personalNote.remarks + "\" ";
+          }
+          return personalNoteString;
+      },
     }
   }
 </script>