51 lines
1.8 KiB
Vue
51 lines
1.8 KiB
Vue
<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>
|