343 lines
10 KiB
Vue
343 lines
10 KiB
Vue
<script setup>
|
|
import { getCurrentInstance, ref, onMounted, onUnmounted, nextTick, computed } from 'vue';
|
|
import Swal from 'sweetalert2';
|
|
|
|
import Multiselect from 'vue-multiselect';
|
|
import { GChart } from 'vue-google-charts';
|
|
|
|
import EasyTable from "vue3-easy-data-table";
|
|
import GuestLayout from '../Layouts/GuestLayout.vue';
|
|
|
|
import { useForm } from '@inertiajs/inertia-vue3'
|
|
import axios from 'axios';
|
|
import IkeaLogo from './Ikea/IkeaLogo.vue';
|
|
|
|
const props = defineProps({
|
|
products: {
|
|
type: Object,
|
|
default: []
|
|
},
|
|
countryHash: {
|
|
type: Object,
|
|
default: []
|
|
},
|
|
menu: {
|
|
type: Object,
|
|
default: []
|
|
}
|
|
})
|
|
|
|
const sdropdown = ref([
|
|
{ text: "Description", value: "typeName"},
|
|
{ text: "Item name", value: "name"},
|
|
{ text: "Code of product", value: "code"}
|
|
]);
|
|
|
|
|
|
const products = ref([]);
|
|
const countryHash = ref([]);
|
|
|
|
let tproducts = computed(() => {
|
|
return products.value.map((prod) => {
|
|
prod.salesPrice = parseFloat(prod.salesPrice);
|
|
prod.country = countryHash.value[prod.country];
|
|
return prod;
|
|
})
|
|
})
|
|
|
|
const type = 'GeoChart';
|
|
const form = useForm({
|
|
countries: '',
|
|
country: '',
|
|
field: sdropdown.value[0],
|
|
text: '',
|
|
currency: 'EUR',
|
|
});
|
|
|
|
const ccodes = ref([]);
|
|
const ccountry = ref([]);
|
|
const ccountry_filter = ref([['Country'],]);
|
|
const ccountry_list = ref(['TEST']);
|
|
const selected = ref(null);
|
|
const article = ref('');
|
|
const currency = ref([]);
|
|
const hrates = ref([
|
|
{ text: "Currency", value: "currency", sortable: true },
|
|
{ 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 hresults = ref([
|
|
{ text: "Code", value: "code", sortable: true},
|
|
{ text: "Name of product", value: "item", sortable: true},
|
|
{ text: "Description", value: "desc", sortable: true},
|
|
{ text: "Image", value: "img", sortable: false}
|
|
])
|
|
const rates = ref([]);
|
|
const options_items = ref([]);
|
|
const selected_item = ref(null);
|
|
|
|
const options = {
|
|
region: 150,
|
|
|
|
width: 500,
|
|
height: 500,
|
|
};
|
|
|
|
const chart_settings = {
|
|
packages: ['geochart', 'map'],
|
|
mapsApiKey: "AIzaSyAJaLArHgTmQPMOSogitG-umhZilVIgdNU",
|
|
};
|
|
|
|
const gchartEvents = ref({
|
|
regionClick: () => {
|
|
const selection = getSelection()
|
|
console.log(selection);
|
|
console.log("T");
|
|
}
|
|
},);
|
|
|
|
const sleep = (ms) => {
|
|
return new Promise(resolve => setTimeout(resolve, ms))
|
|
}
|
|
|
|
const fetch = async () => {
|
|
try {
|
|
const response = await axios.get(route('ccountry.active'))
|
|
ccountry.value = response.data
|
|
let aCntry = ccountry.value.map((country) => [country.country_name]);
|
|
ccountry_filter.value.push(...aCntry);
|
|
|
|
ccountry_list.value = ccountry.value.map((country) => country.country_name);
|
|
var i = 1;
|
|
items.value = ccountry.value.map((country) => { return { "country": country.country_name, "currency": country.currency_code, "id": i++ } });
|
|
console.log("TEST=", ccountry_filter.value, ccountry_list.value);
|
|
} catch (e) {
|
|
const response = await Swal.fire({
|
|
title: __('are you want to try again') + '?',
|
|
text: __(`${e}`),
|
|
icon: 'question',
|
|
showCancelButton: true,
|
|
showCloseButton: true,
|
|
})
|
|
|
|
response.isConfirmed && fetch()
|
|
}
|
|
}
|
|
|
|
const fetch_rates = async () => {
|
|
try {
|
|
const response = await axios.get(route('rates.index'))
|
|
rates.value = response.data;
|
|
currency.value = rates.value.map((currency) => currency.currency);
|
|
currency.value.unshift('EUR');
|
|
console.log("RATE=", rates.value);
|
|
} catch (e) {
|
|
const response = await Swal.fire({
|
|
title: __('are you want to try again') + '?',
|
|
text: __(`${e}`),
|
|
icon: 'question',
|
|
showCancelButton: true,
|
|
showCloseButton: true,
|
|
})
|
|
|
|
response.isConfirmed && fetch()
|
|
}
|
|
}
|
|
|
|
const fetch_ccodes = async () => {
|
|
try {
|
|
const response = await axios.get(route('ccountry.codes'))
|
|
ccodes.value = response.data;
|
|
ccodes.value = Object.entries(ccodes.value).map(([k, v]) => { if (v !== null) return { "country": k, "code": v } }).filter(n => n);
|
|
console.log("ccodes=", ccodes.value);
|
|
} catch (e) {
|
|
const response = await Swal.fire({
|
|
title: __('are you want to try again') + '?',
|
|
text: __(`${e}`),
|
|
icon: 'question',
|
|
showCancelButton: true,
|
|
showCloseButton: true,
|
|
})
|
|
|
|
response.isConfirmed && fetch()
|
|
}
|
|
}
|
|
|
|
const async_search = async () => {
|
|
if (form.text.length < 2) return;
|
|
|
|
try {
|
|
let country = null;
|
|
if (form.country.code !== undefined) country = form.country.code;
|
|
|
|
console.log('SEARCH',route('products.search',[form.field.value, form.text, country]));
|
|
const response = await axios.get(route('products.search', [form.field.value, form.text, country]));
|
|
|
|
options_items.value = response.data.map((i) => { return { "item": i.name, "desc": i.typeName, "img": i.mainImageUrl, "code": i.code, "url": i.url } });
|
|
console.log("VALUES=", options_items.value);
|
|
} catch (e) {
|
|
const response = await Swal.fire({
|
|
title: __('are you want to try again') + '?',
|
|
text: __(`${e}`),
|
|
icon: 'question',
|
|
showCancelButton: true,
|
|
showCloseButton: true,
|
|
})
|
|
|
|
response.isConfirmed && fetch()
|
|
}
|
|
}
|
|
|
|
|
|
function customLabel({ item, desc, code }) {
|
|
//console.log(item);
|
|
return `${item} - ${desc} - ${code}`;
|
|
}
|
|
const headers = ref([
|
|
{ text: "Id", value: "id", sortable: true },
|
|
{ text: "Country", value: "country", sortable: true },
|
|
{ text: "Currency", value: "currency" },
|
|
]);
|
|
const items = ref([]);
|
|
|
|
function selectCountry(item, id) {
|
|
let cCntry = [['Country'],];
|
|
console.log(form.countries);
|
|
let aCntry = form.countries.map((country) => [country]);
|
|
|
|
ccountry_filter.value = cCntry;
|
|
ccountry_filter.value.push(...aCntry);
|
|
}
|
|
|
|
onMounted(fetch);
|
|
onMounted(fetch_rates);
|
|
onMounted(fetch_ccodes);
|
|
|
|
const showRow = async (item) => {
|
|
console.log('ITEM=', item);
|
|
console.log('FORM=', form);
|
|
|
|
try {
|
|
const response = await axios.post(route('products.compare'),{ codes: item.code, countries: form.countries, currency: form.currency })
|
|
|
|
products.value = response.data.products;
|
|
countryHash.value = response.data.countryHash;
|
|
console.log("TEST=", response.data);
|
|
} catch (e) {
|
|
const response = await Swal.fire({
|
|
title: __('are you want to try again') + '?',
|
|
text: __(`${e}`),
|
|
icon: 'question',
|
|
showCancelButton: true,
|
|
showCloseButton: true,
|
|
})
|
|
|
|
response.isConfirmed && fetch()
|
|
}
|
|
};
|
|
|
|
|
|
const submit = () => {
|
|
console.log('ITEM=', form);
|
|
if (form.codes.length == 0) {
|
|
Swal.fire({
|
|
title: "Empty code",
|
|
text: "You must enter product!",
|
|
icon: "error"
|
|
});
|
|
return false;
|
|
}
|
|
form.post(route('products.compare'));
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<GuestLayout>
|
|
<div class="flex flex-wrap gap-2 justify-center align-middle ">
|
|
<div class="justify-center rounded-md border-black border-8 max-h-[518px]">
|
|
<GChart :events="gchartEvents" :type="type" :data="ccountry_filter" :options="options"
|
|
: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 class="flex flex-col start-0">
|
|
<span class="font-extrabold font-mono">Krajina produktu na vyhladanie</span>
|
|
</div>
|
|
<div>
|
|
<multiselect :close-on-select="false" :multiple="false" v-model="form.country" :options="ccodes"
|
|
label="country" track-by="code">
|
|
</multiselect>
|
|
</div>
|
|
<div>
|
|
<span class="font-extrabold font-mono">Search in:</span>
|
|
</div>
|
|
<div>
|
|
<multiselect v-model="form.field" :multiple="false" :searchable="false" :allow-empty="false" :options="sdropdown" track-by="value" label="text"></multiselect>
|
|
</div>
|
|
|
|
<div>
|
|
<span class="font-extrabold font-mono">Dynamic search:</span>
|
|
</div>
|
|
<div>
|
|
<input class="rounded-md " v-model="form.text" @input="async_search" />
|
|
</div>
|
|
|
|
<div>
|
|
<span class="font-extrabold font-mono">Currency recalculation</span>
|
|
</div>
|
|
<div>
|
|
<multiselect v-model="form.currency" :multiple="false" :allow-empty="false" placeholder="Currency"
|
|
:searchable="true" :options="currency" />
|
|
</div>
|
|
|
|
</form>
|
|
<div class="mt-5">
|
|
<EasyTable :rows-per-page=20 :headers="hresults" :items="options_items" @click-row="showRow" alternating>
|
|
<template #item-img="{ code, img }">
|
|
<img class="h-12" :src="img" alt=""/>
|
|
</template>
|
|
</EasyTable>
|
|
</div>
|
|
|
|
<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">Vysledky vyhladavania</span>
|
|
</div>
|
|
<div>
|
|
<EasyTable :rows-per-page=15 :headers="hproducts" :items="tproducts" alternating>
|
|
<template #item-name="{ name, url }">
|
|
<a class="underline" target="_blank" :href="url">{{ name }}</a>
|
|
</template>
|
|
</EasyTable>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</GuestLayout>
|
|
</template>
|
|
<style>
|
|
@import 'vue3-easy-data-table/dist/style.css';
|
|
</style>
|
|
<style src="vue-multiselect/dist/vue-multiselect.css"></style>
|