Restult table - mod

app/Http/Controllers/ProductsCompareController.php

@@ -45,15 +45,8 @@ class ProductsCompareController extends Controller
     if (count($countries)) $products->whereIn("country",$countries);
     $products = $products->get();
 
-    $currencyRates = CurrencyRates::rates2EUR("Y");
-    if ($currency == "EUR") {
-      $coef = 1;
-    } else {
-      $coef = floatval(CurrencyRates::where('currency',$currency)->first()->rate);
-    }
 
-    $products = $products->map(function ($product) use ($currencyRates, $coef, $cHash) {
+    $products = $products->map(function ($product) use ( $cHash) {
-      $product["salesPrice"] = round(floatval(($product["salesPrice"]) / $currencyRates[$product["country"]]) * $coef, 2);
       $product["countryName"] = $cHash[$product["country"]];
       return $product;
     });

lang/id.json

@@ -119,5 +119,6 @@
     "referenceerror: assignment to undeclared variable country": "ReferenceError: assignment to undeclared variable country",
     "typeerror: can't access property \"map\", ccountry.value is undefined": "TypeError: can't access property \"map\", ccountry.value is undefined",
     "referenceerror: priceunit is not defined": "ReferenceError: priceUnit is not defined",
-    "referenceerror: mainimagealt is not defined": "ReferenceError: mainImageAlt is not defined"
+    "referenceerror: mainimagealt is not defined": "ReferenceError: mainImageAlt is not defined",
+    "referenceerror: countrycurrency is not defined": "ReferenceError: countryCurrency is not defined"
 }

resources/js/Pages/IkeaRoot.vue

@@ -37,28 +37,34 @@ const sdropdown = ref([
 
 const products = ref([]);
 const countryHash = ref([]);
+const countryCurrency = ref({});
 const showItemFilter = ref(false);
 
 let tproducts = computed(() => {
+  console.log('PR=',products);
+  console.log('CC=',countryCurrency.value);
   return products.value.map((prod) => {
-    prod.salesPrice = parseFloat(prod.salesPrice);
+    prod.currency = countryCurrency.value[prod.countryName];
-    // prod.country = countryHash.value[prod.country];
+    prod.calcPrice = prod.salesPrice/currencyHash.value[prod.currency];
+    prod.calcPrice = (prod.salesPrice * currencyCoef.value).toFixed(2);
+    prod.rate = currencyHash.value[prod.currency];
+   
     return prod;
   })
 })
 
 let uniqProducts = computed(() => {
-       var output = [];
+  var output = [];
-       var keys = [];
+  var keys = [];
-       options_items.value.forEach((element) => {
+  options_items.value.forEach((element) => {
-            var key = element.item;
+    var key = element.item;
-            if (keys.indexOf(key) === -1) {
+    if (keys.indexOf(key) === -1) {
-                keys.push(key);
+      keys.push(key);
-                output.push(element.item);
+      output.push(element.item);
-            }
+    }
-        });
+  });
-        console.log('OUT',output);
+  console.log('OUT', output);
-        return output;
+  return output;
 });
 
 const type = 'GeoChart';
@@ -86,7 +92,10 @@ const hrates = ref([
 const hproducts = ref([
   { text: "Country", value: "countryName", sortable: true },
   { text: "Name", value: "name", sortable: true },
-  { text: "Price", value: "salesPrice", sortable: true }
+  { text: "Local Price", value: "salesPrice", sortable: true },
+  { text: "Cur", value: "currency", sortable: false},
+  { text: "Rate", value: "rate" },
+  { text: "Price", value: "calcPrice", sortable: true }
 ]);
 const hresults = ref([
   { text: "Code", value: "code", sortable: true },
@@ -154,6 +163,9 @@ const fetch_rates = async () => {
     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]),
     );
@@ -267,18 +279,9 @@ const showRow = async (item) => {
 const onSelectCurrency = () => {
   console.log('CURR', form.currency);
   console.log('COEF', currencyCoef.value);
-  console.log('PROD', products.value);
-  if (products.value.length > 0) {
-    if (currencyCoef.value != 1.0)
-      products.value.map((product) => { product.salesPrice = product.salesPrice / 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;
+  else currencyCoef.value = 1.0;
-
-    products.value = products.value.map((product) => { product.salesPrice = (product.salesPrice * currencyCoef.value).toFixed(2); return product });
-
-    console.log('PROD-NEW', products.value);
-  }
 }
 
 const submit = () => {
@@ -299,28 +302,28 @@ const submit = () => {
   <GuestLayout>
     <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 class="justify-center rounded-md border-black border-8 max-h-[328px]">
-        <GChart :events="gchartEvents" :type="type" :data="ccountry_filter" :options="options"
+          <GChart :events="gchartEvents" :type="type" :data="ccountry_filter" :options="options"
-          :settings="chart_settings" />
+            :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" />
+        </div>
+        <div class="flex flex-col start-0">
+          <span class="font-extrabold font-mono">Results</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>
-        <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" />
-      </div>
-      <div class="flex flex-col start-0">
-        <span class="font-extrabold font-mono">Results</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 class="mr-auto">
         <form @submit.prevent="submit">
           <div class="flex flex-col start-0">
@@ -357,7 +360,8 @@ const submit = () => {
 
         </form>
         <div class="mt-5">
-          <EasyTable class="none" :rows-per-page=20 :headers="hresults" :items="options_items" @click-row="showRow" alternating>
+          <EasyTable class="none" :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="code" />
             </template>
@@ -381,9 +385,9 @@ const submit = () => {
         </div>
       </div>
       <div>
-        
 
-        
+
+
       </div>
     </div>
 
@@ -416,6 +420,7 @@ const submit = () => {
   width: 250px;
   background-color: #fff;
 
-}</style>
+}
+</style>
 <style src="vue-multiselect/dist/vue-multiselect.css"></style>