chore: clean
This commit is contained in:
Methapon2001
parent
8d6a33120f
commit
f9494dc845
6 changed files with 7 additions and 7 deletions
|
|
@ -1,295 +0,0 @@
|
|||
<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;
|
||||
}>();
|
||||
|
||||
onMounted(async () => {
|
||||
const uid = getUserId();
|
||||
const role = getRole();
|
||||
|
||||
if (!uid) return;
|
||||
|
||||
if (role?.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];
|
||||
});
|
||||
|
||||
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;
|
||||
disabled?: boolean;
|
||||
isax?: boolean;
|
||||
}[]
|
||||
>([
|
||||
{
|
||||
label: 'drawerDashboard',
|
||||
icon: 'isax-element-35',
|
||||
route: '',
|
||||
isax: true,
|
||||
disabled: true,
|
||||
},
|
||||
{
|
||||
label: 'drawerBranchManagement',
|
||||
icon: 'mdi-chart-donut',
|
||||
route: '/branch-management',
|
||||
},
|
||||
{
|
||||
label: 'drawerPersonnelManagement',
|
||||
icon: 'fa6-solid:building-user',
|
||||
route: '/personnel-management',
|
||||
},
|
||||
{
|
||||
label: 'drawerCustomerManagement',
|
||||
icon: 'isax-frame5',
|
||||
route: '/customer-management',
|
||||
isax: true,
|
||||
},
|
||||
{
|
||||
label: 'drawerProductsAndServices',
|
||||
icon: 'heroicons-truck-solid',
|
||||
route: '/product-service',
|
||||
},
|
||||
{
|
||||
label: 'drawerQuotation',
|
||||
icon: 'mdi-file-document',
|
||||
route: '',
|
||||
disabled: true,
|
||||
},
|
||||
{
|
||||
label: 'drawerRequestList',
|
||||
icon: 'isax-device-message5',
|
||||
route: '',
|
||||
disabled: true,
|
||||
isax: true,
|
||||
},
|
||||
{
|
||||
label: 'drawerWorkOrder',
|
||||
icon: 'isax-receipt-2-15',
|
||||
route: '',
|
||||
disabled: true,
|
||||
isax: true,
|
||||
},
|
||||
{
|
||||
label: 'drawerInvoice',
|
||||
icon: 'material-symbols:box',
|
||||
route: '',
|
||||
disabled: true,
|
||||
},
|
||||
{
|
||||
label: 'drawerAccountingLedger',
|
||||
icon: 'isax-dollar-circle4',
|
||||
route: '',
|
||||
isax: true,
|
||||
disabled: true,
|
||||
},
|
||||
{
|
||||
label: 'drawerReport',
|
||||
icon: 'mdi-file-document',
|
||||
route: '',
|
||||
disabled: true,
|
||||
},
|
||||
]);
|
||||
|
||||
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"
|
||||
dense
|
||||
clickable
|
||||
class="row items-center q-my-xs q-px-xs"
|
||||
: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-ml-sm"
|
||||
style="white-space: nowrap"
|
||||
>
|
||||
<span class="text-weight-bold">
|
||||
{{
|
||||
($i18n.locale === 'en-US'
|
||||
? currentMyBranch?.nameEN
|
||||
: currentMyBranch?.name) ?? '-'
|
||||
}}
|
||||
</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>
|
||||
|
|
@ -3,7 +3,6 @@ export { default as AllAroundBtn } from './AllAroundBtn.vue';
|
|||
export { default as ButtonAddCompoent } from './ButtonAddCompoent.vue';
|
||||
export { default as CanvasComponent } from './CanvasComponent.vue';
|
||||
export { default as DialogForm } from './DialogForm.vue';
|
||||
export { default as DrawerComponent } from './DrawerComponent.vue';
|
||||
export { default as DrawerInfo } from './DrawerInfo.vue';
|
||||
export { default as FormDialog } from './FormDialog.vue';
|
||||
export { default as GlobalDialog } from './GlobalDialog.vue';
|
||||
|
|
@ -18,4 +17,4 @@ export { default as SideMenu } from './SideMenu.vue';
|
|||
export { default as StatCardComponent } from './StatCardComponent.vue';
|
||||
export { default as TabComponent } from './TabComponent.vue';
|
||||
export { default as TooltipComponent } from './TooltipComponent.vue';
|
||||
export { default as TreeCompoent } from './TreeCompoent.vue';
|
||||
export { default as TreeComponent } from './TreeComponent.vue';
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue