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

legalconsenthub/app/components/FormEngine.vue

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