Allow deletion of grades

aleksis/apps/maka/frontend/components/efforts/UnwrappedEffortTab.vue

@@ -83,7 +83,7 @@ export default {
         :key="`updater-${effortIndex * group.members.length + index}`"
         v-if="effort.canEdit"
         :effort="effort"
-        :person-id="item.id"
+        :person="item"
         :value="effort.grades.find((grade) => grade.person.id === item.id)"
         :affected-query="$apollo.queries.efforts"
         :tab-index="effortIndex * group.members.length + index"

aleksis/apps/maka/frontend/components/grades/UpdateOrCreateGrade.vue

 <script>
-import { createGrades, updateGrades } from "./grades.graphql";
+import { createGrades, updateGrades, deleteGrades } from "./grades.graphql";
 import mutateMixin from "aleksis.core/mixins/mutateMixin.js";
+import ConfirmDialog from "aleksis.core/components/generic/dialogs/ConfirmDialog.vue";
 
 export default {
   name: "UpdateOrCreateGrade",
   mixins: [mutateMixin],
+  components: {
+    ConfirmDialog,
+  },
   props: {
-    personId: {
-      type: [String, Number],
+    person: {
+      type: Object,
       required: true,
     },
     effort: {
@@ -40,6 +44,11 @@ export default {
       default: 0,
     },
   },
+  data() {
+    return {
+      showDeleteConfirm: false,
+    };
+  },
   computed: {
     items() {
       return [
@@ -55,8 +64,10 @@ export default {
         return this.value?.grade;
       },
       set(newValue) {
-        // TODO
-        if (this.value) {
+        if (!newValue) {
+          // No new value means deleting
+          this.showDeleteConfirm = true;
+        } else if (this.value) {
           // → Preexisting grade, edit mutation
           this.mutate(
             updateGrades,
@@ -64,7 +75,7 @@ export default {
               input: [
                 {
                   id: this.value.id,
-                  person: this.personId,
+                  person: this.person.id,
                   effort: this.effort.id,
                   grade: newValue,
                 },
@@ -90,7 +101,7 @@ export default {
             {
               input: [
                 {
-                  person: this.personId,
+                  person: this.person.id,
                   effort: this.effort.id,
                   grade: newValue,
                 },
@@ -112,6 +123,27 @@ export default {
       },
     },
   },
+  methods: {
+    confirmDelete() {
+      this.mutate(
+        deleteGrades,
+        {
+          ids: [this.value.id],
+        },
+        (storedEfforts) => {
+          const effort = storedEfforts.find(
+            (effort) => effort.id === this.effort.id,
+          );
+
+          const index = effort.grades.findIndex((g) => g.id === this.value.id);
+          effort.grades.splice(index, 1);
+
+          return storedEfforts;
+        },
+      );
+    },
+    cancelDelete() {},
+  },
 };
 </script>
 
@@ -131,5 +163,25 @@ export default {
     v-model="selectedGrade"
     :tabindex="tabIndex"
     :loading="loading"
-  />
+  >
+    <template #append>
+      <confirm-dialog
+        v-model="showDeleteConfirm"
+        @confirm="confirmDelete"
+        @cancel="cancelDelete"
+      >
+        <template #title>
+          {{ $t("maka.grades.confirm_delete") }}
+        </template>
+        <template #text>
+          {{
+            $t("maka.grades.confirm_delete_grade", {
+              grade: value?.name,
+              name: person.fullName,
+            })
+          }}
+        </template>
+      </confirm-dialog>
+    </template>
+  </v-autocomplete>
 </template>