rpotisk-quasar/resources/js/components/JsonQueryBuilderRule.vue

<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>