Redesign

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]));
-      const response = await axios.get(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', [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"
-              :internal-search="false" placeholder="Find item" :searchable="true" :options="options_items"
-              @search-change="async_search" />
+            <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>
-            <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>