feat(#12): Add subsections to sections, fix version deletion after update

This commit is contained in:
2025-11-19 12:11:39 +01:00
parent b919cef9c4
commit 02d9b4f97c
20 changed files with 376 additions and 199 deletions

View File

@@ -8,39 +8,49 @@
{{ currentFormElementSection.title }}
</h1>
<UCard variant="subtle">
<FormEngine
v-if="currentFormElementSection?.formElements"
v-model="currentFormElementSection.formElements"
:application-form-id="applicationFormId"
:disabled="disabled"
@add:input-form="handleAddInputForm"
/>
<div class="flex gap-2 justify-between mt-4">
<UButton leading-icon="i-lucide-arrow-left" :disabled="!stepper?.hasPrev" @click="handleNavigate('backward')">
Prev
</UButton>
<UButton
v-if="stepper?.hasNext"
trailing-icon="i-lucide-arrow-right"
:disabled="!stepper?.hasNext"
@click="handleNavigate('forward')"
>
Next
</UButton>
<div v-if="!stepper?.hasNext" class="flex flex-wrap items-center gap-1.5">
<UButton trailing-icon="i-lucide-save" :disabled="disabled" variant="outline" @click="emit('save')">
Save
</UButton>
<UButton trailing-icon="i-lucide-send-horizontal" :disabled="disabled" @click="emit('submit')">
Submit
</UButton>
<template v-if="currentFormElementSection?.formElementSubSections">
<UCard
v-for="subsection in currentFormElementSection.formElementSubSections"
:key="subsection.id"
variant="subtle"
class="mb-6"
>
<div class="mb-4">
<h2 class="text-lg font-semibold text-highlighted">{{ subsection.title }}</h2>
<p v-if="subsection.subtitle" class="text-sm text-dimmed">{{ subsection.subtitle }}</p>
</div>
<FormEngine
v-model="subsection.formElements"
:application-form-id="applicationFormId"
:disabled="disabled"
@add:input-form="(position) => handleAddInputForm(position, subsection.id)"
/>
</UCard>
</template>
<div class="flex gap-2 justify-between">
<UButton leading-icon="i-lucide-arrow-left" :disabled="!stepper?.hasPrev" @click="handleNavigate('backward')">
Prev
</UButton>
<UButton
v-if="stepper?.hasNext"
trailing-icon="i-lucide-arrow-right"
:disabled="!stepper?.hasNext"
@click="handleNavigate('forward')"
>
Next
</UButton>
<div v-if="!stepper?.hasNext" class="flex flex-wrap items-center gap-1.5">
<UButton trailing-icon="i-lucide-save" :disabled="disabled" variant="outline" @click="emit('save')">
Save
</UButton>
<UButton trailing-icon="i-lucide-send-horizontal" :disabled="disabled" @click="emit('submit')">
Submit
</UButton>
</div>
</UCard>
</div>
</div>
</template>
@@ -65,16 +75,28 @@ const { stepper, activeStepperItemIndex, stepperItems, currentFormElementSection
computed(() => props.formElementSections)
)
const { addInputFormToApplicationForm } = useFormElementManagement(currentFormElementSection, props.applicationFormId)
onMounted(() => {
if (props.initialSectionIndex !== undefined) {
activeStepperItemIndex.value = props.initialSectionIndex
}
})
async function handleAddInputForm(position: number) {
const updatedForm = await addInputFormToApplicationForm(position)
async function handleAddInputForm(position: number, subsectionId: string) {
const subsection = props.formElementSections
.flatMap((section) => section.formElementSubSections)
.find((sub) => sub.id === subsectionId)
if (!subsection) {
return
}
const { addFormElementToSubSection } = useFormElementManagement()
const updatedForm = await addFormElementToSubSection(
props.applicationFormId,
subsectionId,
subsection.formElements,
position
)
emit('add-input-form', updatedForm)
}