src/components/DoubleConfirmClick.vue

@@ -1,64 +0,0 @@
-<template>
-  <div
-    class="cursor-pointer"
-    :class="{ 'text-white': light, 'animate-pulse': isSensitive }"
-    :title="`2 mal klicken für ${action}`"
-    @click.prevent="handleClick"
-  >
-    <slot :isSensitive="isSensitive">
-      <CursorArrowRaysIcon v-if="!isSensitive" class="h-5 w-5" />
-      <CursorArrowRippleIcon v-else class="h-5 w-5" />
-    </slot>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { CursorArrowRaysIcon, CursorArrowRippleIcon } from "@heroicons/vue/24/outline";
-import { defineComponent } from "vue";
-</script>
-
-<script lang="ts">
-export default defineComponent({
-  props: {
-    light: {
-      type: Boolean,
-      default: false,
-    },
-    action: {
-      type: String,
-      default: "Bestätigung",
-    },
-  },
-  emits: ["click:first", "click:submit", "click:reset"],
-  data() {
-    return {
-      isSensitive: false as boolean,
-      timeout: undefined as any,
-    };
-  },
-  beforeUnmount() {
-    try {
-      clearTimeout(this.timeout);
-    } catch (error) {}
-  },
-  methods: {
-    handleClick() {
-      if (this.isSensitive) {
-        clearTimeout(this.timeout);
-        this.isSensitive = false;
-        this.$emit("click:submit");
-      } else {
-        this.timeout = setTimeout(() => {
-          this.isSensitive = true;
-          this.$emit("click:first");
-
-          this.timeout = setTimeout(() => {
-            this.isSensitive = false;
-            this.$emit("click:reset");
-          }, 2000);
-        }, 500);
-      }
-    },
-  },
-});
-</script>

src/views/admin/club/newsletter/NewsletterDates.vue

@@ -37,15 +37,11 @@
                   })
             }}
           </p>
-          <DoubleConfirmClick
+          <TrashIcon
             v-if="can('create', 'club', 'newsletter')"
-            light
-            v-slot="{ isSensitive }"
-            @click:submit="removeSelected(item.calendarId)"
-          >
-            <TrashIcon v-if="!isSensitive" class="h-5 w-5" />
-            <TrashIconSolid v-else class="h-5 w-5" />
-          </DoubleConfirmClick>
+            class="w-5 h-5 p-1 box-content cursor-pointer text-white"
+            @click.prevent="removeSelected(item.calendarId)"
+          />
         </summary>
         <div class="flex flex-col gap-2 px-1">
           <input
@@ -115,10 +111,8 @@ import { useAbilityStore } from "@/stores/ability";
 import { useCalendarStore } from "@/stores/admin/club/calendar";
 import type { CalendarViewModel } from "@/viewmodels/admin/club/calendar.models";
 import { TrashIcon } from "@heroicons/vue/24/outline";
-import { TrashIcon as TrashIconSolid } from "@heroicons/vue/24/solid";
 import cloneDeep from "lodash.clonedeep";
 import type { NewsletterDatesViewModel } from "@/viewmodels/admin/club/newsletter/newsletterDates.models";
-import DoubleConfirmClick from "@/components/DoubleConfirmClick.vue";
 </script>
 
 <script lang="ts">

src/views/admin/club/newsletter/NewsletterRecipients.vue

@@ -42,15 +42,11 @@
           <p>Newsletter senden an Typ: {{ member.sendNewsletter?.type.type ?? "---" }}</p>
         </div>
 
-        <DoubleConfirmClick
+        <TrashIcon
           v-if="can('create', 'club', 'newsletter') && showMemberSelect"
-          light
-          v-slot="{ isSensitive }"
-          @click:submit="removeSelected(member.id)"
-        >
-          <TrashIcon v-if="!isSensitive" class="h-5 w-5" />
-          <TrashIconSolid v-else class="h-5 w-5" />
-        </DoubleConfirmClick>
+          class="w-5 h-5 p-1 box-content cursor-pointer"
+          @click="removeSelected(member.id)"
+        />
       </div>
     </div>
 
@@ -65,8 +61,17 @@
 import { defineComponent } from "vue";
 import { mapActions, mapState, mapWritableState } from "pinia";
 import Spinner from "@/components/Spinner.vue";
+import {
+  Combobox,
+  ComboboxLabel,
+  ComboboxInput,
+  ComboboxButton,
+  ComboboxOptions,
+  ComboboxOption,
+  TransitionRoot,
+} from "@headlessui/vue";
+import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
 import { ArchiveBoxIcon, ExclamationTriangleIcon, TrashIcon, UserPlusIcon } from "@heroicons/vue/24/outline";
-import { TrashIcon as TrashIconSolid } from "@heroicons/vue/24/solid";
 import { useMemberStore } from "@/stores/admin/club/member/member";
 import type { MemberViewModel } from "@/viewmodels/admin/club/member/member.models";
 import { useNewsletterStore } from "@/stores/admin/club/newsletter/newsletter";
@@ -74,9 +79,9 @@ import { useNewsletterRecipientsStore } from "@/stores/admin/club/newsletter/new
 import { useAbilityStore } from "@/stores/ability";
 import { useQueryStoreStore } from "@/stores/admin/configuration/queryStore";
 import { useQueryBuilderStore } from "@/stores/admin/club/queryBuilder";
+import cloneDeep from "lodash.clonedeep";
 import MemberSearchSelect from "@/components/admin/MemberSearchSelect.vue";
 import type { FieldType } from "@/types/dynamicQueries";
-import DoubleConfirmClick from "@/components/DoubleConfirmClick.vue";
 </script>
 
 <script lang="ts">

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

@@ -31,16 +31,6 @@
             :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,9 +73,7 @@ import "@vueup/vue-quill/dist/vue-quill.snow.css";
 import { toolbarOptions } from "@/helpers/quillConfig";
 import { useProtocolAgendaStore } from "@/stores/admin/club/protocol/protocolAgenda";
 import { useAbilityStore } from "@/stores/ability";
-import { ChevronDownIcon, ChevronUpIcon, TrashIcon } from "@heroicons/vue/24/outline";
-import { TrashIcon as TrashIconSolid } from "@heroicons/vue/24/solid";
-import DoubleConfirmClick from "@/components/DoubleConfirmClick.vue";
+import { ChevronDownIcon, ChevronUpIcon } from "@heroicons/vue/24/outline";
 </script>
 
 <script lang="ts">
@@ -121,9 +109,6 @@ export default defineComponent({
         });
       }
     },
-    removeFromArray(thisId: number) {
-      this.agenda = this.agenda.filter((item) => item.id !== thisId);
-    },
   },
 });
 </script>

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

@@ -31,16 +31,6 @@
             :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,9 +73,7 @@ import "@vueup/vue-quill/dist/vue-quill.snow.css";
 import { toolbarOptions } from "@/helpers/quillConfig";
 import { useProtocolDecisionStore } from "@/stores/admin/club/protocol/protocolDecision";
 import { useAbilityStore } from "@/stores/ability";
-import { ChevronDownIcon, ChevronUpIcon, TrashIcon } from "@heroicons/vue/24/outline";
-import { TrashIcon as TrashIconSolid } from "@heroicons/vue/24/solid";
-import DoubleConfirmClick from "@/components/DoubleConfirmClick.vue";
+import { ChevronDownIcon, ChevronUpIcon } from "@heroicons/vue/24/outline";
 </script>
 
 <script lang="ts">
@@ -121,9 +109,6 @@ export default defineComponent({
         });
       }
     },
-    removeFromArray(thisId: number) {
-      this.decision = this.decision.filter((item) => item.id !== thisId);
-    },
   },
 });
 </script>

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

@@ -42,15 +42,11 @@
             </label>
           </div>
         </div>
-        <DoubleConfirmClick
+        <TrashIcon
           v-if="can('create', 'club', 'protocol')"
-          light
-          v-slot="{ isSensitive }"
-          @click:submit="removeSelected(member.memberId)"
-        >
-          <TrashIcon v-if="!isSensitive" class="h-5 w-5" />
-          <TrashIconSolid v-else class="h-5 w-5" />
-        </DoubleConfirmClick>
+          class="w-5 h-5 p-1 box-content cursor-pointer"
+          @click="removeSelected(member.memberId)"
+        />
       </div>
     </div>
   </div>
@@ -61,12 +57,10 @@ import { defineComponent } from "vue";
 import { mapActions, mapState, mapWritableState } from "pinia";
 import Spinner from "@/components/Spinner.vue";
 import { TrashIcon } from "@heroicons/vue/24/outline";
-import { TrashIcon as TrashIconSolid } from "@heroicons/vue/24/solid";
 import { useProtocolPresenceStore } from "@/stores/admin/club/protocol/protocolPresence";
 import { useAbilityStore } from "@/stores/ability";
 import MemberSearchSelect from "@/components/admin/MemberSearchSelect.vue";
 import type { MemberViewModel } from "@/viewmodels/admin/club/member/member.models";
-import DoubleConfirmClick from "@/components/DoubleConfirmClick.vue";
 </script>
 
 <script lang="ts">

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

@@ -31,16 +31,6 @@
             :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"
@@ -93,16 +83,14 @@
 
 <script setup lang="ts">
 import { defineComponent } from "vue";
-import { mapActions, mapState, mapWritableState } from "pinia";
+import { mapActions, mapState } 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, TrashIcon } from "@heroicons/vue/24/outline";
-import { TrashIcon as TrashIconSolid } from "@heroicons/vue/24/solid";
-import DoubleConfirmClick from "@/components/DoubleConfirmClick.vue";
+import { ChevronDownIcon, ChevronUpIcon } from "@heroicons/vue/24/outline";
 </script>
 
 <script lang="ts">
@@ -111,7 +99,7 @@ export default defineComponent({
     protocolId: String,
   },
   computed: {
-    ...mapWritableState(useProtocolVotingStore, ["voting", "loading"]),
+    ...mapState(useProtocolVotingStore, ["voting", "loading"]),
     ...mapState(useAbilityStore, ["can"]),
     sortedVoting() {
       return this.voting.slice().sort((a, b) => a.sort - b.sort);
@@ -138,9 +126,6 @@ export default defineComponent({
         });
       }
     },
-    removeFromArray(thisId: number) {
-      this.voting = this.voting.filter((item) => item.id !== thisId);
-    },
   },
 });
 </script>