Redesign

app/Http/Controllers/IkeaProductsController.php

@@ -10,8 +10,12 @@ use Illuminate\Support\Facades\Log;
 
 class IkeaProductsController extends Controller
 {
-  public function search(Request $request, string $item, string $country = '')
+  public function search(Request $request, string $field, string $text, ?string $country = '')
   {
-    return IkeaProducts::search($item, $country);
+    return IkeaProducts::search($field, $text, $country);
+  }
+  public function multi_search(Request $request, string $item, ?string $desc='', ?string $code='', ?string $country = '')
+  {
+    return IkeaProducts::search($item,$desc,$code,$country);
   }
 }

app/Http/Controllers/ProductsCompareController.php

@@ -35,10 +35,10 @@ class ProductsCompareController extends Controller
 
     $cHash = CountryCode::code_countryHash();
     if (is_array($codes) == false)
-      $aCodes = [$codes['code']];
+      $aCodes = $codes;
     else
       $aCodes = $codes->map(function ($code) {
-        return $code['code'];
+        return $code;
       });
 
     $products =  IkeaProducts::whereIn("code", $aCodes);
@@ -57,9 +57,9 @@ class ProductsCompareController extends Controller
       return $product;
     });
     Log::info("{products}", ["products" => $products]);
-    return Inertia::render('IkeaRoot', [
+    return [
       'products' => $products,
       'countryHash' => $cHash,
-    ]);
+    ];
   }
 }

app/Models/IkeaProducts.php

@@ -24,22 +24,21 @@ class IkeaProducts extends Model
    */
   public $incrementing = false;
 
-  protected function search($item,$country = '')
+  protected function search($field, $text, $country)
   {
-    if (strlen($item) >= 2 && strlen($item) < 5) {
+    if ((strlen($text) >= 2 && $field == "name") || (strlen($text) > 3 && $field == 'typeName')) {
-      $result = $this->where('name', 'LIKE', $item . '%');
+      $result = $this->where($field, 'LIKE', '%' . $text . '%');
-      if ($country != '') $result = $result->where('country',$country);
+      if ($country != '') {
-      return $result->get();
+        $result->where('country', $country);
-    } else if (strlen($item >= 5)) {
-      $result = $this->where(function ($query) use ($item) { $query->where('typeName', 'LIKE', '%' .  $item . '%')->orWhere('name', 'LIKE', '%' . $item . '%'); } );
-      if ($country != '') $result = $result->where('country',$country);
-
-      return $result->get();
-   
       }
+      return $result->get();
     }
 
-  protected function multisearch($codes, $countries)  {
+    return [];
+  }
+
+  protected function multisearch($codes, $countries)
+  {
     //$countries = $
     // return $this->where('code',$codes)->where('country',$countries); 
   }

lang/id.json

@@ -109,5 +109,13 @@
     "referenceerror: currency is not defined": "ReferenceError: currency is not defined",
     "typeerror: can't access property \"unshift\", currency.velue is undefined": "TypeError: can't access property \"unshift\", currency.velue is undefined",
     "item must be selected": "Item must be selected",
-    "typeerror: can't access property \"code\", form.country.value is undefined": "TypeError: can't access property \"code\", form.country.value is undefined"
+    "typeerror: can't access property \"code\", form.country.value is undefined": "TypeError: can't access property \"code\", form.country.value is undefined",
+    "referenceerror: item is not defined": "ReferenceError: item is not defined",
+    "error: ziggy error: route 'products.search.multiple' is not in the route list.": "Error: Ziggy error: route 'products.search.multiple' is not in the route list.",
+    "error: ziggy error: route 'products.msearch' is not in the route list.": "Error: Ziggy error: route 'products.msearch' is not in the route list.",
+    "error: request failed with status code 404": "Error: Request failed with status code 404",
+    "error: ziggy error: object passed as 'item' parameter is missing route model binding key 'undefined'.": "Error: Ziggy error: object passed as 'item' parameter is missing route model binding key 'undefined'.",
+    "error: ziggy error: object passed as 'field' parameter is missing route model binding key 'undefined'.": "Error: Ziggy error: object passed as 'field' parameter is missing route model binding key 'undefined'.",
+    "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"
 }

resources/js/Pages/IkeaRoot.vue

@@ -27,11 +27,20 @@ const props = defineProps({
   }
 })
 
-console.log(props.countryHash);
+const sdropdown = ref([
+  { text: "Description", value: "typeName"},
+  { text: "Item name", value: "name"},
+  { text: "Code of product", value: "code"}
+]);
+
+
+const products = ref([]);
+const countryHash = ref([]);
+
 let tproducts = computed(() => {
-  return props.products.map((prod) => {
+  return products.value.map((prod) => {
     prod.salesPrice = parseFloat(prod.salesPrice);
-    prod.country = props.countryHash[prod.country];
+    prod.country = countryHash.value[prod.country];
     return prod;
   })
 })
@@ -40,7 +49,8 @@ const type = 'GeoChart';
 const form = useForm({
   countries: '',
   country: '',
-  codes: '',
+  field: sdropdown.value[0],
+  text: '',
   currency: 'EUR',
 });
 
@@ -62,7 +72,12 @@ const hproducts = ref([
   { text: "Name", value: "name", sortable: true },
   { text: "Price", value: "salesPrice", 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: "Image", value: "img", sortable: false}
+])
 const rates = ref([]);
 const options_items = ref([]);
 const selected_item = ref(null);
@@ -70,7 +85,7 @@ const selected_item = ref(null);
 const options = {
   region: 150,
 
-  width: 700,
+  width: 500,
   height: 500,
 };
 
@@ -154,16 +169,16 @@ const fetch_ccodes = async () => {
   }
 }
 
-const async_search = async (item) => {
+const async_search = async () => {
   try {
-    if (item.length >= 2) {
+      let country = null;
+      if (form.country.code !== undefined) country = form.country.code;
 
-      console.log('SEARCH', item, form.country.code, route('products.search', [item, form.country.code]));
+      console.log('SEARCH',route('products.search',[form.field.value, form.text, country]));
-      const response = await axios.get(route('products.search', [item, form.country.code]));
+      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 } });
       console.log("VALUES=", options_items.value);
-    }
   } catch (e) {
     const response = await Swal.fire({
       title: __('are you want to try again') + '?',
@@ -202,6 +217,30 @@ onMounted(fetch);
 onMounted(fetch_rates);
 onMounted(fetch_ccodes);
 
+const showRow = async (item) => {
+  console.log('ITEM=', item);
+  console.log('FORM=', form);
+  
+  try {
+    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') + '?',
+      text: __(`${e}`),
+      icon: 'question',
+      showCancelButton: true,
+      showCloseButton: true,
+    })
+
+    response.isConfirmed && fetch()
+  }
+};
+
+
 const submit = () => {
   console.log('ITEM=', form);
   if (form.codes.length == 0) {
@@ -242,28 +281,36 @@ const submit = () => {
             </multiselect>
           </div>
           <div>
-            <span class="font-extrabold font-mono">Zadaj polozku</span>
+            <span class="font-extrabold font-mono">Search in:</span>
           </div>
           <div>
-            <multiselect v-model="form.codes" label="item" track-by="item" :custom-label="customLabel"
+            <multiselect v-model="form.field" :multiple="false" :searchable="false" :allow-empty="false" :options="sdropdown" track-by="value" label="text"></multiselect>
-              :internal-search="false" placeholder="Find item" :searchable="true" :options="options_items"
+          </div>
-              @search-change="async_search" />
+
+          <div>
+            <span class="font-extrabold font-mono">Dynamic search:</span>
           </div>
           <div>
-            <span class="font-extrabold font-mono">Prepocet do meny</span>
+            <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>
-          <div class="text-end mt-2">
+         
-            <button type="submit"
-              class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
-              :disabled="form.processing" :class="{ 'opacity-25': form.processing }">
-              Search
-            </button>
-          </div>
         </form>
+        <div class="mt-5">
+          <EasyTable :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=""/>
+            </template>
+          </EasyTable>
+        </div>
+
         <div class="mt-5">
           <EasyTable :rows-per-page=10 :headers="headers" :items="items" alternating></EasyTable>
         </div>

routes/web.php

@@ -37,7 +37,7 @@ Route::get('/ccountry/codes/', [CountryCodeController::class, 'codes'])->name('c
 Route::get('/ccountry/active/', [CountryCodeController::class, 'active'])->name('ccountry.active');
 Route::get('/search/{id}',[CountryCompareController::class,'search'])->name('ccompare.search');
 Route::get('/rates/', [CurrencyRatesController::class, 'index'])->name('rates.index');
-Route::get('/products/{item}/{country?}', [IkeaProductsController::class, 'search'])->name('products.search');
+Route::get('/products/{field}/{text}/{country?}', [IkeaProductsController::class, 'search'])->name('products.search');
 Route::post('/products/compare/', [ProductsCompareController::class, 'compare'])->name('products.compare');
 
 Route::middleware(['auth:sanctum', config('jetstream.auth_session'), 'verified'])->group(function () {