First test
This commit is contained in:
26
resources/js/Components/Input.vue
Normal file
26
resources/js/Components/Input.vue
Normal file
@@ -0,0 +1,26 @@
|
||||
<script>
|
||||
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
type: String,
|
||||
default: ""
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
model: {
|
||||
get() {
|
||||
return this.value;
|
||||
},
|
||||
set(value) {
|
||||
this.$emit("input", value);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<input type="text" v-model="model" placeholder="dummy input">
|
||||
</template>
|
||||
52
resources/js/Components/JsonQueryBuilder.vue
Normal file
52
resources/js/Components/JsonQueryBuilder.vue
Normal file
@@ -0,0 +1,52 @@
|
||||
<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);
|
||||
|
||||
</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 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> v-if="!isVisible"</svg>
|
||||
<svg 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> v-else </svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<JsonQueryBuilderGroup :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>
|
||||
90
resources/js/Components/JsonQueryBuilderGroup.vue
Normal file
90
resources/js/Components/JsonQueryBuilderGroup.vue
Normal 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>
|
||||
127
resources/js/Components/JsonQueryBuilderRule.vue
Normal file
127
resources/js/Components/JsonQueryBuilderRule.vue
Normal file
@@ -0,0 +1,127 @@
|
||||
<script setup>
|
||||
import Multiselect from '@/Components/MultiSelect.vue';
|
||||
import TextInput from '@/Components/TextInput.vue';
|
||||
import NumberInput from '@/Components/Number.vue';
|
||||
import { FolderPlusIcon, PlusCircleIcon, TrashIcon} from '@heroicons/vue/24/solid';
|
||||
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { computed } from 'vue';
|
||||
import VueTailwindDatepicker from 'vue-tailwind-datepicker';
|
||||
|
||||
const props = defineProps(['rule', 'options', 'i18n']);
|
||||
|
||||
const dateValue = ref([props.rule.value]);
|
||||
const formatter = ref({
|
||||
date: 'D.M.YYYY',
|
||||
month: 'MMM'
|
||||
});
|
||||
|
||||
|
||||
|
||||
const fieldValue = ref(selectByValue(props.options,"name",props.rule.id));
|
||||
|
||||
const rulesOperatorOptions = computed({
|
||||
get () {
|
||||
switch(fieldValue.value.type) {
|
||||
case 'Number':
|
||||
return [
|
||||
{id: '=', name: 'rovná sa'},
|
||||
{id: '!=', name: 'nerovná sa'},
|
||||
{id: '>', name: 'je väčšie'},
|
||||
{id: '<', name: 'je menšie'},
|
||||
{id: '>=', name: 'je rovné, vačšie'},
|
||||
{id: '<=', name: 'je menšie, rovné'}
|
||||
];
|
||||
case 'Date':
|
||||
return [
|
||||
{id: '=', name: 'rovná sa'},
|
||||
{id: '!=', name: 'nerovný'},
|
||||
{id: '>', name: 'je väčší'},
|
||||
{id: '<', name: 'je menší'},
|
||||
{id: '>=', name: 'je rovný, vačší'},
|
||||
{id: '<=', name: 'je menši, rovný'}
|
||||
];
|
||||
case 'String':
|
||||
default:
|
||||
return [
|
||||
{id: '=', name: 'rovná'},
|
||||
{id: '!=', name: 'nerovná sa'},
|
||||
{id: 'in', name: 'je v'},
|
||||
{id: 'not in', name: 'nieje v'},
|
||||
{id: '()', name: 'obsahuje'},
|
||||
{id: '!()', name: 'neobsahuje'},
|
||||
{id: '(', name: 'začína'},
|
||||
{id: ')', name: 'končí'},
|
||||
{id: '!(', name: 'nezačína'},
|
||||
{id: '!)', name: 'nekončí'}
|
||||
];
|
||||
}
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
|
||||
const criteria = ref(selectByValue(rulesOperatorOptions.value,"id",props.rule.operator));
|
||||
const input = ref(props.rule.value);
|
||||
|
||||
|
||||
function selectByValue(arr, id, value, single = true) {
|
||||
let filtered = arr.filter(a => a[id] == value);
|
||||
console.log(filtered);
|
||||
if (single && filtered.length > 0)
|
||||
return filtered[0];
|
||||
return filtered;
|
||||
}
|
||||
|
||||
function FieldChange(val) {
|
||||
console.log(val);
|
||||
props.rule.id = val.name;
|
||||
fieldValue.value.type = val.type;
|
||||
input.value = null;
|
||||
props.rule.value = null;
|
||||
}
|
||||
|
||||
function CriteriaChange(params) {
|
||||
console.log(params);
|
||||
props.rule.operator = params.id;
|
||||
}
|
||||
|
||||
function DateChange(params) {
|
||||
console.log(params);
|
||||
props.rule.value = params[0];
|
||||
}
|
||||
|
||||
function InputChange(params) {
|
||||
console.log(params);
|
||||
props.rule.value = params;
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<template>
|
||||
<div class="flex justify-between ">
|
||||
<div class="p-3 grow text-gray-700 text-lg font-bold">
|
||||
<Multiselect @change-value="FieldChange" v-model="fieldValue" label="desc" trackby="desc" :options="options"></Multiselect>
|
||||
</div>
|
||||
<div class="p-3 text-gray-700 text-lg font-bold">
|
||||
<Multiselect @change-value="CriteriaChange" v-model="criteria" :value="criteria" :allow-empty="false" label="name" trackby="name" :options="rulesOperatorOptions"></Multiselect>
|
||||
</div>
|
||||
<div class="p-3 grow text-gray-700 text-lg font-bold">
|
||||
<vue-tailwind-datepicker as-single :formatter="formatter" i18n="sk" v-if="fieldValue.type == 'Date'"
|
||||
v-model="dateValue" @update:model-value="DateChange" />
|
||||
<TextInput v-if="fieldValue.type == 'String'" id="value" type="text" class="block w-full " v-model="input"
|
||||
required @update:model-value="InputChange" />
|
||||
<NumberInput v-if="fieldValue.type == 'Number'" id="value" type="number" class="block w-full " v-model="input"
|
||||
required @update:model-value="InputChange" />
|
||||
</div>
|
||||
<div class="p-3 text-gray-700 text-lg font-bold">
|
||||
<button
|
||||
@click="$emit('deleteRule')"
|
||||
class="text-slate-800 hover:text-blue-600 text-sm bg-red-400 hover:bg-slate-100 border border-slate-200 rounded-lg font-medium px-4 py-2 inline-flex space-x-1 items-center">
|
||||
<span>
|
||||
<TrashIcon class="w-4 h-4 m-1" />
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -4,15 +4,13 @@ import { onMounted, ref } from 'vue';
|
||||
import { defineEmits } from 'vue'
|
||||
|
||||
|
||||
defineProps(['modelValue', 'options', 'trackby', 'label']);
|
||||
defineEmits(['update:modelValue']);
|
||||
const props = defineProps(['modelValue', 'options', 'trackby', 'selectby', 'label', 'value', 'allowEmpty']);
|
||||
defineEmits(['update:modelValue', 'changeValue']);
|
||||
|
||||
const input = ref(null);
|
||||
const value = ref(props.modelValue);
|
||||
|
||||
function update(t) {
|
||||
console.log(t);
|
||||
context.emit("update:modelValue",t);
|
||||
}
|
||||
console.log('props=',value.value);
|
||||
|
||||
</script>
|
||||
|
||||
@@ -20,7 +18,7 @@ function update(t) {
|
||||
<template>
|
||||
|
||||
|
||||
<multiselect :value="modelValue" v-model="value" @select='$emit("update:modelValue", $event)' :track-by="trackby" :label="label" placeholder="Vyber jednu" :options="options" :clear-on-select="false" :searchable="true" ref="input">
|
||||
<multiselect :value="modelValue" v-model="value" @select='$emit("changeValue", $event)' :track-by="trackby" :label="label" placeholder="Vyber jednu" :options="options" :clear-on-select="false" :searchable="true" ref="input">
|
||||
|
||||
</multiselect>
|
||||
|
||||
|
||||
27
resources/js/Components/Number.vue
Normal file
27
resources/js/Components/Number.vue
Normal file
@@ -0,0 +1,27 @@
|
||||
<script setup>
|
||||
import { onMounted, ref } from 'vue';
|
||||
|
||||
defineProps(['modelValue']);
|
||||
|
||||
defineEmits(['update:modelValue']);
|
||||
|
||||
const input = ref(null);
|
||||
|
||||
onMounted(() => {
|
||||
if (input.value.hasAttribute('autofocus')) {
|
||||
input.value.focus();
|
||||
}
|
||||
});
|
||||
|
||||
defineExpose({ focus: () => input.value.focus() });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<input
|
||||
class="h-10 border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm"
|
||||
:value="modelValue"
|
||||
@input="$emit('update:modelValue', $event.target.value)"
|
||||
ref="input"
|
||||
/>
|
||||
</template>
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
<script setup>
|
||||
import { onMounted, ref } from 'vue';
|
||||
|
||||
defineProps(['modelValue']);
|
||||
const props = defineProps(['modelValue']);
|
||||
|
||||
defineEmits(['update:modelValue']);
|
||||
|
||||
const input = ref(null);
|
||||
const value = ref(props.modelValue);
|
||||
|
||||
onMounted(() => {
|
||||
if (input.value.hasAttribute('autofocus')) {
|
||||
@@ -18,7 +19,7 @@ defineExpose({ focus: () => input.value.focus() });
|
||||
|
||||
<template>
|
||||
<input
|
||||
class="border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm"
|
||||
class="h-10 border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm"
|
||||
:value="modelValue"
|
||||
@input="$emit('update:modelValue', $event.target.value)"
|
||||
ref="input"
|
||||
|
||||
@@ -1,90 +1,91 @@
|
||||
let rpoFields = [{name: 'identifiers.value', desc: 'Identifikátor' },
|
||||
{name: 'identifiers.validFrom', desc: 'Identifikátor, platnosť od' },
|
||||
{name: 'fullNames.value', desc: 'Plné meno' },
|
||||
{name: 'fullNames.validFrom', desc: 'Plné meno, platnosť od' },
|
||||
{name: 'addresses.validFrom', desc: 'Adresa, platnosť od' },
|
||||
{name: 'addresses.street', desc: 'Ulica' },
|
||||
{name: 'addresses.regNumber', desc: 'Reg. číslo' },
|
||||
{name: 'addresses.buildingNumber', desc: 'čislo budovy' },
|
||||
{name: 'addresses.postalCodes', desc: 'PSČ' },
|
||||
{name: 'addresses.municipality.value', desc: 'Mesto' },
|
||||
let rpoFields =
|
||||
[{name: 'identifiers.value', desc: 'Identifikátor' , type: 'String'},
|
||||
{name: 'identifiers.validFrom', desc: 'Identifikátor, platnosť od', type: 'Date'},
|
||||
{name: 'fullNames.value', desc: 'Plné meno', type: 'String' },
|
||||
{name: 'fullNames.validFrom', desc: 'Plné meno, platnosť od', type: 'Date' },
|
||||
{name: 'addresses.validFrom', desc: 'Adresa, platnosť od', type: 'Date' },
|
||||
{name: 'addresses.street', desc: 'Ulica', type: 'String' },
|
||||
{name: 'addresses.regNumber', desc: 'Reg. číslo', type: 'String' },
|
||||
{name: 'addresses.buildingNumber', desc: 'čislo budovy', type: 'String' },
|
||||
{name: 'addresses.postalCodes', desc: 'PSČ', type: 'String' },
|
||||
{name: 'addresses.municipality.value', desc: 'Mesto', type: 'String' },
|
||||
{name: 'addresses.country.codelistCode', desc: 'Kód zoznamu krajiny' },
|
||||
{name: 'addresses.country.code', desc: 'Kód krajiny' },
|
||||
{name: 'addresses.country.value', desc: 'Krajina' },
|
||||
{name: 'addresses.country.code', desc: 'Kód krajiny', type: 'Number' },
|
||||
{name: 'addresses.country.value', desc: 'Krajina', type: 'String' },
|
||||
{name: 'legalForms.value.codelistCode', desc: 'Právna forma kód zoznamu' },
|
||||
{name: 'legalForms.value.code', desc: 'Právna forma kód' },
|
||||
{name: 'legalForms.value.value', desc: 'Právna forma' },
|
||||
{name: 'legalForms.validFrom', desc: 'Právna forma platná od' },
|
||||
{name: 'establishment', desc: 'Založenie' },
|
||||
{name: 'activities.economicActivityDescription', desc: 'Typ ekonomickej aktivity' },
|
||||
{name: 'activities.validFrom', desc: 'Typ ekonomickej aktivity platný od' },
|
||||
{name: 'legalForms.value.code', desc: 'Právna forma kód', type: 'Number' },
|
||||
{name: 'legalForms.value.value', desc: 'Právna forma', type: 'String' },
|
||||
{name: 'legalForms.validFrom', desc: 'Právna forma platná od', type: 'Date' },
|
||||
{name: 'establishment', desc: 'Založenie', type: 'Date' },
|
||||
{name: 'activities.economicActivityDescription', desc: 'Typ ekonomickej aktivity', type: 'String' },
|
||||
{name: 'activities.validFrom', desc: 'Typ ekonomickej aktivity platný od', type: 'Date' },
|
||||
{name: 'statutoryBodies.stakeholderType.codelistCode', desc: 'Partneri v podnikaní zoznam kód' },
|
||||
{name: 'statutoryBodies.stakeholderType.code', desc: 'Partneri v podnikaní kód' },
|
||||
{name: 'statutoryBodies.stakeholderType.value', desc: 'Partneri v podnikaní' },
|
||||
{name: 'statutoryBodies.validFrom', desc: 'Štatutári platný od' },
|
||||
{name: 'statutoryBodies.address.street', desc: 'Štatutári, adresa, ulica' },
|
||||
{name: 'statutoryBodies.address.regNumber', desc: 'Štatutári, adresa, reg. číslo' },
|
||||
{name: 'statutoryBodies.address.buildingNumber', desc: 'Štatutári, adresa, číslo budovy' },
|
||||
{name: 'statutoryBodies.address.postalCodes', desc: 'Štatutári, adresa, PSČ' },
|
||||
{name: 'statutoryBodies.address.municipality.value', desc: 'Štatutári, adresa, miesto' },
|
||||
{name: 'statutoryBodies.stakeholderType.code', desc: 'Partneri v podnikaní kód', type: 'Number' },
|
||||
{name: 'statutoryBodies.stakeholderType.value', desc: 'Partneri v podnikaní', type: 'String' },
|
||||
{name: 'statutoryBodies.validFrom', desc: 'Štatutári platný od', type: 'Date' },
|
||||
{name: 'statutoryBodies.address.street', desc: 'Štatutári, adresa, ulica', type: 'String' },
|
||||
{name: 'statutoryBodies.address.regNumber', desc: 'Štatutári, adresa, reg. číslo', type: 'String' },
|
||||
{name: 'statutoryBodies.address.buildingNumber', desc: 'Štatutári, adresa, číslo budovy', type: 'String' },
|
||||
{name: 'statutoryBodies.address.postalCodes', desc: 'Štatutári, adresa, PSČ', type: 'String' },
|
||||
{name: 'statutoryBodies.address.municipality.value', desc: 'Štatutári, adresa, miesto', type: 'String' },
|
||||
{name: 'statutoryBodies.address.country.codelistCode', desc: 'Štatutári, adresa, krajina CL' },
|
||||
{name: 'statutoryBodies.address.country.code', desc: 'Štatutári, adresa, krajina, kód' },
|
||||
{name: 'statutoryBodies.address.country.value', desc: 'Štatutári, krajina' },
|
||||
{name: 'statutoryBodies.personName.formatedName', desc: 'Štatutári, celé meno' },
|
||||
{name: 'statutoryBodies.personName.givenNames', desc: 'Štatutári, krstné meno' },
|
||||
{name: 'statutoryBodies.personName.familyNames', desc: 'Štatutári, priezvisko' },
|
||||
{name: 'statutoryBodies.address.country.code', desc: 'Štatutári, adresa, krajina, kód', type: 'Number' },
|
||||
{name: 'statutoryBodies.address.country.value', desc: 'Štatutári, krajina', type: 'String' },
|
||||
{name: 'statutoryBodies.personName.formatedName', desc: 'Štatutári, celé meno', type: 'String' },
|
||||
{name: 'statutoryBodies.personName.givenNames', desc: 'Štatutári, krstné meno', type: 'String' },
|
||||
{name: 'statutoryBodies.personName.familyNames', desc: 'Štatutári, priezvisko', type: 'String' },
|
||||
{name: 'stakeholders.stakeholderType.codelistCode', desc: 'Prartneri v podnikaní, CL' },
|
||||
{name: 'stakeholders.stakeholderType.code', desc: 'Prartneri v podnikaní, kód' },
|
||||
{name: 'stakeholders.stakeholderType.value', desc: 'Prartneri v podnikaní' },
|
||||
{name: 'stakeholders.validFrom', desc: 'Prartneri v podnikaní, platné od' },
|
||||
{name: 'stakeholders.address.street', desc: 'Prartneri v podnikaní, ulica' },
|
||||
{name: 'stakeholders.address.regNumber', desc: 'Prartneri v podnikaní, reg. číslo' },
|
||||
{name: 'stakeholders.address.buildingNumber', desc: 'Prartneri v podnikaní, budova číslo' },
|
||||
{name: 'stakeholders.address.postalCodes', desc: 'Prartneri v podnikaní, PSČ' },
|
||||
{name: 'stakeholders.address.municipality.value', desc: 'Prartneri v podnikaní, miesto' },
|
||||
{name: 'stakeholders.stakeholderType.code', desc: 'Prartneri v podnikaní, kód', type: 'Number' },
|
||||
{name: 'stakeholders.stakeholderType.value', desc: 'Prartneri v podnikaní', type: 'String' },
|
||||
{name: 'stakeholders.validFrom', desc: 'Prartneri v podnikaní, platné od', type: 'Date' },
|
||||
{name: 'stakeholders.address.street', desc: 'Prartneri v podnikaní, ulica', type: 'String' },
|
||||
{name: 'stakeholders.address.regNumber', desc: 'Prartneri v podnikaní, reg. číslo', type: 'String' },
|
||||
{name: 'stakeholders.address.buildingNumber', desc: 'Prartneri v podnikaní, budova číslo', type: 'String' },
|
||||
{name: 'stakeholders.address.postalCodes', desc: 'Prartneri v podnikaní, PSČ', type: 'String' },
|
||||
{name: 'stakeholders.address.municipality.value', desc: 'Prartneri v podnikaní, miesto', type: 'String' },
|
||||
{name: 'stakeholders.address.country.codelistCode', desc: 'Prartneri v podnikaní, adresa, CL' },
|
||||
{name: 'stakeholders.address.country.code', desc: 'Prartneri v podnikaní, krajina, kód' },
|
||||
{name: 'stakeholders.address.country.value', desc: 'Prartneri v podnikaní, krajina' },
|
||||
{name: 'stakeholders.personName.formatedName', desc: 'Prartneri v podnikaní, celé meno' },
|
||||
{name: 'stakeholders.personName.givenNames', desc: 'Prartneri v podnikaní, krstné meno' },
|
||||
{name: 'otherLegalFacts.value', desc: 'Poznámky k právnym informáciam' },
|
||||
{name: 'otherLegalFacts.validFrom', desc: 'Poznámky k právnym informáciam, platné od' },
|
||||
{name: 'authorizations.value', desc: 'Autorizácia' },
|
||||
{name: 'authorizations.validFrom', desc: 'Autorizácia, platná od' },
|
||||
{name: 'equities.validFrom', desc: 'Cenné papiere, platné od' },
|
||||
{name: 'equities.value', desc: 'Cenné papiere' },
|
||||
{name: 'stakeholders.address.country.code', desc: 'Prartneri v podnikaní, krajina, kód', type: 'Number' },
|
||||
{name: 'stakeholders.address.country.value', desc: 'Prartneri v podnikaní, krajina', type: 'String' },
|
||||
{name: 'stakeholders.personName.formatedName', desc: 'Prartneri v podnikaní, celé meno', type: 'String' },
|
||||
{name: 'stakeholders.personName.givenNames', desc: 'Prartneri v podnikaní, krstné meno', type: 'String' },
|
||||
{name: 'otherLegalFacts.value', desc: 'Poznámky k právnym informáciam', type: 'String' },
|
||||
{name: 'otherLegalFacts.validFrom', desc: 'Poznámky k právnym informáciam, platné od', type: 'Date' },
|
||||
{name: 'authorizations.value', desc: 'Autorizácia', type: 'String' },
|
||||
{name: 'authorizations.validFrom', desc: 'Autorizácia, platná od', type: 'Date' },
|
||||
{name: 'equities.validFrom', desc: 'Cenné papiere, platné od', type: 'Date' },
|
||||
{name: 'equities.value', desc: 'Cenné papiere', type: 'String' },
|
||||
{name: 'equities.currency.codelistCode', desc: 'Cenné papiere, mena, CL' },
|
||||
{name: 'equities.currency.code', desc: 'Cenné papiere, mena, kód' },
|
||||
{name: 'equities.currency.value', desc: 'Cenné papiere, mena' },
|
||||
{name: 'equities.valuePaid', desc: 'Cenné papiere, zaplatené' },
|
||||
{name: 'deposits.validTo', desc: 'Depozit, platný' },
|
||||
{name: 'deposits.personName.formatedName', desc: 'Depozit, celé meno' },
|
||||
{name: 'deposits.personName.givenNames', desc: 'Depozit, krstné meno' },
|
||||
{name: 'deposits.personName.familyNames', desc: 'Depozit, priezvisko' },
|
||||
{name: 'deposits.amount', desc: 'Depozit, čiastka' },
|
||||
{name: 'equities.currency.code', desc: 'Cenné papiere, mena, kód', type: 'Number' },
|
||||
{name: 'equities.currency.value', desc: 'Cenné papiere, mena', type: 'String' },
|
||||
{name: 'equities.valuePaid', desc: 'Cenné papiere, zaplatené', type: 'Number' },
|
||||
{name: 'deposits.validTo', desc: 'Depozit, platný', type: 'Date' },
|
||||
{name: 'deposits.personName.formatedName', desc: 'Depozit, celé meno', type: 'String' },
|
||||
{name: 'deposits.personName.givenNames', desc: 'Depozit, krstné meno', type: 'String' },
|
||||
{name: 'deposits.personName.familyNames', desc: 'Depozit, priezvisko', type: 'String' },
|
||||
{name: 'deposits.amount', desc: 'Depozit, čiastka', type: 'Number' },
|
||||
{name: 'deposits.currency.codelistCode', desc: 'Depozit, mena, CL' },
|
||||
{name: 'deposits.currency.code', desc: 'Depozit, mena, kód' },
|
||||
{name: 'deposits.currency.value', desc: 'Depozit, mena, hodnota' },
|
||||
{name: 'deposits.validFrom', desc: 'Depozit, platné od' },
|
||||
{name: 'deposits.personName.formatedName', desc: 'Depozit, celé meno' },
|
||||
{name: 'deposits.personName.givenNames', desc: 'Depozit, krstné meno' },
|
||||
{name: 'deposits.personName.familyNames', desc: 'Depozit, priezvisko' },
|
||||
{name: 'deposits.amount', desc: 'Depozit, čiastka' },
|
||||
{name: 'deposits.validTo', desc: 'Depozit, platný do' },
|
||||
{name: 'deposits.currency.code', desc: 'Depozit, mena, kód', type: 'Number' },
|
||||
{name: 'deposits.currency.value', desc: 'Depozit, mena, hodnota', type: 'String' },
|
||||
{name: 'deposits.validFrom', desc: 'Depozit, platné od', type: 'Date' },
|
||||
{name: 'deposits.personName.formatedName', desc: 'Depozit, celé meno', type: 'String' },
|
||||
{name: 'deposits.personName.givenNames', desc: 'Depozit, krstné meno', type: 'String' },
|
||||
{name: 'deposits.personName.familyNames', desc: 'Depozit, priezvisko', type: 'String' },
|
||||
{name: 'deposits.amount', desc: 'Depozit, čiastka', type: 'Number' },
|
||||
{name: 'deposits.validTo', desc: 'Depozit, platný do', type: 'Date' },
|
||||
{name: 'sourceRegister.value.codelistCode', desc: 'Registračný úrad, CL' },
|
||||
{name: 'sourceRegister.value.code', desc: 'Registračný úrad, kód' },
|
||||
{name: 'sourceRegister.value.value', desc: 'Registračný úrad' },
|
||||
{name: 'sourceRegister.registrationOffices.value', desc: 'Registračný úrad, kancelária' },
|
||||
{name: 'sourceRegister.registrationOffices.validFrom', desc: 'Registračný úrad, kancelária, platné od' },
|
||||
{name: 'sourceRegister.registrationNumbers.value', desc: 'Registračný úrad, registračné číslo' },
|
||||
{name: 'sourceRegister.registrationNumbers.validFrom', desc: 'Registračný úrad, registračné číslo, platné od' },
|
||||
{name: 'statisticalCodes.statCodesActualization', desc: 'Štatistický kód, aktualizácia' },
|
||||
{name: 'sourceRegister.value.code', desc: 'Registračný úrad, kód', type: 'Number' },
|
||||
{name: 'sourceRegister.value.value', desc: 'Registračný úrad', type: 'String' },
|
||||
{name: 'sourceRegister.registrationOffices.value', desc: 'Registračný úrad, kancelária', type: 'String' },
|
||||
{name: 'sourceRegister.registrationOffices.validFrom', desc: 'Registračný úrad, kancelária, platné od', type: 'Date' },
|
||||
{name: 'sourceRegister.registrationNumbers.value', desc: 'Registračný úrad, registračné číslo', type: 'String' },
|
||||
{name: 'sourceRegister.registrationNumbers.validFrom', desc: 'Registračný úrad, registračné číslo, platné od', type: 'Date' },
|
||||
{name: 'statisticalCodes.statCodesActualization', desc: 'Štatistický kód, aktualizácia', type: 'Date' },
|
||||
{name: 'statisticalCodes.mainActivity.codelistCode', desc: 'Štatistický kód, hlavná aktivita, CL' },
|
||||
{name: 'statisticalCodes.mainActivity.code', desc: 'Štatistický kód, hlavná aktivita, kód' },
|
||||
{name: 'statisticalCodes.mainActivity.value', desc: 'Štatistický kód, hlavná aktivita' },
|
||||
{name: 'statisticalCodes.mainActivity.code', desc: 'Štatistický kód, hlavná aktivita, kód', type: 'Number' },
|
||||
{name: 'statisticalCodes.mainActivity.value', desc: 'Štatistický kód, hlavná aktivita', type: 'String' },
|
||||
{name: 'statisticalCodes.esa2010.codelistCode', desc: 'Štatistický kód, ESA 2010, CL' },
|
||||
{name: 'statisticalCodes.esa2010.code', desc: 'Štatistický kód, ESA 2010, kód' },
|
||||
{name: 'statisticalCodes.esa2010.value', desc: 'Štatistický kód, ESA 2010' }
|
||||
{name: 'statisticalCodes.esa2010.code', desc: 'Štatistický kód, ESA 2010, kód', type: 'Number' },
|
||||
{name: 'statisticalCodes.esa2010.value', desc: 'Štatistický kód, ESA 2010', type: 'String' }
|
||||
];
|
||||
|
||||
export default rpoFields;
|
||||
@@ -7,59 +7,43 @@ import SecondaryButton from '@/Components/SecondaryButton.vue';
|
||||
import TextInput from '@/Components/TextInput.vue';
|
||||
import Multiselect from '@/Components/MultiSelect.vue';
|
||||
import { Head, Link, useForm } from '@inertiajs/inertia-vue3';
|
||||
import rpoFields from './Data/MultiSelectOptionsRPO';
|
||||
import rpoFields from '../Data/MultiSelectOptionsRPO';
|
||||
import ConditionDisplay from '@/Components/ConditionStatement.vue';
|
||||
import QueryBuilder from '@phongthien/vue3-query-builder';
|
||||
import Input from '@/Components/Input.vue';
|
||||
import Number from '@/Components/Number.vue';
|
||||
import JsonQueryBuilder from '@/Components/JsonQueryBuilder.vue';
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { defineEmits } from 'vue'
|
||||
import { Inertia } from '@inertiajs/inertia';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const preoperator_val1 = ref(['-', 'NOT']);
|
||||
const preoperator_val2 = ref(['AND', 'AND NOT', 'OR', 'OR NOT']);
|
||||
|
||||
const level = ref(0);
|
||||
const podmienka = ref([]);
|
||||
const count = ref(0);
|
||||
|
||||
const criteria_val = ref([
|
||||
{ name: "Obsahuje", operator: 'LIKE'},
|
||||
{ name: "Začína", operator: 'LIKE START'},
|
||||
{ name: "Rovná sa", operator: '='}
|
||||
]);
|
||||
|
||||
const form = useForm({
|
||||
groupoperator: '',
|
||||
preoperator: '',
|
||||
field: '',
|
||||
value: '',
|
||||
criteria: '',
|
||||
});
|
||||
const query = ref({
|
||||
condition: 'and',
|
||||
rules: [{
|
||||
id: 'addresses.street',
|
||||
operator: '=',
|
||||
value: 'V. Clementisa'
|
||||
}, {
|
||||
condition: 'and',
|
||||
rules: [{
|
||||
id: 'fullNames.value',
|
||||
operator: '(',
|
||||
value: 'Cobra s.r.o.'
|
||||
}, {
|
||||
id: 'equities.valuePaid',
|
||||
operator: '<=',
|
||||
value: 80000
|
||||
}]
|
||||
}]
|
||||
})
|
||||
|
||||
|
||||
const submit = () => {
|
||||
console.log('Post data');
|
||||
Inertia.post(`/search`, podmienka.value);
|
||||
console.log(query.value);
|
||||
Inertia.post(`/search`, query.value);
|
||||
};
|
||||
|
||||
const AddContition = () => {
|
||||
podmienka.value.push({groupop: form.groupoperator,pre: form.preoperator, field: form.field, value: form.value, criteria: form.criteria, level: level.value, count: count.value});
|
||||
for (var i = count.value; i >= 0; i--) {
|
||||
podmienka.value[podmienka.value.length - i - 1]["groupop"] = form.groupoperator;
|
||||
}
|
||||
count.value++;
|
||||
ConstructCondition();
|
||||
}
|
||||
|
||||
const AddLevel = () => {
|
||||
level.value++;
|
||||
count.value=0;
|
||||
}
|
||||
|
||||
const RemLevel = () => {
|
||||
level.value--;
|
||||
count.value=0;
|
||||
}
|
||||
|
||||
const ConstructCondition = () => {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -67,71 +51,7 @@ const ConstructCondition = () => {
|
||||
|
||||
<Head title="Register" />
|
||||
|
||||
<ConditionDisplay :conditions="podmienka"></ConditionDisplay>
|
||||
|
||||
<div class="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 bg-gray-100">
|
||||
<div class="w-full sm:max-w-md mt-6 px-6 py-4 bg-white shadow-md sm:rounded-lg">
|
||||
<form @submit.prevent="submit">
|
||||
<template v-if="level > 0">
|
||||
<InputLabel for="Operator" value="Skupinový operátor" />
|
||||
<Multiselect v-model="form.groupoperator" :options="preoperator_val2">
|
||||
</Multiselect>
|
||||
</template>
|
||||
|
||||
|
||||
<InputLabel for="Operator" value="Operator" />
|
||||
<Multiselect v-model="form.preoperator" :options="count == 0 ? preoperator_val1 : preoperator_val2">
|
||||
</Multiselect>
|
||||
|
||||
<InputLabel for="field" value="Pole" />
|
||||
<Multiselect v-model="form.field" label="desc" trackby="desc" :options="rpoFields"></Multiselect>
|
||||
|
||||
<InputLabel for="Kriteria" value="Kriteria" />
|
||||
<Multiselect v-model="form.criteria" label="name" trackby="name" :options="criteria_val">
|
||||
</Multiselect>
|
||||
|
||||
<div class="mt-4">
|
||||
<InputLabel for="Hodnota" value="Hodnota" />
|
||||
<TextInput id="value" type="text" class="mt-1 block w-full" v-model="form.value" required />
|
||||
<InputError class="mt-2" :message="form.errors.email" />
|
||||
</div>
|
||||
|
||||
<pre>podmienka = {{ podmienka }} </pre>
|
||||
<pre>level = {{ level }}</pre>
|
||||
<pre>count = {{ count }}</pre>
|
||||
|
||||
|
||||
<div class="flex items-center justify-end mt-4">
|
||||
|
||||
<PrimaryButton class="ml-4" :class="{ 'opacity-25': form.processing }"
|
||||
:disabled="form.processing">
|
||||
Hľadaj
|
||||
</PrimaryButton>
|
||||
|
||||
|
||||
|
||||
|
||||
<SecondaryButton class="ml-4" @click="AddLevel">
|
||||
<font-awesome-icon icon="fa-solid fa-right-from-bracket" />
|
||||
</SecondaryButton>
|
||||
|
||||
<SecondaryButton class="ml-4" @click="RemLevel">
|
||||
<font-awesome-icon icon="fa-solid fa-right-to-bracket" />
|
||||
</SecondaryButton>
|
||||
|
||||
<SecondaryButton class="ml-4" @click="AddContition">
|
||||
<font-awesome-icon icon="fa-solid fa-circle-plus" />
|
||||
</SecondaryButton>
|
||||
|
||||
|
||||
</div>
|
||||
</form>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<JsonQueryBuilder :query="query" :queryOptions="rpoFields" @run-query="submit" ></JsonQueryBuilder>
|
||||
|
||||
</GuestLayout>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user