From 5e2427ee81bf7de8ce041abbb8cc1543ce9d5379 Mon Sep 17 00:00:00 2001
From: philipp lang <philipp@aweos.de>
Date: Fri, 19 Apr 2024 23:57:05 +0200
Subject: [PATCH] Add condition for checkbox field

---
 resources/js/views/form/Conditions.vue | 50 ++++++++++++++++++++------
 1 file changed, 39 insertions(+), 11 deletions(-)

diff --git a/resources/js/views/form/Conditions.vue b/resources/js/views/form/Conditions.vue
index ad38db12..a494075e 100644
--- a/resources/js/views/form/Conditions.vue
+++ b/resources/js/views/form/Conditions.vue
@@ -10,17 +10,24 @@
         <ui-icon-button class="mt-4 mb-2" icon="plus" @click="addCondition">Bedingung einfügen</ui-icon-button>
 
         <div v-for="(condition, index) in inner.ifs" :key="index" class="grid grid-cols-[1fr_1fr_1fr_max-content] gap-2">
-            <f-select :id="`field-${index}`" v-model="condition.field" :options="fieldOptions" :name="`field-${index}`" label="Feld"></f-select>
+            <f-select
+                :id="`field-${index}`"
+                :model-value="condition.field"
+                :options="fieldOptions"
+                :name="`field-${index}`"
+                label="Feld"
+                @update:model-value="update(index, 'field', $event)"
+            ></f-select>
             <f-select
                 :id="`comparator-${index}`"
                 :options="comparatorOptions"
                 :model-value="condition.comparator"
                 :name="`comparator-${index}`"
                 label="Vergleich"
-                @update:model-value="updateComparator(condition, $event)"
+                @update:model-value="update(index, 'comparator', $event)"
             ></f-select>
             <f-select
-                v-if="condition.field && ['isEqual', 'isNotEqual'].includes(condition.comparator)"
+                v-if="condition.field && ['isEqual', 'isNotEqual'].includes(condition.comparator) && ['RadioField', 'DropdownField'].includes(getField(condition.field).type)"
                 :id="`value-${index}`"
                 v-model="condition.value"
                 :options="getOptions(condition.field)"
@@ -28,13 +35,20 @@
                 label="Wert"
             ></f-select>
             <f-multipleselect
-                v-if="condition.field && ['isIn', 'isNotIn'].includes(condition.comparator)"
+                v-if="condition.field && ['isIn', 'isNotIn'].includes(condition.comparator) && ['RadioField', 'DropdownField'].includes(getField(condition.field).type)"
                 :id="`value-${index}`"
                 v-model="condition.value"
                 :options="getOptions(condition.field)"
                 :name="`value-${index}`"
                 label="Wert"
             ></f-multipleselect>
+            <f-switch
+                v-if="condition.field && condition.comparator && ['CheckboxField'].includes(getField(condition.field).type)"
+                :id="`value-${index}`"
+                v-model="condition.value"
+                :name="`value-${index}`"
+                label="Wert"
+            ></f-switch>
             <ui-action-button tooltip="Löschen" icon="trash" class="btn-danger self-end h-8" @click="inner.ifs.splice(index, 1)"></ui-action-button>
         </div>
 
@@ -57,10 +71,10 @@ const props = defineProps({
 });
 
 const comparatorOptions = ref([
-    {id: 'isEqual', name: 'ist gleich', defaultValue: null},
-    {id: 'isNotEqual', name: 'ist ungleich', defaultValue: null},
-    {id: 'isIn', name: 'ist in', defaultValue: []},
-    {id: 'isNotIn', name: 'ist nicht in', defaultValue: []},
+    {id: 'isEqual', name: 'ist gleich', defaultValue: {DropdownField: null, RadioField: null, CheckboxField: false}},
+    {id: 'isNotEqual', name: 'ist ungleich', defaultValue: {DropdownField: null, RadioField: null, CheckboxField: false}},
+    {id: 'isIn', name: 'ist in', defaultValue: {DropdownField: [], RadioField: [], CheckboxField: false}},
+    {id: 'isNotIn', name: 'ist nicht in', defaultValue: {DropdownField: [], RadioField: [], CheckboxField: false}},
 ]);
 
 const modeOptions = ref([
@@ -81,9 +95,23 @@ const fields = computed(() => {
     return result;
 });
 
-function updateComparator(condition, comparator) {
-    condition.value = comparatorOptions.value.find((c) => c.id === comparator).defaultValue;
-    condition.comparator = comparator;
+function update(index, key, value) {
+    if (key === 'comparator') {
+        var old = inner.value.ifs[index];
+        inner.value.ifs[index] = {
+            field: old.field,
+            comparator: value,
+            value: old.field ? comparatorOptions.value.find((c) => c.id === value).defaultValue[getField(old.field).type] : null,
+        };
+    }
+    if (key === 'field') {
+        var old = inner.value.ifs[index];
+        inner.value.ifs[index] = {
+            field: value,
+            comparator: null,
+            value: null,
+        };
+    }
 }
 
 function getField(fieldName) {