First commit

resources/js/components/JsonQueryBuilderRule.vue

@@ -0,0 +1,166 @@
+<script setup>
+import Multiselect from 'vue-multiselect';
+import { matDelete } from '@quasar/extras/material-icons';
+
+import { ref, onMounted } from 'vue';
+import { computed } from 'vue';
+
+const props = defineProps(['rule', 'options', 'i18n']);
+
+console.log("VALUE",props.rule.value);
+const dateValue = ref(props.rule.value);
+const filteredOptions = ref(props.options);
+
+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 filterFn (val, update, abort) {
+        update(() => {
+          const needle = val.toLocaleLowerCase();
+          filteredOptions.value = props.options.filter(v => v.desc.toLocaleLowerCase().indexOf(needle) > -1)
+        })
+}
+
+function setModel (val) {
+        fieldValue.value.value = val
+}
+
+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=",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="row qa-pa-xs q-gutter-sm justify-between ">
+        <div class="">
+            <q-select
+                dense
+              filled
+              use-input
+              hide-selected
+              fill-input
+              v-model="fieldValue"
+              option-label="desc"
+              option-value="id"
+              :options="filteredOptions"
+              @input-value="setModel"
+              @filter="filterFn"
+              style="min-width: 400px;"
+              />
+        </div>
+        <div class="col">
+            <q-select
+            dense
+              filled
+              fill-input
+              v-model="criteria"
+              option-label="name"
+              option-value="name"
+              @update:model-value="CriteriaChange"
+              :options="rulesOperatorOptions"
+              />
+        </div>
+        <div class="col">
+            <q-input v-if="fieldValue.type == 'Date'" dense filled v-model="dateValue" mask="date" >
+            <template v-slot:append>
+                <q-icon name="event" class="cursor-pointer">
+                <q-popup-proxy cover transition-show="scale" transition-hide="scale">
+                    <q-date v-model="dateValue">
+                    <div class="row items-center justify-end">
+                        <q-btn v-close-popup label="Close" color="primary" flat />
+                    </div>
+                    </q-date>
+                </q-popup-proxy>
+                </q-icon>
+            </template>
+            </q-input>
+
+            <q-input  v-if="fieldValue.type == 'String'" id="value" outlined dense filled type="text" class="block w-full" v-model="input" required @update:model-value="InputChange" />
+            <q-input v-if="fieldValue.type == 'Number'" id="value" outlined  dense filled type="number" class="block w-full" v-model="input" required @update:model-value="InputChange" />
+        </div>
+        <div>
+        <q-btn rounded color="red" text-color="black" :icon="matDelete" @click="$emit('deleteRule')" />
+        </div>
+     </div>
+</template>
+<style>
+@import 'vue-multiselect/dist/vue-multiselect.css';
+</style>