127 lines
4.4 KiB
Vue
127 lines
4.4 KiB
Vue
<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> |