yogiedigital/cod-fe
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Repair sub menu air dryer and compressor

Browse Source
This commit is contained in:
Bragas Rexita Ecos Fernanda
2025-11-10 14:56:31 +07:00
parent 7064ec8587
commit 5952858dca
1 changed files with 119 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

174
src/layout/LayoutMenu.jsx
View File

@@ -51,39 +51,58 @@ const allItems = [
label: 'Dashboard',
children: [
{
key: 'dashboard-svg-overview',
key: 'dashboard-svg-compressor',
icon: <NodeExpandOutlined style={{ fontSize: '19px' }} />,
label: <Link to="/dashboard-svg/overview">Overview</Link>,
label: 'Compressor',
children: [
{
key: 'dashboard-svg-compressor-overview',
icon: <NodeExpandOutlined style={{ fontSize: '19px' }} />,
label: <Link to="/dashboard-svg/overview-compressor">Overview</Link>,
},
{
key: 'dashboard-svg-compressor-compressor-a',
icon: <NodeExpandOutlined style={{ fontSize: '19px' }} />,
label: <Link to="/dashboard-svg/compressor-a">Compressor A</Link>,
},
{
key: 'dashboard-svg-compressor-compressor-b',
icon: <NodeExpandOutlined style={{ fontSize: '19px' }} />,
label: <Link to="/dashboard-svg/compressor-b">Compressor B</Link>,
},
{
key: 'dashboard-svg-compressor-compressor-c',
icon: <NodeExpandOutlined style={{ fontSize: '19px' }} />,
label: <Link to="/dashboard-svg/compressor-c">Compressor C</Link>,
},
]
},
{
key: 'dashboard-svg-compressor-a',
key: 'dashboard-svg-airdryer',
icon: <NodeExpandOutlined style={{ fontSize: '19px' }} />,
label: <Link to="/dashboard-svg/compressor-a">Compressor A</Link>,
},
{
key: 'dashboard-svg-compressor-b',
icon: <NodeExpandOutlined style={{ fontSize: '19px' }} />,
label: <Link to="/dashboard-svg/compressor-b">Compressor B</Link>,
},
{
key: 'dashboard-svg-compressor-c',
icon: <NodeExpandOutlined style={{ fontSize: '19px' }} />,
label: <Link to="/dashboard-svg/compressor-c">Compressor C</Link>,
},
{
key: 'dashboard-svg-airdryer-a',
icon: <NodeExpandOutlined style={{ fontSize: '19px' }} />,
label: <Link to="/dashboard-svg/airdryer-a">Air Dryer A</Link>,
},
{
key: 'dashboard-svg-airdryer-b',
icon: <NodeExpandOutlined style={{ fontSize: '19px' }} />,
label: <Link to="/dashboard-svg/airdryer-b">Air Dryer B</Link>,
},
{
key: 'dashboard-svg-airdryer-c',
icon: <NodeExpandOutlined style={{ fontSize: '19px' }} />,
label: <Link to="/dashboard-svg/airdryer-c">Air Dryer C</Link>,
label: 'Air Dryer',
children: [
{
key: 'dashboard-svg-airdryer-overview',
icon: <NodeExpandOutlined style={{ fontSize: '19px' }} />,
label: <Link to="/dashboard-svg/overview-airdryer">Overview</Link>,
},
{
key: 'dashboard-svg-airdryer-airdryer-a',
icon: <NodeExpandOutlined style={{ fontSize: '19px' }} />,
label: <Link to="/dashboard-svg/airdryer-a">Air Dryer A</Link>,
},
{
key: 'dashboard-svg-airdryer-airdryer-b',
icon: <NodeExpandOutlined style={{ fontSize: '19px' }} />,
label: <Link to="/dashboard-svg/airdryer-b">Air Dryer B</Link>,
},
{
key: 'dashboard-svg-airdryer-airdryer-c',
icon: <NodeExpandOutlined style={{ fontSize: '19px' }} />,
label: <Link to="/dashboard-svg/airdryer-c">Air Dryer C</Link>,
},
]
},
],
},
@@ -221,37 +240,77 @@ const LayoutMenu = () => {
// Handle master routes
if (pathname.startsWith('/master/')) {
const subPath = pathParts[1];
return `master-${subPath}`;
// Convert kebab-case to the actual menu keys
const masterKeyMap = {
'plant-sub-section': 'master-plant-sub-section',
'brand-device': 'master-brand-device',
'device': 'master-device',
'unit': 'master-unit',
'tag': 'master-tag',
'status': 'master-status',
'shift': 'master-shift'
};
return masterKeyMap[subPath] || `master-${subPath}`;
}
// Handle dashboard svg routes
if (pathname.startsWith('/dashboard-svg/')) {
const subPath = pathParts[1];
// Map specific routes to their menu keys
if (subPath === 'overview-compressor') return 'dashboard-svg-compressor-overview';
if (subPath === 'compressor-a') return 'dashboard-svg-compressor-compressor-a';
if (subPath === 'compressor-b') return 'dashboard-svg-compressor-compressor-b';
if (subPath === 'compressor-c') return 'dashboard-svg-compressor-compressor-c';
if (subPath === 'overview-airdryer') return 'dashboard-svg-airdryer-overview';
if (subPath === 'airdryer-a') return 'dashboard-svg-airdryer-airdryer-a';
if (subPath === 'airdryer-b') return 'dashboard-svg-airdryer-airdryer-b';
if (subPath === 'airdryer-c') return 'dashboard-svg-airdryer-airdryer-c';
return `dashboard-svg-${subPath}`;
}
// Handle report routes
if (pathname.startsWith('/report/')) {
const subPath = pathParts[1];
return `report-${subPath}`;
const reportKeyMap = {
'trending': 'report-trending',
'report': 'report-report'
};
return reportKeyMap[subPath] || `report-${subPath}`;
}
// Handle history routes
if (pathname.startsWith('/history/')) {
const subPath = pathParts[1];
return `history-${subPath}`;
const historyKeyMap = {
'alarm': 'history-alarm',
'event': 'history-event'
};
return historyKeyMap[subPath] || `history-${subPath}`;
}
return 'home'; // default
};
// Function to get parent key from menu key
const getParentKey = (key) => {
if (key.startsWith('master-')) return 'master';
if (key.startsWith('dashboard-svg-')) return 'dashboard-svg';
if (key.startsWith('report-')) return 'report';
if (key.startsWith('history-')) return 'history';
return null;
// Function to get parent keys from menu key
const getParentKeys = (key) => {
const parentKeys = [];
if (key.startsWith('dashboard-svg-compressor-')) {
parentKeys.push('dashboard-svg', 'dashboard-svg-compressor');
} else if (key.startsWith('dashboard-svg-airdryer-')) {
parentKeys.push('dashboard-svg', 'dashboard-svg-airdryer');
} else if (key.startsWith('dashboard-svg-')) {
parentKeys.push('dashboard-svg');
} else if (key.startsWith('master-')) {
parentKeys.push('master');
} else if (key.startsWith('report-')) {
parentKeys.push('report');
} else if (key.startsWith('history-')) {
parentKeys.push('history');
}
return parentKeys;
};
// Update selected and open keys when route changes
@@ -259,11 +318,11 @@ const LayoutMenu = () => {
const currentKey = getMenuKeyFromPath(location.pathname);
setSelectedKeys([currentKey]);
const parentKey = getParentKey(currentKey);
// If current menu has parent, open it. Otherwise, close all dropdowns
if (parentKey) {
setStateOpenKeys([parentKey]);
const parentKeys = getParentKeys(currentKey);
// Always keep the parent menus open when a child is selected
if (parentKeys.length > 0) {
setStateOpenKeys(parentKeys);
} else {
setStateOpenKeys([]);
}
@@ -289,17 +348,30 @@ const LayoutMenu = () => {
const onOpenChange = (openKeys) => {
const currentOpenKey = openKeys.find((key) => stateOpenKeys.indexOf(key) === -1);
// If clicking on a menu that was previously closed
if (currentOpenKey !== undefined) {
const repeatIndex = openKeys
.filter((key) => key !== currentOpenKey)
.findIndex((key) => levelKeys[key] === levelKeys[currentOpenKey]);
setStateOpenKeys(
openKeys
.filter((_, index) => index !== repeatIndex)
.filter((key) => levelKeys[key] <= levelKeys[currentOpenKey])
);
} else {
setStateOpenKeys(openKeys);
// If clicking on a menu that was previously open, close only that menu
// but keep other parent menus open if they have active children
const currentKey = getMenuKeyFromPath(location.pathname);
const necessaryParentKeys = getParentKeys(currentKey);
// Filter out only the menus that are necessary to keep open
const filteredOpenKeys = openKeys.filter(key =>
necessaryParentKeys.includes(key)
);
setStateOpenKeys(filteredOpenKeys);
}
};
@@ -310,25 +382,17 @@ const LayoutMenu = () => {
return allItems
.filter(
(item) => item.key !== 'setting'
// tambahkan menu jika terdapat menu yang di sembunyikan dari user karyawan
// && item.key !== 'master'
// && item.key !== 'master'
)
.map((item) => {
if (item.key === 'master') {
return {
...item,
// buka command dibawah jika terdapat sub menu yang di sembunyikan
// children: item.children.filter(
// child => child.key !== 'master-product'
// tambahkan menu jika terdapat menu yang di sembunyikan dari user karyawan
// && child.key !== 'master-service'
// )
};
}
return item;
});
};
const items = isAdmin === 1 ? allItems : karyawan();
return (
@@ -348,4 +412,4 @@ const LayoutMenu = () => {
/>
);
};
export default LayoutMenu;
export default LayoutMenu;