First test

resources/js/Components/JsonQueryBuilderRule.vue

@@ -0,0 +1,127 @@
+<script setup>
+import Multiselect from '@/Components/MultiSelect.vue';
+import TextInput from '@/Components/TextInput.vue';
+import NumberInput from '@/Components/Number.vue';
+import { FolderPlusIcon, PlusCircleIcon, TrashIcon} from '@heroicons/vue/24/solid';
+
+import { ref, onMounted } from 'vue';
+import { computed } from 'vue';
+import VueTailwindDatepicker from 'vue-tailwind-datepicker';
+
+const props = defineProps(['rule', 'options', 'i18n']);
+
+const dateValue = ref([props.rule.value]);
+const formatter = ref({
+  date: 'D.M.YYYY',
+  month: 'MMM'
+});
+
+
+
+const fieldValue = ref(selectByValue(props.options,"name",props.rule.id));
+
+const rulesOperatorOptions = computed({
+  get () {
+    switch(fieldValue.value.type) {
+    case 'Number': 
+        return [
+            {id: '=',  name: 'rovná sa'},
+            {id: '!=',  name: 'nerovná sa'},
+            {id: '>',  name: 'je väčšie'},
+            {id: '<',  name: 'je menšie'},
+            {id: '>=', name: 'je rovné, vačšie'},
+            {id: '<=', name: 'je menšie, rovné'}
+          ];
+          case 'Date': 
+        return [
+            {id: '=',  name: 'rovná sa'},
+            {id: '!=',  name: 'nerovný'},
+            {id: '>',  name: 'je väčší'},
+            {id: '<',  name: 'je menší'},
+            {id: '>=', name: 'je rovný, vačší'},
+            {id: '<=', name: 'je menši, rovný'}
+        ];
+        case 'String':
+            default:
+                return [
+                    {id: '=',  name: 'rovná'},
+                    {id: '!=',  name: 'nerovná sa'},
+                    {id: 'in', name: 'je v'},
+                    {id: 'not in', name: 'nieje v'},
+                    {id: '()',  name: 'obsahuje'},
+                    {id: '!()',  name: 'neobsahuje'},
+                    {id: '(',   name: 'začína'},
+                    {id: ')',   name: 'končí'},
+                    {id: '!(',   name: 'nezačína'},
+                    {id: '!)',   name: 'nekončí'}
+                ];
+            }
+        },
+    }
+);
+
+
+const criteria = ref(selectByValue(rulesOperatorOptions.value,"id",props.rule.operator));
+const input = ref(props.rule.value);
+
+
+function selectByValue(arr, id, value, single = true) {
+    let filtered = arr.filter(a => a[id] == value);
+    console.log(filtered);
+    if (single && filtered.length > 0)
+        return filtered[0];
+    return filtered;
+}
+
+function FieldChange(val) {
+    console.log(val);
+    props.rule.id = val.name;
+    fieldValue.value.type = val.type;
+    input.value = null; 
+    props.rule.value = null;
+}
+
+function CriteriaChange(params) {
+    console.log(params);
+    props.rule.operator = params.id;    
+}
+
+function DateChange(params) {
+    console.log(params);
+    props.rule.value = params[0];
+}
+
+function InputChange(params) {
+    console.log(params);
+    props.rule.value = params;
+}
+</script>
+
+
+<template>
+    <div class="flex justify-between ">
+        <div class="p-3 grow text-gray-700 text-lg font-bold">
+            <Multiselect @change-value="FieldChange" v-model="fieldValue" label="desc" trackby="desc" :options="options"></Multiselect>
+        </div>
+        <div class="p-3 text-gray-700 text-lg font-bold">
+            <Multiselect @change-value="CriteriaChange" v-model="criteria" :value="criteria" :allow-empty="false" label="name" trackby="name" :options="rulesOperatorOptions"></Multiselect>
+        </div>
+        <div class="p-3 grow text-gray-700 text-lg font-bold">
+            <vue-tailwind-datepicker as-single :formatter="formatter" i18n="sk" v-if="fieldValue.type == 'Date'"
+                v-model="dateValue" @update:model-value="DateChange" />
+            <TextInput v-if="fieldValue.type == 'String'" id="value" type="text" class="block w-full " v-model="input"
+                required @update:model-value="InputChange" />
+            <NumberInput v-if="fieldValue.type == 'Number'" id="value" type="number" class="block w-full " v-model="input"
+                required @update:model-value="InputChange" />
+        </div>
+        <div class="p-3 text-gray-700 text-lg font-bold">
+            <button
+                @click="$emit('deleteRule')"
+                class="text-slate-800 hover:text-blue-600 text-sm bg-red-400 hover:bg-slate-100 border border-slate-200 rounded-lg font-medium px-4 py-2 inline-flex space-x-1 items-center">
+                <span>
+                    <TrashIcon class="w-4 h-4 m-1" />
+                </span>
+            </button>
+        </div>
+    </div>
+</template>