sam-api/public/tenant/permission/role.php

<?php
// 역할 권한 설정 (트리형)
$CURRENT_SECTION = 'permission';
include '../inc/header.php';
?>
    <div class="container" style="max-width:1280px; margin-top:24px;">
        <div class="card shadow-sm">
            <div class="card-header d-flex flex-wrap gap-2 align-items-center">
                <strong>역할 권한 설정 (트리)</strong>
                <select class="form-select form-select-sm" id="roleSelect" style="width:240px;">
                    <option value="1">최고관리자</option>
                    <option value="2">일반관리자</option>
                    <option value="3" selected>일반직원</option>
                </select>
                <div class="ms-auto d-flex flex-wrap gap-2">
                    <button class="btn btn-sm btn-outline-primary" id="btnAllAllow">전체 허용</button>
                    <button class="btn btn-sm btn-outline-danger" id="btnAllDeny">전체 금지</button>
                    <button class="btn btn-sm btn-outline-secondary" id="btnClear">초기화</button>
                    <button class="btn btn-sm btn-primary" id="btnSave">저장</button>
                </div>
            </div>

            <div class="card-body">
                <div class="d-flex flex-wrap gap-2 mb-2">
                    <div class="input-group" style="max-width:420px;">
                        <input type="text" class="form-control" id="searchInput" placeholder="메뉴명/코드 검색">
                        <button class="btn btn-outline-secondary" id="btnSearch">검색</button>
                        <button class="btn btn-outline-secondary" id="btnResetSearch">초기화</button>
                    </div>
                    <div class="small text-muted ms-auto">
                        * 부모 설정은 하위로 전파됩니다. 자식이 섞이면 부모 칸은 흐릿 표시됩니다.
                    </div>
                </div>

                <div class="table-responsive" style="max-height:64vh; overflow:auto;">
                    <table class="table table-sm align-middle" id="permTable">
                        <thead class="table-light">
                        <tr>
                            <th style="width:320px;">메뉴</th>
                            <th class="text-center" style="width:90px;">읽기<br><input type="checkbox" id="hdr_read"></th>
                            <th class="text-center" style="width:90px;">쓰기<br><input type="checkbox" id="hdr_create"></th>
                            <th class="text-center" style="width:90px;">수정<br><input type="checkbox" id="hdr_update"></th>
                            <th class="text-center" style="width:90px;">삭제<br><input type="checkbox" id="hdr_delete"></th>
                            <th class="text-center" style="width:90px;">결재<br><input type="checkbox" id="hdr_approve"></th>
                        </tr>
                        </thead>
                        <tbody><!-- rows --></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <style>
        .menu-name { font-size:14px; font-weight:500; }
        .menu-url  { color:#6c757d; font-size:12px;}
        .indent    { font-family: ui-monospace, Menlo, Consolas, monospace; color:#6c757d; }
    </style>

    <script src="/tenant/assets/js/permission_menu.js"></script>
    <script>
        // ===== 샘플 데이터 (실전: AJAX) =====
        const MENU_DATA = [
            {id:1,parent_id:null,title:'대시보드',code:'dashboard',path:'/tenant/member/dashboard.php',source:'system'},
            {id:2,parent_id:null,title:'수주',code:'order',path:null,source:'system'},
            {id:21,parent_id:2,title:'수주 관리',code:'order.manage',path:'/tenant/order/manage.php',source:'system'},
            {id:22,parent_id:2,title:'수주 등록/수정',code:'order.edit',path:'/tenant/order/edit.php',source:'system'},
            {id:3,parent_id:null,title:'생산',code:'production',path:null,source:'system'},
            {id:31,parent_id:3,title:'작업 지시',code:'production.wi',path:'/tenant/production/work_instruction.php',source:'workflow'},
            {id:32,parent_id:3,title:'스크린 작업',code:'production.screen',path:'/tenant/production/screen_work.php',source:'workflow'},
            {id:5,parent_id:null,title:'게시판',code:'board',path:null,source:'system'},
            {id:51,parent_id:5,title:'공지사항',code:'board.notice',path:'/tenant/board/notice_list.php',source:'board'},
        ];
        const TENANT_USE = {dashboard:true, order:true,'order.manage':true,'order.edit':false,
            production:true,'production.wi':true,'production.screen':true,
            board:true,'board.notice':true};

        // 역할 권한 상태
        const ROLE_PERMS = {}; // code: {read,create,update,delete,approve}

        PermissionMenu.setData(MENU_DATA, TENANT_USE);

        function renderRows(){
            const rows = PermissionMenu.buildRows((node) => {
                const p = (ROLE_PERMS[node.code] ||= {read:false,create:false,update:false,delete:false,approve:false});
                return ['read','create','update','delete','approve'].map(perm =>
                    `<td class="text-center"><input type="checkbox" class="perm" data-perm="${perm}" ${p[perm]?'checked':''}></td>`
                ).join('');
            });
            document.querySelector('#permTable tbody').innerHTML = rows;
            applyIndeterminate();
        }

        function setChildrenPerm(code, perm, on){
            PermissionMenu.childrenOf(code).forEach(ch=>{
                (ROLE_PERMS[ch.code] ||= {read:false,create:false,update:false,delete:false,approve:false});
                ROLE_PERMS[ch.code][perm] = on;
                setChildrenPerm(ch.code, perm, on);
            });
        }
        function updateParentPerms(code, perm){
            const parent = PermissionMenu.parentOf(code);
            if (!parent) return;
            const kids = PermissionMenu.childrenOf(parent.code);
            const states = kids.map(k => !!(ROLE_PERMS[k.code] && ROLE_PERMS[k.code][perm]));
            const allOn = states.every(Boolean), allOff = states.every(s=>!s);
            (ROLE_PERMS[parent.code] ||= {read:false,create:false,update:false,delete:false,approve:false});
            ROLE_PERMS[parent.code][perm] = allOn ? true : (allOff ? false : true);
            updateParentPerms(parent.code, perm);
        }
        function applyIndeterminate(){
            document.querySelectorAll('#permTable tbody tr').forEach(tr=>{
                const code = tr.dataset.code, kids = PermissionMenu.childrenOf(code);
                tr.querySelectorAll('input.perm').forEach(chk=>{
                    chk.indeterminate = false;
                    if (kids.length){
                        const perm = chk.dataset.perm;
                        const onCnt = kids.filter(k => !!(ROLE_PERMS[k.code] && ROLE_PERMS[k.code][perm])).length;
                        if (onCnt>0 && onCnt<kids.length) chk.indeterminate = true;
                    }
                });
            });
            ['read','create','update','delete','approve'].forEach(perm=>{
                const hdr = document.querySelector('#hdr_'+perm);
                if(!hdr) return;
                const codes = PermissionMenu.activeCodes();
                const vals = codes.map(code => !!(ROLE_PERMS[code] && ROLE_PERMS[code][perm]));
                const onCnt = vals.filter(Boolean).length;
                hdr.indeterminate = (onCnt>0 && onCnt<vals.length);
                hdr.checked = (onCnt===vals.length);
            });
        }

        // events
        document.addEventListener('change', e=>{
            if (!e.target.classList.contains('perm')) return;
            const tr = e.target.closest('tr'); const code = tr.dataset.code; const perm = e.target.dataset.perm;
            (ROLE_PERMS[code] ||= {read:false,create:false,update:false,delete:false,approve:false});
            ROLE_PERMS[code][perm] = e.target.checked;
            setChildrenPerm(code, perm, e.target.checked);
            updateParentPerms(code, perm);
            renderRows();
        });
        ['read','create','update','delete','approve'].forEach(perm=>{
            const hdr = document.querySelector('#hdr_'+perm);
            if(!hdr) return;
            hdr.addEventListener('change', ()=>{
                PermissionMenu.activeCodes().forEach(code=>{
                    (ROLE_PERMS[code] ||= {read:false,create:false,update:false,delete:false,approve:false});
                    ROLE_PERMS[code][perm] = hdr.checked;
                });
                renderRows();
            });
        });
        // 검색/초기화
        document.querySelector('#btnSearch').addEventListener('click', ()=>{
            const q = document.querySelector('#searchInput').value.trim().toLowerCase();
            document.querySelectorAll('#permTable tbody tr').forEach(tr=>{
                const name = tr.querySelector('td:first-child').innerText.toLowerCase();
                const code = tr.dataset.code.toLowerCase();
                tr.style.display = (q==='' || name.includes(q) || code.includes(q)) ? '' : 'none';
            });
        });
        document.querySelector('#btnResetSearch').addEventListener('click', ()=>{
            document.querySelector('#searchInput').value=''; document.querySelectorAll('#permTable tbody tr').forEach(tr=> tr.style.display='');
        });
        // 일괄 버튼
        document.querySelector('#btnAllAllow').addEventListener('click', ()=>{
            PermissionMenu.activeCodes().forEach(code=>{ ROLE_PERMS[code]={read:true,create:true,update:true,delete:true,approve:true}; });
            renderRows();
        });
        document.querySelector('#btnAllDeny').addEventListener('click', ()=>{
            PermissionMenu.activeCodes().forEach(code=>{ ROLE_PERMS[code]={read:false,create:false,update:false,delete:false,approve:false}; });
            renderRows();
        });
        document.querySelector('#btnClear').addEventListener('click', ()=>{
            PermissionMenu.activeCodes().forEach(code=>{ ROLE_PERMS[code]={read:false,create:false,update:false,delete:false,approve:false}; });
            renderRows();
        });
        // 역할 변경(샘플)
        document.querySelector('#roleSelect').addEventListener('change', function(){
            alert('역할 권한 로드(샘플): GET /api/permission/role_get.php?role_id='+this.value);
            // 실제 구현: ROLE_PERMS 갱신 → renderRows();
        });

        renderRows();
    </script>

<?php include '../inc/footer.php'; ?>