feat(frontend,api): Add checkbox and select

legalconsenthub-backend/api/legalconsenthub.yml

@@ -881,7 +881,7 @@ components:
     FormElementType:
       type: string
       enum:
-        - DROPDOWN
+        - SELECT
         - CHECKBOX
         - RADIOBUTTON
         - TEXTFIELD

legalconsenthub/components/FormEngine.vue

@@ -27,7 +27,9 @@ const emit = defineEmits<{
 function getResolvedComponent(formElement: FormElementDto) {
   switch (formElement.type) {
     case 'CHECKBOX':
-    case 'DROPDOWN':
+      return resolveComponent('TheCheckbox')
+    case 'SELECT':
+      return resolveComponent('TheSelect')
     case 'RADIOBUTTON':
       return resolveComponent('TheRadioGroup')
     case 'SWITCH':

legalconsenthub/components/formelements/TheCheckbox.vue

@@ -0,0 +1,28 @@
+<template>
+  <UCheckbox v-model="modelValue" :label="label" />
+</template>
+
+<script setup lang="ts">
+import type { FormOptionDto } from '~/.api-client'
+
+const props = defineProps<{
+  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)
+    }
+  }
+})
+
+const label = computed(() => props.formOptions?.[0].label ?? '')
+</script>

legalconsenthub/components/formelements/TheSelect.vue

@@ -0,0 +1,32 @@
+<template>
+  <USelect v-model="modelValue" placeholder="Select status" :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 select
+const items = computed(() => props.formOptions.map((option) => ({ label: option.label, value: option.label })))
+
+const modelValue = computed({
+  get: () => props.formOptions.find((option) => option.value === 'true')?.label,
+  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/complianceMap.ts

@@ -41,6 +41,7 @@ export const complianceMap = new Map<ProcessingPurpose, Map<EmployeeDataCategory
 
 export const complianceCheckableElementTypes: FormElementType[] = [
   FormElementType.Switch,
+  FormElementType.Select,
   FormElementType.Checkbox,
   FormElementType.Radiobutton
 ]