Create possibility to select personal note in coursebook

aleksis/apps/alsijil/static/js/vue/components/alsijil/PersonalNotes.js

 export default {
     methods: {
-        removePersonalNote (item) {},
-        editPersonalNote (item) {
-            this.dialog=true;
-            this.editPersonalNote=item;
+        removePersonalNote(item) {
+            console.log("removing personal note", item);
         },
-        updatePersonalNote (item) {
-            this.personalNotes
+        editPersonalNote(personID) {
+            console.log("editing personal note of person", personID);
+            this.editedPersonID = personID;
+            this.updatePersonalNote();
+            this.dialog = true;
         },
+        updatePersonalNote() {
+            let personalNote = this.personalNoteByStudentID(this.editedPersonID);
+            this.editedTardiness = personalNote.tardiness || 0;
+            this.editedAbsent = personalNote.absent || false;
+            this.editedExcused = personalNote.excused || false;
+            this.editedExcuseType = personalNote.excuse_type || null;
+            this.editedExtraMarks = personalNote.extra_marks || [];
+        },
+        personalNoteByStudentID(studentID) {
+            return this.personalNotes.filter(item => item.student.id === studentID)[0] || {};
+        }
     },
     props: ["personalNotes", "groups"],
     name: "personal-notes",
@@ -16,37 +28,27 @@ export default {
             dialog: false,
             // Absent versp. exc. type hw note
             editPersonalNoteId: null,
-            headers: [
-                {
-                    text: window.django.gettext('Name'),
-                    align: 'start',
-                    value: 'student.full_name',
-                },
-                {
-                    text: window.django.gettext('Absent'),
-                    value: 'absent',
-                },
-                {
-                    text: window.django.gettext('Tardiness'),
-                    value: 'tardiness',
-                },
-                {
-                    text: window.django.gettext('Excused'),
-                    value: 'excused',
-                },
-                {
-                    text: window.django.gettext('Excuse Type'),
-                    value: 'excuse_type',
-                },
-                {
-                    text: window.django.gettext('Extra Marks'),
-                    value: 'extra_marks',
-                },
-                {
-                    text: window.django.gettext('Remarks'),
-                    value: 'remarks',
-                },
-            ],
+            editedPersonID: -1,
+            editedTardiness: 0,
+            editedAbsent: false,
+            editedExcused: false,
+            editedExcuseType: null,
+            editedExtraMarks: [],
+        }
+    },
+    computed: {
+        persons() {
+            // go through each group and get the students
+            // use the group names as headers for the v-select
+
+            return this.groups.map(
+                group => {
+                    return [
+                        {header: group.name, id: group.short_name},
+                        group.members
+                    ]
+                }
+            ).flat(2);
         }
     },
     template: `
@@ -56,7 +58,10 @@ export default {
     >
       <template v-slot:activator="{ on, attrs }">
         <div>
-          <v-chip class="ma-1" v-for="personal_note in personalNotes" close @click="editPersonalNote(personal_note)" @click:close="removePersonalNote(personal_note)">{{personal_note.student.full_name}}: {{personal_note.tardiness}}</v-chip>
+          <v-chip class="ma-1" v-for="personal_note in personalNotes" close
+          @click="editPersonalNote(personal_note.student.id)" @click:close="removePersonalNote(personal_note)">
+            {{personal_note.student.full_name}}: {{personal_note.tardiness}}
+          </v-chip>
         </div>
         <v-btn
           class="ma-1"
@@ -78,45 +83,11 @@ export default {
         <v-card-text>
           <v-container>
 <!--            FIXME: Sync values with data-->
-            <v-select item-text="student.full_name" item-value="id" :items="personalNotes" :value="editPersonalNote.id" @input="editPersonalNoteId = $event"></v-select>
-            <v-text-field label="Tardiness" suffix="min" type="number" min="0"></v-text-field>
-            <v-checkbox label="Absent"></v-checkbox>
-            <v-checkbox label="Excused"></v-checkbox>
-            <!--<v-data-table
-              :headers="headers"
-              :items="personalNotes"
-              class="elevation-1"
-              disable-filtering="true"
-              disable-pagination="true"
-              disable-items-per-page="true"
-            >
-              <template v-slot:item.student.full_name="props">
-                <v-edit-dialog
-                  :return-value.sync="props.item.student.full_name"
-                  @save="save"
-                  @cancel="cancel"
-                  @open="open"
-                  @close="close"
-                >
-                  {{ props.item.student.full_name }}
-                  <template v-slot:input>
-                    <v-text-field
-                      v-model="props.item.student.full_name"
-                      :rules="[max25chars]"
-                      label="Edit"
-                      single-line
-                      counter
-                    ></v-text-field>
-                  </template>
-                </v-edit-dialog>
-              </template>
-              <template v-slot:item.absent="{ item }">
-                <v-simple-checkbox v-model="item.absent"  ></v-simple-checkbox>
-              </template>
-              <template v-slot:item.excused="{ item }">
-                <v-simple-checkbox v-model="item.excused"  ></v-simple-checkbox>
-              </template>
-            </v-data-table>-->
+            <v-select item-text="full_name" item-value="id" :items="persons"
+            v-model="editedPersonID" @input="updatePersonalNote"></v-select>
+            <v-text-field label="Tardiness" suffix="min" type="number" min="0" v-model="editedTardiness"></v-text-field>
+            <v-checkbox label="Absent" v-model="personalNoteByStudentID(editedPersonID).absent"></v-checkbox>
+            <v-checkbox label="Excused" v-model="editedExcused"></v-checkbox>
           </v-container>
 <!--          <small>*indicates required field</small>-->
         </v-card-text>