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

major(fullstack): Add dynamic section spawning, removal of app. form create DTOs,

Browse Source
This commit is contained in:
Denis Lugowski
2025-12-15 19:12:00 +01:00
parent 7bacff967e
commit 844ab8661c
47 changed files with 1283 additions and 511 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
legalconsenthub/app/components/DeleteModal.vue
View File

@@ -5,7 +5,7 @@
</template>
<template #footer>
<UButton :label="$t('common.cancel')" color="neutral" variant="outline" @click="$emit('update:isOpen', false)" />
<UButton :label="$t('common.delete')" color="neutral" @click="$emit('delete', applicationFormToDelete.id)" />
<UButton :label="$t('common.delete')" color="neutral" :disabled="!applicationFormToDelete.id" @click="onDelete" />
</template>
</UModal>
</template>
@@ -13,13 +13,20 @@
<script setup lang="ts">
import type { ApplicationFormDto } from '~~/.api-client'
defineEmits<{
const emit = defineEmits<{
(e: 'delete', id: string): void
(e: 'update:isOpen', value: boolean): void
}>()
defineProps<{
const props = defineProps<{
applicationFormToDelete: ApplicationFormDto
isOpen: boolean
}>()
function onDelete() {
if (!props.applicationFormToDelete.id) {
return
}
emit('delete', props.applicationFormToDelete.id)
}
</script>

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

@@ -1,5 +1,5 @@
<template>
<template v-for="(formElement, index) in visibleFormElements" :key="formElement.id">
<template v-for="(formElement, index) in visibleFormElements" :key="getElementKey(formElement, index)">
<div class="group flex py-3 lg:py-4">
<div class="flex-auto">
<p v-if="formElement.title" class="font-semibold">{{ formElement.title }}</p>
@@ -8,10 +8,20 @@
:is="getResolvedComponent(formElement)"
:form-options="formElement.options"
:disabled="props.disabled"
@update:form-options="updateFormOptions($event, formElement.id)"
@update:form-options="updateFormOptions($event, index)"
/>
<div v-if="formElement.isClonable && !props.disabled" class="mt-3">
<UButton
variant="outline"
size="sm"
leading-icon="i-lucide-copy-plus"
@click="handleCloneElement(formElement, index)"
>
{{ $t('applicationForms.formElements.addAnother') }}
</UButton>
</div>
<TheComment
v-if="applicationFormId && activeFormElement === formElement.id"
v-if="applicationFormId && formElement.id && activeFormElement === formElement.id"
:form-element-id="formElement.id"
:application-form-id="applicationFormId"
:comments="comments?.[formElement.id]"
@@ -20,13 +30,13 @@
<div
:class="[
'transition-opacity duration-200',
openDropdownId === formElement.id ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'
openDropdownId === getElementKey(formElement, index) ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'
]"
>
<UDropdownMenu
:items="getDropdownItems(formElement.id, index)"
:items="getDropdownItems(getElementKey(formElement, index), index)"
:content="{ align: 'end' }"
@update:open="(isOpen) => handleDropdownToggle(formElement.id, isOpen)"
@update:open="(isOpen) => handleDropdownToggle(getElementKey(formElement, index), isOpen)"
>
<UButton icon="i-lucide-ellipsis-vertical" color="neutral" variant="ghost" />
</UDropdownMenu>
@@ -54,6 +64,7 @@ const emit = defineEmits<{
(e: 'update:modelValue', formElementDto: FormElementDto[]): void
(e: 'click:comments', formElementId: string): void
(e: 'add:input-form', position: number): void
(e: 'clone:element', element: FormElementDto, position: number): void
}>()
const commentStore = useCommentStore()
@@ -69,8 +80,15 @@ const route = useRoute()
const activeFormElement = ref('')
const openDropdownId = ref<string | null>(null)
function getElementKey(element: FormElementDto, index: number): string {
return element.id || element.reference || `element-${index}`
}
const visibleFormElements = computed(() => {
return props.modelValue.filter((element) => props.visibilityMap.get(element.id) !== false)
return props.modelValue.filter((element) => {
const key = element.id || element.reference
return key ? props.visibilityMap.get(key) !== false : true
})
})
function handleDropdownToggle(formElementId: string, isOpen: boolean) {
@@ -121,10 +139,17 @@ function getDropdownItems(formElementId: string, formElementPosition: number): D
return [items]
}
function updateFormOptions(formOptions: FormOptionDto[], formElementId: string) {
console.log('Updating form options for element ID:', formElementId, formOptions)
function updateFormOptions(formOptions: FormOptionDto[], formElementIndex: number) {
const targetElement = visibleFormElements.value[formElementIndex]
if (!targetElement) {
return
}
const updatedModelValue = props.modelValue.map((element) => {
if (element.id === formElementId) {
if (targetElement.id && element.id === targetElement.id) {
return { ...element, options: formOptions }
}
if (targetElement.reference && element.reference === targetElement.reference) {
return { ...element, options: formOptions }
}
return element
@@ -140,4 +165,8 @@ function toggleComments(formElementId: string) {
activeFormElement.value = formElementId
emit('click:comments', formElementId)
}
function handleCloneElement(formElement: FormElementDto, position: number) {
emit('clone:element', formElement, position)
}
</script>

160
legalconsenthub/app/components/FormStepperWithNavigation.vue
View File

@@ -9,8 +9,8 @@
</h1>
<UCard
v-for="subsection in visibleSubsections"
:key="subsection.id"
v-for="{ subsection, sectionIndex } in visibleSubsections"
:key="getSubsectionKey(currentFormElementSection, sectionIndex, subsection)"
variant="subtle"
class="mb-6"
>
@@ -18,13 +18,24 @@
<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"
:visibility-map="visibilityMap"
:application-form-id="applicationFormId"
:disabled="disabled"
@add:input-form="(position) => handleAddInputForm(position, subsection.id)"
/>
<FormEngine
:model-value="subsection.formElements"
:visibility-map="visibilityMap"
:application-form-id="applicationFormId"
:disabled="disabled"
@update:model-value="
(elements) =>
handleFormElementUpdate(elements, getSubsectionKey(currentFormElementSection, sectionIndex, subsection))
"
@add:input-form="
(position) =>
handleAddInputForm(position, getSubsectionKey(currentFormElementSection, sectionIndex, subsection))
"
@clone:element="
(element, position) =>
handleCloneElement(element, position, getSubsectionKey(currentFormElementSection, sectionIndex, subsection))
"
/>
</UCard>
<UCard v-if="visibleSubsections.length === 0" variant="subtle" class="mb-6">
@@ -62,7 +73,12 @@
</template>
<script setup lang="ts">
import type { ApplicationFormDto, FormElementSectionDto } from '~~/.api-client'
import type {
ApplicationFormDto,
FormElementSectionDto,
FormElementDto,
FormElementSubSectionDto
} from '~~/.api-client'
const props = defineProps<{
formElementSections: FormElementSectionDto[]
@@ -75,6 +91,7 @@ const emit = defineEmits<{
save: []
submit: []
'add-input-form': [updatedForm: ApplicationFormDto | undefined]
'update:formElementSections': [sections: FormElementSectionDto[]]
navigate: [{ direction: 'forward' | 'backward'; index: number }]
}>()
@@ -82,16 +99,16 @@ const { stepper, activeStepperItemIndex, stepperItems, currentFormElementSection
computed(() => props.formElementSections)
)
const { evaluateVisibility } = useFormElementVisibility()
const { processSpawnTriggers } = useSectionSpawning()
const { cloneElement } = useClonableElements()
const allFormElements = computed(() => {
return props.formElementSections.flatMap(section =>
section.formElementSubSections?.flatMap(subsection =>
subsection.formElements
) ?? []
return props.formElementSections.flatMap(
(section) => section.formElementSubSections?.flatMap((subsection) => subsection.formElements) ?? []
)
})
const { evaluateVisibility } = useFormElementVisibility()
const visibilityMap = computed(() => {
return evaluateVisibility(allFormElements.value)
})
@@ -100,10 +117,20 @@ const visibleSubsections = computed(() => {
if (!currentFormElementSection.value?.formElementSubSections) {
return []
}
return currentFormElementSection.value.formElementSubSections.filter(subsection => {
return subsection.formElements.some(element => visibilityMap.value.get(element.id) !== false)
})
return currentFormElementSection.value.formElementSubSections
.map((subsection) => ({ subsection, sectionIndex: currentSectionIndex.value }))
.filter(({ subsection }) => {
return subsection.formElements.some((element) => {
const key = element.id || element.reference
return key ? visibilityMap.value.get(key) !== false : true
})
})
})
const currentSectionIndex = computed(() => {
if (!currentFormElementSection.value) return -1
return props.formElementSections.indexOf(currentFormElementSection.value)
})
onMounted(() => {
@@ -112,27 +139,90 @@ onMounted(() => {
}
})
async function handleAddInputForm(position: number, subsectionId: string) {
const subsection = props.formElementSections
.flatMap((section) => section.formElementSubSections)
.find((sub) => sub.id === subsectionId)
async function handleAddInputForm(position: number, subsectionKey: string) {
const foundSubsection = findSubsectionByKey(subsectionKey)
if (!foundSubsection) return
if (!subsection) {
return
const { addInputFormElement } = useFormElementManagement()
const updatedElements = addInputFormElement(foundSubsection.formElements, position)
const updatedSections = updateSubsectionElements(props.formElementSections, subsectionKey, updatedElements)
emit('update:formElementSections', updatedSections)
}
function findSubsectionByKey(subsectionKey: string): FormElementSubSectionDto | undefined {
for (let sectionIdx = 0; sectionIdx < props.formElementSections.length; sectionIdx++) {
const section = props.formElementSections[sectionIdx]
if (!section) continue
for (let i = 0; i < section.formElementSubSections.length; i++) {
const subsection = section.formElementSubSections[i]
if (subsection && getSubsectionKey(section, sectionIdx, subsection) === subsectionKey) {
return subsection
}
}
}
const { addFormElementToSubSection } = useFormElementManagement()
const updatedForm = await addFormElementToSubSection(
props.applicationFormId,
subsectionId,
subsection.formElements,
position
)
emit('add-input-form', updatedForm)
return undefined
}
async function handleNavigate(direction: 'forward' | 'backward') {
await navigateStepper(direction)
emit('navigate', { direction, index: activeStepperItemIndex.value })
}
function handleCloneElement(element: FormElementDto, position: number, subsectionKey: string) {
const clonedElement = cloneElement(element, allFormElements.value)
const updatedSections = props.formElementSections.map((section, sectionIdx) => ({
...section,
formElementSubSections: section.formElementSubSections.map((subsection) => {
if (getSubsectionKey(section, sectionIdx, subsection) === subsectionKey) {
const newFormElements = [...subsection.formElements]
newFormElements.splice(position + 1, 0, clonedElement as FormElementDto)
return { ...subsection, formElements: newFormElements }
}
return subsection
})
}))
emit('update:formElementSections', updatedSections)
}
function handleFormElementUpdate(updatedFormElements: FormElementDto[], subsectionKey: string) {
let updatedSections = updateSubsectionElements(props.formElementSections, subsectionKey, updatedFormElements)
updatedSections = processSpawnTriggers(updatedSections, updatedFormElements)
emit('update:formElementSections', updatedSections)
}
function getSubsectionKey(
section: FormElementSectionDto | undefined,
sectionIndex: number,
subsection: FormElementSubSectionDto
): string {
if (subsection.id) {
return subsection.id
}
const spawnedFrom = section?.spawnedFromElementReference ?? 'root'
const templateRef = section?.templateReference ?? 'no_tmpl'
const title = subsection.title ?? ''
return `spawned:${spawnedFrom}|tmpl:${templateRef}|sec:${sectionIndex}|title:${title}`
}
function updateSubsectionElements(
sections: FormElementSectionDto[],
subsectionKey: string,
updatedFormElements: FormElementDto[]
): FormElementSectionDto[] {
return sections.map((section, sectionIdx) => ({
...section,
formElementSubSections: section.formElementSubSections.map((subsection) => {
if (getSubsectionKey(section, sectionIdx, subsection) === subsectionKey) {
return { ...subsection, formElements: updatedFormElements }
}
return subsection
})
}))
}
</script>

6
legalconsenthub/app/components/formelements/TheDate.vue
View File

@@ -51,9 +51,9 @@ const dateValue = computed({
const firstOption = props.formOptions[0]
if (firstOption) {
const updatedModelValue = [...props.formOptions]
updatedModelValue[0] = {
...firstOption,
value: val ? val.toString() : ''
updatedModelValue[0] = {
...firstOption,
value: val ? val.toString() : ''
}
emit('update:formOptions', updatedModelValue)
}

1
legalconsenthub/app/components/formelements/TheTextarea.vue
View File

@@ -28,4 +28,3 @@ const modelValue = computed({
}
})
</script>