feat(frontend): Add applicationFormTemplate, add list for application froms, refactoring

legalconsenthub/pages/create.vue

@@ -6,15 +6,7 @@
           <UDashboardSidebarCollapse />
         </template>
 
-        <template #right>
-          <UTooltip text="Notifications" :shortcuts="['N']">
-            <UButton color="neutral" variant="ghost" square>
-              <UChip color="error" inset>
-                <UIcon name="i-lucide-bell" class="size-5 shrink-0" />
-              </UChip>
-            </UButton>
-          </UTooltip>
-        </template>
+        <template #right />
       </UDashboardNavbar>
 
       <UDashboardToolbar>
@@ -23,11 +15,18 @@
     </template>
 
     <template #body>
-      Ampel Status: {{ validationStatus }}
-      <UForm class="space-y-4" :state="{}" @submit="onSubmit">
-        <FormEngine v-model="formElements" />
-        <UButton type="submit">Submit</UButton>
-      </UForm>
+      <div class="flex flex-col gap-4 sm:gap-6 lg:gap-12 w-full lg:max-w-2xl mx-auto">
+        <UPageCard title="Ampelstatus" variant="naked" orientation="horizontal" class="mb-4">
+          {{ ampelStatusEmoji }}
+        </UPageCard>
+
+        <UPageCard variant="subtle">
+          <UForm class="space-y-4" :state="{}" @submit="onSubmit">
+            <FormEngine v-model="formElements" />
+            <UButton type="submit">Submit</UButton>
+          </UForm>
+        </UPageCard>
+      </div>
     </template>
   </UDashboardPanel>
 </template>
@@ -37,11 +36,11 @@ import { ComplianceStatus, type PagedApplicationFormDto } from '~/.api-client'
 import { useApplicationFormValidator } from '~/composables/useApplicationFormValidator'
 import type { FormElementId } from '~/types/FormElement'
 
-const { getAllApplicationForms, updateApplicationForm } = useApplicationForm()
+const { getAllApplicationFormTemplates, updateApplicationFormTemplate } = useApplicationFormTemplate()
 const { validateFormElements, getHighestComplianceStatus } = useApplicationFormValidator()
 
 const { data } = await useAsyncData<PagedApplicationFormDto>(async () => {
-  return await getAllApplicationForms()
+  return await getAllApplicationFormTemplates()
 })
 
 const formElements = computed({
@@ -64,7 +63,20 @@ watch(
   { deep: true }
 )
 
+const ampelStatusEmoji = computed(() => {
+  switch (validationStatus.value) {
+    case ComplianceStatus.Critical:
+      return '🔴'
+    case ComplianceStatus.Warning:
+      return '🟡'
+    case ComplianceStatus.NonCritical:
+      return '🟢'
+    default:
+      return '🟢'
+  }
+})
+
 async function onSubmit() {
-  await updateApplicationForm(data?.value?.content[0].id, data?.value?.content[0])
+  await updateApplicationFormTemplate(data?.value?.content[0].id, data?.value?.content[0])
 }
 </script>