search with country

resources/js/Pages/IkeaRoot.vue

@@ -39,9 +39,12 @@ let tproducts = computed(() => {
 const type = 'GeoChart';
 const form = useForm({
   countries: '',
+  country: '',
   codes: '',
   currency: 'EUR',
 });
+
+const ccodes = ref([]);
 const ccountry = ref([]);
 const ccountry_filter = ref([['Country'],]);
 const ccountry_list = ref(['TEST']);
@@ -130,10 +133,30 @@ const fetch_rates = async () => {
   }
 }
 
+const fetch_ccodes = async () => {
+  try {
+    const response = await axios.get(route('ccountry.codes'))
+    ccodes.value = response.data;
+    ccodes.value = Object.entries(ccodes.value).map(([k,v]) => { if (v !== null) return { "country": k, "code": v } } ).filter( n => n);
+    console.log("ccodes=", ccodes.value);
+  } 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 async_search = async (item) => {
   try {
     if (item.length >= 2) {
-      const response = await axios.get(route('products.search', item));
+      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]));
       options_items.value = response.data.map((i) => { return { "item": i.name, "desc": i.typeName, "img": i.mainImageUrl, "code": i.code } });
       console.log("VALUES=", options_items.value);
     }
@@ -150,6 +173,7 @@ const async_search = async (item) => {
   }
 }
 
+
 function customLabel({ item, desc }) {
   //console.log(item);
   return `${item} - ${desc}`;
@@ -172,6 +196,7 @@ function selectCountry(item, id) {
 
 onMounted(fetch);
 onMounted(fetch_rates);
+onMounted(fetch_ccodes);
 
 const submit = () => {
   console.log('ITEM=', form);
@@ -204,6 +229,13 @@ const submit = () => {
               @select="selectCountry" @remove="selectCountry">
             </multiselect>
           </div>
+          <div class="flex flex-col start-0">
+            <span class="font-extrabold font-mono">Krajina produktu na vyhladanie</span>
+          </div>
+          <div>
+            <multiselect :close-on-select="false" :multiple="false" v-model="form.country" :options="ccodes" label="country" track-by="code">
+            </multiselect>
+          </div>
           <div>
             <span class="font-extrabold font-mono">Zadaj polozku</span>
           </div>