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

Basic search

Browse Source
This commit is contained in:
Jaroslav Drzik
2023-12-25 17:23:45 +01:00
parent 3cfa2e3513
commit 4375ac1fc8
7 changed files with 161 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
resources/js/Pages/IkeaRoot.vue
View File

@@ -1,5 +1,5 @@
<script setup>
import { getCurrentInstance, ref, onMounted, onUnmounted, nextTick } from 'vue';
import { getCurrentInstance, ref, onMounted, onUnmounted, nextTick, computed } from 'vue';
import Swal from 'sweetalert2';
import LogoIkea from '@/assets/Ikea_logo.svg';
import Multiselect from 'vue-multiselect';
@@ -8,18 +8,36 @@ import { FwbDropdown, FwbListGroup, FwbListGroupItem } from 'flowbite-vue';
import EasyTable from "vue3-easy-data-table";
import SearchInput from '@/Components/SearchInput.vue';
//import autocomplete from '@trevoreyre/autocomplete-vue';
import {
FwbNavbar,
FwbNavbarCollapse,
FwbNavbarLink,
FwbNavbarLogo,
} from 'flowbite-vue';
import { useForm } from '@inertiajs/inertia-vue3'
import axios from 'axios';
import IkeaLogo from './Ikea/IkeaLogo.vue';
const type = 'GeoChart';
const props = defineProps({
products: {
type: Object,
default: []
},
})
let tproducts = computed(() => {
return props.products.map((prod) => {
prod.salesPrice = parseFloat(prod.salesPrice);
return prod;
} )
})
const type = 'GeoChart';
const form = useForm({
countries: '',
codes: '',
});
const ccountry = ref([]);
const ccountry_filter = ref([['Country'],]);
const ccountry_list = ref(['TEST']);
@@ -30,6 +48,13 @@ const hrates = ref([
{ text: "Country", value: "country_name", sortable: true },
{ text: "Rate", value: "rate", sortable: true }
]);
// { "country": "AT", "code": "50161321", "url": "https://www.ikea.com/at/de/p/hol-aufbewahrungstisch-akazie-50161321/", "name": "HOL", "typeName": "Aufbewahrungstisch", "mainImageUrl": "https://www.ikea.com/at/de/images/products/hol-aufbewahrungstisch-akazie__0104310_pe251255_s5.jpg", "itemNoGlobal": "50161321", "salesPrice": "80.99", "tag": "FAMILY_PRICE", "last_mod": "2023-12-03 16:44:24" },
const hproducts = ref([
{ text: "Country", value:"country", sortable: true},
{ text: "Name", value:"name", sortable: true},
{ text: "Price", value:"salesPrice", sortable: true}
]);
const rates = ref([]);
const options_items = ref([]);
const selected_item = ref(null);
@@ -101,8 +126,8 @@ const fetch_rates = async () => {
const async_search = async (item) => {
try {
if (item.length > 4) {
const response = await axios.get(route('products.search',item));
options_items.value = response.data.map((i) => { return { "item": i.name, "desc": i.typeName, "img": i.mainImageUrl } });
const response = await axios.get(route('products.search', item));
options_items.value = response.data.map((i) => { return { "item": i.name, "desc": i.typeName, "img": i.mainImageUrl, "code": i.code } });
console.log("VALUES=", options_items.value);
}
} catch (e) {
@@ -118,9 +143,9 @@ const async_search = async (item) => {
}
}
function customLabel({item, desc}) {
function customLabel({ item, desc }) {
//console.log(item);
return `${item} - ${desc}` ;
return `${item} - ${desc}`;
}
const headers = ref([
{ text: "Id", value: "id", sortable: true },
@@ -139,6 +164,10 @@ function selectCountry(item, id) {
onMounted(fetch);
onMounted(fetch_rates);
const submit = () => {
form.post(route('products.compare'));
};
</script>
<template>
@@ -172,25 +201,43 @@ onMounted(fetch_rates);
:settings="chart_settings" />
</div>
<div class="mr-auto">
<form @submit.prevent="submit">
<div class="flex flex-col start-0">
<span class="font-extrabold font-mono">Zadaj krajiny v ktorych chces vyhadavat</span>
</div>
<div>
<multiselect :close-on-select="false" :multiple="true" v-model="form.countries" :options="ccountry_list"
@select="selectCountry" @remove="selectCountry">
</multiselect>
</div>
<div>
<span class="font-extrabold font-mono">Zadaj polozku</span>
</div>
<div>
<multiselect v-model="form.codes" label="item" track-by="item" :custom-label="customLabel"
placeholder="Find item" :searchable="true" :options="options_items" @search-change="async_search" />
</div>
<div class="text-end mt-2">
<button type="submit"
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
:disabled="form.processing" :class="{ 'opacity-25': form.processing }">
Search
</button>
</div>
</form>
<div class="mt-5">
<EasyTable :rows-per-page=10 :headers="headers" :items="items" alternating></EasyTable>
</div>
<div class="mt-5">
<EasyTable :rows-per-page=15 :headers="hrates" :items="rates" alternating></EasyTable>
</div>
</div>
<div>
<div class="flex flex-col start-0">
<span class="font-extrabold font-mono">Zadaj krajiny v ktorych chces vyhadavat</span>
<span class="font-extrabold font-mono">Vysledky vyhladavania</span>
</div>
<div>
<multiselect :close-on-select="false" :multiple="true" v-model="selected" :options="ccountry_list"
@select="selectCountry" @remove="selectCountry">
</multiselect>
</div>
<div>
<span class="font-extrabold font-mono">Zadaj polozku</span>
</div>
<div>
<multiselect v-model="selected_item" label="item" track-by="item" :custom-label="customLabel" placeholder="Find item" :searchable="true" :options="options_items" @search-change="async_search"/>
</div>
<div class="mt-5">
<EasyTable :rows-per-page=10 :headers="headers" :items="items"></EasyTable>
</div>
<div class="mt-5">
<EasyTable :rows-per-page=15 :headers="hrates" :items="rates"></EasyTable>
<EasyTable :rows-per-page=15 :headers="hproducts" :items="tproducts" alternating></EasyTable>
</div>
</div>
</div>