First commit

resources/js/components/JsonQueryBuilderGroup.vue

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