Currency recalc, design

app/Http/Controllers/ProductsCompareController.php

@@ -52,8 +52,9 @@ class ProductsCompareController extends Controller
       $coef = floatval(CurrencyRates::where('currency',$currency)->first()->rate);
     }
 
-    $products = $products->map(function ($product) use ($currencyRates, $coef) {
+    $products = $products->map(function ($product) use ($currencyRates, $coef, $cHash) {
       $product["salesPrice"] = round(floatval(($product["salesPrice"]) / $currencyRates[$product["country"]]) * $coef, 2);
+      $product["countryName"] = $cHash[$product["country"]];
       return $product;
     });
     Log::info("{products}", ["products" => $products]);

resources/js/Pages/IkeaRoot.vue

@@ -40,7 +40,7 @@ const countryHash = ref([]);
 let tproducts = computed(() => {
   return products.value.map((prod) => {
     prod.salesPrice = parseFloat(prod.salesPrice);
-    prod.country = countryHash.value[prod.country];
+    // prod.country = countryHash.value[prod.country];
     return prod;
   })
 })
@@ -58,9 +58,9 @@ const ccodes = ref([]);
 const ccountry = ref([]);
 const ccountry_filter = ref([['Country'],]);
 const ccountry_list = ref(['TEST']);
-const selected = ref(null);
+const currencyHash = ref({});
-const article = ref('');
 const currency = ref([]);
+const currencyCoef = ref(1.0);
 const hrates = ref([
   { text: "Currency", value: "currency", sortable: true },
   { text: "Country", value: "country_name", sortable: true },
@@ -68,7 +68,7 @@ const hrates = ref([
 ]);
 // { "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([
-  { text: "Country", value: "country", sortable: true },
+  { text: "Country", value: "countryName", sortable: true },
   { text: "Name", value: "name", sortable: true },
   { text: "Price", value: "salesPrice", sortable: true }
 ]);
@@ -135,8 +135,12 @@ const fetch_rates = async () => {
     const response = await axios.get(route('rates.index'))
     rates.value = response.data;
     currency.value = rates.value.map((currency) => 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') + '?',
@@ -241,7 +245,22 @@ const showRow = async (item) => {
     response.isConfirmed && fetch()
   }
 };
+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];
+    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 = () => {
   console.log('ITEM=', form);
@@ -286,7 +305,8 @@ const submit = () => {
             <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>
+            <multiselect v-model="form.field" :multiple="false" :searchable="false" :allow-empty="false"
+              :options="sdropdown" track-by="value" label="text"></multiselect>
           </div>
 
           <div>
@@ -296,13 +316,6 @@ const submit = () => {
             <input class="rounded-md " v-model="form.text" @input="async_search" />
           </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" />
-          </div>
           
         </form>
         <div class="mt-5">
@@ -321,6 +334,14 @@ const submit = () => {
         </div>
       </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">Vysledky vyhladavania</span>
         </div>