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

legalconsenthub/app/components/FormStepperWithNavigation.vue

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