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>

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

@@ -1,19 +1,12 @@
import type {
CreateApplicationFormDto,
CreateFormElementDto,
ApplicationFormDto,
PagedApplicationFormDto
} from '~~/.api-client'
import type { ApplicationFormDto, PagedApplicationFormDto, FormElementDto } from '~~/.api-client'
import { useApplicationFormApi } from './useApplicationFormApi'
export function useApplicationForm() {
const applicationFormApi = useApplicationFormApi()
async function createApplicationForm(
createApplicationFormDto: CreateApplicationFormDto
): Promise<ApplicationFormDto> {
async function createApplicationForm(applicationFormDto: ApplicationFormDto): Promise<ApplicationFormDto> {
try {
return await applicationFormApi.createApplicationForm(createApplicationFormDto)
return await applicationFormApi.createApplicationForm(applicationFormDto)
} catch (e: unknown) {
console.error('Failed creating application form:', e)
return Promise.reject(e)
@@ -46,6 +39,7 @@ export function useApplicationForm() {
return Promise.reject(new Error('ID or application form DTO missing'))
}
console.log('Updating application form with ID:', id, applicationFormDto)
try {
return await applicationFormApi.updateApplicationForm(id, applicationFormDto)
} catch (e: unknown) {
@@ -79,7 +73,7 @@ export function useApplicationForm() {
async function addFormElementToSubSection(
applicationFormId: string,
subsectionId: string,
createFormElementDto: CreateFormElementDto,
formElementDto: FormElementDto,
position: number
): Promise<ApplicationFormDto> {
if (!applicationFormId || !subsectionId) {
@@ -90,7 +84,7 @@ export function useApplicationForm() {
return await applicationFormApi.addFormElementToSubSection(
applicationFormId,
subsectionId,
createFormElementDto,
formElementDto,
position
)
} catch (e: unknown) {

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

@@ -1,10 +1,9 @@
import {
ApplicationFormApi,
Configuration,
type CreateApplicationFormDto,
type CreateFormElementDto,
type ApplicationFormDto,
type PagedApplicationFormDto
type PagedApplicationFormDto,
type FormElementDto
} from '~~/.api-client'
import { cleanDoubleSlashes, withoutTrailingSlash } from 'ufo'
import { wrappedFetchWrap } from '~/utils/wrappedFetch'
@@ -25,10 +24,8 @@ export function useApplicationFormApi() {
new Configuration({ basePath, fetchApi: wrappedFetchWrap(useRequestFetch()) })
)
async function createApplicationForm(
createApplicationFormDto: CreateApplicationFormDto
): Promise<ApplicationFormDto> {
return applicationFormApiClient.createApplicationForm({ createApplicationFormDto })
async function createApplicationForm(applicationFormDto: ApplicationFormDto): Promise<ApplicationFormDto> {
return applicationFormApiClient.createApplicationForm({ applicationFormDto })
}
async function getAllApplicationForms(organizationId: string): Promise<PagedApplicationFormDto> {
@@ -57,13 +54,13 @@ export function useApplicationFormApi() {
async function addFormElementToSubSection(
applicationFormId: string,
subsectionId: string,
createFormElementDto: CreateFormElementDto,
formElementDto: FormElementDto,
position: number
): Promise<ApplicationFormDto> {
return applicationFormApiClient.addFormElementToSubSection({
applicationFormId,
subsectionId,
createFormElementDto,
formElementDto,
position
})
}

13
legalconsenthub/app/composables/applicationFormTemplate/useApplicationFormTemplate.ts
View File

@@ -1,9 +1,4 @@
import {
type CreateApplicationFormDto,
type ApplicationFormDto,
type PagedApplicationFormDto,
ResponseError
} from '~~/.api-client'
import { type ApplicationFormDto, type PagedApplicationFormDto, ResponseError } from '~~/.api-client'
import { useApplicationFormTemplateApi } from './useApplicationFormTemplateApi'
const currentApplicationForm: Ref<ApplicationFormDto | undefined> = ref()
@@ -11,11 +6,9 @@ const currentApplicationForm: Ref<ApplicationFormDto | undefined> = ref()
export async function useApplicationFormTemplate() {
const applicationFormApi = await useApplicationFormTemplateApi()
async function createApplicationFormTemplate(
createApplicationFormDto: CreateApplicationFormDto
): Promise<ApplicationFormDto> {
async function createApplicationFormTemplate(applicationFormDto: ApplicationFormDto): Promise<ApplicationFormDto> {
try {
currentApplicationForm.value = await applicationFormApi.createApplicationFormTemplate(createApplicationFormDto)
currentApplicationForm.value = await applicationFormApi.createApplicationFormTemplate(applicationFormDto)
return currentApplicationForm.value
} catch (e: unknown) {
if (e instanceof ResponseError) {

8
legalconsenthub/app/composables/applicationFormTemplate/useApplicationFormTemplateApi.ts
View File

@@ -1,5 +1,5 @@
import { ApplicationFormTemplateApi, Configuration } from '../../../.api-client'
import type { CreateApplicationFormDto, ApplicationFormDto, PagedApplicationFormDto } from '~~/.api-client'
import type { ApplicationFormDto, PagedApplicationFormDto } from '~~/.api-client'
import { cleanDoubleSlashes, withoutTrailingSlash } from 'ufo'
import { wrappedFetchWrap } from '~/utils/wrappedFetch'
@@ -19,10 +19,8 @@ export async function useApplicationFormTemplateApi() {
new Configuration({ basePath, fetchApi: wrappedFetchWrap(useRequestFetch()) })
)
async function createApplicationFormTemplate(
createApplicationFormDto: CreateApplicationFormDto
): Promise<ApplicationFormDto> {
return applicationFormApiClient.createApplicationFormTemplate({ createApplicationFormDto })
async function createApplicationFormTemplate(applicationFormDto: ApplicationFormDto): Promise<ApplicationFormDto> {
return applicationFormApiClient.createApplicationFormTemplate({ applicationFormDto })
}
async function getAllApplicationFormTemplates(): Promise<PagedApplicationFormDto> {

2
legalconsenthub/app/composables/index.ts
View File

@@ -7,3 +7,5 @@ export { useNotification } from './notification/useNotification'
export { useNotificationApi } from './notification/useNotificationApi'
export { useUser } from './user/useUser'
export { useUserApi } from './user/useUserApi'
export { useSectionSpawning } from './useSectionSpawning'
export { useClonableElements } from './useClonableElements'

14
legalconsenthub/app/composables/useApplicationFormValidator.ts
View File

@@ -19,8 +19,10 @@ export function useApplicationFormValidator() {
): Map<FormElementId, ComplianceStatus> {
formElementComplianceMap.value.clear()
formElements.forEach((formElement) => {
if (visibilityMap && visibilityMap.get(formElement.id) === false) {
formElements.forEach((formElement, index) => {
const elementKey = formElement.id || formElement.reference || `element-${index}`
if (visibilityMap && visibilityMap.get(elementKey) === false) {
return
}
@@ -49,15 +51,15 @@ export function useApplicationFormValidator() {
const currentHighestComplianceStatusPos =
Object.values(ComplianceStatus).indexOf(currentHighestComplianceStatus)
if (formElementComplianceMap.value.has(formElement.id)) {
const newComplianceStatus = formElementComplianceMap.value.get(formElement.id)!
if (formElementComplianceMap.value.has(elementKey)) {
const newComplianceStatus = formElementComplianceMap.value.get(elementKey)!
const newComplianceStatusPos = Object.values(ComplianceStatus).indexOf(newComplianceStatus)
if (newComplianceStatusPos > currentHighestComplianceStatusPos) {
formElementComplianceMap.value.set(formElement.id, newComplianceStatus)
formElementComplianceMap.value.set(elementKey, newComplianceStatus)
}
} else {
formElementComplianceMap.value.set(formElement.id, currentHighestComplianceStatus)
formElementComplianceMap.value.set(elementKey, currentHighestComplianceStatus)
}
})
})

48
legalconsenthub/app/composables/useClonableElements.ts Normal file
View File

@@ -0,0 +1,48 @@
import type { FormElementDto } from '~~/.api-client'
export function useClonableElements() {
function cloneElement(element: FormElementDto, existingElements: FormElementDto[]): FormElementDto {
const newReference = element.reference ? generateNextReference(existingElements, element.reference) : undefined
const isTextField = element.type === 'TEXTAREA' || element.type === 'TEXTFIELD'
const clonedElement = JSON.parse(JSON.stringify(element)) as FormElementDto
const resetOptions = clonedElement.options.map((option) => ({
...option,
value: isTextField ? '' : option.value
}))
return {
...clonedElement,
id: undefined,
formElementSubSectionId: undefined,
reference: newReference,
options: resetOptions
}
}
function generateNextReference(existingElements: FormElementDto[], baseReference: string): string {
const { base } = extractReferenceBase(baseReference)
const existingSuffixes = existingElements
.filter((el) => el.reference && el.reference.startsWith(base))
.map((el) => {
const { suffix } = extractReferenceBase(el.reference!)
return suffix
})
const maxSuffix = existingSuffixes.length > 0 ? Math.max(...existingSuffixes) : 0
return `${base}_${maxSuffix + 1}`
}
function extractReferenceBase(reference: string): { base: string; suffix: number } {
const match = reference.match(/^(.+?)_(\d+)$/)
if (match && match[1] && match[2]) {
return { base: match[1], suffix: parseInt(match[2], 10) }
}
return { base: reference, suffix: 1 }
}
return {
cloneElement
}
}

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

@@ -1,15 +1,15 @@
import type { ApplicationFormDto, CreateFormElementDto, FormElementDto } from '~~/.api-client'
import type { FormElementDto } from '~~/.api-client'
export function useFormElementManagement() {
const applicationForm = useApplicationForm()
function addInputFormElement(elements: FormElementDto[], position: number): FormElementDto[] {
const inputFormElement = createInputFormElement()
const updatedElements = [...elements]
updatedElements.splice(position + 1, 0, inputFormElement)
return updatedElements
}
async function addFormElementToSubSection(
applicationFormId: string | undefined,
subsectionId: string,
formElements: FormElementDto[],
position: number
): Promise<ApplicationFormDto | undefined> {
const inputFormElement: CreateFormElementDto = {
function createInputFormElement(): FormElementDto {
return {
title: 'Formular ergänzen',
description: 'Bitte fügen Sie hier Ihre Ergänzungen ein.',
options: [
@@ -22,27 +22,9 @@ export function useFormElementManagement() {
],
type: 'TITLE_BODY_TEXTFIELDS'
}
if (applicationFormId) {
try {
return await applicationForm.addFormElementToSubSection(
applicationFormId,
subsectionId,
inputFormElement,
position + 1
)
} catch (error) {
console.error('Failed to add form element:', error)
throw error
}
} else {
// @ts-expect-error Add CreateFormElementDto to formElements array. ID will be generated by the backend.
formElements.splice(position + 1, 0, inputFormElement)
return undefined
}
}
return {
addFormElementToSubSection
addInputFormElement
}
}

11
legalconsenthub/app/composables/useFormElementVisibility.ts
View File

@@ -8,7 +8,10 @@ export function useFormElementVisibility() {
allFormElements.forEach((element) => {
const isVisible = isElementVisible(element, formElementsByRef, visibilityMap)
visibilityMap.set(element.id, isVisible)
const key = element.id || element.reference
if (key) {
visibilityMap.set(key, isVisible)
}
})
return visibilityMap
@@ -42,10 +45,10 @@ export function useFormElementVisibility() {
const sourceValue = getFormElementValue(sourceElement)
const operator = condition.operator || VCOperator.Equals
const conditionMet = evaluateCondition(sourceValue, condition.expectedValue, operator)
const operator = condition.formElementOperator || VCOperator.Equals
const conditionMet = evaluateCondition(sourceValue, condition.formElementExpectedValue, operator)
return condition.conditionType === VCType.Show ? conditionMet : !conditionMet
return condition.formElementConditionType === VCType.Show ? conditionMet : !conditionMet
}
function getFormElementValue(element: FormElementDto): string {

6
legalconsenthub/app/composables/useFormStepper.ts
View File

@@ -20,9 +20,11 @@ export function useFormStepper(
const sections = computed(() => toValue(formElementSections) ?? [])
const visibleSections = computed(() => sections.value.filter((section) => !section.isTemplate))
const stepperItems = computed(() => {
const items: StepperItem[] = []
sections.value.forEach((section: FormElementSectionDto) => {
visibleSections.value.forEach((section: FormElementSectionDto) => {
items.push({
title: section.shortTitle,
description: section.description
@@ -32,7 +34,7 @@ export function useFormStepper(
})
const currentFormElementSection = computed<FormElementSectionDto | undefined>(
() => sections.value[activeStepperItemIndex.value]
() => visibleSections.value[activeStepperItemIndex.value]
)
async function navigateStepper(direction: 'forward' | 'backward') {

197
legalconsenthub/app/composables/useSectionSpawning.ts Normal file
View File

@@ -0,0 +1,197 @@
import type { FormElementDto, FormElementSectionDto, SectionSpawnTriggerDto } from '~~/.api-client'
import { VisibilityConditionOperator, VisibilityConditionType } from '~~/.api-client'
export function useSectionSpawning() {
function processSpawnTriggers(
sections: FormElementSectionDto[],
updatedFormElements: FormElementDto[]
): FormElementSectionDto[] {
let resultSections = sections
for (const formElement of updatedFormElements) {
if (!formElement.sectionSpawnTrigger || !formElement.reference) {
continue
}
// Extract trigger configuration and current element value
const trigger = formElement.sectionSpawnTrigger
const triggerValue = getFormElementValue(formElement)
const shouldSpawn = shouldSpawnSection(trigger, triggerValue)
// Use resultSections to check for existing spawned sections (in case multiple spawns happen)
const existingSpawnedSections = getSpawnedSectionsForElement(resultSections, formElement.reference)
// Handle three spawn states:
// 1. Condition met but no section spawned yet → create new section
if (shouldSpawn && existingSpawnedSections.length === 0) {
resultSections = spawnNewSection(resultSections, formElement, trigger, triggerValue)
}
// 2. Condition no longer met but section exists → remove spawned section
else if (!shouldSpawn && existingSpawnedSections.length > 0) {
resultSections = removeSpawnedSections(resultSections, formElement.reference)
}
// 3. Condition still met and section exists → update section titles if value changed
else if (shouldSpawn && existingSpawnedSections.length > 0 && triggerValue) {
resultSections = updateSpawnedSectionTitles(resultSections, formElement.reference, trigger, triggerValue)
}
}
return resultSections
}
function spawnNewSection(
sections: FormElementSectionDto[],
element: FormElementDto,
trigger: SectionSpawnTriggerDto,
triggerValue: string
): FormElementSectionDto[] {
const templateSection = findTemplateSection(sections, trigger.templateReference)
if (!templateSection) {
return sections
}
const newSection = spawnSectionFromTemplate(templateSection, element.reference!, triggerValue)
return sections.concat(newSection as FormElementSectionDto)
}
function updateSpawnedSectionTitles(
sections: FormElementSectionDto[],
elementReference: string,
trigger: SectionSpawnTriggerDto,
triggerValue: string
): FormElementSectionDto[] {
const template = findTemplateSection(sections, trigger.templateReference)
if (!template) {
return sections
}
const hasTitleTemplate = template.titleTemplate
const hasShortTitleTemplate = template.shortTitle?.includes('{{triggerValue}}')
const hasDescriptionTemplate = template.description?.includes('{{triggerValue}}')
if (!hasTitleTemplate && !hasShortTitleTemplate && !hasDescriptionTemplate) {
return sections
}
return sections.map((section) => {
if (section.spawnedFromElementReference === elementReference && !section.isTemplate) {
const sectionUpdate: Partial<FormElementSectionDto> = {}
if (hasTitleTemplate) {
sectionUpdate.title = interpolateTitle(template.titleTemplate!, triggerValue)
}
if (hasShortTitleTemplate && template.shortTitle) {
sectionUpdate.shortTitle = interpolateTitle(template.shortTitle, triggerValue)
}
if (hasDescriptionTemplate && template.description) {
sectionUpdate.description = interpolateTitle(template.description, triggerValue)
}
return { ...section, ...sectionUpdate }
}
return section
})
}
function removeSpawnedSections(sections: FormElementSectionDto[], elementReference: string): FormElementSectionDto[] {
return sections.filter((section) => section.spawnedFromElementReference !== elementReference || section.isTemplate)
}
function spawnSectionFromTemplate(
templateSection: FormElementSectionDto,
triggerElementReference: string,
triggerValue: string
): FormElementSectionDto {
const clonedSection = JSON.parse(JSON.stringify(templateSection)) as FormElementSectionDto
const title = templateSection.titleTemplate
? interpolateTitle(templateSection.titleTemplate, triggerValue)
: templateSection.title
const shortTitle = templateSection.shortTitle?.includes('{{triggerValue}}')
? interpolateTitle(templateSection.shortTitle, triggerValue)
: templateSection.shortTitle
const description = templateSection.description?.includes('{{triggerValue}}')
? interpolateTitle(templateSection.description, triggerValue)
: templateSection.description
return {
...clonedSection,
id: undefined,
applicationFormId: undefined,
title,
shortTitle,
description,
isTemplate: false,
spawnedFromElementReference: triggerElementReference,
formElementSubSections: clonedSection.formElementSubSections.map((subsection) => ({
...subsection,
id: undefined,
formElementSectionId: undefined,
formElements: subsection.formElements.map((element) => ({
...element,
id: undefined,
formElementSubSectionId: undefined
}))
}))
}
}
function shouldSpawnSection(trigger: SectionSpawnTriggerDto, triggerElementValue: string): boolean {
const operator = trigger.sectionSpawnOperator || VisibilityConditionOperator.Equals
const isConditionMet = evaluateCondition(triggerElementValue, trigger.sectionSpawnExpectedValue || '', operator)
return trigger.sectionSpawnConditionType === VisibilityConditionType.Show ? isConditionMet : !isConditionMet
}
function getSpawnedSectionsForElement(
sections: FormElementSectionDto[],
elementReference: string
): FormElementSectionDto[] {
return sections.filter((section) => !section.isTemplate && section.spawnedFromElementReference === elementReference)
}
function findTemplateSection(
sections: FormElementSectionDto[],
templateReference: string
): FormElementSectionDto | undefined {
return sections.find((section) => section.isTemplate && section.templateReference === templateReference)
}
function evaluateCondition(
actualValue: string,
expectedValue: string,
operator: VisibilityConditionOperator
): boolean {
switch (operator) {
case VisibilityConditionOperator.Equals:
return actualValue.toLowerCase() === expectedValue.toLowerCase()
case VisibilityConditionOperator.NotEquals:
return actualValue.toLowerCase() !== expectedValue.toLowerCase()
case VisibilityConditionOperator.IsEmpty:
return actualValue === ''
case VisibilityConditionOperator.IsNotEmpty:
return actualValue !== ''
default:
return false
}
}
function interpolateTitle(titleTemplate: string, triggerValue: string): string {
return titleTemplate.replace(/\{\{triggerValue\}\}/g, triggerValue)
}
function getFormElementValue(element: FormElementDto): string {
if (element.type === 'TEXTAREA' || element.type === 'TEXTFIELD') {
return element.options[0]?.value || ''
}
const selectedOption = element.options.find((option) => option.value === 'true')
return selectedOption?.label || ''
}
return {
processSpawnTriggers
}
}

5
legalconsenthub/app/composables/user/useUserApi.ts
View File

@@ -14,9 +14,7 @@ export function useUserApi() {
)
)
const userApiClient = new UserApi(
new Configuration({ basePath, fetchApi: wrappedFetchWrap(useRequestFetch()) })
)
const userApiClient = new UserApi(new Configuration({ basePath, fetchApi: wrappedFetchWrap(useRequestFetch()) }))
async function getUserById(id: string): Promise<UserDto> {
return userApiClient.getUserById({ id })
@@ -39,4 +37,3 @@ export function useUserApi() {
deleteUser
}
}

12
legalconsenthub/app/pages/administration.vue
View File

@@ -40,7 +40,8 @@
<div>
<h3 class="font-semibold text-lg">{{ currentTemplate.name }}</h3>
<p class="text-sm text-muted mt-1">
{{ $t('templates.lastModified') }} {{ formatDate(new Date(currentTemplate.modifiedAt)) }}
{{ $t('templates.lastModified') }}
{{ currentTemplate.modifiedAt ? formatDate(new Date(currentTemplate.modifiedAt)) : '-' }}
</p>
</div>
<UBadge v-if="hasUnsavedChanges" :label="$t('templates.unsavedChanges')" color="warning" variant="subtle" />
@@ -206,17 +207,20 @@ async function saveTemplate() {
try {
const parsedData = JSON.parse(editorContent.value)
const dataWithDates = convertDates(parsedData) as ApplicationFormDto
const dataWithDates = convertDates(parsedData)
if (currentTemplate.value?.id) {
currentTemplate.value = await updateApplicationFormTemplate(currentTemplate.value.id, dataWithDates)
currentTemplate.value = await updateApplicationFormTemplate(
currentTemplate.value.id,
dataWithDates as ApplicationFormDto
)
toast.add({
title: $t('common.success'),
description: $t('templates.updated'),
color: 'success'
})
} else {
currentTemplate.value = await createApplicationFormTemplate(dataWithDates)
currentTemplate.value = await createApplicationFormTemplate(dataWithDates as ApplicationFormDto)
toast.add({
title: $t('common.success'),
description: $t('templates.created'),

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

@@ -34,12 +34,13 @@
<FormStepperWithNavigation
:form-element-sections="applicationForm.formElementSections"
:initial-section-index="sectionIndex"
:application-form-id="applicationForm.id"
:application-form-id="applicationForm.id ?? undefined"
:disabled="isReadOnly"
@save="onSave"
@submit="onSubmit"
@navigate="handleNavigate"
@add-input-form="handleAddInputForm"
@update:form-element-sections="handleFormElementSectionsUpdate"
/>
</div>
</template>
@@ -87,7 +88,7 @@ const sectionIndex = computed(() => {
})
const isReadOnly = computed(() => {
return applicationForm.value?.createdBy.keycloakId !== user.value?.keycloakId
return applicationForm.value?.createdBy?.keycloakId !== user.value?.keycloakId
})
const validationMap = ref<Map<FormElementId, ComplianceStatus> | undefined>()
@@ -115,7 +116,7 @@ watch(
)
async function onSave() {
if (applicationForm.value) {
if (applicationForm.value?.id) {
const updated = await updateForm(applicationForm.value.id, applicationForm.value)
if (updated) {
updateApplicationForm(updated)
@@ -125,7 +126,7 @@ async function onSave() {
}
async function onSubmit() {
if (applicationForm.value) {
if (applicationForm.value?.id) {
await submitApplicationForm(applicationForm.value.id)
await navigateTo('/')
toast.add({ title: $t('common.success'), description: $t('applicationForms.submitted'), color: 'success' })
@@ -141,4 +142,10 @@ function handleAddInputForm(updatedForm: ApplicationFormDto | undefined) {
updateApplicationForm(updatedForm)
}
}
function handleFormElementSectionsUpdate(sections: FormElementSectionDto[]) {
if (applicationForm.value) {
applicationForm.value.formElementSections = sections
}
}
</script>

5
legalconsenthub/app/pages/application-forms/[id]/versions.vue
View File

@@ -16,7 +16,7 @@
<template #body>
<div class="p-6">
<VersionHistory
v-if="applicationForm"
v-if="applicationForm?.id"
:application-form-id="applicationForm.id"
:current-form="applicationForm"
@restored="handleRestored"
@@ -46,6 +46,9 @@ async function handleRestored() {
description: $t('versions.restoredDescription'),
color: 'success'
})
if (!applicationForm.value?.id) {
return
}
router.push(`/application-forms/${applicationForm.value.id}/0`)
}
</script>

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

@@ -28,6 +28,7 @@
@save="onSave"
@submit="onSubmit"
@add-input-form="handleAddInputForm"
@update:form-element-sections="handleFormElementSectionsUpdate"
>
<UFormField :label="$t('common.name')" class="mb-4">
<UInput v-model="applicationFormTemplate.name" class="w-full" />
@@ -110,7 +111,7 @@ async function onSave() {
async function onSubmit() {
const applicationForm = await prepareAndCreateApplicationForm()
if (applicationForm) {
if (applicationForm?.id) {
await submitApplicationForm(applicationForm.id)
await navigateTo('/')
toast.add({ title: $t('common.success'), description: $t('applicationForms.submitted'), color: 'success' })
@@ -123,6 +124,12 @@ function handleAddInputForm() {
// No action needed here
}
function handleFormElementSectionsUpdate(sections: FormElementSectionDto[]) {
if (applicationFormTemplate.value) {
applicationFormTemplate.value.formElementSections = sections
}
}
async function prepareAndCreateApplicationForm() {
if (!applicationFormTemplate.value) {
console.error('Application form data is undefined')

29
legalconsenthub/app/pages/index.vue
View File

@@ -49,9 +49,9 @@
<div class="flex flex-col gap-4 sm:gap-6 w-full lg:max-w-4xl mx-auto p-4">
<UCard
v-for="(applicationFormElem, index) in applicationForms"
:key="applicationFormElem.id"
:key="applicationFormElem.id ?? index"
class="cursor-pointer hover:ring-2 hover:ring-primary transition-all duration-200"
@click="navigateTo(`application-forms/${applicationFormElem.id}/0`)"
@click="openApplicationForm(applicationFormElem.id)"
>
<template #header>
<div class="flex items-start justify-between gap-3">
@@ -63,6 +63,7 @@
</div>
<div class="flex items-center gap-2">
<UBadge
v-if="applicationFormElem.status"
:label="applicationFormElem.status"
:color="getStatusColor(applicationFormElem.status)"
variant="subtle"
@@ -87,8 +88,11 @@
<UIcon name="i-lucide-pencil" class="size-4 text-muted shrink-0" />
<span class="text-muted">
{{ $t('applicationForms.lastEditedBy') }}
<span class="font-medium text-highlighted">{{ applicationFormElem.lastModifiedBy.name }}</span>
{{ $t('common.on') }} {{ formatDate(applicationFormElem.modifiedAt) }}
<span class="font-medium text-highlighted">
{{ applicationFormElem.lastModifiedBy?.name ?? '-' }}
</span>
{{ $t('common.on') }}
{{ applicationFormElem.modifiedAt ? formatDate(applicationFormElem.modifiedAt) : '-' }}
</span>
</div>
@@ -96,8 +100,11 @@
<UIcon name="i-lucide-user-plus" class="size-4 text-muted shrink-0" />
<span class="text-muted">
{{ $t('applicationForms.createdBy') }}
<span class="font-medium text-highlighted">{{ applicationFormElem.createdBy.name }}</span>
{{ $t('common.on') }} {{ formatDate(applicationFormElem.createdAt) }}
<span class="font-medium text-highlighted">
{{ applicationFormElem.createdBy?.name ?? '-' }}
</span>
{{ $t('common.on') }}
{{ applicationFormElem.createdAt ? formatDate(applicationFormElem.createdAt) : '-' }}
</span>
</div>
</div>
@@ -177,6 +184,9 @@ const applicationForms = computed({
})
function getLinksForApplicationForm(applicationForm: ApplicationFormDto) {
if (!applicationForm.id) {
return []
}
return [
{
label: $t('common.delete'),
@@ -206,4 +216,11 @@ async function deleteApplicationForm(applicationFormId: string) {
)
isDeleteModalOpen.value = false
}
function openApplicationForm(applicationFormId: string | null | undefined) {
if (!applicationFormId) {
return
}
navigateTo(`application-forms/${applicationFormId}/0`)
}
</script>