Redesign with toolbar

resources/js/Pages/IkeaRoot.vue

@@ -16,11 +16,10 @@ import { GChart } from "vue-google-charts";
 import EasyTable from "vue3-easy-data-table";
 import GuestLayout from "../Layouts/GuestLayout.vue";
 
-import { useForm } from "@inertiajs/inertia-vue3";
 import axios from "axios";
 import filterimg from "@/assets/eglass-filter.png";
 import searchimg from "@/assets/search-icon.svg";
-import Popper from "vue3-popper";
+import { settingsStore } from '../settingsStore.js';
 
 
 const screenWidth = ref(screen.width)
@@ -37,7 +36,6 @@ const sdropdown = ref([
 const products = ref([]);
 const searchField = ref('descLong');
 const searchValue = ref('');
-const settings = ref({});
 
 const countryHash = ref([]);
 const countryCurrency = ref({});
@@ -102,7 +100,7 @@ const tproducts = computed(() => {
   });
 });
 const bodyRowClassNameFunction = (item) => {
-  if (item.country == form.country.code) return "result-country";
+  if (item.country == settingsStore.country.code) return "result-country";
 };
 const filterOptions = computed(() => {
   const filterOptionsArray = [];
@@ -177,18 +175,11 @@ const descCriteria = ref(uniqDesc.value[0]);
 const unitsCriteria = ref(uniqUnits.value[0]);
 
 const type = "GeoChart";
-const form = useForm({
-  countries: "",
-  country: "",
-  field: sdropdown.value[0],
-  text: "",
-  currency: "EUR",
-  online: false,
-});
+settingsStore.field = sdropdown.value[0];
 
 const ccodes = ref([]);
 const ccountry = ref([]);
-const ccountry_filter = ref([["Country"]]);
+
 const ccountry_list = ref(["TEST"]);
 const currencyHash = ref({});
 const currency = ref([]);
@@ -225,7 +216,7 @@ const sleep = (ms) => {
 };
 
 const onSelectCode = () => {
-    if (form.field.value == 'code') {
+    if (settingsStore.field.value == 'code') {
 
     }
 }
@@ -234,7 +225,7 @@ const fetch = async () => {
     const response = await axios.get(route("ccountry.active"));
     ccountry.value = response.data;
     let aCntry = ccountry.value.map((country) => [country.country_name]);
-    ccountry_filter.value.push(...aCntry);
+    settingsStore.ccountry_filter.push(...aCntry);
 
     ccountry_list.value = ccountry.value.map((country) => country.country_name);
     var i = 1;
@@ -245,9 +236,10 @@ const fetch = async () => {
         id: i++,
       };
     });
-    console.log("TEST=", ccountry_filter.value, ccountry_list.value);
+    console.log("TEST=", settingsStore.ccountry_filter, ccountry_list.value);
     const response2 = await axios.get(route("settings.index"));
-    settings.value = response2.data;
+    settingsStore.settings = response2.data;
+    console.log("SETTINGS=",settingsStore.settings);
 
   } catch (e) {
     const response = await Swal.fire({
@@ -317,15 +309,15 @@ const fetch_ccodes = async () => {
 };
 
 const async_search = async () => {
-  if (form.text.length < 2) return;
+  if (settingsStore.text.length < 2) return;
 
   try {
     let country = null;
-    if (form.country.code !== undefined) country = form.country.code;
+    if (settingsStore.country.code !== undefined) country = settingsStore.country.code;
 
-    const response = await axios.get(
-      route("products.search", [form.field.value, form.text, country, form.online])
-    );
+    console.log('SETTINGS',settingsStore.country);
+    console.log('URL',route("products.search", [settingsStore.field.value, settingsStore.text, country]));
+    const response = await axios.get(route("products.search", [settingsStore.field.value, settingsStore.text, country, settingsStore.online]));
 
     options_items.value = response.data.map((i) => {
       return {
@@ -337,11 +329,12 @@ const async_search = async () => {
         price: parseFloat(i.salesPrice),
         units: i.priceUnit,
         descLong: i.mainImageAlt,
+        globalCode: i.itemNoGlobal,
       };
     });
     console.log("VALUES=", options_items.value);
-    if (form.field.value == 'code') {
-        showRow({'code': form.text});
+    if (settingsStore.field.value == 'code') {
+        showRow({'code': settingsStore.text});
     }
     productsCriteria.value = null;
   } catch (e) {
@@ -362,17 +355,6 @@ function customLabel({ item, desc, code }) {
   return `${item} - ${desc} - ${code}`;
 }
 
-function selectCountry(item, id) {
-  let cCntry = [["Country"]];
-  console.log(form.countries);
-  let aCntry = form.countries.map((country) => [country]);
-  if (form.countries.length == 0) aCntry = ccountry.value.map((country) => [country.country_name]);
-
-  ccountry_filter.value = cCntry;
-  ccountry_filter.value.push(...aCntry);
-
-
-}
 
 onMounted(fetch);
 onMounted(fetch_rates);
@@ -380,14 +362,14 @@ onMounted(fetch_ccodes);
 
 const showRow = async (item) => {
   console.log("ITEM=", item);
-  console.log("FORM=", form);
+
   itemCode.value = item.code;
   try {
     const response = await axios.post(route("products.compare"), {
-      codes: item.code,
-      countries: form.countries,
-      currency: form.currency,
-      online: form.online,
+      codes: item.globalCode,
+      countries: settingsStore.countries,
+      currency: settingsStore.currency,
+      online: settingsStore.online,
     });
 
     products.value = response.data.products;
@@ -406,17 +388,17 @@ const showRow = async (item) => {
   }
 };
 const onSelectCurrency = () => {
-  console.log("CURR", form.currency);
+  console.log("CURR", settingsStore.currency);
   console.log("COEF", currencyCoef.value);
 
-  if (form.currency != "EUR")
-    currencyCoef.value = currencyHash.value[form.currency];
+  if (settingsStore.currency != "EUR")
+    currencyCoef.value = currencyHash.value[settingsStore.currency];
   else currencyCoef.value = 1.0;
 };
 
 const submit = () => {
   console.log("ITEM=", form);
-  if (form.codes.length == 0) {
+  if (settingsStore.codes.length == 0) {
     Swal.fire({
       title: "Empty code",
       text: "You must enter product!",
@@ -424,17 +406,10 @@ const submit = () => {
     });
     return false;
   }
-  form.post(route("products.compare"));
+  settingsStore.post(route("products.compare"));
 };
 
-watch(ccodes, (codes) => {
-  console.log("NNN=", codes);
-  console.log("IP=", geoip.value);
-  codes.forEach((c) => {
-    if (c.code == geoip.value.iso_code) form.country = c;
-  });
-  console.log("FC=", form.country);
-});
+
 </script>
 <template>
   <GuestLayout>
@@ -470,26 +445,13 @@ watch(ccodes, (codes) => {
           <GChart
             :events="gchartEvents"
             :type="type"
-            :data="ccountry_filter"
+            :data="settingsStore.ccountry_filter"
             :options="options"
             :settings="chart_settings"
           />
         </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"
             >Results <b v-if="itemCode">for {{ itemCode }}</b>
@@ -514,14 +476,14 @@ watch(ccodes, (codes) => {
               }}</a>
             </template>
           </EasyTable>
-          <div v-if="form.field.value == 'code' && form.online == true">Online</div>
-          <div v-else-if="settings['LAST_REFRESH_TIME']">Last Refresh Time: {{ settings["LAST_REFRESH_TIME"] }}</div>
+          <div v-if="settingsStore.field == 'code' && settingsStore.online == true">Online</div>
+          <div v-else-if="'LAST_REFRESH_TIME' in settingsStore.settings">Last Refresh Time: {{ settingsStore.settings["LAST_REFRESH_TIME"] }}</div>
         </div>
       </div>
       <div class="mr-auto">
         <form @submit.prevent="submit">
           <div>
-          <div class="grid lg:grid-cols-3 md:grid-cols-1 sm:grid-cols-1">
+          <div class="flex flex-col start-0">
             <div class="w-full">
               <div>
                 <span class="font-extrabold font-mono">Dynamic search:</span>
@@ -529,20 +491,20 @@ watch(ccodes, (codes) => {
               <div>
                 <input
                   class="rounded-md w-full"
-                  v-model="form.text"
+                  v-model="settingsStore.text"
                   @input="async_search"
                 />
               </div>
             </div>
             <div class="ml-2" >
-              <div v-if="form.field.value == 'code'">
+              <div v-if="settingsStore.field == 'code'">
                 <span class="font-extrabold font-mono">Online:</span>
               </div>
-              <div v-if="form.field.value == 'code'">
+              <div v-if="settingsStore.field == '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"
+                  v-model="settingsStore.online"
                   @input="async_search"
                 />
               </div>
@@ -553,7 +515,7 @@ watch(ccodes, (codes) => {
               </div>
               <div>
                 <multiselect
-                  v-model="form.field"
+                  v-model="settingsStore.field"
                   :multiple="false"
                   :searchable="false"
                   :allow-empty="false"
@@ -565,40 +527,9 @@ watch(ccodes, (codes) => {
               </div>
             </div>
           </div>
-          <div class="flex flex-col start-0">
-            <span class="font-extrabold font-mono"
-              >Countries in which compare</span
-            >
-          </div>
-          <div>
-            <multiselect
-              placeholder="All"
-              :close-on-select="false"
-              :multiple="true"
-              v-model="form.countries"
-              :options="ccountry_list"
-              @select="selectCountry"
-              @remove="selectCountry"
-            >
-            </multiselect>
-          </div>
-          <div v-if="form.field.value != 'code'" class="flex flex-col start-0">
-            <span class="font-extrabold font-mono"
-              >Country in which search product</span
-            >
-          </div>
-          <div v-if="form.field.value != 'code'">
-            <multiselect
-              placeholder="All"
-              :close-on-select="true"
-              :multiple="false"
-              v-model="form.country"
-              :options="ccodes"
-              label="country"
-              track-by="code"
-            >
-            </multiselect>
-          </div>
+
+
+
         </div>
         </form>
         <div class="mt-5">