denis/gremiumhub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Denis Lugowski
2025-11-19 12:11:39 +01:00
parent b919cef9c4
commit 02d9b4f97c
20 changed files with 376 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
legalconsenthub/app/components/FormEngine.vue
View File

@@ -23,7 +23,7 @@
</UDropdownMenu>
</div>
</div>
<USeparator />
<USeparator v-if="index < props.modelValue.length - 1" />
</template>
</template>

92
legalconsenthub/app/components/FormStepperWithNavigation.vue
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)
}

16
legalconsenthub/app/composables/applicationForm/useApplicationForm.ts
View File

@@ -76,25 +76,25 @@ export function useApplicationForm() {
}
}
async function addFormElementToSection(
async function addFormElementToSubSection(
applicationFormId: string,
sectionId: string,
subsectionId: string,
createFormElementDto: CreateFormElementDto,
position: number
): Promise<ApplicationFormDto> {
if (!applicationFormId || !sectionId) {
return Promise.reject(new Error('Application form ID or section ID missing'))
if (!applicationFormId || !subsectionId) {
return Promise.reject(new Error('Application form ID or subsection ID missing'))
}
try {
return await applicationFormApi.addFormElementToSection(
return await applicationFormApi.addFormElementToSubSection(
applicationFormId,
sectionId,
subsectionId,
createFormElementDto,
position
)
} catch (e: unknown) {
console.error(`Failed adding form element to section ${sectionId}:`, e)
console.error(`Failed adding form element to subsection ${subsectionId}:`, e)
return Promise.reject(e)
}
}
@@ -106,6 +106,6 @@ export function useApplicationForm() {
updateApplicationForm,
deleteApplicationFormById,
submitApplicationForm,
addFormElementToSection
addFormElementToSubSection
}
}

10
legalconsenthub/app/composables/applicationForm/useApplicationFormApi.ts
View File

@@ -54,15 +54,15 @@ export function useApplicationFormApi() {
return applicationFormApiClient.submitApplicationForm({ id })
}
async function addFormElementToSection(
async function addFormElementToSubSection(
applicationFormId: string,
sectionId: string,
subsectionId: string,
createFormElementDto: CreateFormElementDto,
position: number
): Promise<ApplicationFormDto> {
return applicationFormApiClient.addFormElementToSection({
return applicationFormApiClient.addFormElementToSubSection({
applicationFormId,
sectionId,
subsectionId,
createFormElementDto,
position
})
@@ -75,6 +75,6 @@ export function useApplicationFormApi() {
updateApplicationForm,
deleteApplicationFormById,
submitApplicationForm,
addFormElementToSection
addFormElementToSubSection
}
}

26
legalconsenthub/app/composables/useFormElementManagement.ts
View File

@@ -1,18 +1,14 @@
import type { ApplicationFormDto, CreateFormElementDto, FormElementSectionDto } from '~~/.api-client'
import type { MaybeRefOrGetter } from 'vue'
import type { ApplicationFormDto, CreateFormElementDto, FormElementDto } from '~~/.api-client'
export function useFormElementManagement(
currentFormElementSection: MaybeRefOrGetter<FormElementSectionDto | undefined>,
applicationFormId?: string
) {
const { addFormElementToSection } = useApplicationForm()
async function addInputFormToApplicationForm(position: number): Promise<ApplicationFormDto | undefined> {
const section = toValue(currentFormElementSection)
if (!section) return
const { formElements } = section
export function useFormElementManagement() {
const applicationForm = useApplicationForm()
async function addFormElementToSubSection(
applicationFormId: string | undefined,
subsectionId: string,
formElements: FormElementDto[],
position: number
): Promise<ApplicationFormDto | undefined> {
const inputFormElement: CreateFormElementDto = {
title: 'Formular ergänzen',
description: 'Bitte fügen Sie hier Ihre Ergänzungen ein.',
@@ -29,7 +25,7 @@ export function useFormElementManagement(
if (applicationFormId) {
try {
return await addFormElementToSection(applicationFormId, section.id, inputFormElement, position + 1)
return await applicationForm.addFormElementToSubSection(applicationFormId, subsectionId, inputFormElement, position + 1)
} catch (error) {
console.error('Failed to add form element:', error)
throw error
@@ -42,6 +38,6 @@ export function useFormElementManagement(
}
return {
addInputFormToApplicationForm
addFormElementToSubSection
}
}

4
legalconsenthub/app/pages/application-forms/[id]/[sectionIndex].vue
View File

@@ -83,7 +83,9 @@ const validationStatus = ref<ComplianceStatus>(ComplianceStatus.NonCritical)
const allFormElements = computed(() => {
return (
applicationForm.value?.formElementSections?.flatMap((section: FormElementSectionDto) => section.formElements) ?? []
applicationForm.value?.formElementSections?.flatMap((section: FormElementSectionDto) =>
section.formElementSubSections.flatMap((subsection) => subsection.formElements)
) ?? []
)
})

4
legalconsenthub/app/pages/create.vue
View File

@@ -78,8 +78,8 @@ const validationStatus = ref<ComplianceStatus>(ComplianceStatus.NonCritical)
const allFormElements = computed(() => {
return (
applicationFormTemplate.value?.formElementSections?.flatMap(
(section: FormElementSectionDto) => section.formElements
applicationFormTemplate.value?.formElementSections?.flatMap((section: FormElementSectionDto) =>
section.formElementSubSections.flatMap((subsection) => subsection.formElements)
) ?? []
)
})

8
legalconsenthub/app/utils/formDiff.ts
View File

@@ -72,8 +72,10 @@ export function compareApplicationForms(
function flattenFormElements(form: ApplicationFormDto): Array<{ element: FormElementDto; sectionTitle: string }> {
const elements: Array<{ element: FormElementDto; sectionTitle: string }> = []
for (const section of form.formElementSections) {
for (const element of section.formElements) {
for (const subsection of section.formElementSubSections) {
for (const element of subsection.formElements) {
elements.push({ element, sectionTitle: section.title })
}
}
}
return elements
@@ -84,8 +86,10 @@ function flattenSnapshotElements(
): Array<{ element: FormElementSnapshotDto; sectionTitle: string }> {
const elements: Array<{ element: FormElementSnapshotDto; sectionTitle: string }> = []
for (const section of snapshot.sections) {
for (const element of section.elements) {
for (const subsection of section.subsections) {
for (const element of subsection.elements) {
elements.push({ element, sectionTitle: section.title })
}
}
}
return elements