Fix: local price soring, filtering

resources/js/Pages/IkeaRoot.vue

@@ -36,9 +36,33 @@ const sdropdown = ref([
 
 
 const products = ref([]);
+
 const countryHash = ref([]);
 const countryCurrency = ref({});
 const showItemFilter = ref(false);
+const rates = ref([]);
+const options_items = ref([]);
+const itemCode = ref(null);
+
+const options = {
+  region: 150,
+
+  width: 500,
+  height: 310,
+};
+
+const chart_settings = {
+  packages: ['geochart', 'map'],
+  mapsApiKey: "AIzaSyAJaLArHgTmQPMOSogitG-umhZilVIgdNU",
+};
+
+const gchartEvents = ref({
+  regionClick: () => {
+    const selection = getSelection()
+    console.log(selection);
+    console.log("T");
+  }
+},);
 
 let tproducts = computed(() => {
   console.log('PR=', products);
@@ -51,15 +75,28 @@ let tproducts = computed(() => {
       prod.currency = 'EUR'
     }
     if (prod.tag == 'NONE') prod.tag = '';
-    prod.calcPrice = Math.round(prod.calcPrice * currencyCoef.value * 100)/100;
+    prod.salesPrice = Math.round(prod.salesPrice * 100) / 100;
+    prod.calcPrice = Math.round(prod.calcPrice * currencyCoef.value * 100) / 100;
     prod.rate = currencyHash.value[prod.currency];
 
     return prod;
   })
 })
 
+const filterOptions = computed(() => {
+  const filterOptionsArray = [];
+  if (productsCriteria.value != 'All' && productsCriteria.value != null) {
+    filterOptionsArray.push({
+      field: 'item',
+      comparison: '=',
+      criteria: productsCriteria.value,
+    });
+  }
+  return filterOptionsArray;
+});
+
 let uniqProducts = computed(() => {
-  var output = [];
+  var output = ['All',];
   var keys = [];
   options_items.value.forEach((element) => {
     var key = element.item;
@@ -72,6 +109,7 @@ let uniqProducts = computed(() => {
   return output;
 });
 
+const productsCriteria = ref(uniqProducts.value[0]);
 const type = 'GeoChart';
 const form = useForm({
   countries: '',
@@ -111,29 +149,6 @@ const hresults = ref([
   { text: "Price", value: "price", sortable: true },
   { text: "Image", value: "img", sortable: false }
 ])
-const rates = ref([]);
-const options_items = ref([]);
-const itemCode = ref(null);
-
-const options = {
-  region: 150,
-
-  width: 500,
-  height: 310,
-};
-
-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))
@@ -221,6 +236,7 @@ const async_search = async () => {
 
     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') + '?',
@@ -366,13 +382,13 @@ const submit = () => {
         </form>
         <div class="mt-5">
           <EasyTable class="none" :rows-per-page=20 :headers="hresults" :items="options_items" @click-row="showRow"
-            alternating>
+            :filter-options="filterOptions" alternating>
             <template #item-img="{ code, img }">
               <img class="h-12" :src="img" :alt="code" />
             </template>
             <template #header-item="header">
-              <div class="filter-column overflow-visible">
-                <img :src="filterimg" class="filter-icon" @click="showItemFilter = !showItemFilter" />
+              <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>
@@ -422,8 +438,10 @@ const submit = () => {
   z-index: 1;
   position: absolute;
   top: 40px;
-  width: 250px;
+  width: 328px;
+ 
   background-color: #fff;
+  border: 1px solid #e0e0e0;
 
 }
 </style>