87 lines
2.6 KiB
Vue
87 lines
2.6 KiB
Vue
<script setup>
|
|
import { FolderAddIcon, PlusCircleIcon, TrashIcon} from '@vue-hero-icons/outline';
|
|
|
|
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 q-pa-xs' : 'q-pa-xs'">
|
|
<div class="row q-pa-sm q-gutter-sm items-center justify-between">
|
|
<div class="p-3 text-gray-700 text-lg font-bold">
|
|
<q-btn-toggle
|
|
v-model="currentQuery.condition"
|
|
|
|
class="q-"
|
|
no-caps
|
|
rounded
|
|
unelevated
|
|
toggle-color="blue"
|
|
color="white"
|
|
text-color="primary"
|
|
:options="[
|
|
{label: 'AND', value: 'and'},
|
|
{label: 'OR', value: 'or'}
|
|
]"
|
|
/>
|
|
|
|
</div>
|
|
<div class="p-3 text-gray-700 text-md font-bold">
|
|
|
|
<q-btn-group push>
|
|
<q-btn v-if="level > 1" @click="$emit('deleteGroup')" color="yellow" glossy text-color="black" push label="Zmaž skupinu" icon="delete" />
|
|
<q-btn color="amber" @click="AddGroup(currentQuery)" glossy text-color="black" push label="Pridaj skupinu" icon="folder"/>
|
|
<q-btn color="orange" @click="AddRule(currentQuery)" glossy text-color="black" push label="Pridaj pravidlo" icon="add" />
|
|
</q-btn-group>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="q-pa-xs" 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>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<style>
|
|
.q-btn-group {
|
|
border: 1px solid gray;
|
|
}
|
|
.border-4 {
|
|
border: 4px solid blue;
|
|
}
|
|
</style>
|