330 lines
7.9 KiB
Vue
330 lines
7.9 KiB
Vue
<script setup lang="ts">
|
|
import { computed, ref, onMounted } 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<{
|
|
mini?: boolean;
|
|
}>();
|
|
|
|
const role = ref();
|
|
|
|
onMounted(async () => {
|
|
const uid = getUserId();
|
|
role.value = getRole();
|
|
|
|
if (!uid) return;
|
|
|
|
if (role.value.includes('system')) {
|
|
const result = await userBranch.fetchListOptionBranch();
|
|
if (result && result.total > 0) currentMyBranch.value = result.result[0];
|
|
}
|
|
const result = await userBranch.fetchListMyBranch(uid);
|
|
if (result && result.total > 0) currentMyBranch.value = result.result[0];
|
|
|
|
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',
|
|
disabled: true,
|
|
},
|
|
{
|
|
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,
|
|
},
|
|
];
|
|
});
|
|
|
|
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>
|
|
<!-- Drawer -->
|
|
<q-drawer
|
|
no-swipe-open
|
|
v-model="leftDrawerOpen"
|
|
side="left"
|
|
:breakpoint="599"
|
|
class="column justify-between no-wrap"
|
|
:class="{ dark: $q.dark.isActive }"
|
|
:width="mini ? 80 : 256"
|
|
show-if-above
|
|
>
|
|
<!-- :width="$q.screen.lt.sm ? $q.screen.width - 16 : 256" -->
|
|
<div class="scroll" style="overflow-x: hidden; scrollbar-gutter: stable">
|
|
<div
|
|
class="flex justify-center items-center q-pl-sm cursor-pointer"
|
|
@click="$router.push('/')"
|
|
id="btn-drawer-home"
|
|
style="height: 128px"
|
|
>
|
|
<q-img
|
|
fit="contain"
|
|
:src="mini ? 'logo_jws.png' : '/logo.png'"
|
|
:style="{ filter: `brightness(${$q.dark.isActive ? '1.3' : '1'})` }"
|
|
style="height: 64px"
|
|
/>
|
|
</div>
|
|
|
|
<div id="drawer-menu" class="q-pl-md q-mr-xs">
|
|
<q-item
|
|
v-for="v in labelMenu.filter((v) => !v.hidden)"
|
|
dense
|
|
clickable
|
|
class="row items-center q-my-xs q-px-xs q-py-sm"
|
|
:key="v.label"
|
|
:disable="!!v.disabled"
|
|
:class="{
|
|
active: currentPath === v.route,
|
|
'border-active': currentPath === v.route,
|
|
dark: $q.dark.isActive,
|
|
}"
|
|
@click="navigateTo(v.label, v.route)"
|
|
>
|
|
<div class="row justify-center items-center">
|
|
<i
|
|
v-if="v.isax"
|
|
:class="`isax ${v.icon}`"
|
|
style="font-size: 24px"
|
|
/>
|
|
<Icon v-else :icon="v.icon" width="24px" />
|
|
<q-tooltip v-if="mini">
|
|
{{ $t(v.label) }}
|
|
</q-tooltip>
|
|
</div>
|
|
|
|
<div v-if="!mini" class="q-ml-md" style="white-space: nowrap">
|
|
{{ $t(v.label) }}
|
|
</div>
|
|
</q-item>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
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"
|
|
>
|
|
<q-avatar
|
|
text-color="white"
|
|
size="md"
|
|
:style="`background-color: hsla(var(--violet-${$q.dark.isActive ? '10' : '11'}-hsl)/0.15)`"
|
|
class="relative-position"
|
|
>
|
|
<q-icon
|
|
name="mdi-home-group"
|
|
size="sm"
|
|
:style="`color: var(--violet-${$q.dark.isActive ? '10' : '11'})`"
|
|
/>
|
|
<div class="dot absolute-bottom-right" />
|
|
</q-avatar>
|
|
|
|
<div
|
|
v-if="!mini"
|
|
class="text-caption column q-mx-md col"
|
|
style="white-space: nowrap"
|
|
>
|
|
<span class="text-weight-bold ellipsis full-width">
|
|
{{
|
|
($i18n.locale === 'eng'
|
|
? currentMyBranch?.nameEN
|
|
: currentMyBranch?.name) ?? '-'
|
|
}}
|
|
<q-tooltip>
|
|
{{
|
|
($i18n.locale === 'eng'
|
|
? currentMyBranch?.nameEN
|
|
: currentMyBranch?.name) ?? '-'
|
|
}}
|
|
</q-tooltip>
|
|
</span>
|
|
<span>
|
|
{{ currentMyBranch?.code ?? '-' }}
|
|
</span>
|
|
</div>
|
|
|
|
<q-btn
|
|
v-if="!mini"
|
|
dense
|
|
flat
|
|
rounded
|
|
icon="mdi-cog-outline"
|
|
size="sm"
|
|
@click="branchSetting"
|
|
style="margin-left: auto"
|
|
/>
|
|
</div>
|
|
</q-drawer>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
#drawer-menu :deep(.q-item) {
|
|
color: var(--gray-7);
|
|
border-radius: var(--radius-2);
|
|
|
|
&.dark {
|
|
color: var(--gray-3);
|
|
}
|
|
}
|
|
|
|
#drawer-menu :deep(.q-item.active) {
|
|
--_drawer-item-background-color: var(--brand-1) !important;
|
|
background-color: var(--_drawer-item-background-color);
|
|
color: white;
|
|
|
|
// border-left: 10px solid $secondary;
|
|
}
|
|
|
|
#drawer-menu :deep(.q-item.active)::before {
|
|
display: block;
|
|
position: absolute;
|
|
content: ' ';
|
|
background: var(--brand-2);
|
|
border-radius: 99rem;
|
|
width: 6px;
|
|
left: -0.6rem;
|
|
top: 18%;
|
|
bottom: 18%;
|
|
cursor: context-menu;
|
|
}
|
|
|
|
:deep(.q-drawer) {
|
|
transition: 0.1s width ease-in-out;
|
|
background-color: transparent;
|
|
padding: var(--size-4);
|
|
padding-right: 0;
|
|
}
|
|
|
|
:deep(.q-drawer__content) {
|
|
border-radius: var(--radius-2);
|
|
background-color: rgba(255, 255, 255, 0.5);
|
|
backdrop-filter: blur(11.2px);
|
|
-webkit-backdrop-filter: blur(11.2px);
|
|
|
|
&.dark {
|
|
background-color: hsla(var(--gray-10-hsl) / 0.5);
|
|
}
|
|
}
|
|
|
|
.dot {
|
|
height: 10px;
|
|
width: 10px;
|
|
background-color: var(--teal-6);
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
border: 1.5px solid white;
|
|
}
|
|
</style>
|