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>