tk-factory-services/user-management/web/static/js/tkuser-departments.js

/* ===== Departments CRUD ===== */
let departments = [], departmentsLoaded = false;

async function loadDepartments() {
    try {
        const r = await api('/departments'); departments = r.data || r;
        departmentsLoaded = true;
        populateParentDeptSelects();
        displayDepartments();
    } catch (err) {
        document.getElementById('departmentList').innerHTML = `<div class="text-red-500 text-center py-6"><i class="fas fa-exclamation-triangle text-xl"></i><p class="text-sm mt-2">${err.message}</p></div>`;
    }
}

function populateParentDeptSelects() {
    ['newDeptParent','editDeptParent'].forEach(id => {
        const sel = document.getElementById(id); if (!sel) return;
        const val = sel.value;
        sel.innerHTML = '<option value="">없음 (최상위)</option>';
        departments.filter(d => d.is_active !== 0 && d.is_active !== false).forEach(d => {
            const o = document.createElement('option'); o.value = d.department_id; o.textContent = d.department_name; sel.appendChild(o);
        });
        sel.value = val;
    });
}

let selectedDeptForMembers = null;

function displayDepartments() {
    const c = document.getElementById('departmentList');
    if (!departments.length) { c.innerHTML = '<p class="text-gray-400 text-center py-4 text-sm">등록된 부서가 없습니다.</p>'; return; }
    c.innerHTML = departments.map(d => `
        <div class="flex items-center justify-between p-2.5 rounded-lg hover:bg-gray-100 transition-colors cursor-pointer ${selectedDeptForMembers === d.department_id ? 'bg-blue-50 ring-1 ring-blue-200' : 'bg-gray-50'}" onclick="showDeptMembers(${d.department_id})">
            <div class="flex-1 min-w-0">
                <div class="text-sm font-medium text-gray-800 truncate"><i class="fas fa-sitemap mr-1.5 text-gray-400 text-xs"></i>${d.department_name}</div>
                <div class="text-xs text-gray-500 flex items-center gap-1.5 mt-0.5 flex-wrap">
                    ${d.parent_name ? `<span class="px-1.5 py-0.5 rounded bg-slate-50 text-slate-500">상위: ${d.parent_name}</span>` : '<span class="px-1.5 py-0.5 rounded bg-indigo-50 text-indigo-500">최상위</span>'}
                    <span class="text-gray-400">순서: ${d.display_order || 0}</span>
                    ${d.is_active === 0 || d.is_active === false ? '<span class="px-1.5 py-0.5 rounded bg-gray-100 text-gray-400">비활성</span>' : '<span class="px-1.5 py-0.5 rounded bg-emerald-50 text-emerald-600">활성</span>'}
                </div>
            </div>
            <div class="flex gap-1 ml-2 flex-shrink-0" onclick="event.stopPropagation()">
                <button onclick="editDepartment(${d.department_id})" class="p-1.5 text-slate-500 hover:text-slate-700 hover:bg-slate-200 rounded" title="편집"><i class="fas fa-pen-to-square text-xs"></i></button>
                ${d.is_active !== 0 && d.is_active !== false ? `<button onclick="deactivateDepartment(${d.department_id},'${(d.department_name||'').replace(/'/g,"\\'")}')" class="p-1.5 text-red-400 hover:text-red-600 hover:bg-red-100 rounded" title="비활성화"><i class="fas fa-ban text-xs"></i></button>` : ''}
            </div>
        </div>`).join('');
}

async function showDeptMembers(deptId) {
    selectedDeptForMembers = deptId;
    displayDepartments();
    const panel = document.getElementById('deptMembersPanel');
    const list = document.getElementById('deptMembersList');
    panel.classList.remove('hidden');
    list.innerHTML = '<div class="text-gray-400 text-center py-4"><i class="fas fa-spinner fa-spin"></i></div>';

    let deptUsers = users;
    if (!deptUsers || !deptUsers.length) {
        try {
            const r = await api('/users');
            deptUsers = r.data || r;
        } catch (e) {
            list.innerHTML = `<p class="text-red-500 text-sm">${e.message}</p>`;
            return;
        }
    }

    const members = deptUsers.filter(u => u.department_id === deptId);
    const dept = departments.find(d => d.department_id === deptId);
    const title = panel.querySelector('h3');
    if (title) title.innerHTML = `<i class="fas fa-users text-slate-400 mr-1.5"></i>소속 인원 — ${dept ? dept.department_name : ''}`;

    if (!members.length) {
        list.innerHTML = '<p class="text-gray-400 text-center py-4 text-sm">소속 인원이 없습니다</p>';
        return;
    }

    list.innerHTML = members.map(u => `
        <div class="flex items-center justify-between p-2 bg-gray-50 rounded-lg">
            <div class="flex items-center gap-2">
                <div class="w-7 h-7 bg-slate-200 rounded-full flex items-center justify-center text-xs font-semibold text-slate-600">${(u.name || u.username).charAt(0)}</div>
                <div>
                    <div class="text-sm font-medium text-gray-800">${u.name || u.username}</div>
                    <div class="text-xs text-gray-500">${u.username}</div>
                </div>
            </div>
            <div class="flex items-center gap-1.5">
                <span class="px-1.5 py-0.5 rounded text-xs ${u.role === 'admin' ? 'bg-red-50 text-red-600' : 'bg-slate-50 text-slate-500'}">${u.role === 'admin' ? '관리자' : '사용자'}</span>
                ${u.is_active === 0 || u.is_active === false ? '<span class="px-1.5 py-0.5 rounded text-xs bg-gray-100 text-gray-400">비활성</span>' : '<span class="px-1.5 py-0.5 rounded text-xs bg-emerald-50 text-emerald-600">활성</span>'}
            </div>
        </div>`).join('');
}

document.getElementById('addDepartmentForm').addEventListener('submit', async e => {
    e.preventDefault();
    try {
        await api('/departments', { method: 'POST', body: JSON.stringify({
            department_name: document.getElementById('newDeptName').value.trim(),
            parent_id: document.getElementById('newDeptParent').value ? parseInt(document.getElementById('newDeptParent').value) : null,
            description: document.getElementById('newDeptDescription').value.trim() || null,
            display_order: parseInt(document.getElementById('newDeptOrder').value) || 0
        })});
        showToast('부서가 추가되었습니다.'); document.getElementById('addDepartmentForm').reset(); await loadDepartments();
    } catch(e) { showToast(e.message, 'error'); }
});

function editDepartment(id) {
    const d = departments.find(x => x.department_id === id); if (!d) return;
    document.getElementById('editDeptId').value = d.department_id;
    document.getElementById('editDeptName').value = d.department_name;
    document.getElementById('editDeptDescription').value = d.description || '';
    document.getElementById('editDeptOrder').value = d.display_order || 0;
    document.getElementById('editDeptActive').value = (d.is_active === 0 || d.is_active === false) ? '0' : '1';
    populateParentDeptSelects();
    document.getElementById('editDeptParent').value = d.parent_id || '';
    document.getElementById('editDepartmentModal').classList.remove('hidden');
}
function closeDepartmentModal() { document.getElementById('editDepartmentModal').classList.add('hidden'); }

document.getElementById('editDepartmentForm').addEventListener('submit', async e => {
    e.preventDefault();
    try {
        await api(`/departments/${document.getElementById('editDeptId').value}`, { method: 'PUT', body: JSON.stringify({
            department_name: document.getElementById('editDeptName').value.trim(),
            parent_id: document.getElementById('editDeptParent').value ? parseInt(document.getElementById('editDeptParent').value) : null,
            description: document.getElementById('editDeptDescription').value.trim() || null,
            display_order: parseInt(document.getElementById('editDeptOrder').value) || 0,
            is_active: document.getElementById('editDeptActive').value === '1'
        })});
        showToast('수정되었습니다.'); closeDepartmentModal(); await loadDepartments();
        await loadDepartmentsForSelect();
    } catch(e) { showToast(e.message, 'error'); }
});

async function deactivateDepartment(id, name) {
    if (!confirm(`"${name}" 부서를 비활성화?`)) return;
    try { await api(`/departments/${id}`, { method: 'DELETE' }); showToast('부서 비활성화 완료'); await loadDepartments(); } catch(e) { showToast(e.message, 'error'); }
}