Alexandr SaVBaD Waltz
761fecf67f
Fixes: 1) Replace `ElNotification` calls with `useNotification` utility across all authentication and user-related composables; 2) Add missing semicolons in multiple index exports and styled components; 3) Resolve issues with reactivity in `useStore` composable by renaming and restructuring product variables; Extra: 1) Refactor localized strings and translations for better readability and maintenance; 2) Tweak styles including scoped styles, z-index adjustments, and SCSS mixins; 3) Remove unused components and imports to streamline storefront layout.
131 lines
No EOL
3.1 KiB
Vue
131 lines
No EOL
3.1 KiB
Vue
<template>
|
|
<div class="main">
|
|
<nuxt-loading-indicator color="#7965d1" />
|
|
<base-header />
|
|
<ui-breadcrumbs v-if="showBreadcrumbs" />
|
|
<transition name="opacity" mode="out-in">
|
|
<base-auth v-if="activeState">
|
|
<forms-login v-if="appStore.isLogin" />
|
|
<forms-register v-if="appStore.isRegister" />
|
|
<forms-reset-password v-if="appStore.isForgot" />
|
|
<forms-new-password v-if="appStore.isReset" />
|
|
</base-auth>
|
|
</transition>
|
|
<nuxt-page />
|
|
<base-footer />
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import {useAppConfig} from "~/composables/config";
|
|
import { DEFAULT_LOCALE } from '~/config/constants';
|
|
import {useRefresh} from "~/composables/auth";
|
|
import {useLanguages} from "~/composables/languages";
|
|
import {useCompanyInfo} from "~/composables/company";
|
|
import {useCategories} from "~/composables/categories";
|
|
import {useNotification} from "~/composables/notification";
|
|
|
|
const { locale } = useI18n();
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
const appStore = useAppStore();
|
|
const switchLocalePath = useSwitchLocalePath();
|
|
|
|
const showBreadcrumbs = computed(() => {
|
|
const name = typeof route.name === 'string' ? route.name : '';
|
|
return ![
|
|
'index',
|
|
'brand',
|
|
'search',
|
|
'profile',
|
|
'activate-user'
|
|
].some(prefix => name.startsWith(prefix));
|
|
});
|
|
|
|
const activeState = computed(() => appStore.activeState);
|
|
const { COOKIES_LOCALE_KEY } = useAppConfig();
|
|
|
|
const cookieLocale = useCookie(
|
|
COOKIES_LOCALE_KEY,
|
|
{
|
|
default: () => DEFAULT_LOCALE,
|
|
path: '/'
|
|
}
|
|
);
|
|
|
|
const { refresh } = useRefresh();
|
|
const { getCategories } = await useCategories();
|
|
|
|
let refreshInterval: NodeJS.Timeout;
|
|
|
|
await Promise.all([
|
|
refresh(),
|
|
useLanguages(),
|
|
useCompanyInfo(),
|
|
getCategories()
|
|
]);
|
|
|
|
watch(
|
|
() => appStore.activeState,
|
|
(state) => {
|
|
appStore.setOverflowHidden(state !== '')
|
|
},
|
|
{ immediate: true }
|
|
)
|
|
|
|
let stopWatcher: VoidFunction = () => {}
|
|
|
|
onMounted( async () => {
|
|
refreshInterval = setInterval(async () => {
|
|
await refresh();
|
|
}, 600000);
|
|
|
|
if (!cookieLocale.value) {
|
|
cookieLocale.value = DEFAULT_LOCALE;
|
|
await router.push({path: switchLocalePath(cookieLocale.value)});
|
|
}
|
|
|
|
if (locale.value !== cookieLocale.value) {
|
|
await router.push({path: switchLocalePath(cookieLocale.value)});
|
|
}
|
|
|
|
stopWatcher = watch(
|
|
() => appStore.isOverflowHidden,
|
|
(hidden) => {
|
|
const root = document.documentElement;
|
|
const body = document.body;
|
|
if (hidden) {
|
|
root.classList.add('lock-scroll');
|
|
body.classList.add('lock-scroll');
|
|
} else {
|
|
root.classList.remove('lock-scroll');
|
|
body.classList.remove('lock-scroll');
|
|
}
|
|
},
|
|
{ immediate: true }
|
|
);
|
|
|
|
useHead({
|
|
htmlAttrs: {
|
|
lang: locale.value
|
|
}
|
|
});
|
|
});
|
|
|
|
onBeforeUnmount(() => {
|
|
stopWatcher()
|
|
document.documentElement.classList.remove('lock-scroll');
|
|
document.body.classList.remove('lock-scroll');
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.main {
|
|
padding-top: 90px;
|
|
background-color: $light;
|
|
}
|
|
|
|
.lock-scroll {
|
|
overflow: hidden !important;
|
|
}
|
|
</style> |