52 lines
2.4 KiB
Vue
52 lines
2.4 KiB
Vue
<script setup>
|
|
import Multiselect from '@/Components/MultiSelect.vue';
|
|
import JsonQueryBuilderGroup from '@/Components/JsonQueryBuilderGroup.vue';
|
|
import TextInput from '@/Components/TextInput.vue';
|
|
import { FolderPlusIcon, PlusCircleIcon, TrashIcon, ArrowPathRoundedSquareIcon} from '@heroicons/vue/24/solid';
|
|
import VueTailwindDatepicker from 'vue-tailwind-datepicker'
|
|
import { ref } from 'vue';
|
|
import { computed } from 'vue';
|
|
|
|
defineProps(['query', 'queryOptions', 'i18n']);
|
|
defineEmits(['update:query', 'update:queryOptions']);
|
|
|
|
const level = ref(0);
|
|
const isVisible = ref(true);
|
|
</script>
|
|
|
|
<template>
|
|
|
|
<div class="container mx-auto mt-10">
|
|
<!-- Card -->
|
|
<div class="h-50 w-full rounded-lg bg-white ">
|
|
<!-- Header -->
|
|
<div class="flex items-center justify-between border-b bg-red-300">
|
|
<div class="p-3 text-gray-700 text-lg font-bold">Query Builder</div>
|
|
<div class="p-3 flex">
|
|
<svg v-if="!isVisible" @click="isVisible = true" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
|
|
<svg v-else @click="isVisible = false" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
|
|
</div>
|
|
</div>
|
|
|
|
<JsonQueryBuilderGroup v-if="isVisible" :currentQuery="query" :queryOptions="queryOptions" :level="level+1"> </JsonQueryBuilderGroup>
|
|
|
|
<div class="h-50 w-full rounded-lg bg-white ">
|
|
<!-- Header -->
|
|
<div class="flex items-center justify-between border-b bg-gray-300">
|
|
<div class="p-3 text-gray-700 text-lg font-bold"></div>
|
|
<div class="p-3 flex">
|
|
<button
|
|
@click="$emit('runQuery')"
|
|
class="text-slate-800 hover:text-blue-600 text-sm bg-green-200 hover:bg-slate-100 border border-slate-200 rounded-lg font-medium px-4 py-2 inline-flex space-x-1 items-center">
|
|
<span>
|
|
<ArrowPathRoundedSquareIcon class="w-4 h-4" />
|
|
</span>
|
|
<span>Spusti vyhľadávanie</span>
|
|
</button>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template> |