654 lines
23 KiB
Vue
654 lines
23 KiB
Vue
<script setup>
|
|
import {
|
|
getCurrentInstance,
|
|
ref,
|
|
onMounted,
|
|
onUnmounted,
|
|
computed,
|
|
nextTick,
|
|
watch,
|
|
inject,
|
|
} 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 axios from "axios";
|
|
import filterimg from "@/assets/eglass-filter.png";
|
|
import searchimg from "@/assets/search-icon.svg";
|
|
import { settingsStore } from '../settingsStore.js';
|
|
import { FwbInput } from 'flowbite-vue';
|
|
|
|
const screenWidth = ref(screen.width)
|
|
const screenHeight = ref(screen.height)
|
|
const hover = ref(true);
|
|
const hoverImage = ref(null);
|
|
const selectedRow = ref(null);
|
|
// const $matomo = inject('$matomo');
|
|
|
|
const sdropdown = ref([
|
|
{ text: "Description", value: "typeName" },
|
|
{ text: "Item name", value: "name" },
|
|
{ text: "Code of product", value: "code" },
|
|
]);
|
|
|
|
const products = ref([]);
|
|
const searchField = ref('descLong');
|
|
const searchValue = ref('');
|
|
|
|
const countryHash = ref([]);
|
|
const countryCurrency = ref({});
|
|
const showItemFilter = ref(false);
|
|
const showDescFilter = ref(false);
|
|
const showDescLongFilter = ref(false);
|
|
const showUnitsFilter = ref(false);
|
|
const geoip = ref({});
|
|
|
|
const rates = ref([]);
|
|
const options_items = ref([]);
|
|
const itemCode = ref(null);
|
|
const googlemapbox = ref(null);
|
|
const googlemapchart = ref(null);
|
|
|
|
const gChartWidth = computed(() => screenWidth.value > 420 ? 400 : (screenWidth.value - 30 - 5));
|
|
const gChartHeight = computed(() => gChartWidth.value == 400 ? 250 : (screenWidth.value *67/100) - 28);
|
|
console.log('GCH',screenWidth.value, screenHeight.value, gChartWidth.value,gChartHeight.value);
|
|
|
|
const options = {
|
|
region: 150,
|
|
colorAxis: {colors: ['#0000ff']},
|
|
backgroundColor: '#81d4fa',
|
|
datalessRegionColor: '#ffffff',
|
|
//datalessRegionColor: '#f8bbd0',
|
|
//defaultColor: '#f5f5f5',
|
|
width: gChartWidth.value,
|
|
height: gChartHeight.value,
|
|
};
|
|
|
|
const chart_settings = {
|
|
packages: ["geochart", "map"],
|
|
mapsApiKey: "AIzaSyAJaLArHgTmQPMOSogitG-umhZilVIgdNU",
|
|
};
|
|
|
|
const gchartEvents = ref({
|
|
regionClick: () => {
|
|
const selection = getSelection();
|
|
console.log(selection);
|
|
console.log("T");
|
|
},
|
|
});
|
|
|
|
const onHover = (data) => {
|
|
console.log('HOVER',data.target.src);
|
|
hoverImage.value = data.target.src;
|
|
hover.value = !hover.value;
|
|
};
|
|
|
|
const chart_coutries = computed(() => {
|
|
let countries = [["Country", "Count"]];
|
|
|
|
for (let i=0; i < settingsStore.ccountry_list.length ; i++) {
|
|
if (settingsStore.ccountry_list[i].offline == (settingsStore.online ? 'N' : 'Y') || settingsStore.online == true)
|
|
countries.push([settingsStore.ccountry_list[i].name, settingsStore.products_count[settingsStore.ccountry_list[i].code] ]);
|
|
}
|
|
return countries;
|
|
})
|
|
|
|
|
|
const tproducts = computed(() => {
|
|
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];
|
|
else {
|
|
prod.calcPrice = prod.salesPrice;
|
|
prod.currency = "EUR";
|
|
}
|
|
if (prod.tag == "NONE") prod.tag = "";
|
|
prod.salesPrice = Math.round(prod.salesPrice * 100) / 100;
|
|
prod.calcPrice =
|
|
Math.round(prod.calcPrice * settingsStore.currencyCoef * 100) / 100;
|
|
console.log('CHA=',currencyHash.value[prod.currency]);
|
|
prod.rate =
|
|
Math.round((currencyHash.value[prod.currency] == undefined? 1.0 : currencyHash.value[prod.currency] ) / (settingsStore.currency != "EUR" ? currencyHash.value[settingsStore.currency] : 1.0)*100)/100;
|
|
if (prod.tag != null && prod.tag.length > 1) prod.tag = prod.tag.replace(/_/g, " ");
|
|
return prod;
|
|
});
|
|
});
|
|
const bodyRowClassNameFunction = (item) => {
|
|
if (item.country == settingsStore.country.code) return "result-country";
|
|
};
|
|
const filterOptions = computed(() => {
|
|
const filterOptionsArray = [];
|
|
if (productsCriteria.value != "All" && productsCriteria.value != null) {
|
|
filterOptionsArray.push({
|
|
field: "item",
|
|
comparison: "=",
|
|
criteria: productsCriteria.value,
|
|
});
|
|
}
|
|
if (descCriteria.value != "All" && descCriteria.value != null) {
|
|
filterOptionsArray.push({
|
|
field: "desc",
|
|
comparison: "=",
|
|
criteria: descCriteria.value,
|
|
});
|
|
}
|
|
if (unitsCriteria.value != "All" && unitsCriteria.value != null) {
|
|
filterOptionsArray.push({
|
|
field: "units",
|
|
comparison: "=",
|
|
criteria: unitsCriteria.value,
|
|
});
|
|
}
|
|
return filterOptionsArray;
|
|
});
|
|
|
|
let uniqProducts = computed(() => {
|
|
var output = ["All"];
|
|
var keys = [];
|
|
options_items.value.forEach((element) => {
|
|
var key = element.item;
|
|
if (keys.indexOf(key) === -1) {
|
|
keys.push(key);
|
|
output.push(element.item);
|
|
}
|
|
});
|
|
console.log("OUT", output);
|
|
return output;
|
|
});
|
|
|
|
let uniqDesc = computed(() => {
|
|
var output = ["All"];
|
|
var keys = [];
|
|
options_items.value.forEach((element) => {
|
|
var key = element.desc;
|
|
if (keys.indexOf(key) === -1) {
|
|
keys.push(key);
|
|
output.push(element.desc);
|
|
}
|
|
});
|
|
console.log("OUT2", output);
|
|
return output;
|
|
});
|
|
|
|
let uniqUnits = computed(() => {
|
|
var output = ["All"];
|
|
var keys = [];
|
|
options_items.value.forEach((element) => {
|
|
var key = element.units;
|
|
if (keys.indexOf(key) === -1) {
|
|
keys.push(key);
|
|
output.push(element.units);
|
|
}
|
|
});
|
|
console.log("OUT3", output);
|
|
return output;
|
|
});
|
|
|
|
const productsCriteria = ref(uniqProducts.value[0]);
|
|
const descCriteria = ref(uniqDesc.value[0]);
|
|
const unitsCriteria = ref(uniqUnits.value[0]);
|
|
|
|
const type = "GeoChart";
|
|
settingsStore.field = sdropdown.value[0];
|
|
|
|
const ccodes = ref([]);
|
|
const ccountry = ref([]);
|
|
|
|
const ccountry_list = ref(["TEST"]);
|
|
const currencyHash = ref({});
|
|
const currency = ref([]);
|
|
|
|
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 },
|
|
]);
|
|
// { "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 tprice = computed(() => {
|
|
return `Price / ${settingsStore.currency}`;
|
|
})
|
|
|
|
const hproducts = ref([
|
|
{ text: "Country", value: "countryName", sortable: true },
|
|
{ text: "Tag", value: "tag", sortable: true },
|
|
{ text: "Local Price", value: "salesPrice", sortable: true },
|
|
{ text: "Cur", value: "currency", sortable: false },
|
|
{ text: "Rate", value: "rate" },
|
|
{ text: tprice, value: "calcPrice", 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: "Description Long", value: "descLong", sortable: true },
|
|
{ text: "Units", value: "units", sortable: true },
|
|
{ text: "Price", value: "price", sortable: true },
|
|
{ text: "Image", value: "img", sortable: false },
|
|
]);
|
|
|
|
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]);
|
|
settingsStore.ccountry_filter.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=", settingsStore.ccountry_filter, ccountry_list.value);
|
|
const response2 = await axios.get(route("settings.index"));
|
|
settingsStore.settings = response2.data;
|
|
console.log("SETTINGS=",settingsStore.settings);
|
|
|
|
const response3 = await axios.get(route("products.count"));
|
|
settingsStore.products_count = Object.fromEntries(
|
|
response3.data.map((c) => [c.country, c.cnt])
|
|
);
|
|
console.log("PC=",settingsStore.products_count);
|
|
|
|
|
|
} 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);
|
|
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])
|
|
);
|
|
|
|
currency.value.unshift("EUR");
|
|
console.log("RATE=", rates.value);
|
|
console.log("HASH=", currencyHash.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 response2 = await axios.get(route("geo.ip.get"));
|
|
geoip.value = response2.data;
|
|
|
|
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 (settingsStore.text.length < 2) return;
|
|
|
|
try {
|
|
let country = null;
|
|
if (settingsStore.country.code !== undefined) country = settingsStore.country.code;
|
|
|
|
console.log('SETTINGS',settingsStore.country);
|
|
console.log('URL',route("products.search", ['all', settingsStore.text, country]));
|
|
const response = await axios.get(route("products.search", ['all', settingsStore.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: parseFloat(i.salesPrice),
|
|
units: i.priceUnit,
|
|
descLong: i.mainImageAlt,
|
|
globalCode: i.itemNoGlobal,
|
|
};
|
|
});
|
|
console.log("VALUES=", options_items.value);
|
|
|
|
productsCriteria.value = null;
|
|
} 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 clear_all = () => {
|
|
settingsStore.text = '';
|
|
products.value = [];
|
|
options_items.value = [];
|
|
}
|
|
|
|
onMounted(fetch);
|
|
onMounted(fetch_rates);
|
|
onMounted(fetch_ccodes);
|
|
onMounted(() => {
|
|
console.log('HEIGHT MAP', googlemapbox.value);
|
|
});
|
|
const showRow = async (item) => {
|
|
console.log("ITEM=", item);
|
|
|
|
itemCode.value = item.code;
|
|
try {
|
|
const response = await axios.post(route("products.compare"), {
|
|
codes: item.globalCode,
|
|
countries: settingsStore.countries,
|
|
currency: settingsStore.currency,
|
|
online: settingsStore.online,
|
|
text: settingsStore.text,
|
|
country: settingsStore.country.code,
|
|
});
|
|
|
|
console.log('MATOMO',$matomo);
|
|
products.value = response.data.products;
|
|
countryHash.value = response.data.countryHash;
|
|
console.log("TEST=", response.data);
|
|
nextTick(() => {
|
|
options.width=googlemapbox.value.clientWidth;
|
|
googlemapchart.value += 1;
|
|
})
|
|
} 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 (settingsStore.codes.length == 0) {
|
|
Swal.fire({
|
|
title: "Empty code",
|
|
text: "You must enter product!",
|
|
icon: "error",
|
|
});
|
|
return false;
|
|
}
|
|
settingsStore.post(route("products.compare"));
|
|
};
|
|
|
|
const selectedRowClassNameFunction = (item) => {
|
|
if (item.code == itemCode.value) return 'selected-row';
|
|
};
|
|
|
|
|
|
</script>
|
|
<template>
|
|
<GuestLayout>
|
|
|
|
<div class="flex flex-wrap gap-2 justify-center align-middle">
|
|
|
|
<div id="popup-modal" tabindex="-1" :class="'hidden'"
|
|
class="absolute inset-y-1/3 left-1/3 sm:inset-10 sm:left-10 z-50 justify-center items-center w-full max-h-full">
|
|
<div class="relative p-4 w-full max-w-md max-h-full">
|
|
<div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
|
|
<button @click="hover=true" type="button"
|
|
class="absolute top-3 end-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white"
|
|
data-modal-hide="popup-modal">
|
|
<svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
|
|
viewBox="0 0 14 14">
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
|
|
stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
|
|
</svg>
|
|
<span class="sr-only">Close modal</span>
|
|
</button>
|
|
<div class="p-4 md:p-5 text-center">
|
|
|
|
|
|
<img :src="hoverImage" />
|
|
<!-- <button data-modal-hide="popup-modal" type="button" class="text-white bg-red-600 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center">
|
|
Yes, I'm sure
|
|
</button> -->
|
|
<button @click="hover=true" data-modal-hide="popup-modal" type="button"
|
|
class="py-2.5 px-5 mt-2 ms-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="flex flex-col start-0 row-start-1">
|
|
<div ref="googlemapbox" class="justify-center rounded-md border-black border-8 max-h-[328px]">
|
|
<GChart :key="googlemapchart" :events="gchartEvents" :type="type" :data="chart_coutries"
|
|
:options="options" :settings="chart_settings" :resizeDebounce="500" />
|
|
</div>
|
|
|
|
|
|
<div class="flex flex-col start-0">
|
|
<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="30"
|
|
:headers="hproducts" :items="tproducts" :body-row-class-name="bodyRowClassNameFunction"
|
|
:hide-rows-per-page="true" :hide-footer="true" alternating>
|
|
<template #item-countryName="{ countryName, url }">
|
|
<a class="underline" target="_blank" :href="url">{{
|
|
countryName
|
|
}}</a>
|
|
</template>
|
|
</EasyTable>
|
|
<div v-if="settingsStore.online == true">Online</div>
|
|
<div v-else-if="'LAST_REFRESH_TIME' in settingsStore.settings">Last Refresh Time: {{
|
|
settingsStore.settings["LAST_REFRESH_TIME"] }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="">
|
|
<form @submit.prevent="submit">
|
|
<div>
|
|
<div class="flex flex-col start-0">
|
|
<div class="w-full">
|
|
<div>
|
|
<span class="font-extrabold font-mono">Search:</span>
|
|
</div>
|
|
<div>
|
|
<fwb-input @input="async_search" v-model="settingsStore.text" :placeholder="settingsStore.online ? 'Code of product' : 'Description or name'"
|
|
size="md">
|
|
<template #suffix>
|
|
<svg aria-hidden="true" class="w-5 h-5 text-gray-500 dark:text-gray-400"
|
|
fill="none" stroke="currentColor" viewBox="0 0 24 24"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
|
|
stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
|
|
</svg>
|
|
</template>
|
|
</fwb-input>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div>
|
|
<span class="font-extrabold font-mono">Online:</span>
|
|
</div>
|
|
<div>
|
|
<input type="checkbox"
|
|
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
|
|
v-model="settingsStore.online" @input="clear_all" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
</form>
|
|
<div class="mt-5">
|
|
<input v-if="showDescLongFilter" placeholder="Search in long description"
|
|
class="mb-1 px-2 py-1 placeholder-blueGray-300 text-blueGray-600 relative bg-white bg-white rounded text-sm border border-blueGray-300 outline-none focus:outline-none focus:ring w-full"
|
|
type="text" v-model="searchValue">
|
|
<EasyTable class="none" :rows-per-page="20" :headers="hresults" :items="options_items"
|
|
:search-field="searchField" :search-value="searchValue"
|
|
:body-row-class-name="selectedRowClassNameFunction" @click-row="showRow"
|
|
:filter-options="filterOptions" alternating>
|
|
<template #item-img="{ code, img }">
|
|
<img v-on:mouseover="onHover" class="h-12" :src="img" :alt="code" />
|
|
</template>
|
|
<template #header-item="header">
|
|
<div class="filter-column">
|
|
<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>
|
|
</div>
|
|
</template>
|
|
<template #header-descLong="header">
|
|
<div class="filter-column">
|
|
<img :src="searchimg" class="filter-icon"
|
|
@click.stop="showDescLongFilter = !showDescLongFilter" />
|
|
{{ header.text }}
|
|
</div>
|
|
</template>
|
|
<template #header-desc="header">
|
|
<div class="filter-column">
|
|
<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>
|
|
</div>
|
|
</template>
|
|
<template #header-units="header">
|
|
<div class="filter-column">
|
|
<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>
|
|
</div>
|
|
</template>
|
|
</EasyTable>
|
|
</div>
|
|
</div>
|
|
<div></div>
|
|
</div>
|
|
</GuestLayout>
|
|
</template>
|
|
<style>
|
|
@import "vue3-easy-data-table/dist/style.css";
|
|
|
|
.filter-column {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-items: center;
|
|
position: relative;
|
|
}
|
|
|
|
.filter-icon {
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
width: 15px !important;
|
|
height: 15px !important;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.filter-menu {
|
|
padding: 5px 5px;
|
|
z-index: 1;
|
|
position: absolute;
|
|
top: 40px;
|
|
width: 328px;
|
|
|
|
background-color: #fff;
|
|
border: 1px solid #e0e0e0;
|
|
}
|
|
|
|
.filter-menu-units {
|
|
padding: 5px 5px;
|
|
z-index: 1;
|
|
position: absolute;
|
|
top: 40px;
|
|
width: 128px;
|
|
}
|
|
|
|
.selected-row {
|
|
--easy-table-body-row-hover-background-color: #e5e6f9;
|
|
--easy-table-body-row-background-color: #e5e6f9;
|
|
--easy-table-body-row-font-color: #000;
|
|
--easy-table-body-even-row-background-color: #e5e6f9;
|
|
}
|
|
|
|
:root .result-country {
|
|
--easy-table-body-row-background-color: #e5e6f9;
|
|
--easy-table-body-even-row-background-color: #e5e6f9;
|
|
}
|
|
</style>
|
|
|
|
|