fix: Input form adding issue

legalconsenthub/app/components/FormStepperWithNavigation.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="flex flex-col w-full lg:max-w-4xl mx-auto">
     <slot />
-    
+
     <UStepper ref="stepper" v-model="activeStepperItemIndex" :items="stepperItems" class="w-full" />
-    
+
     <h1 v-if="currentFormElementSection?.title" class="text-xl text-pretty font-bold text-highlighted">
       {{ currentFormElementSection.title }}
     </h1>
-    
+
     <UCard variant="subtle">
       <FormEngine
         v-if="currentFormElementSection?.formElements"
@@ -16,13 +16,9 @@
         :disabled="disabled"
         @add:input-form="handleAddInputForm"
       />
-      
+
       <div class="flex gap-2 justify-between mt-4">
-        <UButton 
-          leading-icon="i-lucide-arrow-left" 
-          :disabled="!stepper?.hasPrev" 
-          @click="handleNavigate('backward')"
-        >
+        <UButton leading-icon="i-lucide-arrow-left" :disabled="!stepper?.hasPrev" @click="handleNavigate('backward')">
           Prev
         </UButton>
 
@@ -36,19 +32,10 @@
         </UButton>
 
         <div v-if="!stepper?.hasNext" class="flex flex-wrap items-center gap-1.5">
-          <UButton 
-            trailing-icon="i-lucide-save" 
-            :disabled="disabled" 
-            variant="outline" 
-            @click="emit('save')"
-          >
+          <UButton trailing-icon="i-lucide-save" :disabled="disabled" variant="outline" @click="emit('save')">
             Save
           </UButton>
-          <UButton 
-            trailing-icon="i-lucide-send-horizontal" 
-            :disabled="disabled" 
-            @click="emit('submit')"
-          >
+          <UButton trailing-icon="i-lucide-send-horizontal" :disabled="disabled" @click="emit('submit')">
             Submit
           </UButton>
         </div>
@@ -58,7 +45,7 @@
 </template>
 
 <script setup lang="ts">
-import type { FormElementSectionDto } from '~~/.api-client'
+import type { ApplicationFormDto, FormElementSectionDto } from '~~/.api-client'
 
 const props = defineProps<{
   formElementSections: FormElementSectionDto[]
@@ -70,7 +57,7 @@ const props = defineProps<{
 const emit = defineEmits<{
   save: []
   submit: []
-  'add-input-form': [position: number]
+  'add-input-form': [updatedForm: ApplicationFormDto | undefined]
   navigate: [{ direction: 'forward' | 'backward'; index: number }]
 }>()
 
@@ -78,10 +65,7 @@ const { stepper, activeStepperItemIndex, stepperItems, currentFormElementSection
   computed(() => props.formElementSections)
 )
 
-const { addInputFormToApplicationForm } = useFormElementManagement(
-  currentFormElementSection,
-  props.applicationFormId
-)
+const { addInputFormToApplicationForm } = useFormElementManagement(currentFormElementSection, props.applicationFormId)
 
 onMounted(() => {
   if (props.initialSectionIndex !== undefined) {
@@ -90,12 +74,8 @@ onMounted(() => {
 })
 
 async function handleAddInputForm(position: number) {
-  if (props.applicationFormId) {
-    await addInputFormToApplicationForm(position)
-  } else {
-    await addInputFormToApplicationForm(position)
-  }
-  emit('add-input-form', position)
+  const updatedForm = await addInputFormToApplicationForm(position)
+  emit('add-input-form', updatedForm)
 }
 
 async function handleNavigate(direction: 'forward' | 'backward') {
@@ -103,4 +83,3 @@ async function handleNavigate(direction: 'forward' | 'backward') {
   emit('navigate', { direction, index: activeStepperItemIndex.value })
 }
 </script>
-

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

@@ -29,6 +29,7 @@
           @save="onSave"
           @submit="onSubmit"
           @navigate="handleNavigate"
+          @add-input-form="handleAddInputForm"
         />
       </div>
     </template>
@@ -36,7 +37,12 @@
 </template>
 
 <script setup lang="ts">
-import { ComplianceStatus, type FormElementDto, type FormElementSectionDto } from '~~/.api-client'
+import {
+  ComplianceStatus,
+  type ApplicationFormDto,
+  type FormElementDto,
+  type FormElementSectionDto
+} from '~~/.api-client'
 import type { FormElementId } from '~~/types/formElement'
 import { useApplicationFormValidator } from '~/composables/useApplicationFormValidator'
 import { useUserStore } from '~~/stores/useUserStore'
@@ -111,4 +117,10 @@ async function onSubmit() {
 async function handleNavigate({ index }: { direction: 'forward' | 'backward'; index: number }) {
   await navigateTo(`/application-forms/${applicationFormId}/${index}`)
 }
+
+function handleAddInputForm(updatedForm: ApplicationFormDto | undefined) {
+  if (updatedForm) {
+    updateApplicationForm(updatedForm)
+  }
+}
 </script>

legalconsenthub/app/pages/create.vue

@@ -25,6 +25,7 @@
             :form-element-sections="applicationFormTemplate.formElementSections"
             @save="onSave"
             @submit="onSubmit"
+            @add-input-form="handleAddInputForm"
           >
             <UFormField label="Name" class="mb-4">
               <UInput v-model="applicationFormTemplate.name" />
@@ -37,7 +38,12 @@
 </template>
 
 <script setup lang="ts">
-import { ComplianceStatus, type PagedApplicationFormDto } from '~~/.api-client'
+import {
+  ComplianceStatus,
+  type FormElementDto,
+  type FormElementSectionDto,
+  type PagedApplicationFormDto
+} from '~~/.api-client'
 import { useApplicationFormValidator } from '~/composables/useApplicationFormValidator'
 import type { FormElementId } from '~~/types/formElement'
 import { useUserStore } from '~~/stores/useUserStore'
@@ -71,12 +77,16 @@ const validationMap = ref<Map<FormElementId, ComplianceStatus> | undefined>()
 const validationStatus = ref<ComplianceStatus>(ComplianceStatus.NonCritical)
 
 const allFormElements = computed(() => {
-  return applicationFormTemplate.value?.formElementSections?.flatMap((section) => section.formElements) ?? []
+  return (
+    applicationFormTemplate.value?.formElementSections?.flatMap(
+      (section: FormElementSectionDto) => section.formElements
+    ) ?? []
+  )
 })
 
 watch(
   () => allFormElements.value,
-  (updatedFormElements) => {
+  (updatedFormElements: FormElementDto[]) => {
     validationMap.value = validateFormElements(updatedFormElements)
     validationStatus.value = getHighestComplianceStatus()
   },
@@ -99,6 +109,12 @@ async function onSubmit() {
   }
 }
 
+function handleAddInputForm() {
+  // In create mode (no applicationFormId), addInputFormToApplicationForm returns undefined
+  // The form element is added locally to the template sections, which are reactive
+  // No action needed here
+}
+
 async function prepareAndCreateApplicationForm() {
   if (!applicationFormTemplate.value) {
     console.error('Application form data is undefined')