yakovenko_arina/your-gold
2
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

mpa/langs/currency

Browse Source
This commit is contained in:
Arina Yakovenko 2025-06-04 15:59:23 +02:00
parent c9348dc092
commit a7c4ff51ca
11 changed files with 414 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
components/CurrSelector.vue Normal file
View File

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

2
components/HeaderBlock.vue
View File

@ -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();

6
components/LangSwitcher.vue
View File

@ -17,8 +17,8 @@
@update:model-value="setLocale"
>
<template #leading="{ modelValue }">
<div class="flex items-center gap-2 text-xl font-medium">
{{ locales.find((item) => item.code === modelValue)?.name }}
<div class="flex items-center gap-2 text-xl font-medium uppercase">
{{ 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>

168
components/MapBlock.vue
View File

File diff suppressed because one or more lines are too long

33
components/section/main-page/MainBlocks.vue
View File

@ -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>
<p>Partners</p>
<div class="w-3 h-3 rounded-[2.8px] bg-button"></div>
<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>
<p>Customers</p>
<div class="w-3 h-3 rounded-[2.8px] bg-bg-block"></div>
<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>

4
components/section/main-page/MainProducts.vue
View File

@ -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;
@ -91,8 +91,6 @@ watch(itemCount, async() => {
onMounted(async () => {
await updateItemCount();
window.addEventListener("resize", updateItemCount);
await productStore.getList(itemCount.value);
});
onBeforeUnmount(() => {

6
nuxt.config.ts
View File

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

2
plugins/initLoad.ts
View File

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

129
stores/mapStore.ts Normal file
View File

@ -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
};
});

68
stores/menuStore.ts
View File

@ -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,
};

32
types/index.ts
View File

@ -95,3 +95,35 @@ export type componentsListType = {
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;
}