90 lines
3.7 KiB
Vue
90 lines
3.7 KiB
Vue
<script setup>
|
|
import { FolderPlusIcon, PlusCircleIcon, TrashIcon} from '@heroicons/vue/24/solid';
|
|
|
|
import JsonQueryBuilderRule from '@/Components/JsonQueryBuilderRule.vue';
|
|
import { ref, onMounted } from 'vue';
|
|
import { computed } from 'vue';
|
|
|
|
const props = defineProps(['currentQuery', 'queryOptions', 'i18n', 'level']);
|
|
|
|
function AddGroup(query) {
|
|
console.log(query.rules);
|
|
let len = query.rules.push({
|
|
condition: 'and',
|
|
rules: []
|
|
});
|
|
AddRule(query.rules[len-1]);
|
|
}
|
|
|
|
function DeleteGroup(query,item) {
|
|
console.log(item);
|
|
query.rules.splice(query.rules.indexOf(item), 1);
|
|
}
|
|
|
|
function AddRule(query){
|
|
console.log(query.rules);
|
|
query.rules.push({
|
|
id: '',
|
|
operator: '=',
|
|
value: ''
|
|
})
|
|
}
|
|
|
|
function DeleteRule(rules, rule) {
|
|
console.log(rule);
|
|
rules.splice(rules.indexOf(rule), 1);
|
|
}
|
|
</script>
|
|
|
|
|
|
<template>
|
|
<div :class="level > 1 ? 'border-4 border-blue-300' : ''">
|
|
<div class="flex items-center justify-between">
|
|
<div class="p-3 text-gray-700 text-lg font-bold">
|
|
<button
|
|
class="font-bold text-slate-800 hover:text-blue-600 text-sm bg-white hover:bg-slate-100 border border-slate-200 rounded-l-lg font-medium px-4 py-2 inline-flex space-x-1 items-center"
|
|
:class="currentQuery.condition == 'and' ? 'bg-blue-500' : 'bg-white'"
|
|
@click="currentQuery.condition = 'and'">
|
|
<span>AND</span>
|
|
</button>
|
|
<button
|
|
class="text-slate-800 hover:text-blue-600 text-sm bg-white hover:bg-slate-100 border border-slate-200 rounded-r-lg font-medium px-4 py-2 inline-flex space-x-1 items-center"
|
|
:class="currentQuery.condition != 'and' ? 'bg-blue-500' : 'bg-white'"
|
|
@click="currentQuery.condition = 'or'">
|
|
<span>OR</span>
|
|
</button>
|
|
</div>
|
|
<div class="p-3 text-gray-700 text-md font-bold">
|
|
<button v-if="level > 1"
|
|
@click="$emit('deleteGroup')"
|
|
class="text-slate-800 hover:text-blue-600 text-sm bg-red-300 hover:bg-slate-100 border border-slate-200 rounded-l-lg font-medium px-4 py-2 inline-flex space-x-1 items-center">
|
|
<span>
|
|
<TrashIcon class="w-4 h-4" />
|
|
</span>
|
|
<span>Zmaž skupinu</span>
|
|
</button>
|
|
<button
|
|
@click="AddGroup(currentQuery)"
|
|
class="font-bold text-slate-800 hover:text-blue-600 text-sm bg-white hover:bg-slate-100 border border-slate-200 rounded--lg font-medium px-4 py-2 inline-flex space-x-1 items-center"
|
|
:class="level == 1 ? 'rounded-l-lg' : ''">
|
|
<span>
|
|
<FolderPlusIcon class="w-4 h-4" />
|
|
</span>
|
|
<span>Pridaj skupinu</span>
|
|
</button>
|
|
<button
|
|
@click="AddRule(currentQuery)"
|
|
class="text-slate-800 hover:text-blue-600 text-sm bg-white hover:bg-slate-100 border border-slate-200 rounded-r-lg font-medium px-4 py-2 inline-flex space-x-1 items-center">
|
|
<span>
|
|
<PlusCircleIcon class="w-4 h-4" />
|
|
</span>
|
|
<span>Pridaj pravidlo</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<template v-for="(item) in currentQuery.rules" :key="item._uuid">
|
|
<JsonQueryBuilderGroup v-if="typeof item.condition === 'string'" :currentQuery="item" :queryOptions="queryOptions" @delete-group="DeleteGroup(currentQuery,item)" :level="level + 1"></JsonQueryBuilderGroup>
|
|
<JsonQueryBuilderRule v-else :rule="item" :options="queryOptions" @delete-rule="DeleteRule(currentQuery.rules,item)"></JsonQueryBuilderRule>
|
|
</template>
|
|
</div>
|
|
</template> |