jaro/rpotisk
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

alpha version

Browse Source
This commit is contained in:
Jaroslav Drzik
2022-12-30 11:17:00 +01:00
parent 8c4601144a
commit 6ee5c3d6ef
10 changed files with 1284 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
resources/js/Components/ConditionStatement.vue
View File

@@ -3,13 +3,52 @@ defineProps(['conditions']);
</script>
<template>
<div v-for="p in conditions">
<div class="justify-center my-8 select-none flex" >
<button class="py-2 px-4 shadow-md no-underline rounded-full bg-blue-600 text-white font-sans font-semibold text-sm border-blue btn-primary hover:text-white hover:bg-blue-light focus:outline-none active:shadow-none mr-2">{{ p.pre }}</button>
<button class="py-2 px-4 shadow-md no-underline rounded-full bg-orange-600 text-white font-sans font-semibold text-sm border-orange btn-primary hover:text-white hover:bg-orange-light focus:outline-none active:shadow-none mr-2">{{ p.field.desc }}</button>
<button class="py-2 px-4 shadow-md no-underline rounded-full bg-red-600 text-white font-sans font-semibold text-sm border-red btn-primary hover:text-white hover:bg-red-light focus:outline-none active:shadow-none">{{ p.criteria.name }}</button>
<button class="py-2 px-4 shadow-md no-underline rounded-full bg-yellow-600 text-black font-sans font-semibold text-sm border-red btn-primary hover:text-white hover:bg-red-light focus:outline-none active:shadow-none">{{ p.value }}</button>
<slot />
<div v-if="conditions.length > 0" class="w-full h-auto relative">
<div
class="bg-white px-5 py-3.5 rounded-lg shadow hover:shadow-xl max-w-prose mx-auto transform hover:-translate-y-[0.125rem] transition duration-100 ease-linear">
<div class="w-full flex items-center justify-between">
<span class="font-medium text-sm text-slate-400">Podmienky na vyhľadávanie</span>
<button
class="-mr-1 bg-slate-100 hover:bg-slate-200 text-slate-400 hover:text-slate-600 h-5 w-5 rounded-full flex justify-center items-center">
<svg class="h-2 w-2 fill-current items-center" viewBox="0 0 20 20">
<path
d="M10 8.586L2.929 1.515 1.515 2.929 8.586 10l-7.071 7.071 1.414 1.414L10 11.414l7.071 7.071 1.414-1.414L11.414 10l7.071-7.071-1.414-1.414L10 8.586z" />
</svg>
</button>
</div>
<div class="flex items-center mt-2 rounded-lg px-1 py-1 cursor-pointer">
<div class="ml-3">
<div v-for="p in conditions">
<div class="my-2 select-none flex">
<div :class="'w-' + p.level*8">&nbsp;</div>
<button v-if="p.level > 0" :class="p.count > 0 ? 'invisible' : ''"
class="py-2 px-4 shadow-md no-underline rounded-full bg-green-600 text-white font-sans font-semibold text-sm border-blue btn-primary hover:text-white hover:bg-blue-light focus:outline-none active:shadow-none mr-1">{{
p.groupop }}</button>
<button
class="py-2 px-4 shadow-md no-underline rounded-full bg-blue-600 text-white font-sans font-semibold text-sm border-blue btn-primary hover:text-white hover:bg-blue-light focus:outline-none active:shadow-none mr-1">{{
p.pre }}</button>
<button
class="py-2 px-4 shadow-md no-underline rounded-full bg-orange-600 text-white font-sans font-semibold text-sm border-orange btn-primary hover:text-white hover:bg-orange-light focus:outline-none active:shadow-none mr-1">{{
p.field.desc }}</button>
<button
class="py-2 px-4 shadow -md no-underline rounded-full bg-red-600 text-white font-sans font-semibold text-sm border-red btn-primary hover:text-white hover:bg-red-light focus:outline-none active:shadow-none mr-1">{{
p.criteria.name }}</button>
<button
class="py-2 px-4 shadow-md no-underline rounded-full bg-yellow-600 text-white font-sans font-semibold text-sm border-red btn-primary hover:text-white hover:bg-red-light focus:outline-none active:shadow-none mr-1">{{
p.value }}</button>
<slot />
</div>
</div>
</div>
</div>
</div>
</div>
<div>
</div>
</template>

14
resources/js/Layouts/GuestLayout.vue
View File

@@ -4,6 +4,7 @@ import { Link } from '@inertiajs/inertia-vue3';
</script>
<template>
<div class="min-h-screen bg-gray-100">
<nav class="flex items-center justify-between flex-wrap bg-stone-400 p-6">
<div class="flex items-center flex-no-shrink text-white mr-6">
<svg class="h-8 w-8 mr-2" width="54" height="54" viewBox="0 0 54 54" xmlns="http://www.w3.org/2000/svg"><path d="M13.5 22.1c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05zM0 38.3c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05z"/></svg>
@@ -31,14 +32,9 @@ import { Link } from '@inertiajs/inertia-vue3';
</div>
</div>
</nav>
<main>
<slot />
</main>
<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"
>
<slot />
</div>
</div>
</div>
</template>

116
resources/js/Pages/Rpo.vue
View File

@@ -9,6 +9,7 @@ import Multiselect from '@/Components/MultiSelect.vue';
import { Head, Link, useForm } from '@inertiajs/inertia-vue3';
import rpoFields from './Data/MultiSelectOptionsRPO';
import ConditionDisplay from '@/Components/ConditionStatement.vue';
import { Inertia } from '@inertiajs/inertia';
import { ref } from 'vue';
const preoperator_val1 = ref(['-', 'NOT']);
@@ -19,12 +20,13 @@ const podmienka = ref([]);
const count = ref(0);
const criteria_val = ref([
{ name: "Obsahuje", operator: '%%%s%%'},
{ name: "Začína", operator: '%s%%'},
{ name: "Rovná sa", operator: '%s'}
{ name: "Obsahuje", operator: 'LIKE'},
{ name: "Začína", operator: 'LIKE START'},
{ name: "Rovná sa", operator: '='}
]);
const form = useForm({
groupoperator: '',
preoperator: '',
field: '',
value: '',
@@ -32,11 +34,15 @@ const form = useForm({
});
const submit = () => {
form.post(route('search'), { });
console.log('Post data');
Inertia.post(`/search`, podmienka.value);
};
const AddContition = () => {
podmienka.value.push({pre: form.preoperator, field: form.field, value: form.value, criteria: form.criteria, level: level.value});
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();
}
@@ -58,62 +64,74 @@ const ConstructCondition = () => {
<template>
<GuestLayout>
<ConditionDisplay :conditions="podmienka"></ConditionDisplay>
<Head title="Register" />
<ConditionDisplay :conditions="podmienka"></ConditionDisplay>
<form @submit.prevent="submit">
<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>
<InputLabel for="Operator" value="Operator" />
<Multiselect v-model="form.preoperator" :options="count == 0 ? preoperator_val1 : preoperator_val2">
</Multiselect>
<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>
<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>
<SecondaryButton class="ml-4" @click="AddLevel">
<font-awesome-icon icon="fa-solid fa-right-from-bracket"/>
</SecondaryButton>
<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>
<SecondaryButton class="ml-4" @click="RemLevel">
<font-awesome-icon icon="fa-solid fa-right-to-bracket" />
</SecondaryButton>
<pre>podmienka = {{ podmienka }} </pre>
<pre>level = {{ level }}</pre>
<pre>count = {{ count }}</pre>
<SecondaryButton class="ml-4" @click="AddContition">
<font-awesome-icon icon="fa-solid fa-circle-plus" />
</SecondaryButton>
<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>
</form>
</div>
</GuestLayout>
</template>