Create component to delete personal notes

aleksis/apps/alsijil/frontend/components/coursebook/personal_notes/DeleteExtraMarkPersonalNote.vue

+<script>
+import { deletePersonalNotes } from "./personal_notes.graphql";
+import ConfirmDialog from "aleksis.core/components/generic/dialogs/ConfirmDialog.vue";
+import mutateMixin from "aleksis.core/mixins/mutateMixin.js";
+import personalNoteRelatedMixin from "./personalNoteRelatedMixin";
+
+export default {
+  name: "DeleteAssignedExtraMark",
+  components: {
+    ConfirmDialog,
+  },
+  mixins: [mutateMixin, personalNoteRelatedMixin],
+  props: {
+    personalNote: {
+      type: Object,
+      required: true,
+    },
+    person: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      showDeleteConfirm: false,
+    };
+  },
+  methods: {
+    deleteNote() {
+      this.mutate(
+        deletePersonalNotes,
+        {
+          ids: [this.personalNote.id],
+        },
+        (storedPersonalNotes) => {
+          const index = storedPersonalNotes.findIndex(
+            (n) => n.id === this.personalNote.id,
+          );
+          storedPersonalNotes.splice(index, 1);
+
+          return storedPersonalNotes;
+        },
+      );
+    },
+  },
+};
+</script>
+
+<template>
+  <v-btn color="error" icon @click.prevent.stop="showDeleteConfirm = true">
+    <v-icon color="error">$deleteContent</v-icon>
+    <confirm-dialog
+      v-model="showDeleteConfirm"
+      @confirm="deleteNote"
+      @cancel="showDeleteConfirm = false"
+    >
+      <template #title>
+        {{ $t("alsijil.personal_notes.confirm_delete") }}
+      </template>
+      <template #text>
+        {{
+          $t("alsijil.personal_notes.confirm_delete_extra_mark", {
+            extraMark: personalNote.extraMark.name,
+            name: person.firstName || person.fullName,
+          })
+        }}
+      </template>
+    </confirm-dialog>
+  </v-btn>
+</template>

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

@@ -57,14 +57,17 @@
                     <v-btn v-if="showEdit(item)" color="primary" icon>
                       <v-icon> $edit </v-icon>
                     </v-btn>
-                    <v-btn
+                    <delete-assigned-extra-mark
                       v-if="showDelete(item)"
-                      color="error"
-                      icon
-                      @click.prevent.stop
-                    >
-                      <v-icon color="error">$deleteContent</v-icon>
-                    </v-btn>
+                      :personal-note="item"
+                      :participation="item.participation || {}"
+                      :subjects="[]"
+                      :absence-reasons="[]"
+                      :extra-marks="[]"
+                      :affected-query="lastQuery"
+                      :documentation="item.relatedDocumentation"
+                      :person="personName"
+                    />
                   </template>
                   <v-row class="mr-2">
                     <v-col cols="12" md="6" class="pa-0">
@@ -239,10 +242,12 @@ 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";
+import DeleteAssignedExtraMark from "../personal_notes/DeleteExtraMarkPersonalNote.vue";
 
 export default {
   name: "StatisticsForPersonPage",
   components: {
+    DeleteAssignedExtraMark,
     TardinessChip,
     UpdateParticipation,
     TextNote,