From b76fc8133e4b0d549990b3a1f99f74ae7ab785af Mon Sep 17 00:00:00 2001
From: philipp lang <philipp@aweos.de>
Date: Tue, 18 Jun 2024 01:48:52 +0200
Subject: [PATCH] Add: delete member in third step

---
 src/components/Accordion.vue        |  9 ++++++---
 src/components/fields/Nami.vue      | 10 ++++++++++
 src/components/icons/DeleteIcon.vue | 13 +++++++------
 3 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/src/components/Accordion.vue b/src/components/Accordion.vue
index 7c0a54a..6e5d034 100644
--- a/src/components/Accordion.vue
+++ b/src/components/Accordion.vue
@@ -1,9 +1,12 @@
 <template>
     <box size="none" class="opacity-[0.8] hover:opacity-[1.0]" :type="type">
-        <a href="#" @click.prevent="emit('update:model-value', modelValue === index ? -1 : index)" class="flex items-center justify-between p-2">
+        <div href="#" @click.prevent="emit('update:model-value', modelValue === index ? -1 : index)" class="flex items-center justify-between p-2">
             <div v-text="title"></div>
-            <chevron :class="{'rotate-180': modelValue === index}" class="w-3 h-3"></chevron>
-        </a>
+            <div class="flex items-center space-x-2">
+                <slot name="buttons"></slot>
+                <chevron :class="{'rotate-180': modelValue === index}" class="w-3 h-3"></chevron>
+            </div>
+        </div>
         <div v-if="modelValue === index" class="p-2 pt-0">
             <slot />
         </div>
diff --git a/src/components/fields/Nami.vue b/src/components/fields/Nami.vue
index 4d66193..a837bf3 100644
--- a/src/components/fields/Nami.vue
+++ b/src/components/fields/Nami.vue
@@ -90,6 +90,11 @@
                 </p>
                 <div class="grid gap-2 mt-6">
                     <accordion v-model="openValue" :index="index" :title="member.innerFormName" v-for="(member, index) in inner" :key="index" type="info">
+                        <template #buttons>
+                            <a @click.prevent.stop="deleteMember(index)" href="#">
+                                <delete-icon class="w-3 h-3 text-red-700"></delete-icon>
+                            </a>
+                        </template>
                         <div class="mt-2" :class="containerClassesSm">
                             <template v-for="(memberField, memberIndex) in memberFields">
                                 <v-checkbox
@@ -206,6 +211,7 @@ import useEventMeta from '../../composables/useEventMeta.js';
 import Pagination from '../Pagination.vue';
 import Accordion from '../Accordion.vue';
 import useColumns from '../../composables/useColumns.js';
+import DeleteIcon from '../icons/DeleteIcon.vue';
 
 const eventMeta = useEventMeta();
 const {colClassesForField, containerClassesSm} = useColumns();
@@ -235,6 +241,10 @@ const step = computed(() => {
 
 const openValue = ref(-1);
 
+function deleteMember(index) {
+    inner.value = inner.value.toSpliced(index, 1);
+}
+
 const membersAccepted = ref(false);
 const membersCompleted = ref(false);
 const emit = defineEmits(['update:modelValue']);
diff --git a/src/components/icons/DeleteIcon.vue b/src/components/icons/DeleteIcon.vue
index a23b0d1..409a643 100644
--- a/src/components/icons/DeleteIcon.vue
+++ b/src/components/icons/DeleteIcon.vue
@@ -9,13 +9,14 @@
         viewBox="0 0 512 512"
         style="enable-background: new 0 0 512 512"
         xml:space="preserve"
+        fill="currentColor"
     >
         <g>
             <g>
                 <path
                     d="M486.4,102.4h-128V25.6c0-15.36-10.24-25.6-25.6-25.6H179.2c-15.36,0-25.6,10.24-25.6,25.6v76.8h-128
-                    C10.24,102.4,0,112.64,0,128s10.24,25.6,25.6,25.6h460.8c15.36,0,25.6-10.24,25.6-25.6S501.76,102.4,486.4,102.4z M307.2,102.4
-                    H204.8V51.2h102.4V102.4z"
+                        C10.24,102.4,0,112.64,0,128s10.24,25.6,25.6,25.6h460.8c15.36,0,25.6-10.24,25.6-25.6S501.76,102.4,486.4,102.4z M307.2,102.4
+                        H204.8V51.2h102.4V102.4z"
                 />
             </g>
         </g>
@@ -23,10 +24,10 @@
             <g>
                 <path
                     d="M25.6,204.8l48.64,284.16c2.56,12.8,12.8,23.04,25.6,23.04h312.32c12.8,0,23.04-10.24,25.6-23.04L486.4,204.8H25.6z
-                     M153.6,460.8c-15.36,0-25.6-10.24-25.6-25.6l-25.6-153.6c0-15.36,10.24-25.6,25.6-25.6s25.6,10.24,25.6,25.6l25.6,153.6
-                    C179.2,450.56,168.96,460.8,153.6,460.8z M281.6,435.2c0,15.36-10.24,25.6-25.6,25.6s-25.6-10.24-25.6-25.6V281.6
-                    c0-15.36,10.24-25.6,25.6-25.6s25.6,10.24,25.6,25.6V435.2z M384,435.2c0,15.36-10.24,25.6-25.6,25.6
-                    c-15.36,0-25.6-10.24-25.6-25.6l25.6-153.6c0-15.36,10.24-25.6,25.6-25.6s25.6,10.24,25.6,25.6L384,435.2z"
+                         M153.6,460.8c-15.36,0-25.6-10.24-25.6-25.6l-25.6-153.6c0-15.36,10.24-25.6,25.6-25.6s25.6,10.24,25.6,25.6l25.6,153.6
+                        C179.2,450.56,168.96,460.8,153.6,460.8z M281.6,435.2c0,15.36-10.24,25.6-25.6,25.6s-25.6-10.24-25.6-25.6V281.6
+                        c0-15.36,10.24-25.6,25.6-25.6s25.6,10.24,25.6,25.6V435.2z M384,435.2c0,15.36-10.24,25.6-25.6,25.6
+                        c-15.36,0-25.6-10.24-25.6-25.6l25.6-153.6c0-15.36,10.24-25.6,25.6-25.6s25.6,10.24,25.6,25.6L384,435.2z"
                 />
             </g>
         </g>