refactor: 코드 분리 + 성능 최적화 + 모바일 개선
tkqc 5개 페이지 인라인 JS/CSS를 외부 파일로 추출 (HTML 82% 감소) tkuser index.html을 CSS 1개 + JS 10개 모듈로 분리 (3283→1155줄) - 공통 유틸 추출: issue-helpers, photo-modal, toast - 공통 CSS 확장: tkqc-common.css (모바일 반응형 포함) - 모바일 하단 네비게이션 추가 (mobile-bottom-nav.js) - nginx: JS/CSS 1시간 캐싱 + gzip 압축 활성화 - Tailwind CDN preload, 캐시버스터 통일 (?v=20260213) - 카메라 capture="environment" 추가 - tkuser Dockerfile에 static/ 디렉토리 복사 추가 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Hyungi Ahn
91
user-management/web/static/js/tkuser-departments.js
Normal file
91
user-management/web/static/js/tkuser-departments.js
Normal file
@@ -0,0 +1,91 @@
|
||||
/* ===== 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'); }
|
||||
}
|
||||
Reference in New Issue
Block a user