feat(#9): Nuxt 4 migration

2025-11-02 18:46:46 +01:00
parent 763b2f7b7f
commit 6d79c710a2
54 changed files with 2904 additions and 1416 deletions
--- a/legalconsenthub/app/pages/create.vue
+++ b/legalconsenthub/app/pages/create.vue
@@ -0,0 +1,168 @@
+<template>
+  <UDashboardPanel id="home">
+    <template #header>
+      <UDashboardNavbar title="Home" :ui="{ right: 'gap-3' }">
+        <template #leading>
+          <UDashboardSidebarCollapse />
+        </template>
+
+        <template #right />
+      </UDashboardNavbar>
+
+      <UDashboardToolbar>
+        <template #left />
+      </UDashboardToolbar>
+    </template>
+
+    <template #body>
+      <div class="flex flex-col gap-4 sm:gap-6 lg:gap-12 w-full lg:max-w-4xl mx-auto">
+        <div v-if="!canWriteApplicationForms" class="text-center py-12">
+          <UIcon name="i-lucide-shield-x" class="w-16 h-16 mx-auto text-red-400 mb-4" />
+          <h2 class="text-2xl font-semibold text-gray-700 mb-2">Keine Berechtigung</h2>
+          <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>
+      </div>
+    </template>
+  </UDashboardPanel>
+</template>
+
+<script setup lang="ts">
+import { ComplianceStatus, type PagedApplicationFormDto } from '~~/.api-client'
+import { useApplicationFormValidator } from '~/composables/useApplicationFormValidator'
+import type { FormElementId } from '~~/types/formElement'
+import { useUserStore } from '~~/stores/useUserStore'
+
+const { getAllApplicationFormTemplates } = await useApplicationFormTemplate()
+const { createApplicationForm, submitApplicationForm } = useApplicationForm()
+const { validateFormElements, getHighestComplianceStatus } = useApplicationFormValidator()
+const { canWriteApplicationForms } = usePermissions()
+const userStore = useUserStore()
+const { selectedOrganization } = storeToRefs(userStore)
+const toast = useToast()
+
+const { data, error } = await useAsyncData<PagedApplicationFormDto>('create-application-form', async () => {
+  return await getAllApplicationFormTemplates()
+})
+
+if (error.value) {
+  throw createError({ statusText: error.value.message })
+}
+
+const applicationFormTemplate = computed(
+  // TODO: Don't select always the first item, allow user to select a template
+  () => 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)
+
+watch(
+  () => formElements,
+  (updatedFormElements) => {
+    validationMap.value = validateFormElements(updatedFormElements.value)
+    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) {
+    toast.add({ title: 'Success', description: 'Application form saved', color: 'success' })
+  }
+}
+
+async function onSubmit() {
+  const applicationForm = await prepareAndCreateApplicationForm()
+  if (applicationForm) {
+    await submitApplicationForm(applicationForm.id)
+    await navigateTo('/')
+    toast.add({ title: 'Success', description: 'Application form submitted', color: 'success' })
+  }
+}
+
+async function prepareAndCreateApplicationForm() {
+  if (!applicationFormTemplate.value) {
+    console.error('Application form data is undefined')
+    return null
+  }
+
+  console.log('selectedOrganization', selectedOrganization.value)
+  applicationFormTemplate.value.organizationId = selectedOrganization.value?.id ?? ''
+
+  return await createApplicationForm(applicationFormTemplate.value)
+}
+</script>