feat(frontend): Add ComplianceStatus and first validation

legalconsenthub/components/FormEngine.vue

@@ -1,15 +1,23 @@
 <template>
-  <div v-for="formElement in formElements" :key="formElement.id">
-    <component :is="getResolvedComponent(formElement)" />
+  <div v-for="(formElement, index) in props.modelValue" :key="formElement.id">
+    <component
+      :is="getResolvedComponent(formElement)"
+      :form-options="formElement.options"
+      @update:form-options="updateFormOptions($event)"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
-import type { FormElementDto } from '~/.api-client'
+import type { FormElementDto, FormOptionDto } from '~/.api-client'
 import { resolveComponent } from 'vue'
 
-defineProps<{
-  formElements: FormElementDto[]
+const props = defineProps<{
+  modelValue: FormElementDto[]
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: FormElementDto[]): void
 }>()
 
 // TODO: Lazy loading?
@@ -19,10 +27,17 @@ function getResolvedComponent(formElement: FormElementDto) {
     case 'DROPDOWN':
     case 'RADIOBUTTON':
     case 'SWITCH':
+      return resolveComponent('TheSwitch')
     case 'TEXTFIELD':
       return resolveComponent('TheInput')
     default:
       return resolveComponent('Unimplemented')
   }
 }
+
+function updateFormOptions(formOptions: FormOptionDto[]) {
+  const updatedModelValue = [...props.modelValue]
+  updatedModelValue[0] = { ...updatedModelValue[0], options: formOptions }
+  emit('update:modelValue', updatedModelValue)
+}
 </script>

legalconsenthub/components/formelements/TheSwitch.vue

@@ -0,0 +1,27 @@
+<template>
+  <USwitch v-model="modelValue" :label="label" />
+</template>
+
+<script setup lang="ts">
+import type { FormOptionDto } from '~/.api-client'
+
+const props = defineProps<{
+  label?: string
+  formOptions: FormOptionDto[]
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:formOptions', value: FormOptionDto[]): void
+}>()
+
+const modelValue = computed({
+  get: () => props.formOptions?.[0].value === 'true',
+  set: (val) => {
+    if (props.formOptions?.[0]) {
+      const updatedModelValue = [...props.formOptions]
+      updatedModelValue[0] = { ...updatedModelValue[0], value: val.toString() }
+      emit('update:formOptions', updatedModelValue)
+    }
+  }
+})
+</script>