feat: 공동작업을 위한 프로젝트 구조 최적화 및 가이드 배포
This commit is contained in:
171
src/components/Modal/SWUserModal.ts
Normal file
171
src/components/Modal/SWUserModal.ts
Normal file
@@ -0,0 +1,171 @@
|
||||
import { state } from '../../state';
|
||||
import { SoftwareAsset, SWUser } from '../../excelHandler';
|
||||
import { openModal } from './BaseModal';
|
||||
import { createIcons, Edit2, X, Paperclip } from 'lucide';
|
||||
|
||||
let currentSwUserAssetId: string = '';
|
||||
let tempSwUsers: SWUser[] = [];
|
||||
|
||||
/**
|
||||
* 소프트웨어 사용자 할당 모달 초기화
|
||||
*/
|
||||
export function initSWUserModal(renderContent: () => void, closeModals: () => void) {
|
||||
const btnOpenAddUser = document.getElementById('btn-open-add-user');
|
||||
const btnSaveEditUser = document.getElementById('btn-save-edit-user');
|
||||
const btnSaveSwUserMapping = document.getElementById('btn-save-sw-user-mapping');
|
||||
|
||||
btnOpenAddUser?.addEventListener('click', () => {
|
||||
openUserEditModal(-1);
|
||||
});
|
||||
|
||||
btnSaveEditUser?.addEventListener('click', () => {
|
||||
saveUserEdit();
|
||||
});
|
||||
|
||||
btnSaveSwUserMapping?.addEventListener('click', () => {
|
||||
// 변경사항 전역 상태에 반영
|
||||
state.masterData.swUsers = state.masterData.swUsers.filter(u => u.swId !== currentSwUserAssetId);
|
||||
state.masterData.swUsers.push(...tempSwUsers);
|
||||
|
||||
document.getElementById('sw-user-modal')?.classList.add('hidden');
|
||||
renderContent();
|
||||
});
|
||||
|
||||
// 취소 버튼들
|
||||
document.getElementById('btn-cancel-sw-user-edit')?.addEventListener('click', () => {
|
||||
document.getElementById('sw-user-edit-modal')?.classList.add('hidden');
|
||||
});
|
||||
document.getElementById('btn-cancel-sw-user-modal')?.addEventListener('click', () => {
|
||||
document.getElementById('sw-user-modal')?.classList.add('hidden');
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 소프트웨어 사용자 목록 렌더링
|
||||
*/
|
||||
function renderUserList() {
|
||||
const tbody = document.getElementById('user-list-body')!;
|
||||
tbody.innerHTML = '';
|
||||
if (tempSwUsers.length === 0) {
|
||||
tbody.innerHTML = '<tr><td colspan="7" style="padding: 1rem; text-align: center; color: var(--text-muted);">할당된 사용자가 없습니다.</td></tr>';
|
||||
return;
|
||||
}
|
||||
|
||||
tempSwUsers.forEach((user, idx) => {
|
||||
const tr = document.createElement('tr');
|
||||
tr.style.cssText = 'border-bottom: 1px solid var(--border); transition: background-color 0.2s;';
|
||||
|
||||
const deptTeam = [user.부서, user.팀].filter(Boolean).join(' / ') || '-';
|
||||
const attachIcon = user.신청서명 ? `<i data-lucide="paperclip" class="text-primary" style="width:16px; height:16px;" title="${user.신청서명}"></i>` : '-';
|
||||
|
||||
tr.innerHTML = `
|
||||
<td style="padding:0.5rem; text-align:left;">${user.법인}</td>
|
||||
<td style="padding:0.5rem; text-align:left;">${deptTeam}</td>
|
||||
<td style="padding:0.5rem; text-align:left;">${user.직위 || '-'}</td>
|
||||
<td style="padding:0.5rem; text-align:left;"><strong>${user.이름}</strong></td>
|
||||
<td style="padding:0.5rem; text-align:center;">${user.사용기간 || '-'}</td>
|
||||
<td style="padding:0.5rem; text-align:center; color: var(--text-light);">${attachIcon}</td>
|
||||
<td style="padding:0.5rem; text-align:center; display:flex; justify-content:center; gap:0.25rem;">
|
||||
<button type="button" class="btn-icon btn-edit-user" data-idx="${idx}" style="color: var(--primary);" title="수정"><i data-lucide="edit-2" style="width:14px; height:14px;"></i></button>
|
||||
<button type="button" class="btn-icon btn-remove-user" data-idx="${idx}" style="color: var(--danger);" title="삭제"><i data-lucide="x" style="width:14px; height:14px;"></i></button>
|
||||
</td>
|
||||
`;
|
||||
tbody.appendChild(tr);
|
||||
});
|
||||
|
||||
createIcons({ icons: { Edit2, X, Paperclip } });
|
||||
|
||||
tbody.querySelectorAll('.btn-edit-user').forEach(btn => {
|
||||
btn.addEventListener('click', (e) => {
|
||||
const idx = parseInt((e.currentTarget as HTMLElement).getAttribute('data-idx')!);
|
||||
openUserEditModal(idx);
|
||||
});
|
||||
});
|
||||
|
||||
tbody.querySelectorAll('.btn-remove-user').forEach(btn => {
|
||||
btn.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
const idx = parseInt((e.currentTarget as HTMLButtonElement).getAttribute('data-idx')!);
|
||||
tempSwUsers.splice(idx, 1);
|
||||
renderUserList();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 사용자 할당 모달 열기
|
||||
*/
|
||||
export function openSwUserModal(asset: SoftwareAsset) {
|
||||
openModal('sw-user-modal');
|
||||
currentSwUserAssetId = asset.id;
|
||||
tempSwUsers = state.masterData.swUsers.filter(u => u.swId === asset.id).map(u => ({...u}));
|
||||
renderUserList();
|
||||
}
|
||||
|
||||
/**
|
||||
* 사용자 추가/수정 모달 열기
|
||||
*/
|
||||
function openUserEditModal(idx: number) {
|
||||
const editModal = document.getElementById('sw-user-edit-modal')!;
|
||||
editModal.classList.remove('hidden');
|
||||
(document.getElementById('edit-user-idx') as HTMLInputElement).value = String(idx);
|
||||
|
||||
if (idx === -1) {
|
||||
document.getElementById('sw-user-edit-modal-title')!.innerText = '새 사용자 추가';
|
||||
(document.getElementById('new-user-법인') as HTMLSelectElement).value = '한맥';
|
||||
(document.getElementById('new-user-부서') as HTMLInputElement).value = '';
|
||||
(document.getElementById('new-user-팀') as HTMLInputElement).value = '';
|
||||
(document.getElementById('new-user-직위') as HTMLInputElement).value = '';
|
||||
(document.getElementById('new-user-이름') as HTMLInputElement).value = '';
|
||||
(document.getElementById('new-user-사용기간') as HTMLInputElement).value = '';
|
||||
(document.getElementById('new-user-신청서') as HTMLInputElement).value = '';
|
||||
document.getElementById('new-user-신청서명')!.innerText = '';
|
||||
} else {
|
||||
document.getElementById('sw-user-edit-modal-title')!.innerText = '사용자 수정';
|
||||
const u = tempSwUsers[idx];
|
||||
(document.getElementById('new-user-법인') as HTMLSelectElement).value = u.법인;
|
||||
(document.getElementById('new-user-부서') as HTMLInputElement).value = u.부서;
|
||||
(document.getElementById('new-user-팀') as HTMLInputElement).value = u.팀;
|
||||
(document.getElementById('new-user-직위') as HTMLInputElement).value = u.직위;
|
||||
(document.getElementById('new-user-이름') as HTMLInputElement).value = u.이름;
|
||||
(document.getElementById('new-user-사용기간') as HTMLInputElement).value = u.사용기간;
|
||||
(document.getElementById('new-user-신청서') as HTMLInputElement).value = '';
|
||||
document.getElementById('new-user-신청서명')!.innerText = u.신청서명 ? `📎${u.신청서명}` : '';
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 사용자 추가/수정 내용 저장 (임시 목록에 반영)
|
||||
*/
|
||||
function saveUserEdit() {
|
||||
const idx = parseInt((document.getElementById('edit-user-idx') as HTMLInputElement).value);
|
||||
const 법인 = (document.getElementById('new-user-법인') as HTMLSelectElement).value;
|
||||
const 부서 = (document.getElementById('new-user-부서') as HTMLInputElement).value;
|
||||
const 팀 = (document.getElementById('new-user-팀') as HTMLInputElement).value;
|
||||
const 직위 = (document.getElementById('new-user-직위') as HTMLInputElement).value;
|
||||
const 이름 = (document.getElementById('new-user-이름') as HTMLInputElement).value.trim();
|
||||
const 사용기간 = (document.getElementById('new-user-사용기간') as HTMLInputElement).value;
|
||||
|
||||
const fileInput = document.getElementById('new-user-신청서') as HTMLInputElement;
|
||||
let 신청서명 = '';
|
||||
if (fileInput.files && fileInput.files.length > 0) {
|
||||
신청서명 = fileInput.files[0].name;
|
||||
} else if (idx !== -1) {
|
||||
신청서명 = tempSwUsers[idx].신청서명;
|
||||
}
|
||||
|
||||
if (!이름) { alert('이름을 입력해주세요.'); return; }
|
||||
|
||||
if (idx === -1) {
|
||||
tempSwUsers.push({
|
||||
id: Math.random().toString(36).substring(2, 9),
|
||||
swId: currentSwUserAssetId,
|
||||
법인, 부서, 팀, 직위, 이름, 사용기간, 신청서명
|
||||
});
|
||||
} else {
|
||||
tempSwUsers[idx] = { ...tempSwUsers[idx], 법인, 부서, 팀, 직위, 이름, 사용기간, 신청서명 };
|
||||
}
|
||||
|
||||
document.getElementById('sw-user-edit-modal')?.classList.add('hidden');
|
||||
renderUserList();
|
||||
}
|
||||
Reference in New Issue
Block a user