Add accordion for member confirmation

src/components/Accordion.vue

@@ -0,0 +1,37 @@
+<template>
+    <box size="sm" 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">
+            <div v-text="title"></div>
+            <chevron :class="{'rotate-180': modelValue === index}" class="w-4 h-4"></chevron>
+        </a>
+        <div v-if="modelValue === index">
+            <slot />
+        </div>
+    </box>
+</template>
+
+<script setup>
+import Box from './Box.vue';
+import Chevron from './icons/Chevron.vue';
+
+const emit = defineEmits(['update:model-value']);
+
+const props = defineProps({
+    type: {
+        required: true,
+        type: String,
+    },
+    title: {
+        required: true,
+        type: String,
+    },
+    modelValue: {
+        required: true,
+        type: Number,
+    },
+    index: {
+        required: true,
+        type: Number,
+    },
+});
+</script>

src/components/fields/Nami.vue

@@ -88,9 +88,8 @@
                     Hier siehst du noch einmal alle ausgewählten Mitglieder. Ggf sind hier pro Mitglied noch weitere Informationen erforderlich. Bitte gebe diese pro Mitglied an und klicke dann auf
                     "weiter".
                 </p>
-                <div class="grid items-center gap-2 mt-6" :style="{'grid-template-columns': `max-content repeat(${memberFields.length}, 1fr)`}">
-                    <template v-for="member in inner" :key="member.id">
-                        <div v-text="member.innerFormName"></div>
+                <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="success">
                         <template v-for="(memberField, memberIndex) in memberFields">
                             <v-checkbox
                                 v-if="memberField.type === 'CheckboxField'"
@@ -106,6 +105,7 @@
                                 :name="`${field.key}-memberattr-${member.id}-${memberField.key}`"
                                 :id="`${field.key}-memberattr-${member.id}-${memberField.key}`"
                                 :label="memberField.name"
+                                :allowcustom="false"
                                 :options="
                                     memberField.options.map((o) => {
                                         return {id: o, name: o};
@@ -113,7 +113,7 @@
                                 "
                             ></v-dropdown>
                         </template>
-                    </template>
+                    </accordion>
                 </div>
                 <div class="flex justify-center mt-5">
                     <v-btn @click.prevent="membersCompleted = true">Mitgliederdaten speichern</v-btn>
@@ -142,6 +142,7 @@ import Spinner from '../Spinner.vue';
 import useAdremaLogin from '../../composables/useAdremaLogin.js';
 import useEventMeta from '../../composables/useEventMeta.js';
 import Pagination from '../Pagination.vue';
+import Accordion from '../Accordion.vue';
 
 const eventMeta = useEventMeta();
 const {login, logout, user, loginData, searchData, searchForMember, resetSearchData, searchResults, searching} = useAdremaLogin();
@@ -168,6 +169,8 @@ const step = computed(() => {
     return 4;
 });
 
+const openValue = ref(-1);
+
 const membersAccepted = ref(false);
 const membersCompleted = ref(false);
 const emit = defineEmits(['update:modelValue']);