Create management for text based personal notes

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

 <script setup>
-import SecondaryActionButton from "aleksis.core/components/generic/buttons/SecondaryActionButton.vue";
 import ExtraMarksNote from "./ExtraMarksNote.vue";
-import NoteNote from "./NoteNote.vue";
+import TextNotes from "./TextNotes.vue";
 </script>
 <script>
 import personalNoteRelatedMixin from "./personalNoteRelatedMixin";
@@ -14,6 +13,10 @@ export default {
 
 <template>
   <div>
+    <text-notes
+      v-bind="personalNoteRelatedProps"
+      :value="participation.notesWithNote"
+    />
 
     <extra-marks-note
       v-bind="personalNoteRelatedProps"

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

+<script>
+import {
+  createPersonalNotes,
+  updatePersonalNotes,
+} from "./personal_notes.graphql";
+import personalNoteRelatedMixin from "./personalNoteRelatedMixin";
+import mutateMixin from "aleksis.core/mixins/mutateMixin.js";
+
+export default {
+  name: "TextNote",
+  mixins: [mutateMixin, personalNoteRelatedMixin],
+  props: {
+    value: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    model: {
+      get() {
+        return this.value.note;
+      },
+      set(newValue) {
+        const input = (extras) => ({
+          input: [
+            {
+              note: newValue,
+              ...extras,
+            },
+          ],
+        });
+
+        const updater =
+          (replace) => (storedDocumentations, incomingPersonalNotes) => {
+            const note = incomingPersonalNotes[0];
+            const documentation = storedDocumentations.find(
+              (doc) => doc.id === this.documentation.id,
+            );
+            const participationStatus = documentation.participations.find(
+              (part) => part.id === this.participation.id,
+            );
+            if (replace) {
+              const index = participationStatus.notesWithNote.findIndex(
+                (n) => n.id === this.participation.id,
+              );
+              participationStatus.notesWithNote.splice(index, 1, note);
+            } else {
+              participationStatus.notesWithNote.push(note);
+
+              this.$emit("create");
+            }
+
+            return storedDocumentations;
+          };
+
+        const create = !this.value.id;
+
+        this.mutate(
+          create ? createPersonalNotes : updatePersonalNotes,
+          input(
+            create
+              ? {
+                  documentation: this.documentation.id,
+                  person: this.participation.person.id,
+                  extraMark: null,
+                }
+              : {
+                  id: this.value.id,
+                },
+          ),
+          updater(!create),
+        );
+      },
+    },
+  },
+};
+</script>
+
+<template>
+  <v-textarea
+    auto-grow
+    :rows="3"
+    outlined
+    hide-details
+    class="mb-4"
+    clearable
+    :label="$t('alsijil.personal_notes.note')"
+    :value="model"
+    @change="model = $event"
+    :loading="loading"
+  />
+</template>

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

+<script setup>
+import SecondaryActionButton from "aleksis.core/components/generic/buttons/SecondaryActionButton.vue";
+import TextNote from "./TextNote.vue";
+</script>
+<script>
+import personalNoteRelatedMixin from "./personalNoteRelatedMixin";
+
+export default {
+  name: "TextNotes",
+  mixins: [personalNoteRelatedMixin],
+  props: {
+    value: {
+      type: Array,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      showNewNote: true,
+    };
+  },
+  computed: {
+    notes() {
+      return this.showNewNote ? [...this.value, { note: "" }] : this.value;
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <text-note
+      v-for="note in notes"
+      :key="note.id || -1"
+      v-bind="personalNoteRelatedProps"
+      :value="note"
+      @create="showNewNote = false"
+    />
+
+    <secondary-action-button
+      i18n-key="alsijil.personal_notes.create_personal_note"
+      icon-text="$plus"
+      class="full-width"
+      @click="showNewNote = true"
+      :disabled="showNewNote"
+    />
+  </div>
+</template>