@@ -15,7 +15,7 @@
class="bg-inherit w-full ring-0 cursor-pointer focus:ring-0 outline-none focus-visible:ring-0 space-y-1">
- {{ menuStore.selectedCountry }}
@@ -23,12 +23,9 @@
@@ -126,23 +125,32 @@
diff --git a/plugins/i18n.ts b/plugins/01_i18n.ts
similarity index 78%
rename from plugins/i18n.ts
rename to plugins/01_i18n.ts
index d37831b..9963939 100644
--- a/plugins/i18n.ts
+++ b/plugins/01_i18n.ts
@@ -20,16 +20,17 @@ declare module 'vue' {
export class Session {
- cookieData = reactive({} as CookieData);
+ cookieData = ref({} as CookieData);
urlParams = new URLSearchParams()
- currentLanguageIso = ref("" as string )
- currentCountryIso = ref("" as string )
- currentCurrencyIso = ref("" as string )
+ currentLanguageIso = ref("" as string)
+ currentCountryIso = ref("" as string)
+ currentCurrencyIso = ref("" as string)
route = {} as RouteLocation
router = {} as Router
i18n = {} as VueI18n
+ sessionOngoing: boolean = false
constructor(i18n: VueI18n, router: Router) {
this.route = router.currentRoute.value
@@ -44,6 +45,8 @@ export class Session {
async loadSession() {
+ if (this.sessionOngoing) return
+ this.sessionOngoing = true
this.setQueryParams()
const { data } = await useMyFetch
>(`/api/public/cookie?${this.urlParams.toString()}`, {
headers: {
@@ -53,10 +56,11 @@ export class Session {
throw new Error(`HTTP error: ${status}`);
},
});
- this.cookieData = data;
- this.currentCountryIso.value = this.cookieData.country.iso_code
- this.currentLanguageIso.value = this.cookieData.language.iso_code
- this.currentCurrencyIso.value = this.cookieData.currency.iso_code
+ this.cookieData.value = data;
+ this.currentCountryIso.value = this.cookieData.value.country.iso_code
+ this.currentLanguageIso.value = this.cookieData.value.language.iso_code
+ this.currentCurrencyIso.value = this.cookieData.value.currency.iso_code
+ setTimeout(() => this.sessionOngoing = false, 2000)
}
setLanguage(iso: string) {
@@ -94,33 +98,23 @@ export class Session {
}
-
-let session = {} as Session;
-
-export const useSession = () => session;
-
export default defineNuxtPlugin(async (nuxtApp) => {
const loaded = [] as Array;
const { $i18n: i18n } = nuxtApp as unknown as { $i18n: VueI18n };
const { $router: router } = nuxtApp as unknown as { $router: Router };
- i18n.onBeforeLanguageSwitch = async (oldLocale, newLocale) => {
- if (import.meta.browser) {
- session.setLanguage(newLocale)
- await session.loadSession()
- }
-
+ i18n.onBeforeLanguageSwitch = async (_, newLocale) => {
if (loaded.includes(newLocale)) return;
try {
+ loaded.push(newLocale);
const { data } = await useMyFetch>(
"/api/public/front/translation"
);
i18n.setLocaleMessage(newLocale, data);
- loaded.push(newLocale);
} catch (err) {
console.error("❌ Failed to load translation for locale:", newLocale);
throw err;
@@ -130,9 +124,9 @@ export default defineNuxtPlugin(async (nuxtApp) => {
- session = new Session(i18n, router)
+ const session = new Session(i18n, router)
await session.loadSession();
- nuxtApp.vueApp.provide("session", session);
+ nuxtApp.provide("session", session);
});
diff --git a/plugins/initLoad.ts b/plugins/02_initLoad.ts
similarity index 56%
rename from plugins/initLoad.ts
rename to plugins/02_initLoad.ts
index c2e2f98..dd64fc7 100644
--- a/plugins/initLoad.ts
+++ b/plugins/02_initLoad.ts
@@ -3,6 +3,8 @@ import { defineNuxtPlugin } from "#app";
export default defineNuxtPlugin(async () => {
const menuStore = useMenuStore();
await menuStore.loadMenu();
- await menuStore.getCountryList();
- await menuStore.getCurrencies();
+ await menuStore.getLocales();
+ const store = useStore();
+ await store.getMinValue();
+ await store.getCalculator();
});
\ No newline at end of file
diff --git a/stores/mapStore.ts b/stores/mapStore.ts
deleted file mode 100644
index 93a55ee..0000000
--- a/stores/mapStore.ts
+++ /dev/null
@@ -1,101 +0,0 @@
-import type { CountryList, PartnersList } from "~/types";
-
-export const useMapStore = defineStore("mapStore", () => {
- const partnersList = ref([
- {
- 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"
- ]);
-
- // 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);
- // }
- // }
-
-
- return {
- partnersList,
- customersList,
- // getPartnersList,
- // getCustomerList,
- };
-});
diff --git a/stores/menuStore.ts b/stores/menuStore.ts
index 5ccde8c..df4c806 100644
--- a/stores/menuStore.ts
+++ b/stores/menuStore.ts
@@ -1,34 +1,16 @@
-import { usePB } from "~/composables/usePB";
import type {
Country,
- Currencies,
Currency,
- FooterListResponse,
FrontMenu,
GenericResponse,
GenericResponseItems,
- PBFooterItem,
+ Language,
UIFrontMenu,
- UIMenuItem,
} from "~/types";
import { useStore } from "./store";
-import { ref, watch } from "vue";
import { useMyFetch } from "#imports";
+// import { useSession } from "~/plugins/01_i18n";
-// function buildTreeRecursive(
-// data: (PBMenuItem | UIMenuItem)[],
-// parentId: string
-// ): UIMenuItem[] {
-// const children = data.filter(
-// (item): item is UIMenuItem =>
-// item.id_parent === parentId && !item.is_default
-// );
-
-// return children.map((item) => ({
-// ...item,
-// children: buildTreeRecursive(data, item.id),
-// }));
-// }
function buildTreeRecursive(
data: (FrontMenu | UIFrontMenu)[],
@@ -46,9 +28,10 @@ function buildTreeRecursive(
}
export const useMenuStore = defineStore("menuStore", () => {
- const pb = usePB();
const store = useStore();
const { $i18n } = useNuxtApp();
+ // const session = useSession();
+ const { $session } = useNuxtApp();
const router = useRouter();
const route = useRoute();
@@ -56,29 +39,43 @@ export const useMenuStore = defineStore("menuStore", () => {
const openDropDown = ref(false);
const defaultMenu = ref();
- // const menu = ref([]);
- // const menuItems = ref();
- const menu = ref([]);
- const menuItems = ref();
- const footerItems = ref();
- const countryList = ref();
- const currencies = ref();
+ const menu = ref([] as UIFrontMenu[]);
+ const menuItems = ref([] as FrontMenu[]);
+
// curr/country
- const selectedCountry = ref();
- const selectedPhoneCountry = ref();
- const selectedCurrency = ref();
+ const selectedCountry = ref({} as Country);
+ const selectedPhoneCountry = ref({} as Country);
+ const selectedCurrency = ref({} as Currency);
+ const selectedLanguage = ref({} as Language);
+
+
+ const countries = ref([] as Country[]);
+ const currencies = ref([] as Currency[]);
+ const languages = ref([] as Language[]);
+
+
+ const getLocales = async () => {
+ const { data: countrriesList } = await useMyFetch>(`/api/public/country/list`);
+ countries.value = countrriesList;
+ selectedCountry.value = countrriesList.find((country) => country.iso_code === $session.currentCountryIso.value) as Country;
+ selectedPhoneCountry.value = countrriesList.find((country) => country.iso_code === $session.currentCountryIso.value) as Country;
+
+
+ const { data: currenciesList } = await useMyFetch>(`/api/public/currencies`)
+ currencies.value = currenciesList.items;
+ selectedCurrency.value = currenciesList.items.find((currency) => currency.iso_code === $session.currentCurrencyIso.value) as Currency;
+
+ const { data: languagesList } = await useMyFetch>(`/api/public/languages`)
+ languages.value = languagesList.items;
+ selectedLanguage.value = languagesList.items.find((language) => language.iso_code === $session.currentLanguageIso.value) as Language;
+ };
+
const loadMenu = async () => {
try {
- // menuItems.value = (await pb
- // .collection("menu_view")
- // .getList(1, 50, {
- // filter: `id_lang="${$i18n.locale.value}"&&active=true`,
- // sort: "position_id",
- // })) as MenuListResponse;
const { data } = await useMyFetch>(
`/api/public/front/menu`,
@@ -86,10 +83,6 @@ export const useMenuStore = defineStore("menuStore", () => {
onErrorOccured: (err, status) => {
console.log(err, status);
},
- // onSuccess(data) {
- // console.log(data.data, "data");
-
- // },
}
);
@@ -97,7 +90,6 @@ export const useMenuStore = defineStore("menuStore", () => {
const root = data.find((item) => item.is_root) as UIFrontMenu;
defaultMenu.value = data.find((item) => item.is_default);
- // console.log(menuNew, "data");
if (root) {
menu.value = buildTreeRecursive(data, root.id);
} else {
@@ -105,70 +97,11 @@ export const useMenuStore = defineStore("menuStore", () => {
menu.value = [];
}
- // const root = menuItems.value.items.find((item) => item.is_root);
- // defaultMenu.value = menuItems.value.items.find((item) => item.is_default);
-
- // if (root) {
- // menu.value = buildTreeRecursive(menuItems.value.items, root.id);
- // store.currentPageID = menu.value[0]?.id_page || "";
- // } else {
- // console.warn("Root menu item not found");
- // menu.value = [];
- // }
} catch (error) {
console.log(error);
}
};
- const getCountryList = async () => {
- try {
- const { data } = await useMyFetch>(
- `/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;
- if (countryList.value) selectedPhoneCountry.value = countryList.value[0];
- } catch (error) {
- console.error("getList error:", error);
- }
- };
-
- const getCurrencies = async () => {
- try {
- const { data } = await useMyFetch>(
- `/api/public/currencies`,
- {
- headers: {
- "Content-Type": "application/json",
- },
- onErrorOccured: (_, status) => {
- throw new Error(`HTTP error: ${status}`);
- },
- }
- );
-
- // if (!res.ok) {
- // throw new Error(`HTTP error: ${res.status}`);
- // }
-
- // const data = await res.json();
- currencies.value = data.items;
-
- // console.log(data.items, "data");
- } catch (error) {
- console.error("getList error:", error);
- }
- };
const navigateToItem = (item?: UIFrontMenu) => {
if (item) {
@@ -189,115 +122,108 @@ export const useMenuStore = defineStore("menuStore", () => {
};
function navigateToShop() {
- console.log(menuItems.value);
-
navigateToItem(menuItems.value?.find((item) => item.id === 5));
}
- // function redirectToPage(link_rewrite: string) {
- // const page = menuItems.value?.items.find(
- // (item) => item.link_rewrite === link_rewrite
- // );
-
- // if (!page?.id_page || !page?.link_rewrite) {
- // console.warn(`Page not found or missing data for name: ${link_rewrite}`);
- // return;
- // }
-
- // router.push({
- // params: {
- // id: page?.id_page,
- // slug: page?.link_rewrite,
- // },
- // });
- // }
-
- const getFirstImage = () => {
+ const getFirstImage = (size: "l" | "m" | "s" = "m", needbaseurl: boolean) => {
const req = useRequestEvent();
const url = useRequestURL();
- let img = "";
+ // let img = "";
+ const img: string[] = []
for (const s in store.components) {
- store.components[s].section_img.map((item) => {
- img = `${req?.headers.get("x-forwarded-proto") || url.protocol}://${
- req?.headers.get("x-forwarded-host") || req?.headers.get("host")
- }/api/files/${store.components[s].image_collection}/${
- store.components[s].section_id
- }/${item}?thumb=400x0`;
- });
- if (img.length > 0) return img;
+ if (store.components[s].front_section.img.length === 0) continue;
+ img.push(`/api/public/file/${store.components[s].front_section.img[0]}_${size}.webp`)
+ if (img.length > 0) break;;
+ }
+ if (img.length > 0) {
+ if (needbaseurl) {
+ return `${req?.headers.get("x-forwarded-proto") || url.protocol}://${req?.headers.get("x-forwarded-host") || url.host || req?.headers.get("host")}${img[0]}`;
+ }
+ return img[0];
}
return "";
};
const headMeta = computed(() => {
- const item = menuItems.value?.items.find(
- (item) => item.id_page === route.params.id
+ const item = menuItems.value?.find(
+ (item) => item.id.toString() === route.params.id
);
- return {
- title: item?.meta_title,
+
+ const meta = {
+ title: item?.front_menu_lang[0].meta_title,
htmlAttrs: {
lang: $i18n.locale.value,
},
- link: [{ rel: "manifest", href: "/api/manifest.json" }],
+ link: [
+ // { rel: "manifest", href: "/api/manifest.json" }
+ ],
meta: [
{
hid: "description",
name: "description",
- content: item?.meta_description,
+ content: item?.front_menu_lang[0].meta_description,
},
{
property: "og:title",
- content: item?.meta_title,
+ content: item?.front_menu_lang[0].meta_title,
},
{
property: "og:description",
- content: item?.meta_description,
+ content: item?.front_menu_lang[0].meta_description,
},
{
property: "og:image",
- content: getFirstImage(),
+ content: getFirstImage("m", true),
},
{
property: "twitter:title",
- content: item?.meta_title,
+ content: item?.front_menu_lang[0].meta_title,
},
{
property: "twitter:description",
- content: item?.meta_description,
+ content: item?.front_menu_lang[0].meta_description,
},
{
property: "twitter:image",
- content: getFirstImage(),
+ content: getFirstImage("m", true),
},
],
};
+
+ const preload = getFirstImage("l", false);
+ if (preload) {
+ meta.link.push({ rel: "preload", as: "image", href: preload } as never);
+ }
+
+ return meta;
+
});
- watch($i18n.locale, async () => {
+ // watches
+ watch(() => $session.cookieData, async () => {
+ await getLocales();
await loadMenu();
- });
+ await store.getMinValue();
+ await store.getCalculator();
+ }, { deep: true });
- watch(selectedCurrency, () => {
- store.getCalculator();
- });
return {
menu,
menuItems,
- footerItems,
openMenu,
openDropDown,
- countryList,
currencies,
+ languages,
+ countries,
selectedCountry,
selectedCurrency,
selectedPhoneCountry,
+ selectedLanguage,
defaultMenu,
headMeta,
navigateToShop,
loadMenu,
- getCountryList,
navigateToItem,
- // redirectToPage,
- getCurrencies,
+ getLocales,
};
});
diff --git a/stores/productStore.ts b/stores/productStore.ts
index 49dc2a3..ea77262 100644
--- a/stores/productStore.ts
+++ b/stores/productStore.ts
@@ -1,7 +1,5 @@
-import { NuxtErrorBoundary } from "#components";
import { useMyFetch } from "#imports";
import type {
- CartItem,
GenericResponse,
GenericResponseChildren,
GenericResponseItems,
diff --git a/stores/store.ts b/stores/store.ts
index ff546c0..9690dd3 100644
--- a/stores/store.ts
+++ b/stores/store.ts
@@ -1,16 +1,14 @@
import { useMyFetch } from "#imports";
-// import { usePB } from "~/composables/usePB";
import type {
componentsListType,
GenericResponse,
PlanPrediction,
} from "~/types";
-// import { useI18n } from "vue-i18n";
+import type { FrontPageSection } from "~/types/frontSection";
export const useStore = defineStore("store", () => {
const currentPageID = ref("");
- // const pb = usePB();
- // const { $i18n } = useNuxtApp();
+
// calculator
const monthlySavings = ref(137);
@@ -23,40 +21,14 @@ export const useStore = defineStore("store", () => {
const password = ref();
const components = ref({} as FrontPageSection[]);
- // const getSections = async (id: string) => {
- // pb.cancelRequest("menu_view");
- // components.value = (
- // await pb.collection("page_view").getList(1, 50, {
- // filter: `id="${id}"&&(section_lang_id_lang="${
- // $i18n.locale.value
- // }"||section_is_no_lang=${true})`,
- // sort: "page_section_id_position",
- // })
- // ).items as PBPageItem[];
- // };
+
const getSections = async (id: string) => {
- // if(!id){
- // id = useMenuStore().defaultMenu.id
- // }
- // console.log(useMenuStore().defaultMenu);
-
- const {data} = await useMyFetch>(
+ const { data } = await useMyFetch>(
`/api/public/front/sections/${id}`
)
- // console.log(data, id, "data");
components.value = data
- // return data
- // pb.cancelRequest("menu_view");
- // components.value = (
- // await pb.collection("page_view").getList(1, 50, {
- // filter: `id="${id}"&&(section_lang_id_lang="${
- // $i18n.locale.value
- // }"||section_is_no_lang=${true})`,
- // sort: "page_section_id_position",
- // })
- // ).items as PBPageItem[];
};
async function getComponents(): Promise {
@@ -72,7 +44,6 @@ export const useStore = defineStore("store", () => {
for (const child of children) {
const componentName = child.front_section.component_name;
- // const pageName = child.front_section.page_name;
if (!componentName) continue;
try {
@@ -85,8 +56,7 @@ export const useStore = defineStore("store", () => {
name: componentName,
component: child.front_section,
componentInstance: nonReactiveComponent,
- // data: child.front_section.front_section_lang[0].data || {} as unknown,
- // data: {}
+
});
} catch (error) {
console.error(`Failed to load component ${componentName}`, error);
@@ -133,11 +103,7 @@ export const useStore = defineStore("store", () => {
}
);
- // if (!res.ok) {
- // throw new Error(`HTTP error: ${res.status}`);
- // }
- // const data = await res.json();
minValue.value = data;
} catch (error) {
console.error("getList error:", error);
@@ -169,8 +135,6 @@ export const useStore = defineStore("store", () => {
}
}
- getCalculator();
- getMinValue();
return {
currentPageID,
@@ -185,5 +149,6 @@ export const useStore = defineStore("store", () => {
getCalculator,
getComponents,
getSections,
+ getMinValue,
};
});
diff --git a/taskfile.yml b/taskfile.yml
deleted file mode 100644
index b44a82b..0000000
--- a/taskfile.yml
+++ /dev/null
@@ -1,115 +0,0 @@
-version: "3"
-vars:
- REGISTRY: registry.ma-al.com
- Version: "0.0.6"
- BuildDate: $(date +"%Y-%m-%d %H:%M")
- Company: Maal sp. z o.o.
- CompanyUrl: "https://www.ma-al.com"
- CompileStr: go build -ldflags "-s -w -X 'pocketbase/custom/version.Version={{.Version}}' -X 'pocketbase/custom/version.BuildDate={{.BuildDate}}' -X 'pocketbase/custom/version.Company={{.Company}}' -X 'pocketbase/custom/version.CompanyUrl={{.CompanyUrl}}'" -o ../.pocketbase/pocketbase .
-
-tasks:
- default:
- cmds:
- - task --list
- silent: true
-
- compile_musl:
- aliases: [cm]
- desc: "compiles pocketbase for musl"
- env:
- CGO_ENABLED: "0"
- GOOS: "linux"
- GOARCH: "amd64"
- CC: "x86_64-linux-musl-gcc"
- cmds:
- - |
- mkdir -p ./.output
- cd ./backend
- {{.CompileStr}}
-
- compile_gnu:
- aliases: [cg]
- desc: "compiles pocketbase for gnu"
- env:
- CGO_ENABLED: "0"
- GOOS: "linux"
- GOARCH: "amd64"
- cmds:
- - |
- mkdir -p ./.output
- cd ./backend
- {{.CompileStr}}
-
- build_run_gnu:
- aliases: [br]
- desc: "compiles pocketbase for gnu"
- env:
- CGO_ENABLED: "0"
- GOOS: "linux"
- GOARCH: "amd64"
- cmds:
- - |
- mkdir -p ./.output
- cd ./backend
- go build -ldflags "-s -w" -o ../.pocketbase/pocketbase .
- cd ..
- ./.pocketbase/pocketbase serve --dir=./backend/pb_data
-
- watch_backend:
- aliases: [wb]
- desc: "watch backend and compile"
- cmds:
- - |
- cd ./backend
- pwd
- air -build.args_bin='serve --dir=./pb_data' -build.exclude_dir=pb_data,backups -build.include_ext=go
-
- watch_front:
- aliases: [wf]
- desc: "build and watch frontend in dev mode"
- cmds:
- - |
- bun run dev
-
- preview_front:
- aliases: [pf]
- desc: "build and preview frontend"
- cmds:
- - |
- bun run build && bun run preview
-
- rebuild_front:
- aliases: [rf]
- desc: "remove all and install all packages"
- cmds:
- - |
- rm -rf ./node_modules ./bun-lock ./.nuxt ./.output
- bun install
-
- # build_docker_image:
- # aliases: [bdi]
- # desc: "build docker image"
- # cmds:
- # - |
- # bun run build
- # task compile_gnu
- # cat < temp.Dockerfile
- # FROM node:slim
-
- # COPY ./.output /nuxt
- # COPY ./.pocketbase/pocketbase /bin/
- # RUN mkdir /data
-
- # # ENTRYPOINT ["ash"]
- # CMD ["pocketbase", "serve", "--dir=/data", "--proxy=http://localhost:3000", "--subcommand=node /nuxt/server/index.mjs", "--http=0.0.0.0:8090"]
- # EOF
- # docker build -t {{.REGISTRY}}/abrasive/abrasive:{{.Version}} -t {{.REGISTRY}}/abrasive/abrasive:latest -f temp.Dockerfile .
- # rm temp.Dockerfile
-
- # push_docker_image:
- # aliases: [pdi]
- # desc: "push docker image to registry server"
- # cmds:
- # - |
- # docker push {{.REGISTRY}}/abrasive/abrasive:{{.Version}}
- # docker push {{.REGISTRY}}/abrasive/abrasive:latest
diff --git a/types/index.ts b/types/index.ts
index 9733c50..4d58df2 100644
--- a/types/index.ts
+++ b/types/index.ts
@@ -9,30 +9,12 @@ export type componentsListType = {
componentInstance: DefineComponent;
};
-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;
-};
-
export type FeatureValue = {
parent: number;
products_with_value: number;