Basic online search with bugs...

resources/js/Pages/IkeaRoot.vue

@@ -168,6 +168,7 @@ const form = useForm({
   field: sdropdown.value[0],
   text: "",
   currency: "EUR",
+  online: false,
 });
 
 const ccodes = ref([]);
@@ -208,6 +209,11 @@ const sleep = (ms) => {
   return new Promise((resolve) => setTimeout(resolve, ms));
 };
 
+const onSelectCode = () => {
+    if (form.field.value == 'code') {
+
+    }
+}
 const fetch = async () => {
   try {
     const response = await axios.get(route("ccountry.active"));
@@ -302,12 +308,8 @@ const async_search = async () => {
     let country = null;
     if (form.country.code !== undefined) country = 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])
+      route("products.search", [form.field.value, form.text, country, form.online])
     );
 
     options_items.value = response.data.map((i) => {
@@ -323,6 +325,9 @@ const async_search = async () => {
       };
     });
     console.log("VALUES=", options_items.value);
+    if (form.field.value == 'code') {
+        showRow({'code': form.text});
+    }
     productsCriteria.value = null;
   } catch (e) {
     const response = await Swal.fire({
@@ -367,6 +372,7 @@ const showRow = async (item) => {
       codes: item.code,
       countries: form.countries,
       currency: form.currency,
+      online: form.online,
     });
 
     products.value = response.data.products;
@@ -473,7 +479,7 @@ watch(ccodes, (codes) => {
       <div class="mr-auto">
         <form @submit.prevent="submit">
           <div>
-          <div class="grid grid-cols-2">
+          <div class="grid grid-cols-3">
             <div>
               <div>
                 <span class="font-extrabold font-mono">Dynamic search:</span>
@@ -486,6 +492,19 @@ watch(ccodes, (codes) => {
                 />
               </div>
             </div>
+            <div class="ml-2" >
+              <div v-if="form.field.value == 'code'">
+                <span class="font-extrabold font-mono">Online:</span>
+              </div>
+              <div v-if="form.field.value == 'code'">
+                <input
+                  type="checkbox"
+                  class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
+                  v-model="form.online"
+                  @input="async_search"
+                />
+              </div>
+            </div>
             <div class="">
               <div>
                 <span class="font-extrabold font-mono">Search in:</span>
@@ -499,6 +518,7 @@ watch(ccodes, (codes) => {
                   :options="sdropdown"
                   track-by="value"
                   label="text"
+                  @select="onSelectCode"
                 ></multiselect>
               </div>
             </div>