81 lines
2.6 KiB
JavaScript
81 lines
2.6 KiB
JavaScript
/**
|
|
* 메뉴 트리 공통 스크립트
|
|
* - 부서 권한 관리 (department-permissions) - 테이블 기반
|
|
* - 개인 권한 관리 (user-permissions) - 테이블 기반
|
|
* - 권한 분석 (permission-analyze) - div 기반
|
|
*/
|
|
|
|
// 자식 메뉴 접기/펼치기
|
|
window.toggleChildren = function(menuId) {
|
|
const button = document.querySelector(`.toggle-btn[data-menu-id="${menuId}"]`);
|
|
if (!button) return;
|
|
|
|
const chevron = button.querySelector('.chevron-icon');
|
|
if (!chevron) return;
|
|
|
|
const isCollapsed = chevron.classList.contains('rotate-[-90deg]');
|
|
|
|
if (isCollapsed) {
|
|
// 펼치기
|
|
chevron.classList.remove('rotate-[-90deg]');
|
|
showChildren(menuId);
|
|
} else {
|
|
// 접기
|
|
chevron.classList.add('rotate-[-90deg]');
|
|
hideChildren(menuId);
|
|
}
|
|
};
|
|
|
|
// 자식 요소 선택자 (테이블: tr.menu-row, div: .menu-item)
|
|
function getChildElements(parentId) {
|
|
// 테이블 기반 (tr.menu-row)
|
|
let children = document.querySelectorAll(`tr.menu-row[data-parent-id="${parentId}"]`);
|
|
if (children.length > 0) return children;
|
|
|
|
// div 기반 (.menu-item)
|
|
return document.querySelectorAll(`.menu-item[data-parent-id="${parentId}"]`);
|
|
}
|
|
|
|
// 재귀적으로 자식 메뉴 숨기기
|
|
function hideChildren(parentId) {
|
|
const children = getChildElements(parentId);
|
|
children.forEach(child => {
|
|
child.style.display = 'none';
|
|
const childId = child.getAttribute('data-menu-id');
|
|
hideChildren(childId);
|
|
});
|
|
}
|
|
|
|
// 전체 접기/펼치기
|
|
window.toggleAllChildren = function(collapse) {
|
|
const buttons = document.querySelectorAll('.toggle-btn');
|
|
buttons.forEach(btn => {
|
|
const menuId = btn.getAttribute('data-menu-id');
|
|
const chevron = btn.querySelector('.chevron-icon');
|
|
if (!chevron) return;
|
|
|
|
if (collapse) {
|
|
chevron.classList.add('rotate-[-90deg]');
|
|
hideChildren(menuId);
|
|
} else {
|
|
chevron.classList.remove('rotate-[-90deg]');
|
|
showChildren(menuId);
|
|
}
|
|
});
|
|
};
|
|
|
|
// 재귀적으로 직계 자식만 표시
|
|
function showChildren(parentId) {
|
|
const children = getChildElements(parentId);
|
|
children.forEach(child => {
|
|
child.style.display = '';
|
|
const childId = child.getAttribute('data-menu-id');
|
|
const childButton = child.querySelector(`.toggle-btn[data-menu-id="${childId}"]`);
|
|
if (childButton) {
|
|
const chevron = childButton.querySelector('.chevron-icon');
|
|
if (chevron && !chevron.classList.contains('rotate-[-90deg]')) {
|
|
showChildren(childId);
|
|
}
|
|
}
|
|
});
|
|
} |