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

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 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors">
            <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">
                <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('');
}

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'); }
}