feat(frontend,backend): Add id page for application forms, fix error with form creation

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

@@ -0,0 +1,67 @@
+<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 #left> toolbar left </template>
+      </UDashboardToolbar>
+    </template>
+
+    <template #body>
+      <div class="flex flex-col gap-4 sm:gap-6 lg:gap-12 w-full lg:max-w-2xl mx-auto">
+        <UPageCard variant="subtle">
+          <UForm class="space-y-4" :state="{}" @submit="onSubmit">
+            <FormEngine v-if="applicationForm" v-model="applicationForm.formElements" />
+            <UButton type="submit">Submit</UButton>
+          </UForm>
+        </UPageCard>
+      </div>
+    </template>
+  </UDashboardPanel>
+</template>
+
+<script setup lang="ts">
+import type { ApplicationFormDto } from '~/.api-client'
+const { getApplicationFormById, updateApplicationForm } = useApplicationForm()
+const route = useRoute()
+
+const items = [
+  [
+    {
+      label: 'Neuer Mitbestimmungsantrag',
+      icon: 'i-lucide-send',
+      to: '/create'
+    }
+  ]
+]
+
+const { data } = await useAsyncData<ApplicationFormDto>(async () => {
+  return await getApplicationFormById(Array.isArray(route.params.id) ? route.params.id[0] : route.params.id)
+})
+
+const applicationForm = computed({
+  get: () => data?.value,
+  set: (val) => {
+    if (val && data.value) {
+      data.value = val
+    }
+  }
+})
+
+async function onSubmit() {
+  if (data?.value) {
+    await updateApplicationForm(data.value.id, data.value)
+  }
+}
+</script>

legalconsenthub/pages/create.vue

@@ -36,7 +36,8 @@ import { ComplianceStatus, type PagedApplicationFormDto } from '~/.api-client'
 import { useApplicationFormValidator } from '~/composables/useApplicationFormValidator'
 import type { FormElementId } from '~/types/FormElement'
 
-const { getAllApplicationFormTemplates, updateApplicationFormTemplate } = useApplicationFormTemplate()
+const { getAllApplicationFormTemplates } = useApplicationFormTemplate()
+const { createApplicationForm } = useApplicationForm()
 const { validateFormElements, getHighestComplianceStatus } = useApplicationFormValidator()
 
 const { data } = await useAsyncData<PagedApplicationFormDto>(async () => {
@@ -77,6 +78,11 @@ const ampelStatusEmoji = computed(() => {
 })
 
 async function onSubmit() {
-  await updateApplicationFormTemplate(data?.value?.content[0].id, data?.value?.content[0])
+  if (data?.value?.content[0]) {
+    await createApplicationForm(data.value.content[0])
+    await navigateTo('/')
+  } else {
+    console.error('Application form data is undefined')
+  }
 }
 </script>

legalconsenthub/pages/index.vue

@@ -21,7 +21,7 @@
     <template #body>
       <UPageList>
         <UPageCard
-          v-for="(applicationFormElem, index) in applicationForm"
+          v-for="(applicationFormElem, index) in applicationForms"
           :key="index"
           variant="ghost"
           :to="`application-forms/${applicationFormElem.id}`"
@@ -54,7 +54,7 @@ const { data } = await useAsyncData<PagedApplicationFormDto>(async () => {
   return await getAllApplicationForms()
 })
 
-const applicationForm = computed({
+const applicationForms = computed({
   get: () => data?.value?.content ?? [],
   set: (val) => {
     if (val && data.value) {