feat(fullstack): Add form element section and stepper

legalconsenthub/pages/create.vue

@@ -26,8 +26,33 @@
             <UFormField label="Name">
               <UInput v-if="applicationFormTemplate" v-model="applicationFormTemplate.name" />
             </UFormField>
-            <FormEngine v-model="formElements" />
-            <UButton type="submit">Submit</UButton>
+            <UStepper ref="stepper" v-model="activeStepperItem" :items="stepperItems" class="w-full" />
+            <h1 v-if="currentFormElementSection?.title" class="text-xl text-pretty font-bold text-highlighted">
+              {{ currentFormElementSection.title }}
+            </h1>
+            <FormEngine
+              v-if="currentFormElementSection?.formElements"
+              v-model="currentFormElementSection.formElements"
+            />
+            <div class="flex gap-2 justify-between mt-4">
+              <UButton
+                leading-icon="i-lucide-arrow-left"
+                :disabled="!stepper?.hasPrev"
+                @click="navigateStepper('backward')"
+              >
+                Prev
+              </UButton>
+
+              <UButton
+                v-if="stepper?.hasNext"
+                trailing-icon="i-lucide-arrow-right"
+                :disabled="!stepper?.hasNext"
+                @click="navigateStepper('forward')"
+              >
+                Next
+              </UButton>
+              <UButton v-if="!stepper?.hasNext" @click="onSubmit"> Submit </UButton>
+            </div>
           </UForm>
         </UPageCard>
       </div>
@@ -36,20 +61,60 @@
 </template>
 
 <script setup lang="ts">
-import { ComplianceStatus, type PagedApplicationFormDto } from '~/.api-client'
+import { ComplianceStatus, type FormElementSectionDto, type PagedApplicationFormDto } from '~/.api-client'
 import { useApplicationFormValidator } from '~/composables/useApplicationFormValidator'
 import type { FormElementId } from '~/types/FormElement'
+import type { StepperItem } from '@nuxt/ui'
 
 const { getAllApplicationFormTemplates } = useApplicationFormTemplate()
 const { createApplicationForm } = useApplicationForm()
 const { validateFormElements, getHighestComplianceStatus } = useApplicationFormValidator()
 const { userDto, selectedOrganization } = useAuth()
 
-const { data } = await useAsyncData<PagedApplicationFormDto>(async () => {
+const stepper = useTemplateRef('stepper')
+const activeStepperItem = ref<number>(0)
+
+const currentFormElementSection = computed(() => {
+  return applicationFormTemplate.value?.formElementSections[activeStepperItem.value]
+})
+
+watch(activeStepperItem, async (newActiveStepperItem: number) => {
+  activeStepperItem.value = newActiveStepperItem
+})
+
+const { data, error } = await useAsyncData<PagedApplicationFormDto>(async () => {
   return await getAllApplicationFormTemplates()
 })
 
+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
   get: () => data?.value?.content[0] ?? undefined,
   set: (val) => {
     if (val && data.value) {
@@ -59,10 +124,11 @@ const applicationFormTemplate = computed({
 })
 
 const formElements = computed({
-  get: () => applicationFormTemplate.value?.formElements ?? [],
+  get: () => currentFormElementSection?.value?.formElements ?? [],
   set: (val) => {
     if (val && applicationFormTemplate.value) {
-      applicationFormTemplate.value.formElements = val
+      if (!currentFormElementSection.value) return
+      currentFormElementSection.value.formElements = val
     }
   }
 })