mpa/langs/currency

components/CurrSelector.vue

@@ -0,0 +1,71 @@
+<template>
+  <UCollapsible
+    v-model="isOpen"
+    class="flex flex-col gap-2"
+    :ui="{
+      content: 'absolute top-20',
+    }"
+  >
+    <UButton
+      color="neutral"
+      variant="subtle"
+      trailing-icon="i-lucide-chevron-down"
+      class="m-0 bg-bg-dark ring-0 text-xl font-medium uppercase cursor-pointer hover:bg-inherit"
+      block
+      @click="isOpen = !isOpen"
+    >
+      {{ selectedCountry }}/{{ selectedCurrency }}
+    </UButton>
+
+    <template #content>
+      <div class="flex flex-col">
+        <USelect
+          v-model="selectedCountry"
+          :items="menuStore.countryList"
+          class="w-48"
+          value-key="iso_code"
+        >
+          <template #leading="{ modelValue }">
+            <div class="flex items-center gap-2 text-xl font-medium uppercase">
+              {{ modelValue }}
+            </div>
+          </template>
+
+          <template #item="{ item }">
+            <div class="flex items-center gap-2 cursor-pointer w-full">
+              <p class="text-xl font-medium">{{ item?.name }}</p>
+            </div>
+          </template>
+        </USelect>
+        <USelect
+          v-model="selectedCurrency"
+          :items="menuStore.currencies"
+          class="w-48"
+          value-key="iso_code"
+        >
+          <template #leading="{ modelValue }">
+            <div class="flex items-center gap-2 text-xl font-medium uppercase">
+              {{ modelValue }}
+            </div>
+          </template>
+
+          <template #item="{ item }">
+            <div class="flex items-center gap-2 cursor-pointer w-full">
+              <p class="text-xl font-medium">{{ item?.name }}</p>
+            </div>
+          </template>
+        </USelect>
+      </div>
+    </template>
+  </UCollapsible>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from "#imports";
+
+const isOpen = ref(false);
+const menuStore = useMenuStore();
+
+const selectedCountry = ref(menuStore.countryList[0].iso_code);
+const selectedCurrency = ref(menuStore.currencies[0].iso_code);
+</script>

components/HeaderBlock.vue

@@ -31,6 +31,7 @@
               <i class="uil uil-shopping-cart text-[31px] cursor-pointer"></i>
             </div>
             <LangSwitcher />
+            <CurrSelector />
             <ThemeSwitcher />
             <button
               class="hover:bg-button-hover bg-button cursor-pointer rounded-xl px-6 py-3 font-medium text-white transition-all"
@@ -284,7 +285,6 @@
 import LangSwitcher from "./LangSwitcher.vue";
 
 const menuStore = useMenuStore();
-const store = useStore();
 const open = ref(false);
 const colorMode = useColorMode();
 

components/LangSwitcher.vue

@@ -17,8 +17,8 @@
     @update:model-value="setLocale"
   >
     <template #leading="{ modelValue }">
-      <div class="flex items-center gap-2 text-xl font-medium">
+      <div class="flex items-center gap-2 text-xl font-medium uppercase">
-        {{ locales.find((item) => item.code === modelValue)?.name }}
+        {{ locales.find((item) => item.code === modelValue)?.code }}
       </div>
     </template>
 
@@ -28,7 +28,7 @@
           :name="item.icon as string"
           class="size-5 rounded-full border border-button/40"
         />
-        <p class="text-xl font-medium">{{ item.name }}</p>
+        <p class="text-xl font-medium uppercase">{{ item.code }}</p>
       </div>
     </template>
   </USelect>

components/section/main-page/MainBlocks.vue

@@ -42,16 +42,16 @@
 
     <!-- Map block with same layout rules -->
     <div class="w-full xl:max-w-[48%] md:mx-10 xl:m-0 flex flex-col gap-4 items-center">
-      <h1>Jsme tu pro vás napříč Evropou</h1>
+      <h1 class="text-sm sm:text-xl uppercase">Jsme tu pro vás napříč Evropou</h1>
       <MapBlock />
       <div class="flex items-center gap-4 w-full justify-end">
         <div class="flex items-center gap-2">
-          <div class="w-2 h-2 rounded-[2px] bg-accent-green"></div>
+          <div class="w-3 h-3 rounded-[2.8px] bg-button"></div>
-          <p>Partners</p>
+          <p class="text-sm sm:text-lg">Partners</p>
         </div>
         <div class="flex items-center gap-2">
-          <div class="w-2 h-2 rounded-[2px] bg-accent-green"></div>
+          <div class="w-3 h-3 rounded-[2.8px] bg-bg-block"></div>
-          <p>Customers</p>
+          <p class="text-sm sm:text-lg">Customers</p>
         </div>
       </div>
     </div>
@@ -72,32 +72,9 @@ type Component = {
   ];
 };
 
-interface Partner {
-  code: string;
-  country_iso: string;
-  region_iso: string;
-  first_name: string;
-  last_name: string;
-  job_position: string;
-  commissioning_entity_name: string;
-}
-
 const props = defineProps<{
   component: Component;
   data: Object;
   infoData: Object;
 }>();
-
-const countryISOs = ref("");
-const isDefault = ref<boolean>(true);
-const activeCountry = ref<string>("");
-
-let partnersList = ref([] as Partner[]);
-let partnersCountries = ref([] as any[]);
-
-const backToEurope = () => {
-  isDefault.value = true;
-  activeCountry.value = "";
-  partnersList.value = [];
-};
 </script>

components/section/main-page/MainProducts.vue

@@ -58,7 +58,7 @@
 <script lang="ts" setup>
 import { ref, onMounted, onBeforeUnmount } from "vue";
 
-const props = defineProps<{ component: Component }>();
+defineProps<{ component: Component }>();
 type Component = {
   image_collection: string;
   section_id: string;
@@ -84,15 +84,13 @@ async function updateItemCount() {
   else itemCount.value = 1;
 }
 
-watch(itemCount, async() => {
+watch(itemCount, async () => {
   await productStore.getList(itemCount.value);
 });
 
 onMounted(async () => {
   await updateItemCount();
   window.addEventListener("resize", updateItemCount);
-
-  await productStore.getList(itemCount.value);
 });
 
 onBeforeUnmount(() => {

nuxt.config.ts

@@ -20,9 +20,9 @@ export default defineNuxtConfig({
 
   i18n: {
     locales: [
-      { code: "pl", name: "Pl", icon: "circle-flags:pl" },
+      { code: "pl", name: "Polski", icon: "circle-flags:pl" },
-      { code: "en", name: "EN", icon: "circle-flags:gb" },
+      { code: "en", name: "English", icon: "circle-flags:gb" },
-      { code: "cs", name: "CZR", icon: "circle-flags:cz" }
+      { code: "cs", name: "Čeština", icon: "circle-flags:cz" }
     ],
     lazy: true,
     defaultLocale: "en",

plugins/initLoad.ts

@@ -4,4 +4,6 @@ export default defineNuxtPlugin(async () => {
   const menuStore = useMenuStore();
   await menuStore.loadMenu();
   await menuStore.loadFooter();
+  await menuStore.getCountryList();
+  await menuStore.getCurrencies();
 });

stores/mapStore.ts

@@ -0,0 +1,129 @@
+import type { CountryList, PartnersList } from "~/types";
+
+export const useMapStore = defineStore("mapStore", () => {
+    const partnersList = ref<PartnersList[]>([
+        {
+            country_iso: "cz",
+            total: 9,
+            country_name: "Czech Republic",
+        },
+        {
+            country_iso: "de",
+            total: 1,
+            country_name: "Germany",
+        },
+        {
+            country_iso: "ie",
+            total: 1,
+            country_name: "Ireland",
+        },
+        {
+            country_iso: "nl",
+            total: 1,
+            country_name: "Netherlands",
+        },
+        {
+            country_iso: "pl",
+            total: 61,
+            country_name: "Poland",
+        },
+    ]);
+
+    const customersList = ref([
+        "be",
+        "cz",
+        "de",
+        "dk",
+        "gb",
+        "ie",
+        "it",
+        "nl",
+        "no",
+        "pl",
+        "sk",
+        "at",
+        "lt",
+        "is",
+        "se"
+    ]);
+
+    const countryList = ref<CountryList[]>()
+    const countries = ref<CountryList[]>()
+
+    // async function getPartnersList() {
+    //     try {
+    //         const res = await fetch(
+    //             `http://127.0.0.1:4000/api/public/partners/count`,
+    //             {
+    //                 headers: {
+    //                     "Content-Type": "application/json",
+    //                 },
+    //             }
+    //         );
+
+    //         if (!res.ok) {
+    //             throw new Error(`HTTP error: ${res.status}`);
+    //         }
+
+    //         const data = await res.json();
+    //         partnersList.value = data.data
+    //     } catch (error) {
+    //         console.error("getList error:", error);
+    //     }
+    // }
+
+    // async function getCustomerList() {
+    //     try {
+    //         const res = await fetch(
+    //             `http://127.0.0.1:4000/api/public/customer/countries`,
+    //             {
+    //                 headers: {
+    //                     "Content-Type": "application/json",
+    //                 },
+    //             }
+    //         );
+
+    //         if (!res.ok) {
+    //             throw new Error(`HTTP error: ${res.status}`);
+    //         }
+
+    //         const data = await res.json();
+    //         customersList.value = data.data
+    //     } catch (error) {
+    //         console.error("getList error:", error);
+    //     }
+    // }
+
+    async function getCountries() {
+        try {
+            const res = await fetch(
+                `http://127.0.0.1:4000/api/public/countries`,
+                {
+                    headers: {
+                        "Content-Type": "application/json",
+                    },
+                }
+            );
+
+            if (!res.ok) {
+                throw new Error(`HTTP error: ${res.status}`);
+            }
+
+            const data = await res.json();
+            countries.value = data.ata       
+        } catch (error) {
+            console.error("getList error:", error);
+        }
+    }
+
+
+    return {
+        partnersList,
+        customersList,
+        // countryList,
+        countries,
+        // getPartnersList,
+        // getCustomerList,
+        getCountries
+    };
+});

stores/menuStore.ts

@@ -1,5 +1,7 @@
 import { usePB } from "~/composables/usePB";
 import type {
+  CountryList,
+  Currencies,
   FooterListResponse,
   MenuListResponse,
   PBFooterItem,
@@ -29,13 +31,19 @@ export const useMenuStore = defineStore("menuStore", () => {
   const store = useStore();
   const { $i18n } = useNuxtApp();
   const router = useRouter();
+  const route = useRoute();
+
   const openMenu = ref(false);
   const openDropDown = ref(false);
 
+
   const defaultMenu = ref();
   const menu = ref<UIMenuItem[]>([]);
   const menuItems = ref<MenuListResponse>();
+
   const footerItems = ref<FooterListResponse>();
+  const countryList = ref<CountryList[]>();
+  const currencies = ref<Currencies[]>();
 
   const loadMenu = async () => {
     try {
@@ -73,6 +81,52 @@ export const useMenuStore = defineStore("menuStore", () => {
     }
   };
 
+  const getCountryList = async () => {
+    try {
+      const res = await fetch(
+        `http://127.0.0.1:4000/api/public/country/list`,
+        {
+          headers: {
+            "Content-Type": "application/json",
+          },
+        }
+      );
+
+      if (!res.ok) {
+        throw new Error(`HTTP error: ${res.status}`);
+      }
+
+      const data = await res.json();
+      countryList.value = data.data
+
+    } catch (error) {
+      console.error("getList error:", error);
+    }
+  }
+
+  const getCurrencies = async () => {
+    try {
+      const res = await fetch(
+        `http://127.0.0.1:4000/api/public/currencies`,
+        {
+          headers: {
+            "Content-Type": "application/json",
+          },
+        }
+      );
+
+      if (!res.ok) {
+        throw new Error(`HTTP error: ${res.status}`);
+      }
+
+      const data = await res.json();
+      currencies.value = data.data.items
+
+    } catch (error) {
+      console.error("getList error:", error);
+    }
+  }
+
   const navigateToItem = (item?: UIMenuItem) => {
     if (item) {
       router.push({
@@ -91,11 +145,6 @@ export const useMenuStore = defineStore("menuStore", () => {
     }
   };
 
-  watch($i18n.locale, async () => {
-    await loadMenu();
-    await loadFooter();
-  });
-
   const getFirstImage = () => {
     const req = useRequestEvent();
     const url = useRequestURL();
@@ -111,7 +160,6 @@ export const useMenuStore = defineStore("menuStore", () => {
     return "";
   };
 
-  const route = useRoute();
   const headMeta = computed(() => {
     const item = menuItems.value?.items.find(
       (item) => item.id_page === route.params.id
@@ -174,16 +222,24 @@ export const useMenuStore = defineStore("menuStore", () => {
     });
   }
 
+  watch($i18n.locale, async () => {
+    await loadMenu();
+    await loadFooter();
+  });
   return {
     menu,
     menuItems,
     footerItems,
     openMenu,
     openDropDown,
+    countryList,
+    currencies,
     loadMenu,
     loadFooter,
+    getCountryList,
     navigateToItem,
     redirectToPage,
+    getCurrencies,
     defaultMenu,
     headMeta,
   };

types/index.ts

@@ -94,4 +94,36 @@ export type componentsListType = {
   component: PBPageItem;
   componentInstance: DefineComponent;
   data: SectionLangData;
-};
+};
+
+// menuStore
+export type CountryList = {
+  call_prefix: string;
+  currency_iso_code: string;
+  iso_code: string;
+  name: string;
+}
+
+export type Countries = {
+  call_prefix: string;
+  currency_iso_code: string;
+  iso_code: string;
+  name: string;
+}
+
+export type PartnersList = {
+  country_iso: string;
+  country_name: string;
+  total: number;
+}
+
+export type Currencies = {
+  iso_code: string;
+  name: string;
+  UpdatedAt: string;
+  iso_code_num: number;
+  precision: number;
+  sign: string;
+  active: boolean;
+  suffix: boolean;
+}