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>