107 lines
2.8 KiB
Vue
107 lines
2.8 KiB
Vue
<script setup lang="ts">
|
|
import { useQuery } from '@vue/apollo-composable';
|
|
import { MeDocument } from '~/composables/graphql/generated';
|
|
import { hasManagerAccess } from '~/utils/roles';
|
|
|
|
const route = useRoute();
|
|
const isLoginPage = computed(() => route.path === '/login');
|
|
const meQuery = useQuery(MeDocument);
|
|
const hasManagerDock = computed(() => (
|
|
!isLoginPage.value && hasManagerAccess(meQuery.result.value?.me?.role)
|
|
));
|
|
|
|
const managerPageTabs = computed(() => {
|
|
if (!hasManagerDock.value) {
|
|
return [];
|
|
}
|
|
|
|
if (
|
|
route.path === '/client-orders'
|
|
|| route.path.startsWith('/client-orders/')
|
|
|| route.path === '/clients'
|
|
|| route.path.startsWith('/clients/')
|
|
) {
|
|
return [
|
|
{
|
|
key: 'orders',
|
|
label: 'Заказы',
|
|
active: route.path === '/client-orders' || route.path.startsWith('/client-orders/'),
|
|
to: {
|
|
path: '/client-orders',
|
|
query: route.path === '/client-orders' ? route.query : {},
|
|
},
|
|
},
|
|
{
|
|
key: 'clients',
|
|
label: 'Клиенты',
|
|
active: route.path === '/clients' || route.path.startsWith('/clients/'),
|
|
to: {
|
|
path: '/clients',
|
|
query: route.path === '/clients' ? route.query : {},
|
|
},
|
|
},
|
|
];
|
|
}
|
|
|
|
if (route.path === '/bonus-system') {
|
|
return [
|
|
{
|
|
key: 'balances',
|
|
label: 'Балансы',
|
|
active: route.query.tab !== 'withdrawals',
|
|
to: {
|
|
path: '/bonus-system',
|
|
query: {
|
|
...route.query,
|
|
tab: 'balances',
|
|
},
|
|
},
|
|
},
|
|
{
|
|
key: 'withdrawals',
|
|
label: 'Заявки на выплату',
|
|
active: route.query.tab === 'withdrawals',
|
|
to: {
|
|
path: '/bonus-system',
|
|
query: {
|
|
...route.query,
|
|
tab: 'withdrawals',
|
|
},
|
|
},
|
|
},
|
|
];
|
|
}
|
|
|
|
return [];
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="lk-shell" data-theme="aqua">
|
|
<UiAppHeader v-if="!isLoginPage" />
|
|
<main
|
|
class="mx-auto w-full max-w-[1440px] p-4 pt-[104px] md:p-6 md:pt-[112px] lg:p-8 lg:pt-[118px]"
|
|
:class="hasManagerDock ? 'pb-[116px] md:pb-[128px]' : ''"
|
|
>
|
|
<div v-if="managerPageTabs.length" class="lk-page-tabs-shell">
|
|
<nav class="manager-page-tabs" aria-label="Разделы страницы">
|
|
<NuxtLink
|
|
v-for="tab in managerPageTabs"
|
|
:key="tab.key"
|
|
:to="tab.to"
|
|
class="manager-page-tab"
|
|
:class="{ 'manager-page-tab--active': tab.active }"
|
|
>
|
|
{{ tab.label }}
|
|
</NuxtLink>
|
|
</nav>
|
|
</div>
|
|
|
|
<div class="lk-content-canvas" :class="{ 'lk-content-canvas--with-tabs': managerPageTabs.length }">
|
|
<NuxtPage />
|
|
</div>
|
|
</main>
|
|
<UiAppManagerDock v-if="hasManagerDock" />
|
|
</div>
|
|
</template>
|