fix(frontend): Keep values for newly added form input fields

legalconsenthub/app/components/FormEngine.vue

@@ -1,48 +1,69 @@
 <template>
-  <template v-for="(formElement, index) in visibleFormElements" :key="getElementKey(formElement, index)">
+  <template
+    v-for="(formElementItem, visibleIndex) in visibleFormElements"
+    :key="getElementKey(formElementItem.formElement, formElementItem.indexInSubsection)"
+  >
     <div class="group flex py-3 lg:py-4">
       <div class="flex-auto">
-        <p v-if="formElement.title" class="font-semibold">{{ formElement.title }}</p>
+        <p v-if="formElementItem.formElement.title" class="font-semibold">{{ formElementItem.formElement.title }}</p>
-        <p v-if="formElement.description" class="text-dimmed pb-3">{{ formElement.description }}</p>
+        <p v-if="formElementItem.formElement.description" class="text-dimmed pb-3">
+          {{ formElementItem.formElement.description }}
+        </p>
         <component
-          :is="getResolvedComponent(formElement)"
+          :is="getResolvedComponent(formElementItem.formElement)"
-          :form-options="formElement.options"
+          :form-options="formElementItem.formElement.options"
           :disabled="props.disabled"
-          @update:form-options="updateFormOptions($event, index)"
+          @update:form-options="updateFormOptions($event, formElementItem)"
         />
-        <div v-if="formElement.isClonable && !props.disabled" class="mt-3">
+        <div v-if="formElementItem.formElement.isClonable && !props.disabled" class="mt-3">
           <UButton
             variant="outline"
             size="sm"
             leading-icon="i-lucide-copy-plus"
-            @click="handleCloneElement(formElement, index)"
+            @click="handleCloneElement(formElementItem.formElement, formElementItem.indexInSubsection)"
           >
             {{ $t('applicationForms.formElements.addAnother') }}
           </UButton>
         </div>
         <TheComment
-          v-if="applicationFormId && formElement.id && activeFormElement === formElement.id"
+          v-if="
-          :form-element-id="formElement.id"
+            applicationFormId && formElementItem.formElement.id && activeFormElement === formElementItem.formElement.id
+          "
+          :form-element-id="formElementItem.formElement.id"
           :application-form-id="applicationFormId"
-          :comments="comments?.[formElement.id]"
+          :comments="comments?.[formElementItem.formElement.id]"
         />
       </div>
       <div
         :class="[
           'transition-opacity duration-200',
-          openDropdownId === getElementKey(formElement, index) ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'
+          openDropdownId === getElementKey(formElementItem.formElement, formElementItem.indexInSubsection)
+            ? 'opacity-100'
+            : 'opacity-0 group-hover:opacity-100'
         ]"
       >
         <UDropdownMenu
-          :items="getDropdownItems(getElementKey(formElement, index), index)"
+          :items="
+            getDropdownItems(
+              formElementItem.formElement,
+              getElementKey(formElementItem.formElement, formElementItem.indexInSubsection),
+              formElementItem.indexInSubsection
+            )
+          "
           :content="{ align: 'end' }"
-          @update:open="(isOpen) => handleDropdownToggle(getElementKey(formElement, index), isOpen)"
+          @update:open="
+            (isOpen) =>
+              handleDropdownToggle(
+                getElementKey(formElementItem.formElement, formElementItem.indexInSubsection),
+                isOpen
+              )
+          "
         >
           <UButton icon="i-lucide-ellipsis-vertical" color="neutral" variant="ghost" />
         </UDropdownMenu>
       </div>
     </div>
-    <USeparator v-if="index < visibleFormElements.length - 1" />
+    <USeparator v-if="visibleIndex < visibleFormElements.length - 1" />
   </template>
 </template>
 
@@ -80,13 +101,17 @@ const route = useRoute()
 const activeFormElement = ref('')
 const openDropdownId = ref<string | null>(null)
 
-function getElementKey(element: FormElementDto, index: number): string {
+type VisibleFormElement = { formElement: FormElementDto; indexInSubsection: number }
-  return element.id || element.reference || `element-${index}`
+
+function getElementKey(formElement: FormElementDto, indexInSubsection: number): string {
+  return formElement.id || formElement.reference || `element-${indexInSubsection}`
 }
 
-const visibleFormElements = computed(() => {
+const visibleFormElements = computed<VisibleFormElement[]>(() => {
-  return props.modelValue.filter((element) => {
+  return props.modelValue
-    const key = element.id || element.reference
+    .map((formElement, indexInSubsection) => ({ formElement, indexInSubsection }))
+    .filter(({ formElement }) => {
+      const key = formElement.id || formElement.reference
       return key ? props.visibilityMap.get(key) !== false : true
     })
 })
@@ -118,7 +143,11 @@ function getResolvedComponent(formElement: FormElementDto) {
   }
 }
 
-function getDropdownItems(formElementId: string, formElementPosition: number): DropdownMenuItem[] {
+function getDropdownItems(
+  formElement: FormElementDto,
+  formElementKey: string,
+  formElementPosition: number
+): DropdownMenuItem[] {
   const { t: $t } = useI18n()
   const items = []
 
@@ -126,7 +155,7 @@ function getDropdownItems(formElementId: string, formElementPosition: number): D
     items.push({
       label: $t('applicationForms.formElements.comments'),
       icon: 'i-lucide-message-square-more',
-      onClick: () => toggleComments(formElementId)
+      onClick: () => toggleComments(formElement.id ?? formElementKey)
     })
   }
 
@@ -139,11 +168,9 @@ function getDropdownItems(formElementId: string, formElementPosition: number): D
   return [items]
 }
 
-function updateFormOptions(formOptions: FormOptionDto[], formElementIndex: number) {
+function updateFormOptions(formOptions: FormOptionDto[], target: VisibleFormElement) {
-  const targetElement = visibleFormElements.value[formElementIndex]
+  const targetElement = target.formElement
-  if (!targetElement) {
+  const targetIndex = target.indexInSubsection
-    return
-  }
 
   const updatedModelValue = props.modelValue.map((element) => {
     if (targetElement.id && element.id === targetElement.id) {
@@ -152,6 +179,10 @@ function updateFormOptions(formOptions: FormOptionDto[], formElementIndex: numbe
     if (targetElement.reference && element.reference === targetElement.reference) {
       return { ...element, options: formOptions }
     }
+    // Newly added form input element
+    if (!targetElement.id && !targetElement.reference && props.modelValue[targetIndex] === element) {
+      return { ...element, options: formOptions }
+    }
     return element
   })
   emit('update:modelValue', updatedModelValue)