feat: Add Eingabeseite 6 (Datenschutz)

legalconsenthub/app/components/formelements/TheCheckbox.vue

@@ -1,5 +1,5 @@
 <template>
-  <UCheckbox v-model="modelValue" :label="label" />
+  <UCheckboxGroup v-model="modelValue" :items="items" />
 </template>
 
 <script setup lang="ts">
@@ -13,17 +13,18 @@ const emit = defineEmits<{
   (e: 'update:formOptions', value: FormOptionDto[]): void
 }>()
 
+// Map options to items format expected by UCheckboxGroup
+const items = computed(() => props.formOptions.map((option) => ({ label: option.label, value: option.label })))
+
+// Model value is an array of labels for checkboxes where value === 'true'
 const modelValue = computed({
-  get: () => props.formOptions[0]?.value === 'true',
-  set: (val) => {
-    const firstOption = props.formOptions[0]
-    if (firstOption) {
-      const updatedModelValue = [...props.formOptions]
-      updatedModelValue[0] = { ...firstOption, value: val.toString() }
-      emit('update:formOptions', updatedModelValue)
-    }
+  get: () => props.formOptions.filter((option) => option.value === 'true').map((option) => option.label),
+  set: (selectedLabels: string[]) => {
+    const updatedModelValue = props.formOptions.map((option) => ({
+      ...option,
+      value: selectedLabels.includes(option.label) ? 'true' : 'false'
+    }))
+    emit('update:formOptions', updatedModelValue)
   }
 })
-
-const label = computed(() => props.formOptions[0]?.label ?? '')
 </script>

legalconsenthub/app/composables/useFormElementVisibility.ts

@@ -57,6 +57,13 @@ export function useFormElementVisibility() {
       return false
     }
 
+    // Special handling for CHECKBOX with multiple options
+    if (sourceElement.type === FormElementType.Checkbox && sourceElement.options.length > 1) {
+      const operator = condition.formElementOperator || VCOperator.Equals
+      const conditionMet = evaluateCheckboxCondition(sourceElement, condition.formElementExpectedValue, operator)
+      return condition.formElementConditionType === VCType.Show ? conditionMet : !conditionMet
+    }
+
     const sourceValue = getFormElementValue(sourceElement)
     const operator = condition.formElementOperator || VCOperator.Equals
     const conditionMet = evaluateCondition(sourceValue, condition.formElementExpectedValue, operator)
@@ -75,6 +82,37 @@ export function useFormElementVisibility() {
     return selectedOption?.label || ''
   }
 
+  /**
+   * Evaluates visibility condition for CHECKBOX with multiple options.
+   * Checks if ANY of the selected checkboxes matches the expected value.
+   */
+  function evaluateCheckboxCondition(
+    element: FormElementDto,
+    expectedValue: string,
+    operator: VisibilityConditionOperator
+  ): boolean {
+    const selectedLabels = element.options
+      .filter((option) => option.value === 'true')
+      .map((option) => option.label)
+
+    switch (operator) {
+      case VCOperator.Equals:
+        // Check if any selected checkbox label matches the expected value
+        return selectedLabels.some((label) => label.toLowerCase() === expectedValue.toLowerCase())
+      case VCOperator.NotEquals:
+        // Check if no selected checkbox label matches the expected value
+        return !selectedLabels.some((label) => label.toLowerCase() === expectedValue.toLowerCase())
+      case VCOperator.IsEmpty:
+        // Check if no checkboxes are selected
+        return selectedLabels.length === 0
+      case VCOperator.IsNotEmpty:
+        // Check if at least one checkbox is selected
+        return selectedLabels.length > 0
+      default:
+        return false
+    }
+  }
+
   function evaluateCondition(
     actualValue: string,
     expectedValue: string,