Redesign with toolbar

resources/js/Layouts/GuestLayout.vue

@@ -1,9 +1,7 @@
 <script setup>
 import Swal from 'sweetalert2';
-import { getCurrentInstance, ref, onMounted, onUnmounted, nextTick, computed } from 'vue';
-import { FwbDropdown, FwbListGroup, FwbListGroupItem } from 'flowbite-vue';
+import { ref, onMounted, computed ,watch } from 'vue';
 import LogoIkea from '@/assets/Ikea_logo.svg';
-import UserOptions from './UserOptions.vue';
 import {
     FwbSelect,
     FwbNavbar,
@@ -11,9 +9,34 @@ import {
     FwbNavbarLink,
     FwbNavbarLogo,
     FwbButton,
+    FwbDropdown,
+    FwbListGroup,
+    FwbListGroupItem,
+    FwbMegaMenu,
+    FwbMegaMenuDropdown,
+    FwbRadio,
 } from 'flowbite-vue';
-
+import Multiselect from "vue-multiselect";
+import { settingsStore } from '../settingsStore.js';
 const menu = ref([])
+const geoip = ref(null)
+const ccodes = ref([])
+const rates = ref([])
+const currency = ref([])
+const countryCurrency = ref([])
+const currencyHash = ref([])
+
+const ccountry = ref([])
+const ccountry_list = ref([])
+const items = ref([])
+
+let tsettings = computed(() => {
+    let country = "GB";
+    console.log('AAAAA',settingsStore.country);
+    if (settingsStore.country != "") country = settingsStore.country.code;
+    return `${country} / ${settingsStore.currency}`;
+});
+
 const fetch_menu = async () => {
     try {
         const response = await axios.get(route('menu.user'))
@@ -31,12 +54,133 @@ const fetch_menu = async () => {
     }
 }
 
+const fetch_ccodes = async () => {
+  try {
+    const response2 = await axios.get(route("geo.ip.get"));
+    geoip.value = response2.data;
+
+    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 fetch_rates = async () => {
+  try {
+    const response = await axios.get(route("rates.index"));
+    rates.value = response.data;
+    currency.value = rates.value.map((currency) => currency.currency);
+    countryCurrency.value = Object.fromEntries(
+      rates.value.map((currency) => [currency.country_name, currency.currency])
+    );
+    currencyHash.value = Object.fromEntries(
+      rates.value.map((currency) => [currency.currency, currency.rate])
+    );
+
+    currency.value.unshift("EUR");
+    console.log("RATE=", rates.value);
+    console.log("HASH=", currencyHash.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 fetch = async () => {
+  try {
+    const response = await axios.get(route("ccountry.active"));
+    ccountry.value = response.data;
+    let aCntry = ccountry.value.map((country) => [country.country_name]);
+    settingsStore.ccountry_filter.push(...aCntry);
+
+    ccountry_list.value = ccountry.value.map((country) => {
+        return {
+          name: country.country_name,
+          code: country.country_code,
+         };
+    });
+    var i = 1;
+    items.value = ccountry.value.map((country) => {
+      return {
+        country: country.country_name,
+        currency: country.currency_code,
+        id: i++,
+      };
+    });
+    console.log("TEST=", settingsStore.ccountry_filter, ccountry_list.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();
+  }
+};
+
+function selectCountry(item, id) {
+  let cCntry = [["Country"]];
+
+  let aCntry = settingsStore.countries.map((country) => [country.name]);
+  if (settingsStore.countries.length == 0) aCntry = ccountry.value.map((country) => [country.country_name]);
+
+  settingsStore.ccountry_filter = cCntry;
+  settingsStore.ccountry_filter.push(...aCntry);
+}
+
+watch(ccodes, (codes) => {
+  console.log("NNN=", codes);
+  console.log("IP=", geoip.value);
+
+  let fonud = false;
+  codes.forEach((c) => {
+    if (c.code == geoip.value.iso_code) {
+        settingsStore.country = c;
+        found = true;
+    }
+  });
+  if (fonud == false) settingsStore.country = codes.filter((c) => {return c.code == 'GB'})[0];
+  console.log("FC=", settingsStore.country);
+});
+
+onMounted(fetch);
+onMounted(fetch_rates);
+onMounted(fetch_ccodes);
 onMounted(fetch_menu);
 </script>
 
-
+<style>
+@import "flag-icons/css/flag-icons.min.css";
+</style>
 <template>
-    <fwb-navbar>
+    <fwb-navbar class="px-0">
         <template #logo>
             <fwb-navbar-logo alt="IKEA Price Craweler" :image-url="LogoIkea" :link="route('root')">
                 IKEA Price Crawler
@@ -45,13 +189,13 @@ onMounted(fetch_menu);
 
         <template #default="{ isShowMenu }">
             <fwb-navbar-collapse :is-show-menu="isShowMenu" v-if="menu.length > 0">
-                <fwb-navbar-link>
-                    <user-options></user-options>
 
-                </fwb-navbar-link>
                 <fwb-navbar-link :link="route(menu[0].route_or_url)">
                     Home
                 </fwb-navbar-link>
+                <fwb-mega-menu link="#">
+                    <template #default>{{ tsettings }}</template>
+                </fwb-mega-menu>
                 <template v-for="item in menu[0].childs" v-if="menu.length > 0">
                     <fwb-navbar-link :link="route(item.route_or_url)">
                         {{ item.name }}
@@ -60,7 +204,43 @@ onMounted(fetch_menu);
             </fwb-navbar-collapse>
 
         </template>
-        <template #mega-menu>TEST</template>
+        <template #mega-menu-dropdown>
+            <fwb-mega-menu-dropdown>
+
+                    <div class="flex-auto">
+                        <div class="flex flex-col start-0">
+                            <span class="font-extrabold font-mono">Country in which search product</span>
+                        </div>
+                        <div class="">
+                            <multiselect placeholder="All" :close-on-select="true" :multiple="false" v-model="settingsStore.country" :options="ccodes" label="country" track-by="code">
+                                <template #option="slotProps">
+                                    <span :class="'pl-6 fi fi-' + slotProps.option.code.toLowerCase()">{{ slotProps.option.country }}</span>
+                                </template>
+                            </multiselect>
+                        </div>
+                    </div>
+                    <div class="flex-auto">
+                        <div class="flex flex-col start-0">
+                            <span class="font-extrabold font-mono">Countries in which compare</span>
+                        </div>
+                        <div>
+                            <multiselect placeholder="All" @remove="selectCountry" @select="selectCountry" :close-on-select="false" :multiple="true" v-model="settingsStore.countries" :options="ccountry_list" label="name" track-by="name">
+                                <template #option="slotProps">
+                                    <span :class="'pl-6 fi fi-' + slotProps.option.code.toLowerCase()">{{ slotProps.option.name }}</span>
+                                </template>
+                            </multiselect>
+                        </div>
+                    </div>
+
+                    <div class="flex-auto">
+                        <div class="flex flex-col start-0">
+                            <span class="font-extrabold font-mono">Currency recalculation</span>
+                        </div>
+                        <fwb-radio v-for="c in currency" v-model="settingsStore.currency" name="radio" :label="c" :value="c" />
+                    </div>
+
+            </fwb-mega-menu-dropdown>
+        </template>
     </fwb-navbar>
     <div class="m-3">
         <slot />

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">

resources/js/settingsStore.js

@@ -0,0 +1,13 @@
+
+import { reactive } from 'vue';
+
+export const settingsStore = reactive({
+    countries: "",
+    country: "",
+    field: "",
+    text: "",
+    currency: "EUR",
+    online: false,
+    ccountry_filter: [["Country"]],
+    settings: {},
+  });