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>