Add new members

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>
+            <div class="flex items-center space-x-2">
+                <slot name="buttons"></slot>
                 <chevron :class="{'rotate-180': modelValue === index}" class="w-3 h-3"></chevron>
-        </a>
+            </div>
+        </div>
         <div v-if="modelValue === index" class="p-2 pt-0">
             <slot />
         </div>

src/components/fields/Nami.vue

@@ -90,8 +90,13 @@
                 </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">
+                            <template v-for="(memberField, memberIndex) in member.id ? memberFields : newMemberFields">
                                 <v-checkbox
                                     v-if="memberField.type === 'CheckboxField'"
                                     v-model="member[memberField.key]"
@@ -118,7 +123,7 @@
                                     "
                                 ></v-dropdown>
                                 <v-text
-                                    v-if="memberField.type === 'TextField'"
+                                    v-if="memberField.type === 'TextField' || memberField.type === 'EmailField'"
                                     v-model="member[memberField.key]"
                                     :name="`${field.key}-memberattr-${member.id}-${memberField.key}`"
                                     :id="`${field.key}-memberattr-${member.id}-${memberField.key}`"
@@ -176,8 +181,9 @@
                         </div>
                     </accordion>
                 </div>
-                <div class="flex justify-center mt-5">
+                <div class="flex justify-center space-x-3 mt-5">
                     <v-btn @click.prevent="membersCompleted = true">Mitgliederdaten speichern</v-btn>
+                    <v-btn @click.prevent="addMember">Mitglied hinzufügen</v-btn>
                 </div>
             </template>
             <template #finished>
@@ -206,6 +212,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 +242,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']);
@@ -259,7 +270,15 @@ const defaultMember = computed(() => {
     return fields;
 });
 
+const newDefaultMember = computed(() => {
+    var fields = {};
+    newMemberFields.value.forEach((field) => (fields[field.key] = field.value));
+
+    return fields;
+});
+
 const memberFields = computed(() => props.fields.filter((field) => field.for_members === true && field.nami_type === null));
+const newMemberFields = computed(() => props.fields.filter((field) => field.for_members === true));
 
 const inner = computed(
     {
@@ -280,6 +299,10 @@ function memberSelected(member) {
     return inner.value.map((m) => m.id).includes(member.id);
 }
 
+function addMember(index) {
+    inner.value.push(JSON.parse(JSON.stringify({id: null, innerFormName: 'Neues Mitglied', ...newDefaultMember.value})));
+}
+
 function toggleMember(member) {
     if (memberSelected(member)) {
         inner.value = inner.value.filter((m) => m.id !== member.id);

src/components/icons/DeleteIcon.vue

@@ -9,6 +9,7 @@
         viewBox="0 0 512 512"
         style="enable-background: new 0 0 512 512"
         xml:space="preserve"
+        fill="currentColor"
     >
         <g>
             <g>