jaro/rpotisk
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

First test

Browse Source
This commit is contained in:
Jaroslav Drzik
2023-01-14 15:37:59 +01:00
parent 6ee5c3d6ef
commit b68fdb31a7
14 changed files with 548 additions and 410 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
resources/js/Components/JsonQueryBuilderGroup.vue Normal file
View File

@@ -0,0 +1,90 @@
<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>