Remove tardiness note

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

-<script>
-import {
-  createPersonalNotes,
-  deletePersonalNotes,
-  updatePersonalNotes,
-} from "./personal_notes.graphql";
-import { DateTime } from "luxon";
-import personalNoteRelatedMixin from "./personalNoteRelatedMixin";
-import mutateMixin from "aleksis.core/mixins/mutateMixin.js";
-import DeleteDialog from "aleksis.core/components/generic/dialogs/DeleteDialog.vue";
-import PositiveSmallIntegerField from "aleksis.core/components/generic/forms/PositiveSmallIntegerField.vue";
-
-export default {
-  name: "TardinessNote",
-  components: { DeleteDialog, PositiveSmallIntegerField },
-  mixins: [mutateMixin, personalNoteRelatedMixin],
-  computed: {
-    value() {
-      return this.participation.noteWithTardiness;
-    },
-    lessonLength() {
-      const lessonStart = DateTime.fromISO(this.documentation.datetimeStart);
-      const lessonEnd = DateTime.fromISO(this.documentation.datetimeEnd);
-
-      let diff = lessonEnd.diff(lessonStart, "minutes");
-      return diff.toObject().minutes;
-    },
-    model: {
-      get() {
-        return this.value?.tardiness;
-      },
-      set(newValue) {
-        if (!newValue) {
-          // this is a DELETE action, show the dialog, ...
-          this.showDeleteConfirm = true;
-          return;
-        }
-        const create = !this.value?.id;
-
-        this.mutate(
-          create ? createPersonalNotes : updatePersonalNotes,
-          this.getInput(
-            newValue,
-            create
-              ? {
-                  documentation: this.documentation.id,
-                  person: this.participation.person.id,
-                }
-              : {
-                  id: this.value.id,
-                },
-          ),
-          this.getUpdater(create ? "create" : "update"),
-        );
-      },
-    },
-  },
-  methods: {
-    getInput(newValue, extras) {
-      return {
-        input: [
-          {
-            tardiness: newValue,
-            ...extras,
-          },
-        ],
-      };
-    },
-    getUpdater(mode) {
-      return (storedDocumentations, incomingPersonalNotes) => {
-        const note = incomingPersonalNotes?.[0] || undefined;
-        const documentation = storedDocumentations.find(
-          (doc) => doc.id === this.documentation.id,
-        );
-        const participationStatus = documentation.participations.find(
-          (part) => part.id === this.participation.id,
-        );
-        switch (mode.toLowerCase()) {
-          case "update": {
-            const oldNote = participationStatus.noteWithTardiness;
-            participationStatus.noteWithTardiness = {
-              ...oldNote,
-              ...note,
-            };
-            break;
-          }
-          case "delete": {
-            participationStatus.noteWithTardiness = null;
-            break;
-          }
-
-          case "create":
-            participationStatus.noteWithTardiness = note;
-            break;
-
-          default:
-            console.error("Invalid mode in getUpdater():", mode);
-            break;
-        }
-
-        return storedDocumentations;
-      };
-    },
-    lessonLengthRule(time) {
-      return (
-        time == null ||
-        time <= this.lessonLength ||
-        this.$t("alsijil.personal_notes.lesson_length_exceeded")
-      );
-    },
-  },
-  data() {
-    return {
-      showDeleteConfirm: false,
-      deletePersonalNotes,
-    };
-  },
-};
-</script>
-
-<template>
-  <positive-small-integer-field
-    outlined
-    class="mt-1"
-    prepend-inner-icon="mdi-clock-alert-outline"
-    :suffix="$t('time.minutes')"
-    :label="$t('alsijil.personal_notes.tardiness')"
-    :rules="[lessonLengthRule]"
-    :value="model"
-    @change="model = $event"
-    :loading="loading"
-  >
-    <template #append>
-      <v-slide-x-reverse-transition>
-        <v-btn
-          v-if="!!model"
-          icon
-          @click="showDeleteConfirm = true"
-          class="mt-n1-5"
-        >
-          <v-icon> $deleteContent </v-icon>
-        </v-btn>
-      </v-slide-x-reverse-transition>
-
-      <delete-dialog
-        v-model="showDeleteConfirm"
-        :gql-delete-mutation="deletePersonalNotes"
-        :affected-query="affectedQuery"
-        item-attribute="fullName"
-        :items="[value]"
-        :custom-update="getUpdater('delete')"
-      >
-        <template #title>
-          {{ $t("alsijil.personal_notes.confirm_delete") }}
-        </template>
-        <template #body>
-          {{
-            $t("alsijil.personal_notes.confirm_delete_tardiness", {
-              tardiness: value?.tardiness,
-              name: participation.person.fullName,
-            })
-          }}
-        </template>
-      </delete-dialog>
-    </template>
-  </positive-small-integer-field>
-</template>
-
-<style scoped>
-.mt-n1-5 {
-  margin-top: -6px;
-}
-</style>