feat(frontend): Add ComplianceStatus and first validation

legalconsenthub/pages/create.vue

@@ -23,8 +23,9 @@
     </template>
 
     <template #body>
+      Ampel Status: {{ validationStatus }}
       <UForm class="space-y-4" :state="{}" @submit="onSubmit">
-        <FormEngine :form-elements="data?.content[0].formElements ?? []" />
+        <FormEngine v-model="formElements" />
         <UButton type="submit">Submit</UButton>
       </UForm>
     </template>
@@ -32,14 +33,35 @@
 </template>
 
 <script setup lang="ts">
-import type { PagedApplicationFormDto } from '~/.api-client'
+import type { ComplianceStatus, PagedApplicationFormDto } from '~/.api-client'
+import { useApplicationFormValidator } from '~/composables/useApplicationFormValidator'
+import type { FormElementId } from '~/types/FormElement'
 
 const { getAllApplicationForms } = useApplicationForm()
+const { validateFormElements } = useApplicationFormValidator()
 
 const { data } = await useAsyncData<PagedApplicationFormDto>(async () => {
   return await getAllApplicationForms()
 })
 
+const formElements = computed({
+  get: () => data?.value?.content[0].formElements ?? [],
+  set: (val) => {
+    if (val && data.value) {
+      data.value.content[0].formElements = val
+    }
+  }
+})
+const validationStatus = ref<Map<FormElementId, ComplianceStatus> | undefined>()
+
+watch(
+  () => formElements,
+  (updatedFormElements) => {
+    validationStatus.value = validateFormElements(updatedFormElements.value)
+  },
+  { deep: true }
+)
+
 function onSubmit() {
   console.log('Submitted')
 }