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;
        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>`;
    }
}

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">
                    <span class="text-gray-400">순서: ${d.display_order || 0}</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>
                <button onclick="deleteDepartment(${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-trash 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(),
            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('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(),
            description: document.getElementById('editDeptDescription').value.trim() || null,
            display_order: parseInt(document.getElementById('editDeptOrder').value) || 0
        })});
        showToast('수정되었습니다.'); closeDepartmentModal(); await loadDepartments();
        await loadDepartmentsForSelect();
    } catch(e) { showToast(e.message, 'error'); }
});

async function deleteDepartment(id, name) {
    if (!confirm(`"${name}" 부서를 삭제하시겠습니까? 소속 인원은 부서 미지정으로 변경됩니다.`)) return;
    try { await api(`/departments/${id}`, { method: 'DELETE' }); showToast('부서가 삭제되었습니다'); await loadDepartments(); } catch(e) { showToast(e.message, 'error'); }
}