enhance: enable deletion of protocol content

src/views/admin/club/protocol/ProtocolVoting.vue

@@ -31,6 +31,16 @@
             :disabled="!can('create', 'club', 'protocol')"
           />
 
+          <DoubleConfirmClick
+            v-if="can('create', 'club', 'protocol')"
+            light
+            v-slot="{ isSensitive }"
+            @click:submit="removeFromArray(item.id)"
+          >
+            <TrashIcon v-if="!isSensitive" class="h-5 w-5" />
+            <TrashIconSolid v-else class="h-5 w-5" />
+          </DoubleConfirmClick>
+
           <div class="flex flex-col">
             <ChevronUpIcon
               v-if="index != 0"
@@ -83,14 +93,16 @@
 
 <script setup lang="ts">
 import { defineComponent } from "vue";
-import { mapActions, mapState } from "pinia";
+import { mapActions, mapState, mapWritableState } from "pinia";
 import Spinner from "@/components/Spinner.vue";
 import { QuillEditor } from "@vueup/vue-quill";
 import "@vueup/vue-quill/dist/vue-quill.snow.css";
 import { toolbarOptions } from "@/helpers/quillConfig";
 import { useProtocolVotingStore } from "@/stores/admin/club/protocol/protocolVoting";
 import { useAbilityStore } from "@/stores/ability";
-import { ChevronDownIcon, ChevronUpIcon } from "@heroicons/vue/24/outline";
+import { ChevronDownIcon, ChevronUpIcon, TrashIcon } from "@heroicons/vue/24/outline";
+import { TrashIcon as TrashIconSolid } from "@heroicons/vue/24/solid";
+import DoubleConfirmClick from "@/components/DoubleConfirmClick.vue";
 </script>
 
 <script lang="ts">
@@ -99,7 +111,7 @@ export default defineComponent({
     protocolId: String,
   },
   computed: {
-    ...mapState(useProtocolVotingStore, ["voting", "loading"]),
+    ...mapWritableState(useProtocolVotingStore, ["voting", "loading"]),
     ...mapState(useAbilityStore, ["can"]),
     sortedVoting() {
       return this.voting.slice().sort((a, b) => a.sort - b.sort);
@@ -126,6 +138,9 @@ export default defineComponent({
         });
       }
     },
+    removeFromArray(thisId: number) {
+      this.voting = this.voting.filter((item) => item.id !== thisId);
+    },
   },
 });
 </script>