jws-frontend/src/pages/MainPage.vue
puriphatt 8799799214
Some checks failed
Spell Check / Spell Check with Typos (push) Failing after 7s
refactor: replace role-based access checks with canAccess utility in menu components
2025-07-02 14:58:44 +07:00

120 lines
2.8 KiB
Vue

<script setup lang="ts">
import MenuItem from 'components/00_home/MenuItem.vue';
import { useNavigator } from 'src/stores/navigator';
import { onMounted, ref } from 'vue';
import { canAccess } from 'src/stores/utils';
const navigatorStore = useNavigator();
const menu = ref<InstanceType<typeof MenuItem>['$props']['list']>([]);
onMounted(() => {
navigatorStore.current.title = '';
navigatorStore.current.path = [{ text: '' }];
menu.value = [
{
value: 'branch-management',
icon: 'mdi-chart-donut',
color: 'green',
title: 'menu.branch',
caption: 'menu.branchCaption',
hidden: !canAccess('branch'),
},
{
value: 'personnel-management',
icon: 'fa6-solid:building-user',
color: 'cyan',
title: 'menu.user',
caption: 'menu.userCaption',
hidden: !canAccess('personnel'),
},
{
value: 'customer-management',
icon: 'isax-frame5',
color: 'cyan',
title: 'menu.customer',
caption: 'menu.customerCaption',
isax: true,
hidden: !canAccess('customer'),
},
{
value: 'product-service',
icon: 'heroicons-truck-solid',
color: 'orange',
title: 'menu.product',
caption: 'menu.productCaption',
},
{
value: 'quotation',
icon: 'mdi-file-document',
color: 'violet',
title: 'menu.quotation',
caption: 'menu.quotationCaption',
},
{
value: 'request-list',
icon: 'isax-device-message5',
color: 'purple',
title: 'menu.requestList',
caption: 'menu.requestListCaption',
isax: true,
},
{
value: 'task-order',
icon: 'isax-receipt-2-15',
color: 'red',
title: 'menu.taskOrder',
caption: 'menu.workOrderCaption',
isax: true,
},
{
value: 'task-order',
icon: 'material-symbols:box',
color: 'camo',
title: 'menu.invoice',
caption: 'menu.invoiceCaption',
tab: 'Complete',
},
{
value: '',
icon: 'isax-dollar-circle4',
color: 'lime',
title: 'menu.accountingLedger',
caption: 'menu.accountingLedgerCaption',
isax: true,
disabled: true,
hidden: true,
},
{
value: 'report',
icon: 'mdi-file-document',
color: 'indigo',
title: 'menu.report',
caption: 'menu.reportCaption',
},
{
value: 'dash-board',
icon: 'isax-element-35',
color: 'cyan',
title: 'menu.dashboard',
caption: 'menu.dashboardCaption',
isax: true,
hidden: !canAccess('dashBoard'),
},
];
});
</script>
<template>
<div class="q-pb-lg">
<MenuItem :list="menu" />
</div>
</template>
<style scoped>
.person {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--size-6);
}
</style>