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

legalconsenthub/components/FormEngine.vue

@@ -26,6 +26,7 @@ function getResolvedComponent(formElement: FormElementDto) {
     case 'CHECKBOX':
     case 'DROPDOWN':
     case 'RADIOBUTTON':
+      return resolveComponent('TheRadioGroup')
     case 'SWITCH':
       return resolveComponent('TheSwitch')
     case 'TEXTFIELD':

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>

legalconsenthub/composables/useApplicationFormValidator.ts

@@ -2,9 +2,19 @@ import { ComplianceStatus, type FormElementDto } from '~/.api-client'
 import { complianceCheckableElementTypes, complianceMap } from './complianceMap'
 import type { FormElementId } from '~/types/FormElement'
 
+const formElementComplianceMap = ref(new Map<FormElementId, ComplianceStatus>())
+
 export function useApplicationFormValidator() {
+  function getHighestComplianceStatus(): ComplianceStatus {
+    const complianceStatusValues = Array.from(formElementComplianceMap.value.values())
+    const highestComplianceNumber = Math.max(
+      ...complianceStatusValues.map((complianceStatus) => Object.values(ComplianceStatus).indexOf(complianceStatus))
+    )
+    return Object.values(ComplianceStatus)[highestComplianceNumber]
+  }
+
   function validateFormElements(formElements: FormElementDto[]): Map<FormElementId, ComplianceStatus> {
-    const formElementComplianceMap = new Map<FormElementId, ComplianceStatus>()
+    formElementComplianceMap.value.clear()
 
     formElements.forEach((formElement) => {
       if (!complianceCheckableElementTypes.includes(formElement.type)) return
@@ -12,7 +22,7 @@ export function useApplicationFormValidator() {
       // Reset any previously set compliance status when all options are false
       const hasAtLeastOneOptionSet = formElement.options.some((option) => option.value && option.value !== 'false')
       if (!hasAtLeastOneOptionSet) {
-        formElementComplianceMap.delete(formElement.id)
+        // No value set, continue with next form element
         return
       }
 
@@ -22,26 +32,31 @@ export function useApplicationFormValidator() {
           return
         }
 
+        // Value not set to true, continue with next option
+        if (option.value === 'false') {
+          return
+        }
+
         const currentHighestComplianceStatus =
           complianceMap?.get(option.processingPurpose)?.get(option.employeeDataCategory) ?? ComplianceStatus.NonCritical
         const currentHighestComplianceStatusPos =
           Object.values(ComplianceStatus).indexOf(currentHighestComplianceStatus)
 
-        if (formElementComplianceMap.has(formElement.id)) {
-          const newComplianceStatus = formElementComplianceMap.get(formElement.id)!
+        if (formElementComplianceMap.value.has(formElement.id)) {
+          const newComplianceStatus = formElementComplianceMap.value.get(formElement.id)!
           const newComplianceStatusPos = Object.values(ComplianceStatus).indexOf(newComplianceStatus)
 
           if (newComplianceStatusPos > currentHighestComplianceStatusPos) {
-            formElementComplianceMap.set(formElement.id, newComplianceStatus)
+            formElementComplianceMap.value.set(formElement.id, newComplianceStatus)
           }
         } else {
-          formElementComplianceMap.set(formElement.id, currentHighestComplianceStatus)
+          formElementComplianceMap.value.set(formElement.id, currentHighestComplianceStatus)
         }
       })
     })
 
-    return formElementComplianceMap
+    return formElementComplianceMap.value
   }
 
-  return { validateFormElements }
+  return { getHighestComplianceStatus, validateFormElements }
 }

legalconsenthub/pages/create.vue

@@ -33,12 +33,12 @@
 </template>
 
 <script setup lang="ts">
-import type { ComplianceStatus, PagedApplicationFormDto } from '~/.api-client'
+import { ComplianceStatus, type PagedApplicationFormDto } from '~/.api-client'
 import { useApplicationFormValidator } from '~/composables/useApplicationFormValidator'
 import type { FormElementId } from '~/types/FormElement'
 
 const { getAllApplicationForms } = useApplicationForm()
-const { validateFormElements } = useApplicationFormValidator()
+const { validateFormElements, getHighestComplianceStatus } = useApplicationFormValidator()
 
 const { data } = await useAsyncData<PagedApplicationFormDto>(async () => {
   return await getAllApplicationForms()
@@ -52,12 +52,14 @@ const formElements = computed({
     }
   }
 })
-const validationStatus = ref<Map<FormElementId, ComplianceStatus> | undefined>()
+const validationMap = ref<Map<FormElementId, ComplianceStatus> | undefined>()
+const validationStatus = ref<ComplianceStatus>(ComplianceStatus.NonCritical)
 
 watch(
   () => formElements,
   (updatedFormElements) => {
-    validationStatus.value = validateFormElements(updatedFormElements.value)
+    validationMap.value = validateFormElements(updatedFormElements.value)
+    validationStatus.value = getHighestComplianceStatus()
   },
   { deep: true }
 )