feat: Refactor form in sectionIndex and create

legalconsenthub/app/components/FormStepperWithNavigation.vue

@@ -0,0 +1,106 @@
+<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"
+        v-model="currentFormElementSection.formElements"
+        :application-form-id="applicationFormId"
+        :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')"
+        >
+          Prev
+        </UButton>
+
+        <UButton
+          v-if="stepper?.hasNext"
+          trailing-icon="i-lucide-arrow-right"
+          :disabled="!stepper?.hasNext"
+          @click="handleNavigate('forward')"
+        >
+          Next
+        </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')"
+          >
+            Save
+          </UButton>
+          <UButton 
+            trailing-icon="i-lucide-send-horizontal" 
+            :disabled="disabled" 
+            @click="emit('submit')"
+          >
+            Submit
+          </UButton>
+        </div>
+      </div>
+    </UCard>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { FormElementSectionDto } from '~~/.api-client'
+
+const props = defineProps<{
+  formElementSections: FormElementSectionDto[]
+  initialSectionIndex?: number
+  applicationFormId?: string
+  disabled?: boolean
+}>()
+
+const emit = defineEmits<{
+  save: []
+  submit: []
+  'add-input-form': [position: number]
+  navigate: [{ direction: 'forward' | 'backward'; index: number }]
+}>()
+
+const { stepper, activeStepperItemIndex, stepperItems, currentFormElementSection, navigateStepper } = useFormStepper(
+  computed(() => props.formElementSections)
+)
+
+const { addInputFormToApplicationForm } = useFormElementManagement(
+  currentFormElementSection,
+  props.applicationFormId
+)
+
+onMounted(() => {
+  if (props.initialSectionIndex !== undefined) {
+    activeStepperItemIndex.value = props.initialSectionIndex
+  }
+})
+
+async function handleAddInputForm(position: number) {
+  if (props.applicationFormId) {
+    await addInputFormToApplicationForm(position)
+  } else {
+    await addInputFormToApplicationForm(position)
+  }
+  emit('add-input-form', position)
+}
+
+async function handleNavigate(direction: 'forward' | 'backward') {
+  await navigateStepper(direction)
+  emit('navigate', { direction, index: activeStepperItemIndex.value })
+}
+</script>
+

legalconsenthub/app/components/FormValidationIndicator.vue

@@ -0,0 +1,27 @@
+<template>
+  <UPageCard title="Ampelstatus" variant="naked" orientation="horizontal" class="mb-4">
+    {{ statusEmoji }}
+  </UPageCard>
+</template>
+
+<script setup lang="ts">
+import { ComplianceStatus } from '~~/.api-client'
+
+const props = defineProps<{
+  status: ComplianceStatus
+}>()
+
+const statusEmoji = computed(() => {
+  switch (props.status) {
+    case ComplianceStatus.Critical:
+      return '🔴'
+    case ComplianceStatus.Warning:
+      return '🟡'
+    case ComplianceStatus.NonCritical:
+      return '🟢'
+    default:
+      return '🟢'
+  }
+})
+</script>
+

legalconsenthub/app/components/TheForm.vue

@@ -1,103 +0,0 @@
-<template>
-  <div class="flex flex-col w-full lg:max-w-4xl mx-auto">
-    <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="applicationForm && currentFormElementSection?.formElements"
-        v-model="currentFormElementSection.formElements"
-        :application-form-id="applicationForm.id"
-        :disabled="isReadOnly"
-        @add:input-form="handleAddInputForm"
-      />
-      <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" :disabled="isReadOnly" variant="outline" @click="onSave">
-            Save
-          </UButton>
-          <UButton trailing-icon="i-lucide-send-horizontal" :disabled="isReadOnly" @click="onSubmit"> Submit </UButton>
-        </div>
-      </div>
-    </UCard>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { ApplicationFormDto } from '~~/.api-client'
-import { useUserStore } from '~~/stores/useUserStore'
-
-const props = defineProps<{
-  applicationForm: ApplicationFormDto
-}>()
-
-const emit = defineEmits<{
-  (e: 'update:applicationForm', updatedForm: ApplicationFormDto): void
-}>()
-
-const { updateApplicationForm, submitApplicationForm } = useApplicationForm()
-const route = useRoute()
-const userStore = useUserStore()
-const { user } = storeToRefs(userStore)
-
-const toast = useToast()
-
-const isReadOnly = computed(() => {
-  return props.applicationForm?.createdBy.keycloakId !== user.value?.keycloakId
-})
-
-const { stepper, activeStepperItemIndex, stepperItems, currentFormElementSection, navigateStepper } = useFormStepper(
-  computed(() => props.applicationForm?.formElementSections),
-  {
-    onNavigate: async () => {
-      await navigateTo(`/application-forms/${route.params.id}/${activeStepperItemIndex.value}`)
-    }
-  }
-)
-
-const { addInputFormToApplicationForm } = useFormElementManagement(currentFormElementSection, props.applicationForm?.id)
-
-async function handleAddInputForm(position: number) {
-  const updatedForm = await addInputFormToApplicationForm(position)
-  if (updatedForm) {
-    emit('update:applicationForm', updatedForm)
-  }
-}
-
-onMounted(() => {
-  const sectionIndexParam = route.params.sectionIndex
-  if (sectionIndexParam) {
-    const sectionIndex = parseInt(Array.isArray(sectionIndexParam) ? sectionIndexParam[0]! : sectionIndexParam)
-    activeStepperItemIndex.value = !isNaN(sectionIndex) ? sectionIndex : 0
-  }
-})
-
-async function onSave() {
-  if (props.applicationForm) {
-    await updateApplicationForm(props.applicationForm.id, props.applicationForm)
-    toast.add({ title: 'Success', description: 'Application form saved', color: 'success' })
-  }
-}
-
-async function onSubmit() {
-  if (props.applicationForm) {
-    await submitApplicationForm(props.applicationForm.id)
-    await navigateTo('/')
-    toast.add({ title: 'Success', description: 'Application form submitted', color: 'success' })
-  }
-}
-</script>

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

@@ -19,13 +19,31 @@
     </template>
 
     <template #body>
-      <TheForm :application-form="applicationForm" @update:application-form="updateApplicationForm" />
+      <div class="flex flex-col gap-4 sm:gap-6 lg:gap-12 w-full lg:max-w-4xl mx-auto">
+        <FormStepperWithNavigation
+          :form-element-sections="applicationForm.formElementSections"
+          :initial-section-index="sectionIndex"
+          :application-form-id="applicationForm.id"
+          :disabled="isReadOnly"
+          @save="onSave"
+          @submit="onSubmit"
+          @navigate="handleNavigate"
+        >
+          <FormValidationIndicator :status="validationStatus" />
+        </FormStepperWithNavigation>
+      </div>
     </template>
   </UDashboardPanel>
 </template>
 
 <script setup lang="ts">
+import { ComplianceStatus, type FormElementDto, type FormElementSectionDto } from '~~/.api-client'
+import type { FormElementId } from '~~/types/formElement'
+import { useApplicationFormValidator } from '~/composables/useApplicationFormValidator'
+import { useUserStore } from '~~/stores/useUserStore'
+
 const route = useRoute()
+const toast = useToast()
 
 definePageMeta({
   // Prevent whole page from re-rendering when navigating between sections to keep state
@@ -39,4 +57,59 @@ const {
   dropdownItems: items,
   updateApplicationForm
 } = await useApplicationFormNavigation(applicationFormId!)
+
+const { updateApplicationForm: updateForm, submitApplicationForm } = useApplicationForm()
+const { validateFormElements, getHighestComplianceStatus } = useApplicationFormValidator()
+const userStore = useUserStore()
+const { user } = storeToRefs(userStore)
+
+const sectionIndex = computed(() => {
+  const param = route.params.sectionIndex
+  const index = parseInt(Array.isArray(param) ? param[0]! : (param ?? '0'))
+  return !isNaN(index) ? index : 0
+})
+
+const isReadOnly = computed(() => {
+  return applicationForm.value?.createdBy.keycloakId !== user.value?.keycloakId
+})
+
+const validationMap = ref<Map<FormElementId, ComplianceStatus> | undefined>()
+const validationStatus = ref<ComplianceStatus>(ComplianceStatus.NonCritical)
+
+const allFormElements = computed(() => {
+  return (
+    applicationForm.value?.formElementSections?.flatMap((section: FormElementSectionDto) => section.formElements) ?? []
+  )
+})
+
+watch(
+  () => allFormElements.value,
+  (updatedFormElements: FormElementDto[]) => {
+    validationMap.value = validateFormElements(updatedFormElements)
+    validationStatus.value = getHighestComplianceStatus()
+  },
+  { deep: true }
+)
+
+async function onSave() {
+  if (applicationForm.value) {
+    const updated = await updateForm(applicationForm.value.id, applicationForm.value)
+    if (updated) {
+      updateApplicationForm(updated)
+      toast.add({ title: 'Success', description: 'Application form saved', color: 'success' })
+    }
+  }
+}
+
+async function onSubmit() {
+  if (applicationForm.value) {
+    await submitApplicationForm(applicationForm.value.id)
+    await navigateTo('/')
+    toast.add({ title: 'Success', description: 'Application form submitted', color: 'success' })
+  }
+}
+
+async function handleNavigate({ index }: { direction: 'forward' | 'backward'; index: number }) {
+  await navigateTo(`/application-forms/${applicationFormId}/${index}`)
+}
 </script>

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>
+        <div v-else-if="applicationFormTemplate">
-          <UPageCard title="Ampelstatus" variant="naked" orientation="horizontal" class="mb-4">
+          <FormStepperWithNavigation
-            {{ trafficLightStatusEmoji }}
+            :form-element-sections="applicationFormTemplate.formElementSections"
-          </UPageCard>
+            @save="onSave"
-
+            @submit="onSubmit"
-          <UPageCard variant="subtle">
+          >
-            <UForm class="space-y-4" :state="{}" @submit="onSubmit">
+            <FormValidationIndicator :status="validationStatus" />
-              <UFormField label="Name">
+            <UFormField label="Name" class="mb-4">
-                <UInput v-if="applicationFormTemplate" v-model="applicationFormTemplate.name" />
+              <UInput v-model="applicationFormTemplate.name" />
             </UFormField>
-              <UStepper ref="stepper" v-model="activeStepperItemIndex" :items="stepperItems" class="w-full" />
+          </FormStepperWithNavigation>
-              <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>
       </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) {