feat: Refactor form in sectionIndex and create

legalconsenthub/app/pages/create.vue

@@ -22,49 +22,17 @@
           <p class="text-gray-500 mb-4">Sie haben keine Berechtigung zum Erstellen von Anträgen.</p>
           <UButton to="/" class="mt-4"> Zurück zur Übersicht </UButton>
         </div>
-        <div v-else>
-          <UPageCard title="Ampelstatus" variant="naked" orientation="horizontal" class="mb-4">
-            {{ trafficLightStatusEmoji }}
-          </UPageCard>
-
-          <UPageCard variant="subtle">
-            <UForm class="space-y-4" :state="{}" @submit="onSubmit">
-              <UFormField label="Name">
-                <UInput v-if="applicationFormTemplate" v-model="applicationFormTemplate.name" />
-              </UFormField>
-              <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>
-              <FormEngine
-                v-if="currentFormElementSection?.formElements"
-                v-model="currentFormElementSection.formElements"
-                @add:input-form="addInputFormToApplicationForm"
-              />
-              <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>
-                <div v-if="!stepper?.hasNext" class="flex flex-wrap items-center gap-1.5">
-                  <UButton trailing-icon="i-lucide-save" variant="outline" @click="onSave"> Save </UButton>
-                  <UButton trailing-icon="i-lucide-send-horizontal" @click="onSubmit"> Submit </UButton>
-                </div>
-              </div>
-            </UForm>
-          </UPageCard>
+        <div v-else-if="applicationFormTemplate">
+          <FormStepperWithNavigation
+            :form-element-sections="applicationFormTemplate.formElementSections"
+            @save="onSave"
+            @submit="onSubmit"
+          >
+            <FormValidationIndicator :status="validationStatus" />
+            <UFormField label="Name" class="mb-4">
+              <UInput v-model="applicationFormTemplate.name" />
+            </UFormField>
+          </FormStepperWithNavigation>
         </div>
       </div>
     </template>
@@ -102,46 +70,22 @@ const applicationFormTemplate = computed(
   () => 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) => {
-    if (val && applicationFormTemplate.value) {
-      if (!currentFormElementSection.value) return
-      currentFormElementSection.value.formElements = val
-    }
-  }
-})
 const validationMap = ref<Map<FormElementId, ComplianceStatus> | undefined>()
 const validationStatus = ref<ComplianceStatus>(ComplianceStatus.NonCritical)
 
+const allFormElements = computed(() => {
+  return applicationFormTemplate.value?.formElementSections?.flatMap((section) => section.formElements) ?? []
+})
+
 watch(
-  () => formElements,
+  () => allFormElements.value,
   (updatedFormElements) => {
-    validationMap.value = validateFormElements(updatedFormElements.value)
+    validationMap.value = validateFormElements(updatedFormElements)
     validationStatus.value = getHighestComplianceStatus()
   },
   { deep: true }
 )
 
-const trafficLightStatusEmoji = computed(() => {
-  switch (validationStatus.value) {
-    case ComplianceStatus.Critical:
-      return '🔴'
-    case ComplianceStatus.Warning:
-      return '🟡'
-    case ComplianceStatus.NonCritical:
-      return '🟢'
-    default:
-      return '🟢'
-  }
-})
-
 async function onSave() {
   const applicationForm = await prepareAndCreateApplicationForm()
   if (applicationForm) {