feat(frontend): Add ComplianceStatus and first validation

legalconsenthub-backend/api/legalconsenthub.yml

@@ -796,6 +796,13 @@ components:
         - SENSITIVE
         - NONE
 
+    ComplianceStatus:
+      type: string
+      enum:
+        - NON_CRITICAL
+        - WARNING
+        - CRITICAL
+
     ####### Supporting components #######
     Page:
       type: object

legalconsenthub/components/FormEngine.vue

@@ -1,15 +1,23 @@
 <template>
-  <div v-for="formElement in formElements" :key="formElement.id">
+  <div v-for="(formElement, index) in props.modelValue" :key="formElement.id">
-    <component :is="getResolvedComponent(formElement)" />
+    <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<{
+const props = defineProps<{
-  formElements: FormElementDto[]
+  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>

legalconsenthub/composables/complianceMap.ts

@@ -0,0 +1,46 @@
+import { ComplianceStatus, EmployeeDataCategory, FormElementType, ProcessingPurpose } from '~/.api-client'
+
+export const complianceMap = new Map<ProcessingPurpose, Map<EmployeeDataCategory, ComplianceStatus>>([
+  [
+    ProcessingPurpose.SystemOperation,
+    new Map([
+      [EmployeeDataCategory.None, ComplianceStatus.NonCritical],
+      [EmployeeDataCategory.NonCritical, ComplianceStatus.NonCritical],
+      [EmployeeDataCategory.ReviewRequired, ComplianceStatus.NonCritical],
+      [EmployeeDataCategory.Sensitive, ComplianceStatus.NonCritical]
+    ])
+  ],
+  [
+    ProcessingPurpose.BusinessProcess,
+    new Map([
+      [EmployeeDataCategory.None, ComplianceStatus.NonCritical],
+      [EmployeeDataCategory.NonCritical, ComplianceStatus.NonCritical],
+      [EmployeeDataCategory.ReviewRequired, ComplianceStatus.Warning],
+      [EmployeeDataCategory.Sensitive, ComplianceStatus.Critical]
+    ])
+  ],
+  [
+    ProcessingPurpose.DataAnalysis,
+    new Map([
+      [EmployeeDataCategory.None, ComplianceStatus.NonCritical],
+      [EmployeeDataCategory.NonCritical, ComplianceStatus.Warning],
+      [EmployeeDataCategory.ReviewRequired, ComplianceStatus.Warning],
+      [EmployeeDataCategory.Sensitive, ComplianceStatus.Critical]
+    ])
+  ],
+  [
+    ProcessingPurpose.None,
+    new Map([
+      [EmployeeDataCategory.None, ComplianceStatus.NonCritical],
+      [EmployeeDataCategory.NonCritical, ComplianceStatus.NonCritical],
+      [EmployeeDataCategory.ReviewRequired, ComplianceStatus.NonCritical],
+      [EmployeeDataCategory.Sensitive, ComplianceStatus.NonCritical]
+    ])
+  ]
+])
+
+export const complianceCheckableElementTypes: FormElementType[] = [
+  FormElementType.Switch,
+  FormElementType.Checkbox,
+  FormElementType.Radiobutton
+]

legalconsenthub/composables/useApplicationFormValidator.ts

@@ -0,0 +1,47 @@
+import { ComplianceStatus, type FormElementDto } from '~/.api-client'
+import { complianceCheckableElementTypes, complianceMap } from './complianceMap'
+import type { FormElementId } from '~/types/FormElement'
+
+export function useApplicationFormValidator() {
+  function validateFormElements(formElements: FormElementDto[]): Map<FormElementId, ComplianceStatus> {
+    const formElementComplianceMap = new Map<FormElementId, ComplianceStatus>()
+
+    formElements.forEach((formElement) => {
+      if (!complianceCheckableElementTypes.includes(formElement.type)) return
+
+      // 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)
+        return
+      }
+
+      formElement.options.forEach((option) => {
+        if (!option.value) {
+          console.log(`Value missing for ${formElement.type}`)
+          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)!
+          const newComplianceStatusPos = Object.values(ComplianceStatus).indexOf(newComplianceStatus)
+
+          if (newComplianceStatusPos > currentHighestComplianceStatusPos) {
+            formElementComplianceMap.set(formElement.id, newComplianceStatus)
+          }
+        } else {
+          formElementComplianceMap.set(formElement.id, currentHighestComplianceStatus)
+        }
+      })
+    })
+
+    return formElementComplianceMap
+  }
+
+  return { validateFormElements }
+}

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')
 }

legalconsenthub/types/FormElement.ts

@@ -0,0 +1 @@
+export type FormElementId = string