Allow edits on statistics page (currently only participation and note)

aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsForPersonPage.vue

@@ -12,6 +12,7 @@
           :enable-create="false"
           :enable-edit="false"
           :elevated="false"
+          @lastQuery="lastQuery = $event"
         >
           <template #additionalActions>
             <v-btn-toggle
@@ -53,7 +54,17 @@
                   disable-icon-rotate
                 >
                   <template #actions>
-                    <v-icon> $edit </v-icon>
+                    <v-btn v-if="showEdit(item)" color="primary" icon>
+                      <v-icon> $edit </v-icon>
+                    </v-btn>
+                    <v-btn
+                      v-if="showDelete(item)"
+                      color="error"
+                      icon
+                      @click.prevent.stop
+                    >
+                      <v-icon color="error">$deleteContent</v-icon>
+                    </v-btn>
                   </template>
                   <v-row class="mr-4">
                     <v-col cols="12" md="6" class="pa-0">
@@ -151,7 +162,28 @@
                   </v-row>
                 </v-expansion-panel-header>
                 <v-expansion-panel-content>
-                  <!-- FIXME -->
+                  <v-card-text class="pb-0">
+                    <text-note
+                      v-if="item.note"
+                      :value="item"
+                      :participation="{}"
+                      :person="personName"
+                      :subjects="[]"
+                      :absence-reasons="absenceReasons"
+                      :extra-marks="[]"
+                      :affected-query="lastQuery"
+                      :documentation="item.relatedDocumentation"
+                    />
+                    <update-participation
+                      v-else
+                      :participation="item"
+                      :subjects="[]"
+                      :absence-reasons="absenceReasons"
+                      :extra-marks="[]"
+                      :affected-query="lastQuery"
+                      :documentation="item.relatedDocumentation"
+                    />
+                  </v-card-text>
                 </v-expansion-panel-content>
               </v-expansion-panel>
             </v-expansion-panels>
@@ -189,6 +221,7 @@
 </template>
 
 <script>
+import { absenceReasons } from "../queries/absenceReasons.graphql";
 import AbsenceReasonChip from "aleksis.apps.kolego/components/AbsenceReasonChip.vue";
 import ActiveSchoolTermSelect from "aleksis.core/components/school_term/ActiveSchoolTermSelect.vue";
 import CRUDIterator from "aleksis.core/components/generic/CRUDIterator.vue";
@@ -206,12 +239,16 @@ import {
 import ExtraMarkChip from "../../extra_marks/ExtraMarkChip.vue";
 import { MODE } from "./modes.js";
 import PersonalNoteChip from "../personal_notes/PersonalNoteChip.vue";
+import TextNote from "../personal_notes/TextNote.vue";
+import UpdateParticipation from "../absences/UpdateParticipation.vue";
 import TardinessChip from "../absences/TardinessChip.vue";
 
 export default {
   name: "StatisticsForPersonPage",
   components: {
     TardinessChip,
+    UpdateParticipation,
+    TextNote,
     PersonalNoteChip,
     ActiveSchoolTermSelect,
     ExtraMarkChip,
@@ -251,10 +288,17 @@ export default {
         );
       },
     },
+    absenceReasons: {
+      query: absenceReasons,
+      update: (data) => data.items,
+    },
   },
   data() {
     return {
+      personName: {},
       statisticsBottomSheet: false,
+      lastQuery: null,
+      absenceReasons: [],
     };
   },
   computed: {