Small redesign

resources/js/Pages/IkeaRoot.vue

@@ -1,25 +1,31 @@
 <script setup>
-import { getCurrentInstance, ref, onMounted, onUnmounted, nextTick, computed, watch } from 'vue';
+import {
-import Swal from 'sweetalert2';
+  getCurrentInstance,
+  ref,
+  onMounted,
+  onUnmounted,
+  nextTick,
+  computed,
+  watch,
+} from "vue";
+import Swal from "sweetalert2";
 
-import Multiselect from 'vue-multiselect';
+import Multiselect from "vue-multiselect";
-import { GChart } from 'vue-google-charts';
+import { GChart } from "vue-google-charts";
 
 import EasyTable from "vue3-easy-data-table";
-import GuestLayout from '../Layouts/GuestLayout.vue';
+import GuestLayout from "../Layouts/GuestLayout.vue";
-
-import { useForm } from '@inertiajs/inertia-vue3'
-import axios from 'axios';
-import filterimg from '@/assets/eglass-filter.png';
 
+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("PR=", products);
-  console.log('CC=', countryCurrency.value);
+  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',
+      field: "item",
-      comparison: '=',
+      comparison: "=",
       criteria: productsCriteria.value,
     });
   }
-  if (descCriteria.value != 'All' && descCriteria.value != null) {
+  if (descCriteria.value != "All" && descCriteria.value != null) {
     filterOptionsArray.push({
-      field: 'desc',
+      field: "desc",
-      comparison: '=',
+      comparison: "=",
       criteria: descCriteria.value,
     });
   }
-  if (unitsCriteria.value != 'All' && unitsCriteria.value != null) {
+  if (unitsCriteria.value != "All" && unitsCriteria.value != null) {
     filterOptionsArray.push({
-      field: 'units',
+      field: "units",
-      comparison: '=',
+      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: '',
+  countries: "",
-  country: '',
+  country: "",
   field: sdropdown.value[0],
-  text: '',
+  text: "",
-  currency: 'EUR',
+  currency: "EUR",
 });
 
 const ccodes = ref([]);
 const ccountry = ref([]);
-const ccountry_filter = ref([['Country'],]);
+const ccountry_filter = ref([["Country"]]);
-const ccountry_list = ref(['TEST']);
+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'))
+    const response = await axios.get(route("ccountry.active"));
-    ccountry.value = response.data
+    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]));
+    console.log(
-    const response = await axios.get(route('products.search', [form.field.value, form.text, country]));
+      "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("ITEM=", item);
-  console.log('FORM=', form);
+  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("CURR", form.currency);
-  console.log('COEF', currencyCoef.value);
+  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("NNN=", codes);
-  console.log('IP=',geoip.value);
+  console.log("IP=", geoip.value);
-  codes.forEach((c) => { if (c.code == geoip.value.iso_code) form.country = c; });
+  codes.forEach((c) => {
-  console.log('FC=',form.country);
+    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]">
+        <div
-          <GChart :events="gchartEvents" :type="type" :data="ccountry_filter" :options="options"
+          class="justify-center rounded-md border-black border-8 max-h-[328px]"
-            :settings="chart_settings" />
+        >
+          <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"
+          <multiselect
-            :searchable="true" :options="currency" @select="onSelectCurrency" />
+            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>
+          <div class="grid grid-cols-2">
+            <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>
+            <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>
+            <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"
+            <multiselect
-              @select="selectCountry" @remove="selectCountry">
+              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>
+            <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"
+            <multiselect
-              label="country" track-by="code">
+              placeholder="All"
+              :close-on-select="true"
+              :multiple="false"
+              v-model="form.country"
+              :options="ccodes"
+              label="country"
+              track-by="code"
+            >
             </multiselect>
           </div>
-          <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>
-
-
         </form>
         <div class="mt-5">
-          <EasyTable class="none" :rows-per-page=20 :headers="hresults" :items="options_items" @click-row="showRow"
+          <EasyTable
-            :filter-options="filterOptions" alternating>
+            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">
+                <div
-                  <multiselect v-model="productsCriteria" :options="uniqProducts"></multiselect>
+                  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">
+                <div
-                  <multiselect v-model="descCriteria" :options="uniqDesc"></multiselect>
+                  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">
+                <div
-                  <multiselect v-model="unitsCriteria" :options="uniqUnits"></multiselect>
+                  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>