silva
/
adrema-form
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: silva:0aba0c8035282f97876f2f1d5791d3f76eef7419
Branches Tags
silva:master
silva:dev
...
compare: silva:d9586511c3f0f5f107e2c47a2c7789f1f2abb37c
Branches Tags
silva:master
silva:dev

3 Commits
0aba0c8035 ... d9586511c3

Author SHA1 Message Date
philipp lang d9586511c3 Add new members 2024-06-18 01:58:19 +02:00
philipp lang b76fc8133e Add: delete member in third step 2024-06-18 01:48:52 +02:00
philipp lang a4e9f3af0b Add textfield for nami 2024-06-18 01:36:39 +02:00
3 changed files with 39 additions and 12 deletions
Show Stats Expand all files Collapse all files

9
src/components/Accordion.vue
View File

@ -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>

29
src/components/fields/Nami.vue
View File

@ -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);

13
src/components/icons/DeleteIcon.vue
View File

@ -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>