feat(frontend,backend): Add application form name

legalconsenthub/pages/create.vue

@@ -22,6 +22,9 @@
 
         <UPageCard variant="subtle">
           <UForm class="space-y-4" :state="{}" @submit="onSubmit">
+            <UFormField label="Name">
+              <UInput v-if="applicationFormTemplate" v-model="applicationFormTemplate.name" />
+            </UFormField>
             <FormEngine v-model="formElements" />
             <UButton type="submit">Submit</UButton>
           </UForm>
@@ -44,11 +47,20 @@ const { data } = await useAsyncData<PagedApplicationFormDto>(async () => {
   return await getAllApplicationFormTemplates()
 })
 
-const formElements = computed({
-  get: () => data?.value?.content[0].formElements ?? [],
+const applicationFormTemplate = computed({
+  get: () => data?.value?.content[0] ?? undefined,
   set: (val) => {
     if (val && data.value) {
-      data.value.content[0].formElements = val
+      data.value.content[0] = val
+    }
+  }
+})
+
+const formElements = computed({
+  get: () => applicationFormTemplate.value?.formElements ?? [],
+  set: (val) => {
+    if (val && applicationFormTemplate.value) {
+      applicationFormTemplate.value.formElements = val
     }
   }
 })
@@ -78,8 +90,8 @@ const ampelStatusEmoji = computed(() => {
 })
 
 async function onSubmit() {
-  if (data?.value?.content[0]) {
-    await createApplicationForm(data.value.content[0])
+  if (applicationFormTemplate.value) {
+    await createApplicationForm(applicationFormTemplate.value)
     await navigateTo('/')
   } else {
     console.error('Application form data is undefined')

legalconsenthub/pages/index.vue

@@ -27,8 +27,15 @@
           :to="`application-forms/${applicationFormElem.id}`"
         >
           <template #body>
-            #{{ index }} {{ applicationFormElem.id }} {{ applicationFormElem.createdAt }}
-            {{ applicationFormElem.isTemplate }}
+            <div>
+              <p class="font-medium text-(--ui-text-highlighted) text-base">
+                #{{ index }} {{ applicationFormElem.name }}
+              </p>
+              <p class="text-(--ui-text-muted) text-sm">
+                Zuletzt bearbeitet: {{ formatDate(applicationFormElem.modifiedAt) }}
+              </p>
+              <p class="text-(--ui-text-muted) text-sm">Erstellt: {{ formatDate(applicationFormElem.createdAt) }}</p>
+            </div>
           </template>
         </UPageCard>
       </UPageList>