feat(#5): Add title-body control element that can be added dynamically, refactored sectionIndex/create

legalconsenthub/pages/create.vue

@@ -39,6 +39,7 @@
               <FormEngine
                 v-if="currentFormElementSection?.formElements"
                 v-model="currentFormElementSection.formElements"
+                @add:input-form="addInputFormToApplicationForm"
               />
               <div class="flex gap-2 justify-between mt-4">
                 <UButton
@@ -71,10 +72,9 @@
 </template>
 
 <script setup lang="ts">
-import { ComplianceStatus, type FormElementSectionDto, type PagedApplicationFormDto } from '~/.api-client'
+import { ComplianceStatus, type PagedApplicationFormDto } from '~/.api-client'
 import { useApplicationFormValidator } from '~/composables/useApplicationFormValidator'
 import type { FormElementId } from '~/types/formElement'
-import type { StepperItem } from '@nuxt/ui'
 
 const { getAllApplicationFormTemplates } = await useApplicationFormTemplate()
 const { createApplicationForm, submitApplicationForm } = useApplicationForm()
@@ -84,17 +84,6 @@ const userStore = useUserStore()
 const { selectedOrganization } = storeToRefs(userStore)
 const toast = useToast()
 
-const stepper = useTemplateRef('stepper')
-const activeStepperItemIndex = ref<number>(0)
-
-const currentFormElementSection = computed(
-  () => applicationFormTemplate.value?.formElementSections[activeStepperItemIndex.value]
-)
-
-watch(activeStepperItemIndex, async (newActiveStepperItem: number) => {
-  activeStepperItemIndex.value = newActiveStepperItem
-})
-
 const { data, error } = await useAsyncData<PagedApplicationFormDto>(async () => {
   return await getAllApplicationFormTemplates()
 })
@@ -103,34 +92,17 @@ if (error.value) {
   throw createError({ statusText: error.value.message })
 }
 
-const stepperItems = computed(() => {
-  const stepperItems: StepperItem[] = []
-  if (!applicationFormTemplate.value) {
-    return stepperItems
-  }
-
-  applicationFormTemplate.value.formElementSections.forEach((section: FormElementSectionDto) => {
-    stepperItems.push({
-      title: section.shortTitle,
-      description: section.description
-    })
-  })
-  return stepperItems
-})
-
-async function navigateStepper(direction: 'forward' | 'backward') {
-  if (direction === 'forward') {
-    stepper.value?.next()
-  } else {
-    stepper.value?.prev()
-  }
-}
-
 const applicationFormTemplate = computed(
   // TODO: Don't select always the first item, allow user to select a template
   () => data?.value?.content[0] ?? undefined
 )
 
+const { stepper, activeStepperItemIndex, stepperItems, currentFormElementSection, navigateStepper } = useFormStepper(
+  computed(() => applicationFormTemplate.value?.formElementSections)
+)
+
+const { addInputFormToApplicationForm } = useFormElementManagement(currentFormElementSection)
+
 const formElements = computed({
   get: () => currentFormElementSection?.value?.formElements ?? [],
   set: (val) => {