Small redesign
This commit is contained in:
@@ -1,25 +1,31 @@
|
||||
<script setup>
|
||||
import { getCurrentInstance, ref, onMounted, onUnmounted, nextTick, computed, watch } from 'vue';
|
||||
import Swal from 'sweetalert2';
|
||||
import {
|
||||
getCurrentInstance,
|
||||
ref,
|
||||
onMounted,
|
||||
onUnmounted,
|
||||
nextTick,
|
||||
computed,
|
||||
watch,
|
||||
} from "vue";
|
||||
import Swal from "sweetalert2";
|
||||
|
||||
import Multiselect from 'vue-multiselect';
|
||||
import { GChart } from 'vue-google-charts';
|
||||
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 filterimg from '@/assets/eglass-filter.png';
|
||||
import GuestLayout from "../Layouts/GuestLayout.vue";
|
||||
|
||||
import { useForm } from "@inertiajs/inertia-vue3";
|
||||
import axios from "axios";
|
||||
import filterimg from "@/assets/eglass-filter.png";
|
||||
|
||||
const sdropdown = ref([
|
||||
{ text: "Description", value: "typeName" },
|
||||
{ text: "Item name", value: "name" },
|
||||
{ text: "Code of product", value: "code" }
|
||||
{ text: "Code of product", value: "code" },
|
||||
]);
|
||||
|
||||
|
||||
const products = ref([]);
|
||||
|
||||
const countryHash = ref([]);
|
||||
@@ -41,61 +47,62 @@ const options = {
|
||||
};
|
||||
|
||||
const chart_settings = {
|
||||
packages: ['geochart', 'map'],
|
||||
packages: ["geochart", "map"],
|
||||
mapsApiKey: "AIzaSyAJaLArHgTmQPMOSogitG-umhZilVIgdNU",
|
||||
};
|
||||
|
||||
const gchartEvents = ref({
|
||||
regionClick: () => {
|
||||
const selection = getSelection()
|
||||
const selection = getSelection();
|
||||
console.log(selection);
|
||||
console.log("T");
|
||||
}
|
||||
},);
|
||||
},
|
||||
});
|
||||
|
||||
const tproducts = computed(() => {
|
||||
console.log('PR=', products);
|
||||
console.log('CC=', countryCurrency.value);
|
||||
console.log("PR=", products);
|
||||
console.log("CC=", countryCurrency.value);
|
||||
return products.value.map((p) => {
|
||||
const prod = { ...p };
|
||||
prod.currency = countryCurrency.value[prod.countryName];
|
||||
if (currencyHash.value[prod.currency]) prod.calcPrice = prod.salesPrice / currencyHash.value[prod.currency];
|
||||
if (currencyHash.value[prod.currency])
|
||||
prod.calcPrice = prod.salesPrice / currencyHash.value[prod.currency];
|
||||
else {
|
||||
prod.calcPrice = prod.salesPrice;
|
||||
prod.currency = 'EUR'
|
||||
prod.currency = "EUR";
|
||||
}
|
||||
if (prod.tag == 'NONE') prod.tag = '';
|
||||
if (prod.tag == "NONE") prod.tag = "";
|
||||
prod.salesPrice = Math.round(prod.salesPrice * 100) / 100;
|
||||
prod.calcPrice = Math.round(prod.calcPrice * currencyCoef.value * 100) / 100;
|
||||
prod.calcPrice =
|
||||
Math.round(prod.calcPrice * currencyCoef.value * 100) / 100;
|
||||
prod.rate = currencyHash.value[prod.currency];
|
||||
|
||||
return prod;
|
||||
})
|
||||
})
|
||||
});
|
||||
});
|
||||
const bodyRowClassNameFunction = (item) => {
|
||||
|
||||
if (item.country == form.country.code) return 'result-country';
|
||||
if (item.country == form.country.code) return "result-country";
|
||||
};
|
||||
const filterOptions = computed(() => {
|
||||
const filterOptionsArray = [];
|
||||
if (productsCriteria.value != 'All' && productsCriteria.value != null) {
|
||||
if (productsCriteria.value != "All" && productsCriteria.value != null) {
|
||||
filterOptionsArray.push({
|
||||
field: 'item',
|
||||
comparison: '=',
|
||||
field: "item",
|
||||
comparison: "=",
|
||||
criteria: productsCriteria.value,
|
||||
});
|
||||
}
|
||||
if (descCriteria.value != 'All' && descCriteria.value != null) {
|
||||
if (descCriteria.value != "All" && descCriteria.value != null) {
|
||||
filterOptionsArray.push({
|
||||
field: 'desc',
|
||||
comparison: '=',
|
||||
field: "desc",
|
||||
comparison: "=",
|
||||
criteria: descCriteria.value,
|
||||
});
|
||||
}
|
||||
if (unitsCriteria.value != 'All' && unitsCriteria.value != null) {
|
||||
if (unitsCriteria.value != "All" && unitsCriteria.value != null) {
|
||||
filterOptionsArray.push({
|
||||
field: 'units',
|
||||
comparison: '=',
|
||||
field: "units",
|
||||
comparison: "=",
|
||||
criteria: unitsCriteria.value,
|
||||
});
|
||||
}
|
||||
@@ -103,7 +110,7 @@ const filterOptions = computed(() => {
|
||||
});
|
||||
|
||||
let uniqProducts = computed(() => {
|
||||
var output = ['All',];
|
||||
var output = ["All"];
|
||||
var keys = [];
|
||||
options_items.value.forEach((element) => {
|
||||
var key = element.item;
|
||||
@@ -112,12 +119,12 @@ let uniqProducts = computed(() => {
|
||||
output.push(element.item);
|
||||
}
|
||||
});
|
||||
console.log('OUT', output);
|
||||
console.log("OUT", output);
|
||||
return output;
|
||||
});
|
||||
|
||||
let uniqDesc = computed(() => {
|
||||
var output = ['All',];
|
||||
var output = ["All"];
|
||||
var keys = [];
|
||||
options_items.value.forEach((element) => {
|
||||
var key = element.desc;
|
||||
@@ -126,12 +133,12 @@ let uniqDesc = computed(() => {
|
||||
output.push(element.desc);
|
||||
}
|
||||
});
|
||||
console.log('OUT2', output);
|
||||
console.log("OUT2", output);
|
||||
return output;
|
||||
});
|
||||
|
||||
let uniqUnits = computed(() => {
|
||||
var output = ['All',];
|
||||
var output = ["All"];
|
||||
var keys = [];
|
||||
options_items.value.forEach((element) => {
|
||||
var key = element.units;
|
||||
@@ -140,7 +147,7 @@ let uniqUnits = computed(() => {
|
||||
output.push(element.units);
|
||||
}
|
||||
});
|
||||
console.log('OUT3', output);
|
||||
console.log("OUT3", output);
|
||||
return output;
|
||||
});
|
||||
|
||||
@@ -148,19 +155,19 @@ const productsCriteria = ref(uniqProducts.value[0]);
|
||||
const descCriteria = ref(uniqDesc.value[0]);
|
||||
const unitsCriteria = ref(uniqUnits.value[0]);
|
||||
|
||||
const type = 'GeoChart';
|
||||
const type = "GeoChart";
|
||||
const form = useForm({
|
||||
countries: '',
|
||||
country: '',
|
||||
countries: "",
|
||||
country: "",
|
||||
field: sdropdown.value[0],
|
||||
text: '',
|
||||
currency: 'EUR',
|
||||
text: "",
|
||||
currency: "EUR",
|
||||
});
|
||||
|
||||
const ccodes = ref([]);
|
||||
const ccountry = ref([]);
|
||||
const ccountry_filter = ref([['Country'],]);
|
||||
const ccountry_list = ref(['TEST']);
|
||||
const ccountry_filter = ref([["Country"]]);
|
||||
const ccountry_list = ref(["TEST"]);
|
||||
const currencyHash = ref({});
|
||||
const currency = ref([]);
|
||||
const currencyCoef = ref(1.0);
|
||||
@@ -170,7 +177,7 @@ const items = ref([]);
|
||||
const hrates = ref([
|
||||
{ text: "Currency", value: "currency", sortable: true },
|
||||
{ text: "Country", value: "country_name", sortable: true },
|
||||
{ text: "Rate", value: "rate", 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([
|
||||
@@ -179,7 +186,7 @@ const hproducts = ref([
|
||||
{ text: "Local Price", value: "salesPrice", sortable: true },
|
||||
{ text: "Cur", value: "currency", sortable: false },
|
||||
{ text: "Rate", value: "rate" },
|
||||
{ text: "Price", value: "calcPrice", sortable: true }
|
||||
{ text: "Price", value: "calcPrice", sortable: true },
|
||||
]);
|
||||
const hresults = ref([
|
||||
{ text: "Code", value: "code", sortable: true },
|
||||
@@ -188,87 +195,96 @@ const hresults = ref([
|
||||
{ text: "Description Long", value: "descLong", sortable: true },
|
||||
{ text: "Units", value: "units", sortable: true },
|
||||
{ text: "Price", value: "price", sortable: true },
|
||||
{ text: "Image", value: "img", sortable: false }
|
||||
])
|
||||
{ text: "Image", value: "img", sortable: false },
|
||||
]);
|
||||
|
||||
const sleep = (ms) => {
|
||||
return new Promise(resolve => setTimeout(resolve, ms))
|
||||
}
|
||||
return new Promise((resolve) => setTimeout(resolve, ms));
|
||||
};
|
||||
|
||||
const fetch = async () => {
|
||||
try {
|
||||
const response = await axios.get(route('ccountry.active'))
|
||||
ccountry.value = response.data
|
||||
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++ } });
|
||||
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') + '?',
|
||||
title: __("are you want to try again") + "?",
|
||||
text: __(`${e}`),
|
||||
icon: 'question',
|
||||
icon: "question",
|
||||
showCancelButton: true,
|
||||
showCloseButton: true,
|
||||
})
|
||||
});
|
||||
|
||||
response.isConfirmed && fetch()
|
||||
response.isConfirmed && fetch();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const fetch_rates = async () => {
|
||||
try {
|
||||
const response = await axios.get(route('rates.index'))
|
||||
const response = await axios.get(route("rates.index"));
|
||||
rates.value = response.data;
|
||||
currency.value = rates.value.map((currency) => currency.currency);
|
||||
countryCurrency.value = Object.fromEntries(
|
||||
rates.value.map((currency) => [currency.country_name, currency.currency])
|
||||
);
|
||||
currencyHash.value = Object.fromEntries(
|
||||
rates.value.map((currency) => [currency.currency, currency.rate]),
|
||||
rates.value.map((currency) => [currency.currency, currency.rate])
|
||||
);
|
||||
|
||||
currency.value.unshift('EUR');
|
||||
currency.value.unshift("EUR");
|
||||
console.log("RATE=", rates.value);
|
||||
console.log('HASH=', currencyHash.value);
|
||||
console.log("HASH=", currencyHash.value);
|
||||
} catch (e) {
|
||||
const response = await Swal.fire({
|
||||
title: __('are you want to try again') + '?',
|
||||
title: __("are you want to try again") + "?",
|
||||
text: __(`${e}`),
|
||||
icon: 'question',
|
||||
icon: "question",
|
||||
showCancelButton: true,
|
||||
showCloseButton: true,
|
||||
})
|
||||
});
|
||||
|
||||
response.isConfirmed && fetch()
|
||||
response.isConfirmed && fetch();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const fetch_ccodes = async () => {
|
||||
try {
|
||||
const response2 = await axios.get(route('geo.ip.get'));
|
||||
const response2 = await axios.get(route("geo.ip.get"));
|
||||
geoip.value = response2.data;
|
||||
|
||||
const response = await axios.get(route('ccountry.codes'))
|
||||
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);
|
||||
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') + '?',
|
||||
title: __("are you want to try again") + "?",
|
||||
text: __(`${e}`),
|
||||
icon: 'question',
|
||||
icon: "question",
|
||||
showCancelButton: true,
|
||||
showCloseButton: true,
|
||||
})
|
||||
});
|
||||
|
||||
response.isConfirmed && fetch()
|
||||
response.isConfirmed && fetch();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const async_search = async () => {
|
||||
if (form.text.length < 2) return;
|
||||
@@ -277,25 +293,40 @@ const async_search = async () => {
|
||||
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]));
|
||||
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, "price": i.salesPrice, "units": i.priceUnit, "descLong": i.mainImageAlt } });
|
||||
options_items.value = response.data.map((i) => {
|
||||
return {
|
||||
item: i.name,
|
||||
desc: i.typeName,
|
||||
img: i.mainImageUrl,
|
||||
code: i.code,
|
||||
url: i.url,
|
||||
price: i.salesPrice,
|
||||
units: i.priceUnit,
|
||||
descLong: i.mainImageAlt,
|
||||
};
|
||||
});
|
||||
console.log("VALUES=", options_items.value);
|
||||
productsCriteria.value = null;
|
||||
} catch (e) {
|
||||
const response = await Swal.fire({
|
||||
title: __('are you want to try again') + '?',
|
||||
title: __("are you want to try again") + "?",
|
||||
text: __(`${e}`),
|
||||
icon: 'question',
|
||||
icon: "question",
|
||||
showCancelButton: true,
|
||||
showCloseButton: true,
|
||||
})
|
||||
});
|
||||
|
||||
response.isConfirmed && fetch()
|
||||
response.isConfirmed && fetch();
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
function customLabel({ item, desc, code }) {
|
||||
//console.log(item);
|
||||
@@ -303,7 +334,7 @@ function customLabel({ item, desc, code }) {
|
||||
}
|
||||
|
||||
function selectCountry(item, id) {
|
||||
let cCntry = [['Country'],];
|
||||
let cCntry = [["Country"]];
|
||||
console.log(form.countries);
|
||||
let aCntry = form.countries.map((country) => [country]);
|
||||
|
||||
@@ -316,161 +347,267 @@ onMounted(fetch_rates);
|
||||
onMounted(fetch_ccodes);
|
||||
|
||||
const showRow = async (item) => {
|
||||
console.log('ITEM=', item);
|
||||
console.log('FORM=', form);
|
||||
console.log("ITEM=", item);
|
||||
console.log("FORM=", form);
|
||||
itemCode.value = item.code;
|
||||
try {
|
||||
const response = await axios.post(route('products.compare'), { codes: item.code, countries: form.countries, currency: form.currency })
|
||||
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') + '?',
|
||||
title: __("are you want to try again") + "?",
|
||||
text: __(`${e}`),
|
||||
icon: 'question',
|
||||
icon: "question",
|
||||
showCancelButton: true,
|
||||
showCloseButton: true,
|
||||
})
|
||||
});
|
||||
|
||||
response.isConfirmed && fetch()
|
||||
response.isConfirmed && fetch();
|
||||
}
|
||||
};
|
||||
const onSelectCurrency = () => {
|
||||
console.log('CURR', form.currency);
|
||||
console.log('COEF', currencyCoef.value);
|
||||
console.log("CURR", form.currency);
|
||||
console.log("COEF", currencyCoef.value);
|
||||
|
||||
if (form.currency != 'EUR') currencyCoef.value = currencyHash.value[form.currency];
|
||||
if (form.currency != "EUR")
|
||||
currencyCoef.value = currencyHash.value[form.currency];
|
||||
else currencyCoef.value = 1.0;
|
||||
}
|
||||
};
|
||||
|
||||
const submit = () => {
|
||||
console.log('ITEM=', form);
|
||||
console.log("ITEM=", form);
|
||||
if (form.codes.length == 0) {
|
||||
Swal.fire({
|
||||
title: "Empty code",
|
||||
text: "You must enter product!",
|
||||
icon: "error"
|
||||
icon: "error",
|
||||
});
|
||||
return false;
|
||||
}
|
||||
form.post(route('products.compare'));
|
||||
form.post(route("products.compare"));
|
||||
};
|
||||
|
||||
watch(ccodes, (codes) => {
|
||||
console.log('NNN=',codes);
|
||||
console.log('IP=',geoip.value);
|
||||
codes.forEach((c) => { if (c.code == geoip.value.iso_code) form.country = c; });
|
||||
console.log('FC=',form.country);
|
||||
})
|
||||
console.log("NNN=", codes);
|
||||
console.log("IP=", geoip.value);
|
||||
codes.forEach((c) => {
|
||||
if (c.code == geoip.value.iso_code) form.country = c;
|
||||
});
|
||||
console.log("FC=", form.country);
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<GuestLayout>
|
||||
<div class="flex flex-wrap gap-2 justify-center align-middle ">
|
||||
<div class="flex flex-wrap gap-2 justify-center align-middle">
|
||||
<div class="flex flex-col start-0">
|
||||
<div class="justify-center rounded-md border-black border-8 max-h-[328px]">
|
||||
<GChart :events="gchartEvents" :type="type" :data="ccountry_filter" :options="options"
|
||||
:settings="chart_settings" />
|
||||
<div
|
||||
class="justify-center rounded-md border-black border-8 max-h-[328px]"
|
||||
>
|
||||
<GChart
|
||||
:events="gchartEvents"
|
||||
:type="type"
|
||||
:data="ccountry_filter"
|
||||
:options="options"
|
||||
:settings="chart_settings"
|
||||
/>
|
||||
</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" @select="onSelectCurrency" />
|
||||
<multiselect
|
||||
v-model="form.currency"
|
||||
:multiple="false"
|
||||
:allow-empty="false"
|
||||
placeholder="Currency"
|
||||
:searchable="true"
|
||||
:options="currency"
|
||||
@select="onSelectCurrency"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-col start-0">
|
||||
<span class="font-extrabold font-mono">Results <b v-if="itemCode">for {{ itemCode }}</b> </span>
|
||||
<span class="font-extrabold font-mono"
|
||||
>Results <b v-if="itemCode">for {{ itemCode }}</b>
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<EasyTable id="results" table-class-name="results" sortBy="countryName" :rows-per-page=25 :headers="hproducts" :items="tproducts" :body-row-class-name="bodyRowClassNameFunction" alternating>
|
||||
<EasyTable
|
||||
id="results"
|
||||
table-class-name="results"
|
||||
sortBy="countryName"
|
||||
:rows-per-page="25"
|
||||
:headers="hproducts"
|
||||
:items="tproducts"
|
||||
:body-row-class-name="bodyRowClassNameFunction"
|
||||
alternating
|
||||
>
|
||||
<template #item-countryName="{ countryName, url }">
|
||||
<a class="underline" target="_blank" :href="url">{{ countryName }}</a>
|
||||
<a class="underline" target="_blank" :href="url">{{
|
||||
countryName
|
||||
}}</a>
|
||||
</template>
|
||||
</EasyTable>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mr-auto">
|
||||
<form @submit.prevent="submit">
|
||||
<div class="flex flex-col start-0">
|
||||
<span class="font-extrabold font-mono">Countries in which compare</span>
|
||||
</div>
|
||||
<div>
|
||||
<multiselect placeholder="All" :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">Country in which search product</span>
|
||||
</div>
|
||||
<div class="grid grid-cols-2">
|
||||
<div>
|
||||
<multiselect placeholder="All" :close-on-select="true" :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" />
|
||||
<input
|
||||
class="rounded-md"
|
||||
v-model="form.text"
|
||||
@input="async_search"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="">
|
||||
<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>
|
||||
</div>
|
||||
<div class="flex flex-col start-0">
|
||||
<span class="font-extrabold font-mono"
|
||||
>Countries in which compare</span
|
||||
>
|
||||
</div>
|
||||
<div>
|
||||
<multiselect
|
||||
placeholder="All"
|
||||
: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"
|
||||
>Country in which search product</span
|
||||
>
|
||||
</div>
|
||||
<div>
|
||||
<multiselect
|
||||
placeholder="All"
|
||||
:close-on-select="true"
|
||||
:multiple="false"
|
||||
v-model="form.country"
|
||||
:options="ccodes"
|
||||
label="country"
|
||||
track-by="code"
|
||||
>
|
||||
</multiselect>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</form>
|
||||
<div class="mt-5">
|
||||
<EasyTable class="none" :rows-per-page=20 :headers="hresults" :items="options_items" @click-row="showRow"
|
||||
:filter-options="filterOptions" alternating>
|
||||
<EasyTable
|
||||
class="none"
|
||||
:rows-per-page="20"
|
||||
:headers="hresults"
|
||||
:items="options_items"
|
||||
@click-row="showRow"
|
||||
:filter-options="filterOptions"
|
||||
alternating
|
||||
>
|
||||
<template #item-img="{ code, img }">
|
||||
<img class="h-12" :src="img" :alt="code" />
|
||||
<img
|
||||
class="h-12 hover:scale-150 hover:left-2 hover:h-48 hover:float-left hover:overflow-hidden"
|
||||
:src="img"
|
||||
:alt="code"
|
||||
/>
|
||||
</template>
|
||||
<template #header-item="header">
|
||||
<div class="filter-column">
|
||||
<img :src="filterimg" class="filter-icon" @click.stop="showItemFilter = !showItemFilter" />
|
||||
<img
|
||||
:src="filterimg"
|
||||
class="filter-icon"
|
||||
@click.stop="showItemFilter = !showItemFilter"
|
||||
/>
|
||||
{{ header.text }}
|
||||
<div class="filter-menu filter-sport-menu" v-if="showItemFilter">
|
||||
<multiselect v-model="productsCriteria" :options="uniqProducts"></multiselect>
|
||||
<div
|
||||
class="filter-menu filter-sport-menu"
|
||||
v-if="showItemFilter"
|
||||
>
|
||||
<multiselect
|
||||
v-model="productsCriteria"
|
||||
:options="uniqProducts"
|
||||
></multiselect>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #header-desc="header">
|
||||
<div class="filter-column">
|
||||
<img :src="filterimg" class="filter-icon" @click.stop="showDescFilter = !showDescFilter" />
|
||||
<img
|
||||
:src="filterimg"
|
||||
class="filter-icon"
|
||||
@click.stop="showDescFilter = !showDescFilter"
|
||||
/>
|
||||
{{ header.text }}
|
||||
<div class="filter-menu filter-sport-menu" v-if="showDescFilter">
|
||||
<multiselect v-model="descCriteria" :options="uniqDesc"></multiselect>
|
||||
<div
|
||||
class="filter-menu filter-sport-menu"
|
||||
v-if="showDescFilter"
|
||||
>
|
||||
<multiselect
|
||||
v-model="descCriteria"
|
||||
:options="uniqDesc"
|
||||
></multiselect>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #header-units="header">
|
||||
<div class="filter-column">
|
||||
<img :src="filterimg" class="filter-icon" @click.stop="showUnitsFilter = !showUnitsFilter" />
|
||||
<img
|
||||
:src="filterimg"
|
||||
class="filter-icon"
|
||||
@click.stop="showUnitsFilter = !showUnitsFilter"
|
||||
/>
|
||||
{{ header.text }}
|
||||
<div class="filter-menu filter-menu-units" v-if="showUnitsFilter">
|
||||
<multiselect v-model="unitsCriteria" :options="uniqUnits"></multiselect>
|
||||
<div
|
||||
class="filter-menu filter-menu-units"
|
||||
v-if="showUnitsFilter"
|
||||
>
|
||||
<multiselect
|
||||
v-model="unitsCriteria"
|
||||
:options="uniqUnits"
|
||||
></multiselect>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</EasyTable>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</GuestLayout>
|
||||
</template>
|
||||
<style>
|
||||
@import 'vue3-easy-data-table/dist/style.css';
|
||||
|
||||
@import "vue3-easy-data-table/dist/style.css";
|
||||
|
||||
.filter-column {
|
||||
display: flex;
|
||||
@@ -496,7 +633,6 @@ watch(ccodes, (codes) => {
|
||||
|
||||
background-color: #fff;
|
||||
border: 1px solid #e0e0e0;
|
||||
|
||||
}
|
||||
|
||||
.filter-menu-units {
|
||||
@@ -511,7 +647,6 @@ watch(ccodes, (codes) => {
|
||||
--easy-table-body-row-background-color: yellow;
|
||||
--easy-table-body-even-row-background-color: yellow;
|
||||
}
|
||||
|
||||
</style>
|
||||
<style src="vue-multiselect/dist/vue-multiselect.css"></style>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user