fix: new drawer menu
This commit is contained in:
puriphatt
parent
16f3385a5a
commit
3119cef2ff
1 changed files with 384 additions and 123 deletions
|
|
@ -1,16 +1,88 @@
|
|||
<script setup lang="ts">
|
||||
import { computed, ref, onMounted } from 'vue';
|
||||
import { computed, ref, onMounted, watch, nextTick } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { Icon } from '@iconify/vue';
|
||||
import useMyBranch from 'stores/my-branch';
|
||||
import { getUserId, getRole } from 'src/services/keycloak';
|
||||
|
||||
defineProps<{
|
||||
const props = defineProps<{
|
||||
mini?: boolean;
|
||||
}>();
|
||||
|
||||
const role = ref();
|
||||
const router = useRouter();
|
||||
const userBranch = useMyBranch();
|
||||
const { currentMyBranch } = storeToRefs(userBranch);
|
||||
|
||||
const menuActive = ref<boolean[]>([false, false, false, false, false]);
|
||||
const currentPath = computed(() => {
|
||||
return router.currentRoute.value.path;
|
||||
});
|
||||
|
||||
// const labelMenu = ref<
|
||||
// {
|
||||
// label: string;
|
||||
// icon: string;
|
||||
// route: string;
|
||||
// hidden?: boolean;
|
||||
// disabled?: boolean;
|
||||
// isax?: boolean;
|
||||
// }[]
|
||||
// >([]);
|
||||
|
||||
type Menu = {
|
||||
label: string;
|
||||
route?: string;
|
||||
icon?: string;
|
||||
hidden?: boolean;
|
||||
disabled?: boolean;
|
||||
isax?: boolean;
|
||||
children?: Menu[];
|
||||
};
|
||||
|
||||
const menuData = ref<Menu[]>([]);
|
||||
|
||||
const leftDrawerOpen = defineModel<boolean>('leftDrawerOpen', {
|
||||
default: true,
|
||||
});
|
||||
|
||||
function navigateTo(label: string, destination?: string) {
|
||||
if (!destination) return;
|
||||
router.push(`${destination}`);
|
||||
}
|
||||
|
||||
function branchSetting() {}
|
||||
|
||||
function reActiveMenu() {
|
||||
menuActive.value.fill(false);
|
||||
|
||||
const currMenu = menuData.value.find((m) =>
|
||||
m.children?.some((c) => c.route === currentPath.value),
|
||||
);
|
||||
|
||||
const currMenuIndex = menuData.value.findIndex((m) => m === currMenu);
|
||||
menuActive.value[currMenuIndex] = true;
|
||||
}
|
||||
|
||||
watch(
|
||||
() => currentPath.value,
|
||||
() => {
|
||||
if (currentPath.value === '/') {
|
||||
menuActive.value.fill(false);
|
||||
menuActive.value[0] = true;
|
||||
} else reActiveMenu();
|
||||
},
|
||||
);
|
||||
|
||||
watch(
|
||||
() => props.mini,
|
||||
() => {
|
||||
if (props.mini) {
|
||||
reActiveMenu();
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
onMounted(async () => {
|
||||
const uid = getUserId();
|
||||
|
|
@ -25,129 +97,178 @@ onMounted(async () => {
|
|||
const result = await userBranch.fetchListMyBranch(uid);
|
||||
if (result && result.total > 0) currentMyBranch.value = result.result[0];
|
||||
|
||||
labelMenu.value = [
|
||||
// labelMenu.value = [
|
||||
// {
|
||||
// label: 'menu.dashboard',
|
||||
// icon: 'isax-element-35',
|
||||
// route: '',
|
||||
// isax: true,
|
||||
// disabled: true,
|
||||
// },
|
||||
// {
|
||||
// label: 'menu.branch',
|
||||
// icon: 'mdi-chart-donut',
|
||||
// route: '/branch-management',
|
||||
// hidden:
|
||||
// role.value.includes('admin') ||
|
||||
// role.value.includes('branch_admin') ||
|
||||
// role.value.includes('head_of_admin') ||
|
||||
// role.value.includes('system') ||
|
||||
// role.value.includes('owner') ||
|
||||
// role.value.includes('head_of_account')
|
||||
// ? false
|
||||
// : true,
|
||||
// },
|
||||
// {
|
||||
// label: 'menu.user',
|
||||
// icon: 'fa6-solid:building-user',
|
||||
// route: '/personnel-management',
|
||||
// hidden:
|
||||
// role.value.includes('admin') ||
|
||||
// role.value.includes('branch_admin') ||
|
||||
// role.value.includes('head_of_admin') ||
|
||||
// role.value.includes('system') ||
|
||||
// role.value.includes('owner') ||
|
||||
// role.value.includes('branch_manager')
|
||||
// ? false
|
||||
// : true,
|
||||
// },
|
||||
// {
|
||||
// label: 'menu.customer',
|
||||
// icon: 'isax-frame5',
|
||||
// route: '/customer-management',
|
||||
// isax: true,
|
||||
// },
|
||||
// {
|
||||
// label: 'menu.product',
|
||||
// icon: 'heroicons-truck-solid',
|
||||
// route: '/product-service',
|
||||
// },
|
||||
// {
|
||||
// label: 'menu.dms',
|
||||
// icon: 'mdi-folder-file',
|
||||
// route: '/document-management',
|
||||
// },
|
||||
// {
|
||||
// label: 'menu.quotation',
|
||||
// icon: 'mdi-file-document',
|
||||
// route: '/quotation',
|
||||
// },
|
||||
// {
|
||||
// label: 'menu.requestList',
|
||||
// icon: 'isax-device-message5',
|
||||
// route: '',
|
||||
// disabled: true,
|
||||
// isax: true,
|
||||
// },
|
||||
// {
|
||||
// label: 'menu.workOrder',
|
||||
// icon: 'isax-receipt-2-15',
|
||||
// route: '',
|
||||
// disabled: true,
|
||||
// isax: true,
|
||||
// },
|
||||
// {
|
||||
// label: 'menu.invoice',
|
||||
// icon: 'material-symbols:box',
|
||||
// route: '',
|
||||
// disabled: true,
|
||||
// },
|
||||
// {
|
||||
// label: 'menu.accountingLedger',
|
||||
// icon: 'isax-dollar-circle4',
|
||||
// route: '',
|
||||
// isax: true,
|
||||
// disabled: true,
|
||||
// },
|
||||
// {
|
||||
// label: 'menu.report',
|
||||
// icon: 'mdi-file-document',
|
||||
// route: '',
|
||||
// disabled: true,
|
||||
// },
|
||||
// ];
|
||||
|
||||
menuData.value = [
|
||||
{
|
||||
label: 'menu.dashboard',
|
||||
icon: 'isax-element-35',
|
||||
route: '',
|
||||
isax: true,
|
||||
label: 'menu.manage',
|
||||
icon: 'mdi-account-cog-outline',
|
||||
children: [
|
||||
{
|
||||
label: 'branch',
|
||||
route: '/branch-management',
|
||||
hidden:
|
||||
role.value.includes('admin') ||
|
||||
role.value.includes('branch_admin') ||
|
||||
role.value.includes('head_of_admin') ||
|
||||
role.value.includes('system') ||
|
||||
role.value.includes('owner') ||
|
||||
role.value.includes('head_of_account')
|
||||
? false
|
||||
: true,
|
||||
},
|
||||
{
|
||||
label: 'personnel',
|
||||
route: '/personnel-management',
|
||||
hidden:
|
||||
role.value.includes('admin') ||
|
||||
role.value.includes('branch_admin') ||
|
||||
role.value.includes('head_of_admin') ||
|
||||
role.value.includes('system') ||
|
||||
role.value.includes('owner') ||
|
||||
role.value.includes('branch_manager')
|
||||
? false
|
||||
: true,
|
||||
},
|
||||
{ label: 'productService', route: '/product-service' },
|
||||
{ label: 'document', route: '/document-management' },
|
||||
{ label: 'workflow', route: '/workflow' },
|
||||
{ label: 'customer', route: '/customer-management' },
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'menu.sales',
|
||||
icon: 'mdi-store-settings-outline',
|
||||
children: [{ label: 'quotation', route: '/quotation' }],
|
||||
},
|
||||
{
|
||||
label: 'menu.order',
|
||||
icon: 'mdi-file-chart-outline',
|
||||
disabled: true,
|
||||
children: [
|
||||
{ label: 'requestList', route: '' },
|
||||
{ label: 'documentCheck', route: '' },
|
||||
{ label: 'workOrder', route: '' },
|
||||
{ label: 'goodReceipt', route: '' },
|
||||
{ label: 'workReceipt', route: '' },
|
||||
{ label: 'workDelivery', route: '' },
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'menu.branch',
|
||||
icon: 'mdi-chart-donut',
|
||||
route: '/branch-management',
|
||||
hidden:
|
||||
role.value.includes('admin') ||
|
||||
role.value.includes('branch_admin') ||
|
||||
role.value.includes('head_of_admin') ||
|
||||
role.value.includes('system') ||
|
||||
role.value.includes('owner') ||
|
||||
role.value.includes('head_of_account')
|
||||
? false
|
||||
: true,
|
||||
},
|
||||
{
|
||||
label: 'menu.user',
|
||||
icon: 'fa6-solid:building-user',
|
||||
route: '/personnel-management',
|
||||
hidden:
|
||||
role.value.includes('admin') ||
|
||||
role.value.includes('branch_admin') ||
|
||||
role.value.includes('head_of_admin') ||
|
||||
role.value.includes('system') ||
|
||||
role.value.includes('owner') ||
|
||||
role.value.includes('branch_manager')
|
||||
? false
|
||||
: true,
|
||||
},
|
||||
{
|
||||
label: 'menu.customer',
|
||||
icon: 'isax-frame5',
|
||||
route: '/customer-management',
|
||||
isax: true,
|
||||
},
|
||||
{
|
||||
label: 'menu.product',
|
||||
icon: 'heroicons-truck-solid',
|
||||
route: '/product-service',
|
||||
},
|
||||
{
|
||||
label: 'menu.dms',
|
||||
icon: 'mdi-folder-file',
|
||||
route: '/document-management',
|
||||
},
|
||||
{
|
||||
label: 'menu.quotation',
|
||||
icon: 'mdi-file-document',
|
||||
route: '/quotation',
|
||||
},
|
||||
{
|
||||
label: 'menu.requestList',
|
||||
icon: 'isax-device-message5',
|
||||
route: '',
|
||||
label: 'menu.account',
|
||||
icon: 'mdi-bank-outline',
|
||||
disabled: true,
|
||||
isax: true,
|
||||
children: [
|
||||
{ label: 'uploadSlip', route: '' },
|
||||
{ label: 'receipt', route: '' },
|
||||
{ label: 'creditNote', route: '' },
|
||||
{ label: 'debitNote', route: '' },
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'menu.workOrder',
|
||||
icon: 'isax-receipt-2-15',
|
||||
route: '',
|
||||
disabled: true,
|
||||
isax: true,
|
||||
},
|
||||
{
|
||||
label: 'menu.invoice',
|
||||
icon: 'material-symbols:box',
|
||||
route: '',
|
||||
disabled: true,
|
||||
},
|
||||
{
|
||||
label: 'menu.accountingLedger',
|
||||
icon: 'isax-dollar-circle4',
|
||||
route: '',
|
||||
isax: true,
|
||||
disabled: true,
|
||||
},
|
||||
{
|
||||
label: 'menu.report',
|
||||
icon: 'mdi-file-document',
|
||||
route: '',
|
||||
label: 'menu.overall',
|
||||
icon: 'mdi-monitor-dashboard',
|
||||
disabled: true,
|
||||
children: [
|
||||
{ label: 'report', route: '' },
|
||||
{ label: 'dashboard', route: '' },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
if (currentPath.value === '/') menuActive.value[0] = true;
|
||||
else reActiveMenu();
|
||||
});
|
||||
|
||||
const router = useRouter();
|
||||
const userBranch = useMyBranch();
|
||||
const { currentMyBranch } = storeToRefs(userBranch);
|
||||
|
||||
const currentRoute = ref<string>('');
|
||||
const currentPath = computed(() => {
|
||||
return router.currentRoute.value.path;
|
||||
});
|
||||
|
||||
const labelMenu = ref<
|
||||
{
|
||||
label: string;
|
||||
icon: string;
|
||||
route: string;
|
||||
hidden?: boolean;
|
||||
disabled?: boolean;
|
||||
isax?: boolean;
|
||||
}[]
|
||||
>([]);
|
||||
|
||||
const leftDrawerOpen = defineModel<boolean>('leftDrawerOpen', {
|
||||
default: true,
|
||||
});
|
||||
|
||||
function navigateTo(label: string, destination: string) {
|
||||
currentRoute.value = label;
|
||||
router.push(`${destination}`);
|
||||
}
|
||||
|
||||
function branchSetting() {}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -163,8 +284,11 @@ function branchSetting() {}
|
|||
show-if-above
|
||||
>
|
||||
<!-- :width="$q.screen.lt.sm ? $q.screen.width - 16 : 256" -->
|
||||
<div class="scroll" style="overflow-x: hidden; scrollbar-gutter: stable">
|
||||
<div
|
||||
<section
|
||||
class="scroll"
|
||||
style="overflow-x: hidden; scrollbar-gutter: stable"
|
||||
>
|
||||
<header
|
||||
class="flex justify-center items-center q-pl-sm cursor-pointer"
|
||||
@click="$router.push('/')"
|
||||
id="btn-drawer-home"
|
||||
|
|
@ -176,10 +300,106 @@ function branchSetting() {}
|
|||
:style="{ filter: `brightness(${$q.dark.isActive ? '1.3' : '1'})` }"
|
||||
style="height: 64px"
|
||||
/>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div id="drawer-menu" class="q-pl-md q-mr-xs">
|
||||
<q-item
|
||||
<div id="drawer-menu" class="q-pl-md q-mr-xs q-gutter-y-sm">
|
||||
<template v-for="(menu, i) in menuData" :key="i">
|
||||
<q-expansion-item
|
||||
v-if="!menu.hidden"
|
||||
dense
|
||||
:model-value="menuActive[i]"
|
||||
expand-icon-class="no-padding"
|
||||
:hide-expand-icon="mini"
|
||||
:disable="menu.disabled"
|
||||
:header-class="{
|
||||
row: true,
|
||||
'justify-between': !mini,
|
||||
'no-padding justify-center': mini,
|
||||
'active-menu text-weight-bold': menuActive[i],
|
||||
'text-weight-medium': !menu.disabled,
|
||||
}"
|
||||
@update:model-value="
|
||||
() => {
|
||||
mini ? '' : (menuActive[i] = !menuActive[i]);
|
||||
}
|
||||
"
|
||||
>
|
||||
<template #header>
|
||||
<nav class="row items-center q-py-sm no-wrap">
|
||||
<i
|
||||
v-if="menu.isax"
|
||||
:class="`isax ${menu.icon}`"
|
||||
style="font-size: 24px"
|
||||
/>
|
||||
<Icon v-else :icon="menu.icon || ''" width="24px" />
|
||||
<span v-if="!mini" class="q-pl-sm" style="white-space: nowrap">
|
||||
{{ $t(`${menu.label}.title`) }}
|
||||
</span>
|
||||
<q-tooltip :delay="500">
|
||||
{{ $t(`${menu.label}.title`) }}
|
||||
</q-tooltip>
|
||||
|
||||
<q-menu
|
||||
v-if="mini"
|
||||
fit
|
||||
anchor="center end"
|
||||
self="top left"
|
||||
:offset="[16, 0]"
|
||||
>
|
||||
<q-list dense>
|
||||
<template v-for="(sub, i) in menu.children" :key="i">
|
||||
<q-item
|
||||
v-if="!sub.hidden"
|
||||
clickable
|
||||
:disabled="sub.disabled"
|
||||
class="row items-center no-wrap"
|
||||
:class="{
|
||||
'text-weight-bold app-bg-brand-1':
|
||||
currentPath === sub.route,
|
||||
}"
|
||||
@click="
|
||||
() => {
|
||||
!sub.disabled && navigateTo('', sub.route);
|
||||
}
|
||||
"
|
||||
>
|
||||
<span style="white-space: nowrap">
|
||||
{{ $t(`${menu.label}.${sub.label}`) }}
|
||||
</span>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-list>
|
||||
</q-menu>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<q-list v-if="!mini" dense>
|
||||
<template v-for="(sub, i) in menu.children" :key="i">
|
||||
<div
|
||||
v-if="!sub.hidden"
|
||||
class="row items-center q-ml-lg q-py-sm no-wrap"
|
||||
:class="{ 'q-mt-sm': i === 0, 'sub-menu': !sub.disabled }"
|
||||
style="border-left: 2px solid var(--surface-tab)"
|
||||
@click="!sub.disabled && navigateTo('', sub.route)"
|
||||
>
|
||||
<nav
|
||||
class="row items-center no-wrap"
|
||||
:class="{
|
||||
active: currentPath === sub.route,
|
||||
disabled: sub.disabled,
|
||||
}"
|
||||
>
|
||||
<span class="q-px-md" style="white-space: nowrap">
|
||||
{{ $t(`${menu.label}.${sub.label}`) }}
|
||||
</span>
|
||||
</nav>
|
||||
</div>
|
||||
</template>
|
||||
</q-list>
|
||||
</q-expansion-item>
|
||||
</template>
|
||||
|
||||
<!-- <q-item
|
||||
v-for="v in labelMenu.filter((v) => !v.hidden)"
|
||||
:id="`drawer-${v.label}`"
|
||||
dense
|
||||
|
|
@ -209,11 +429,11 @@ function branchSetting() {}
|
|||
<div v-if="!mini" class="q-ml-md" style="white-space: nowrap">
|
||||
{{ $t(v.label) }}
|
||||
</div>
|
||||
</q-item>
|
||||
</q-item> -->
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div
|
||||
<footer
|
||||
class="surface-2 q-px-md q-py-sm row items-center no-wrap justify-start"
|
||||
:class="{ 'justify-center': mini }"
|
||||
style="min-height: 56px; overflow-x: hidden"
|
||||
|
|
@ -266,7 +486,7 @@ function branchSetting() {}
|
|||
@click="branchSetting"
|
||||
style="margin-left: auto"
|
||||
/>
|
||||
</div>
|
||||
</footer>
|
||||
</q-drawer>
|
||||
</template>
|
||||
|
||||
|
|
@ -327,4 +547,45 @@ function branchSetting() {}
|
|||
display: inline-block;
|
||||
border: 1.5px solid white;
|
||||
}
|
||||
|
||||
:deep(.active-menu) {
|
||||
color: white !important;
|
||||
background: var(--brand-1) !important;
|
||||
|
||||
i.q-icon.mdi.mdi-chevron-down.q-expansion-item__toggle-icon.q-expansion-item__toggle-icon--rotated {
|
||||
color: white !important;
|
||||
}
|
||||
}
|
||||
|
||||
.sub-menu {
|
||||
font-weight: 400;
|
||||
.active {
|
||||
&::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
margin-left: -3px;
|
||||
width: 4px;
|
||||
height: 18px;
|
||||
border-radius: 50px;
|
||||
background-color: var(--brand-2);
|
||||
}
|
||||
color: var(--brand-1) !important;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
nav::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
margin-left: -3px;
|
||||
width: 4px;
|
||||
height: 18px;
|
||||
border-radius: 50px;
|
||||
background-color: var(--brand-2);
|
||||
}
|
||||
color: var(--brand-1) !important;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue