First commit

resources/js/components/JsonQueryBuilder.vue

@@ -0,0 +1,50 @@
+<script setup>
+import Multiselect from 'vue-multiselect';
+import JsonQueryBuilderGroup from '@/Components/JsonQueryBuilderGroup.vue';
+import { FolderAddIcon, PlusCircleIcon, TrashIcon, ArrowCircleRightIcon} from '@vue-hero-icons/outline';
+import VueTailwindDatepicker from 'vue-tailwind-datepicker'
+import { ref } from 'vue';
+import { computed } from 'vue';
+
+defineProps(['query', 'currentQuery', 'queryOptions', 'i18n']);
+defineEmits(['update:query', 'update:queryOptions', 'runQuery']);
+
+const level = ref(0);
+const expanded = ref(true);
+</script>
+
+<template>
+
+    <div class="q-pa-md row items-start q-gutter-md">
+        <!-- Card -->
+        <q-card class="my-card q-pa-sm">
+            <!-- Header -->
+            <q-card-section class="bg-red-4 text-white">
+              <div class="row items-center">
+                <div class="col text-h6">Query Builder</div>
+                <q-card-actions align="right" class="col">
+                        <q-btn
+                            color="grey"
+                            round
+                            flat
+                            dense
+                            :icon="expanded ? 'keyboard_arrow_up' : 'keyboard_arrow_down'"
+                            @click="expanded = !expanded"
+                        />
+                 </q-card-actions>
+                </div>
+            </q-card-section>
+
+        <q-slide-transition>
+          <div v-show="expanded">
+          <q-separator />
+            <JsonQueryBuilderGroup :currentQuery="query" :queryOptions="queryOptions" :level="level+1"> </JsonQueryBuilderGroup>
+          </div>
+        </q-slide-transition>
+
+        <div class="row no-wrap justify-end q-mt-md q-pa-sm bg-grey-8 text-white">
+              <q-btn rounded color="brown-4" @click="$emit('runQuery')" label="Spusti vyhľadávanie" icon="sync" />
+        </div>
+      </q-card>
+</div>
+</template>