feat(#9): Nuxt 4 migration

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

@@ -0,0 +1,156 @@
+<template>
+  <UDashboardPanel id="home">
+    <template #header>
+      <UDashboardNavbar title="Home" :ui="{ right: 'gap-3' }">
+        <template #leading>
+          <UDashboardSidebarCollapse />
+        </template>
+
+        <template #right>
+          <UDropdownMenu :items="items">
+            <UButton icon="i-lucide-plus" size="md" class="rounded-full" />
+          </UDropdownMenu>
+        </template>
+      </UDashboardNavbar>
+
+      <UDashboardToolbar>
+        <template #right>
+          <UButton
+            icon="i-lucide-file-text"
+            size="md"
+            color="primary"
+            variant="solid"
+            target="_blank"
+            :to="`/api/application-forms/${applicationForm.id}/pdf`"
+            >PDF Vorschau</UButton
+          >
+        </template>
+      </UDashboardToolbar>
+    </template>
+
+    <template #body>
+      <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>
+  </UDashboardPanel>
+</template>
+
+<script setup lang="ts">
+import type { ApplicationFormDto } from '~~/.api-client'
+import { useUserStore } from '~~/stores/useUserStore'
+
+const { getApplicationFormById, updateApplicationForm, submitApplicationForm } = useApplicationForm()
+const route = useRoute()
+const userStore = useUserStore()
+const { user } = storeToRefs(userStore)
+
+const toast = useToast()
+
+definePageMeta({
+  // Prevent whole page from re-rendering when navigating between sections to keep state
+  key: (route) => `${route.params.id}`
+})
+
+const items = [
+  [
+    {
+      label: 'Neuer Mitbestimmungsantrag',
+      icon: 'i-lucide-send',
+      to: '/create'
+    }
+  ]
+]
+
+const { data, error } = await useAsyncData<ApplicationFormDto>(`application-form-${route.params.id}`, async () => {
+  console.log('Fetching application form with ID:', route.params.id)
+  return await getApplicationFormById(Array.isArray(route.params.id) ? route.params.id[0] : route.params.id)
+})
+
+if (error.value) {
+  throw createError({ statusText: error.value.message })
+}
+
+const applicationForm = computed<ApplicationFormDto>(() => data?.value as ApplicationFormDto)
+
+const isReadOnly = computed(() => {
+  return applicationForm.value?.createdBy.keycloakId !== user.value?.keycloakId
+})
+
+const { stepper, activeStepperItemIndex, stepperItems, currentFormElementSection, navigateStepper } = useFormStepper(
+  computed(() => applicationForm.value?.formElementSections),
+  {
+    onNavigate: async () => {
+      await navigateTo(`/application-forms/${route.params.id}/${activeStepperItemIndex.value}`)
+    }
+  }
+)
+
+const { addInputFormToApplicationForm } = useFormElementManagement(currentFormElementSection, applicationForm.value?.id)
+
+async function handleAddInputForm(position: number) {
+  const updatedForm = await addInputFormToApplicationForm(position)
+  if (updatedForm) {
+    data.value = updatedForm
+  }
+}
+
+onMounted(() => {
+  const sectionIndex = parseInt(route.params.sectionIndex[0])
+  activeStepperItemIndex.value = !isNaN(sectionIndex) ? sectionIndex : 0
+})
+
+async function onSave() {
+  if (data?.value) {
+    await updateApplicationForm(data.value.id, data.value)
+    toast.add({ title: 'Success', description: 'Application form saved', color: 'success' })
+  }
+}
+
+async function onSubmit() {
+  if (data?.value) {
+    await submitApplicationForm(data.value.id)
+    await navigateTo('/')
+    toast.add({ title: 'Success', description: 'Application form submitted', color: 'success' })
+  }
+}
+</script>