feat(frontend): Add RadioGroup, calculate highest compliance status

legalconsenthub/components/formelements/TheInput.vue

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

legalconsenthub/components/formelements/TheRadioGroup.vue

@@ -0,0 +1,33 @@
+<template>
+  <URadioGroup v-model="modelValue" :items="items" />
+</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
+}>()
+
+// Our "label" is the "value" of the radio button
+const items = computed(() => props.formOptions.map((option) => ({ label: option.label, value: option.label })))
+const currentSelectedValue = ref(undefined)
+
+const modelValue = computed({
+  get: () => currentSelectedValue.value,
+  set: (val) => {
+    if (val) {
+      const updatedModelValue = [...props.formOptions]
+      updatedModelValue.forEach((option) => {
+        option.value = option.label === val ? 'true' : 'false'
+      })
+      emit('update:formOptions', updatedModelValue)
+    }
+  }
+})
+</script>