hyungi/tk-factory-services
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(tkuser): 연차/휴가 관리 프론트엔드 개편 (Sprint 001 Section B)

Browse Source 
- workers 기반 → sso_users 기반 전환 (vacWorkers→vacUsers, /workers→/users)
- 휴가 탭: 부서 필터, 이름 검색, balance_type 뱃지, 장기근속 제외 체크박스
- 배정 모달: balance_type/expires_at 필드 추가, 사용자 부서별 optgroup
- 부서 탭: 팀장 표시/편집, 승인권한 CRUD
- 연차 설정 탭/JS 신규: 기본연차·장기근속·이월연차 설정 UI
- API 미완성 대응: 필드명 폴백(worker_id→user_id), 404 graceful degradation

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Hyungi Ahn
2026-03-23 08:14:28 +09:00
parent c158da7832
commit a3f7a324b1
7 changed files with 527 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
user-management/web/static/js/tkuser-departments.js
View File

@@ -1,6 +1,8 @@
/* ===== Departments CRUD ===== */
let departments = [], departmentsLoaded = false;
const APPROVAL_TYPE_LABELS = { VACATION: '휴가', PURCHASE: '구매', DOCUMENT: '문서' };
async function loadDepartments() {
try {
const r = await api('/departments'); departments = r.data || r;
@@ -22,6 +24,7 @@ function displayDepartments() {
<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>
<span class="text-gray-400">| 팀장: ${d.leader_name ? escHtml(d.leader_name) : '<span class="text-gray-300">미지정</span>'}</span>
</div>
</div>
<div class="flex gap-1 ml-2 flex-shrink-0" onclick="event.stopPropagation()">
@@ -57,23 +60,24 @@ async function showDeptMembers(deptId) {
if (!members.length) {
list.innerHTML = '<p class="text-gray-400 text-center py-4 text-sm">소속 인원이 없습니다</p>';
return;
} else {
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('');
}
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('');
loadApprovalAuthorities(deptId);
}
document.getElementById('addDepartmentForm').addEventListener('submit', async e => {
@@ -88,12 +92,29 @@ document.getElementById('addDepartmentForm').addEventListener('submit', async e
} catch(e) { showToast(e.message, 'error'); }
});
function editDepartment(id) {
async 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;
// Populate leader dropdown
const leaderSel = document.getElementById('editDeptLeader');
leaderSel.innerHTML = '<option value="">미지정</option>';
let deptUsers = users;
if (!deptUsers || !deptUsers.length) {
try { const r = await api('/users'); deptUsers = r.data || r; } catch(e) { /* ignore */ }
}
const members = (deptUsers || []).filter(u => u.department_id === d.department_id && u.is_active !== 0 && u.is_active !== false);
members.forEach(u => {
const o = document.createElement('option');
o.value = u.id;
o.textContent = u.name || u.username;
if (d.leader_user_id && d.leader_user_id === u.id) o.selected = true;
leaderSel.appendChild(o);
});
document.getElementById('editDepartmentModal').classList.remove('hidden');
}
function closeDepartmentModal() { document.getElementById('editDepartmentModal').classList.add('hidden'); }
@@ -101,10 +122,12 @@ function closeDepartmentModal() { document.getElementById('editDepartmentModal')
document.getElementById('editDepartmentForm').addEventListener('submit', async e => {
e.preventDefault();
try {
const leaderId = document.getElementById('editDeptLeader').value;
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
display_order: parseInt(document.getElementById('editDeptOrder').value) || 0,
leader_user_id: leaderId ? parseInt(leaderId) : null
})});
showToast('수정되었습니다.'); closeDepartmentModal(); await loadDepartments();
await loadDepartmentsForSelect();
@@ -115,3 +138,80 @@ 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'); }
}
/* ===== Approval Authorities ===== */
async function loadApprovalAuthorities(deptId) {
const section = document.getElementById('deptApprovalSection');
if (!section) return;
try {
const r = await api(`/departments/${deptId}/approval-authorities`);
const data = r.data || r;
section.classList.remove('hidden');
renderApprovalAuthorities(deptId, data);
} catch (e) {
section.classList.add('hidden');
}
}
function renderApprovalAuthorities(deptId, data) {
const list = document.getElementById('deptApprovalList');
if (!data || !data.length) {
list.innerHTML = '<p class="text-gray-400 text-center py-3 text-xs">등록된 승인권한이 없습니다</p>';
return;
}
list.innerHTML = `<table class="w-full text-sm"><thead><tr>
<th class="text-left px-2 py-1 text-xs font-semibold text-gray-500">유형</th>
<th class="text-left px-2 py-1 text-xs font-semibold text-gray-500">승인자</th>
<th class="text-center px-2 py-1 text-xs font-semibold text-gray-500">순서</th>
<th class="px-2 py-1 w-10"></th>
</tr></thead><tbody>${data.map(a => `<tr class="border-t border-gray-100">
<td class="px-2 py-1.5"><span class="px-1.5 py-0.5 rounded text-xs bg-slate-50 text-slate-600">${APPROVAL_TYPE_LABELS[a.approval_type] || a.approval_type}</span></td>
<td class="px-2 py-1.5 text-sm">${escHtml(a.approver_name || '')}</td>
<td class="px-2 py-1.5 text-center text-xs text-gray-400">${a.approval_order || 1}</td>
<td class="px-2 py-1.5 text-center"><button onclick="deleteApprovalAuthority(${deptId},${a.id})" class="p-1 text-red-300 hover:text-red-500" title="삭제"><i class="fas fa-trash-alt text-xs"></i></button></td>
</tr>`).join('')}</tbody></table>`;
}
function openApprovalModal() {
if (!selectedDeptForMembers) return;
document.getElementById('approvalDeptId').value = selectedDeptForMembers;
document.getElementById('approvalAuthorityForm').reset();
document.getElementById('approvalOrder').value = '1';
// Populate approver dropdown
const sel = document.getElementById('approvalUserId');
sel.innerHTML = '<option value="">선택</option>';
let availUsers = users;
if (availUsers && availUsers.length) {
availUsers.filter(u => u.is_active !== 0 && u.is_active !== false).forEach(u => {
sel.innerHTML += `<option value="${u.id}">${escHtml(u.name || u.username)}</option>`;
});
}
document.getElementById('approvalAuthorityModal').classList.remove('hidden');
}
function closeApprovalModal() { document.getElementById('approvalAuthorityModal').classList.add('hidden'); }
document.getElementById('approvalAuthorityForm').addEventListener('submit', async e => {
e.preventDefault();
const deptId = document.getElementById('approvalDeptId').value;
try {
await api(`/departments/${deptId}/approval-authorities`, { method: 'POST', body: JSON.stringify({
approval_type: document.getElementById('approvalType').value,
approver_user_id: parseInt(document.getElementById('approvalUserId').value),
approval_order: parseInt(document.getElementById('approvalOrder').value) || 1
})});
showToast('승인권한이 추가되었습니다.');
closeApprovalModal();
await loadApprovalAuthorities(parseInt(deptId));
} catch (e) { showToast(e.message, 'error'); }
});
async function deleteApprovalAuthority(deptId, authId) {
if (!confirm('이 승인권한을 삭제하시겠습니까?')) return;
try {
await api(`/departments/${deptId}/approval-authorities/${authId}`, { method: 'DELETE' });
showToast('삭제되었습니다.');
await loadApprovalAuthorities(deptId);
} catch (e) { showToast(e.message, 'error'); }
}