feat: 공동작업을 위한 프로젝트 구조 최적화 및 가이드 배포
This commit is contained in:
46
src/components/Modal/BaseModal.ts
Normal file
46
src/components/Modal/BaseModal.ts
Normal file
@@ -0,0 +1,46 @@
|
||||
/**
|
||||
* 모든 모달의 공통 기능 (닫기, ESC 처리, 배경 클릭 등)을 관리하는 베이스 모듈입니다.
|
||||
*/
|
||||
export function initBaseModal() {
|
||||
const modals = document.querySelectorAll('.modal-overlay');
|
||||
const closeButtons = document.querySelectorAll('.btn-icon, [id^="btn-cancel-"]');
|
||||
|
||||
// 모든 모달 닫기 함수
|
||||
const closeAllModals = () => {
|
||||
modals.forEach(modal => modal.classList.add('hidden'));
|
||||
// SW 관련 추가 모달 처리
|
||||
document.getElementById('sw-user-modal')?.classList.add('hidden');
|
||||
document.getElementById('sw-user-edit-modal')?.classList.add('hidden');
|
||||
document.getElementById('dashboard-detail-modal')?.classList.add('hidden');
|
||||
};
|
||||
|
||||
// 닫기 버튼 이벤트 바인딩
|
||||
closeButtons.forEach(btn => {
|
||||
btn.addEventListener('click', closeAllModals);
|
||||
});
|
||||
|
||||
// ESC 키로 닫기
|
||||
window.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape') closeAllModals();
|
||||
});
|
||||
|
||||
// 배경(Overlay) 클릭 시 닫기
|
||||
modals.forEach(modal => {
|
||||
modal.addEventListener('click', (e) => {
|
||||
if (e.target === modal) closeAllModals();
|
||||
});
|
||||
});
|
||||
|
||||
return { closeAllModals };
|
||||
}
|
||||
|
||||
/**
|
||||
* 특정 모달을 엽니다.
|
||||
* @param modalId 모달 엘리먼트의 ID
|
||||
*/
|
||||
export function openModal(modalId: string) {
|
||||
const modal = document.getElementById(modalId);
|
||||
if (modal) {
|
||||
modal.classList.remove('hidden');
|
||||
}
|
||||
}
|
||||
112
src/components/Modal/HWModal.ts
Normal file
112
src/components/Modal/HWModal.ts
Normal file
@@ -0,0 +1,112 @@
|
||||
import { state } from '../../state';
|
||||
import { HardwareAsset } from '../../excelHandler';
|
||||
import { openModal } from './BaseModal';
|
||||
|
||||
/**
|
||||
* 하드웨어(서버, 전산비품 등) 모달 초기화 및 로직 제어
|
||||
*/
|
||||
export function initHWModal(renderContent: () => void, closeModals: () => void) {
|
||||
const hwForm = document.getElementById('hw-asset-form') as HTMLFormElement;
|
||||
const btnSaveHw = document.getElementById('btn-save-hw-asset') as HTMLButtonElement;
|
||||
const btnDeleteHw = document.getElementById('btn-delete-hw-asset') as HTMLButtonElement;
|
||||
|
||||
// 저장 버튼 이벤트
|
||||
btnSaveHw?.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
if (!hwForm.checkValidity()) { hwForm.reportValidity(); return; }
|
||||
|
||||
const id = (document.getElementById('hw-asset-id') as HTMLInputElement).value;
|
||||
const fileInput = document.getElementById('hw-품의서') as HTMLInputElement;
|
||||
const 품의서명 = fileInput.files && fileInput.files.length > 0 ? fileInput.files[0].name : (document.getElementById('hw-품의서명') as HTMLElement).innerText.replace('📎', '');
|
||||
|
||||
const newAsset: HardwareAsset = {
|
||||
id: id || Math.random().toString(36).substring(2, 9),
|
||||
type: (document.getElementById('hw-asset-type') as HTMLInputElement).value,
|
||||
법인: (document.getElementById('hw-법인') as HTMLInputElement).value,
|
||||
자산코드: (document.getElementById('hw-자산코드') as HTMLInputElement).value,
|
||||
명칭: (document.getElementById('hw-명칭') as HTMLInputElement).value,
|
||||
위치: (document.getElementById('hw-위치') as HTMLInputElement).value,
|
||||
관리자: (document.getElementById('hw-관리자') as HTMLInputElement).value,
|
||||
IP주소: (document.getElementById('hw-IP주소') as HTMLInputElement).value,
|
||||
MACaddress: (document.getElementById('hw-MACaddress') as HTMLInputElement).value,
|
||||
OS: (document.getElementById('hw-OS') as HTMLInputElement).value,
|
||||
HW사양: (document.getElementById('hw-HW사양') as HTMLTextAreaElement).value,
|
||||
구매일: (document.getElementById('hw-구매일') as HTMLInputElement).value,
|
||||
금액: (document.getElementById('hw-금액') as HTMLInputElement).value,
|
||||
납품업체: (document.getElementById('hw-납품업체') as HTMLInputElement).value,
|
||||
품의서명,
|
||||
비품유형: (document.getElementById('hw-asset-type') as HTMLInputElement).value === '전산비품'
|
||||
? (document.getElementById('hw-비품유형') as HTMLSelectElement).value : undefined
|
||||
};
|
||||
|
||||
if (id) {
|
||||
const idx = state.masterData.hw.findIndex(a => a.id === id);
|
||||
if(idx !== -1) state.masterData.hw[idx] = newAsset;
|
||||
} else {
|
||||
state.masterData.hw.push(newAsset);
|
||||
}
|
||||
|
||||
closeModals();
|
||||
renderContent();
|
||||
});
|
||||
|
||||
// 삭제 버튼 이벤트
|
||||
btnDeleteHw?.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
const id = (document.getElementById('hw-asset-id') as HTMLInputElement).value;
|
||||
if (confirm('삭제하시겠습니까?')) {
|
||||
state.masterData.hw = state.masterData.hw.filter(a => a.id !== id);
|
||||
closeModals();
|
||||
renderContent();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 하드웨어 상세 모달 열기
|
||||
* @param asset 수정 시 자산 데이터, 신규 시 undefined
|
||||
*/
|
||||
export function openHwModal(asset?: HardwareAsset) {
|
||||
const hwModal = document.getElementById('hw-asset-modal') as HTMLDivElement;
|
||||
const hwForm = document.getElementById('hw-asset-form') as HTMLFormElement;
|
||||
const deleteBtn = document.getElementById('btn-delete-hw-asset')!;
|
||||
|
||||
openModal('hw-asset-modal');
|
||||
hwForm.reset();
|
||||
|
||||
if (asset) {
|
||||
document.getElementById('hw-modal-title')!.textContent = '자산 상세 정보 수정';
|
||||
deleteBtn.style.display = 'block';
|
||||
|
||||
(document.getElementById('hw-asset-id') as HTMLInputElement).value = asset.id;
|
||||
(document.getElementById('hw-asset-type') as HTMLInputElement).value = asset.type;
|
||||
(document.getElementById('hw-법인') as HTMLInputElement).value = asset.법인;
|
||||
(document.getElementById('hw-자산코드') as HTMLInputElement).value = asset.자산코드;
|
||||
(document.getElementById('hw-명칭') as HTMLInputElement).value = asset.명칭;
|
||||
(document.getElementById('hw-위치') as HTMLInputElement).value = asset.위치;
|
||||
(document.getElementById('hw-관리자') as HTMLInputElement).value = asset.관리자;
|
||||
(document.getElementById('hw-IP주소') as HTMLInputElement).value = asset.IP주소;
|
||||
(document.getElementById('hw-MACaddress') as HTMLInputElement).value = asset.MACaddress;
|
||||
(document.getElementById('hw-OS') as HTMLInputElement).value = asset.OS;
|
||||
(document.getElementById('hw-HW사양') as HTMLTextAreaElement).value = asset.HW사양;
|
||||
(document.getElementById('hw-구매일') as HTMLInputElement).value = asset.구매일 || '';
|
||||
(document.getElementById('hw-금액') as HTMLInputElement).value = asset.금액 ? Number(asset.금액.replace(/,/g, '')).toLocaleString() : '';
|
||||
(document.getElementById('hw-납품업체') as HTMLInputElement).value = asset.납품업체 || '';
|
||||
(document.getElementById('hw-품의서명') as HTMLElement).innerText = asset.품의서명 ? `📎${asset.품의서명}` : '';
|
||||
(document.getElementById('hw-비품유형') as HTMLSelectElement).value = asset.비품유형 || '노트북';
|
||||
} else {
|
||||
document.getElementById('hw-modal-title')!.textContent = `새 ${state.activeSubTab} 자산 추가`;
|
||||
deleteBtn.style.display = 'none';
|
||||
(document.getElementById('hw-asset-id') as HTMLInputElement).value = '';
|
||||
(document.getElementById('hw-asset-type') as HTMLInputElement).value = state.activeSubTab;
|
||||
(document.getElementById('hw-품의서명') as HTMLElement).innerText = '';
|
||||
(document.getElementById('hw-비품유형') as HTMLSelectElement).value = '노트북';
|
||||
}
|
||||
|
||||
// 전산비품일 경우 유형 선택 필드 노출
|
||||
if (state.activeSubTab === '전산비품') {
|
||||
document.getElementById('hw-비품유형-group')!.style.display = 'block';
|
||||
} else {
|
||||
document.getElementById('hw-비품유형-group')!.style.display = 'none';
|
||||
}
|
||||
}
|
||||
111
src/components/Modal/PCModal.ts
Normal file
111
src/components/Modal/PCModal.ts
Normal file
@@ -0,0 +1,111 @@
|
||||
import { state } from '../../state';
|
||||
import { HardwareAsset } from '../../excelHandler';
|
||||
import { openModal } from './BaseModal';
|
||||
|
||||
/**
|
||||
* 개인PC 모달 초기화 및 로직 제어
|
||||
*/
|
||||
export function initPCModal(renderContent: () => void, closeModals: () => void) {
|
||||
const pcModal = document.getElementById('pc-asset-modal') as HTMLDivElement;
|
||||
const pcForm = document.getElementById('pc-asset-form') as HTMLFormElement;
|
||||
const btnSavePc = document.getElementById('btn-save-pc-asset') as HTMLButtonElement;
|
||||
const btnDeletePc = document.getElementById('btn-delete-pc-asset') as HTMLButtonElement;
|
||||
|
||||
// 저장 버튼 이벤트
|
||||
btnSavePc?.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
if (!pcForm.checkValidity()) { pcForm.reportValidity(); return; }
|
||||
|
||||
const id = (document.getElementById('pc-asset-id') as HTMLInputElement).value;
|
||||
const fileInput = document.getElementById('pc-품의서') as HTMLInputElement;
|
||||
const 품의서명 = fileInput.files && fileInput.files.length > 0 ? fileInput.files[0].name : (document.getElementById('pc-품의서명') as HTMLElement).innerText.replace('📎', '');
|
||||
|
||||
const newAsset: HardwareAsset = {
|
||||
id: id || Math.random().toString(36).substring(2, 9),
|
||||
type: '개인PC',
|
||||
법인: (document.getElementById('pc-법인') as HTMLSelectElement).value,
|
||||
자산코드: (document.getElementById('pc-자산코드') as HTMLInputElement).value,
|
||||
명칭: '',
|
||||
위치: (document.getElementById('pc-위치') as HTMLInputElement).value,
|
||||
관리자: '',
|
||||
IP주소: '',
|
||||
MACaddress: '',
|
||||
HW사양: '',
|
||||
OS: '',
|
||||
사용자: (document.getElementById('pc-사용자') as HTMLInputElement).value,
|
||||
CPU: (document.getElementById('pc-CPU') as HTMLInputElement).value,
|
||||
GPU: (document.getElementById('pc-GPU') as HTMLInputElement).value,
|
||||
RAM: (document.getElementById('pc-RAM') as HTMLInputElement).value,
|
||||
SSD1: (document.getElementById('pc-SSD1') as HTMLInputElement).value,
|
||||
SSD2: (document.getElementById('pc-SSD2') as HTMLInputElement).value,
|
||||
HDD1: (document.getElementById('pc-HDD1') as HTMLInputElement).value,
|
||||
HDD2: (document.getElementById('pc-HDD2') as HTMLInputElement).value,
|
||||
구매일: (document.getElementById('pc-구매일') as HTMLInputElement).value,
|
||||
금액: (document.getElementById('pc-금액') as HTMLInputElement).value,
|
||||
납품업체: (document.getElementById('pc-납품업체') as HTMLInputElement).value,
|
||||
품의서명
|
||||
};
|
||||
|
||||
if (id) {
|
||||
const idx = state.masterData.hw.findIndex(a => a.id === id);
|
||||
if(idx !== -1) state.masterData.hw[idx] = newAsset;
|
||||
} else {
|
||||
state.masterData.hw.push(newAsset);
|
||||
}
|
||||
|
||||
closeModals();
|
||||
renderContent();
|
||||
});
|
||||
|
||||
// 삭제 버튼 이벤트
|
||||
btnDeletePc?.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
const id = (document.getElementById('pc-asset-id') as HTMLInputElement).value;
|
||||
if (confirm('삭제하시겠습니까?')) {
|
||||
state.masterData.hw = state.masterData.hw.filter(a => a.id !== id);
|
||||
closeModals();
|
||||
renderContent();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 개인PC 상세 모달 열기
|
||||
* @param asset 수정 시 자산 데이터, 신규 시 undefined
|
||||
*/
|
||||
export function openPcModal(asset?: HardwareAsset) {
|
||||
const pcModal = document.getElementById('pc-asset-modal') as HTMLDivElement;
|
||||
const pcForm = document.getElementById('pc-asset-form') as HTMLFormElement;
|
||||
const deleteBtn = document.getElementById('btn-delete-pc-asset')!;
|
||||
|
||||
openModal('pc-asset-modal');
|
||||
pcForm.reset();
|
||||
|
||||
if (asset) {
|
||||
document.getElementById('pc-modal-title')!.textContent = '개인PC 상세 정보 수정';
|
||||
deleteBtn.style.display = 'block';
|
||||
|
||||
(document.getElementById('pc-asset-id') as HTMLInputElement).value = asset.id;
|
||||
(document.getElementById('pc-법인') as HTMLSelectElement).value = asset.법인;
|
||||
(document.getElementById('pc-자산코드') as HTMLInputElement).value = asset.자산코드;
|
||||
(document.getElementById('pc-사용자') as HTMLInputElement).value = asset.사용자 || '';
|
||||
(document.getElementById('pc-위치') as HTMLInputElement).value = asset.위치 || '';
|
||||
(document.getElementById('pc-CPU') as HTMLInputElement).value = asset.CPU || '';
|
||||
(document.getElementById('pc-GPU') as HTMLInputElement).value = asset.GPU || '';
|
||||
(document.getElementById('pc-RAM') as HTMLInputElement).value = asset.RAM || '';
|
||||
(document.getElementById('pc-SSD1') as HTMLInputElement).value = asset.SSD1 || '';
|
||||
(document.getElementById('pc-SSD2') as HTMLInputElement).value = asset.SSD2 || '';
|
||||
(document.getElementById('pc-HDD1') as HTMLInputElement).value = asset.HDD1 || '';
|
||||
(document.getElementById('pc-HDD2') as HTMLInputElement).value = asset.HDD2 || '';
|
||||
(document.getElementById('pc-구매일') as HTMLInputElement).value = asset.구매일 || '';
|
||||
(document.getElementById('pc-금액') as HTMLInputElement).value = asset.금액 ? Number(asset.금액.replace(/,/g, '')).toLocaleString() : '';
|
||||
(document.getElementById('pc-납품업체') as HTMLInputElement).value = asset.납품업체 || '';
|
||||
(document.getElementById('pc-품의서명') as HTMLElement).innerText = asset.품의서명 ? `📎${asset.품의서명}` : '';
|
||||
} else {
|
||||
document.getElementById('pc-modal-title')!.textContent = '새 개인PC 자산 추가';
|
||||
deleteBtn.style.display = 'none';
|
||||
(document.getElementById('pc-asset-id') as HTMLInputElement).value = '';
|
||||
(document.getElementById('pc-법인') as HTMLSelectElement).value = '한맥';
|
||||
(document.getElementById('pc-품의서명') as HTMLElement).innerText = '';
|
||||
}
|
||||
}
|
||||
102
src/components/Modal/SWModal.ts
Normal file
102
src/components/Modal/SWModal.ts
Normal file
@@ -0,0 +1,102 @@
|
||||
import { state } from '../../state';
|
||||
import { SoftwareAsset } from '../../excelHandler';
|
||||
import { openModal } from './BaseModal';
|
||||
|
||||
/**
|
||||
* 소프트웨어 모달 초기화 및 로직 제어
|
||||
*/
|
||||
export function initSWModal(renderContent: () => void, closeModals: () => void) {
|
||||
const swForm = document.getElementById('sw-asset-form') as HTMLFormElement;
|
||||
const btnSaveSw = document.getElementById('btn-save-sw-asset') as HTMLButtonElement;
|
||||
const btnDeleteSw = document.getElementById('btn-delete-sw-asset') as HTMLButtonElement;
|
||||
|
||||
// 저장 버튼 이벤트
|
||||
btnSaveSw?.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
if (!swForm.checkValidity()) { swForm.reportValidity(); return; }
|
||||
|
||||
const id = (document.getElementById('sw-asset-id') as HTMLInputElement).value;
|
||||
const newAsset: SoftwareAsset = {
|
||||
id: id || Math.random().toString(36).substring(2, 9),
|
||||
type: (document.getElementById('sw-asset-type') as HTMLInputElement).value,
|
||||
법인: (document.getElementById('sw-법인') as HTMLSelectElement).value,
|
||||
제품명: (document.getElementById('sw-제품명') as HTMLInputElement).value,
|
||||
구매일: (document.getElementById('sw-구매일') as HTMLInputElement).value,
|
||||
구독일: (document.getElementById('sw-구독일') as HTMLInputElement).value,
|
||||
유지보수여부: (document.getElementById('sw-유지보수여부') as HTMLInputElement).checked,
|
||||
금액: (document.getElementById('sw-금액') as HTMLInputElement).value,
|
||||
수량: parseInt((document.getElementById('sw-수량') as HTMLInputElement).value || '1', 10),
|
||||
계정명: (document.getElementById('sw-계정명') as HTMLInputElement).value,
|
||||
납품업체: (document.getElementById('sw-납품업체') as HTMLInputElement).value,
|
||||
비고: (document.getElementById('sw-비고') as HTMLInputElement).value,
|
||||
};
|
||||
|
||||
if (id) {
|
||||
const idx = state.masterData.sw.findIndex(a => a.id === id);
|
||||
if(idx !== -1) state.masterData.sw[idx] = newAsset;
|
||||
} else {
|
||||
state.masterData.sw.push(newAsset);
|
||||
}
|
||||
|
||||
closeModals();
|
||||
renderContent();
|
||||
});
|
||||
|
||||
// 삭제 버튼 이벤트
|
||||
btnDeleteSw?.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
const id = (document.getElementById('sw-asset-id') as HTMLInputElement).value;
|
||||
if (confirm('삭제하시겠습니까?')) {
|
||||
state.masterData.sw = state.masterData.sw.filter(a => a.id !== id);
|
||||
closeModals();
|
||||
renderContent();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 소프트웨어 상세 모달 열기
|
||||
* @param asset 수정 시 자산 데이터, 신규 시 undefined
|
||||
*/
|
||||
export function openSwModal(asset?: SoftwareAsset) {
|
||||
const swModal = document.getElementById('sw-asset-modal') as HTMLDivElement;
|
||||
const swForm = document.getElementById('sw-asset-form') as HTMLFormElement;
|
||||
const deleteBtn = document.getElementById('btn-delete-sw-asset')!;
|
||||
|
||||
openModal('sw-asset-modal');
|
||||
swForm.reset();
|
||||
|
||||
const subGroup = document.getElementById('sw-구독일-group')!;
|
||||
const permGroup = document.getElementById('sw-유지보수-group')!;
|
||||
if (state.activeSubTab === '구독SW') {
|
||||
subGroup.style.display = 'block';
|
||||
permGroup.style.display = 'none';
|
||||
} else {
|
||||
subGroup.style.display = 'none';
|
||||
permGroup.style.display = 'block';
|
||||
}
|
||||
|
||||
if (asset) {
|
||||
document.getElementById('sw-modal-title')!.textContent = `${state.activeSubTab} 상세 정보 수정`;
|
||||
deleteBtn.style.display = 'block';
|
||||
|
||||
(document.getElementById('sw-asset-id') as HTMLInputElement).value = asset.id;
|
||||
(document.getElementById('sw-asset-type') as HTMLInputElement).value = asset.type;
|
||||
(document.getElementById('sw-법인') as HTMLSelectElement).value = asset.법인;
|
||||
(document.getElementById('sw-제품명') as HTMLInputElement).value = asset.제품명;
|
||||
(document.getElementById('sw-구매일') as HTMLInputElement).value = asset.구매일 || '';
|
||||
(document.getElementById('sw-구독일') as HTMLInputElement).value = asset.구독일 || '';
|
||||
(document.getElementById('sw-유지보수여부') as HTMLInputElement).checked = !!asset.유지보수여부;
|
||||
(document.getElementById('sw-금액') as HTMLInputElement).value = asset.금액 ? Number(asset.금액.replace(/,/g, '')).toLocaleString() : '';
|
||||
(document.getElementById('sw-수량') as HTMLInputElement).value = String(asset.수량);
|
||||
(document.getElementById('sw-계정명') as HTMLInputElement).value = asset.계정명 || '';
|
||||
(document.getElementById('sw-납품업체') as HTMLInputElement).value = asset.납품업체 || '';
|
||||
(document.getElementById('sw-비고') as HTMLInputElement).value = asset.비고 || '';
|
||||
} else {
|
||||
document.getElementById('sw-modal-title')!.textContent = `새 ${state.activeSubTab} 자산 추가`;
|
||||
deleteBtn.style.display = 'none';
|
||||
(document.getElementById('sw-asset-id') as HTMLInputElement).value = '';
|
||||
(document.getElementById('sw-asset-type') as HTMLInputElement).value = state.activeSubTab;
|
||||
(document.getElementById('sw-법인') as HTMLSelectElement).value = '한맥';
|
||||
}
|
||||
}
|
||||
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();
|
||||
}
|
||||
108
src/components/Modal/StorageModal.ts
Normal file
108
src/components/Modal/StorageModal.ts
Normal file
@@ -0,0 +1,108 @@
|
||||
import { state } from '../../state';
|
||||
import { HardwareAsset } from '../../excelHandler';
|
||||
import { openModal } from './BaseModal';
|
||||
|
||||
/**
|
||||
* 스토리지 모달 초기화 및 로직 제어
|
||||
*/
|
||||
export function initStorageModal(renderContent: () => void, closeModals: () => void) {
|
||||
const storageForm = document.getElementById('storage-asset-form') as HTMLFormElement;
|
||||
const btnSaveStorage = document.getElementById('btn-save-storage-asset') as HTMLButtonElement;
|
||||
const btnDeleteStorage = document.getElementById('btn-delete-storage-asset') as HTMLButtonElement;
|
||||
|
||||
// 저장 버튼 이벤트
|
||||
btnSaveStorage?.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
if (!storageForm.checkValidity()) { storageForm.reportValidity(); return; }
|
||||
|
||||
const id = (document.getElementById('storage-asset-id') as HTMLInputElement).value;
|
||||
const fileInput = document.getElementById('storage-품의서') as HTMLInputElement;
|
||||
const 품의서명 = fileInput.files && fileInput.files.length > 0 ? fileInput.files[0].name : (document.getElementById('storage-품의서명') as HTMLElement).innerText.replace('📎', '');
|
||||
|
||||
const newAsset: HardwareAsset = {
|
||||
id: id || Math.random().toString(36).substring(2, 9),
|
||||
type: '스토리지',
|
||||
법인: (document.getElementById('storage-법인') as HTMLSelectElement).value,
|
||||
storage유형: (document.getElementById('storage-유형') as HTMLSelectElement).value,
|
||||
자산코드: (document.getElementById('storage-자산코드') as HTMLInputElement).value,
|
||||
명칭: (document.getElementById('storage-명칭') as HTMLInputElement).value,
|
||||
위치: (document.getElementById('storage-위치') as HTMLInputElement).value,
|
||||
관리자: '',
|
||||
IP주소: (document.getElementById('storage-IP주소') as HTMLInputElement).value,
|
||||
MACaddress: (document.getElementById('storage-MAC주소') as HTMLInputElement).value,
|
||||
HW사양: '',
|
||||
OS: '',
|
||||
모델명: (document.getElementById('storage-모델명') as HTMLInputElement).value,
|
||||
용량: (document.getElementById('storage-용량') as HTMLInputElement).value,
|
||||
담당자_정: (document.getElementById('storage-담당자_정') as HTMLInputElement).value,
|
||||
담당자_부: (document.getElementById('storage-담당자_부') as HTMLInputElement).value,
|
||||
구매일: (document.getElementById('storage-구매일') as HTMLInputElement).value,
|
||||
금액: (document.getElementById('storage-금액') as HTMLInputElement).value,
|
||||
납품업체: (document.getElementById('storage-납품업체') as HTMLInputElement).value,
|
||||
품의서명
|
||||
};
|
||||
|
||||
if (id) {
|
||||
const idx = state.masterData.hw.findIndex(a => a.id === id);
|
||||
if(idx !== -1) state.masterData.hw[idx] = newAsset;
|
||||
} else {
|
||||
state.masterData.hw.push(newAsset);
|
||||
}
|
||||
|
||||
closeModals();
|
||||
renderContent();
|
||||
});
|
||||
|
||||
// 삭제 버튼 이벤트
|
||||
btnDeleteStorage?.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
const id = (document.getElementById('storage-asset-id') as HTMLInputElement).value;
|
||||
if (confirm('삭제하시겠습니까?')) {
|
||||
state.masterData.hw = state.masterData.hw.filter(a => a.id !== id);
|
||||
closeModals();
|
||||
renderContent();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 스토리지 상세 모달 열기
|
||||
* @param asset 수정 시 자산 데이터, 신규 시 undefined
|
||||
*/
|
||||
export function openStorageModal(asset?: HardwareAsset) {
|
||||
const storageModal = document.getElementById('storage-asset-modal') as HTMLDivElement;
|
||||
const storageForm = document.getElementById('storage-asset-form') as HTMLFormElement;
|
||||
const deleteBtn = document.getElementById('btn-delete-storage-asset')!;
|
||||
|
||||
openModal('storage-asset-modal');
|
||||
storageForm.reset();
|
||||
|
||||
if (asset) {
|
||||
document.getElementById('storage-modal-title')!.textContent = '스토리지 상세 정보 수정';
|
||||
deleteBtn.style.display = 'block';
|
||||
|
||||
(document.getElementById('storage-asset-id') as HTMLInputElement).value = asset.id;
|
||||
(document.getElementById('storage-법인') as HTMLSelectElement).value = asset.법인;
|
||||
(document.getElementById('storage-유형') as HTMLSelectElement).value = asset.storage유형 || 'NAS';
|
||||
(document.getElementById('storage-자산코드') as HTMLInputElement).value = asset.자산코드;
|
||||
(document.getElementById('storage-명칭') as HTMLInputElement).value = asset.명칭;
|
||||
(document.getElementById('storage-위치') as HTMLInputElement).value = asset.위치 || '';
|
||||
(document.getElementById('storage-모델명') as HTMLInputElement).value = asset.모델명 || '';
|
||||
(document.getElementById('storage-용량') as HTMLInputElement).value = asset.용량 || '';
|
||||
(document.getElementById('storage-담당자_정') as HTMLInputElement).value = asset.담당자_정 || '';
|
||||
(document.getElementById('storage-담당자_부') as HTMLInputElement).value = asset.담당자_부 || '';
|
||||
(document.getElementById('storage-IP주소') as HTMLInputElement).value = asset.IP주소 || '';
|
||||
(document.getElementById('storage-MAC주소') as HTMLInputElement).value = asset.MACaddress || '';
|
||||
(document.getElementById('storage-구매일') as HTMLInputElement).value = asset.구매일 || '';
|
||||
(document.getElementById('storage-금액') as HTMLInputElement).value = asset.금액 ? Number(asset.금액.replace(/,/g, '')).toLocaleString() : '';
|
||||
(document.getElementById('storage-납품업체') as HTMLInputElement).value = asset.납품업체 || '';
|
||||
(document.getElementById('storage-품의서명') as HTMLElement).innerText = asset.품의서명 ? `📎${asset.품의서명}` : '';
|
||||
} else {
|
||||
document.getElementById('storage-modal-title')!.textContent = '새 스토리지 자산 추가';
|
||||
deleteBtn.style.display = 'none';
|
||||
(document.getElementById('storage-asset-id') as HTMLInputElement).value = '';
|
||||
(document.getElementById('storage-법인') as HTMLSelectElement).value = '한맥';
|
||||
(document.getElementById('storage-유형') as HTMLSelectElement).value = 'NAS';
|
||||
(document.getElementById('storage-품의서명') as HTMLElement).innerText = '';
|
||||
}
|
||||
}
|
||||
37
src/components/Sidebar.ts
Normal file
37
src/components/Sidebar.ts
Normal file
@@ -0,0 +1,37 @@
|
||||
import { state } from '../state';
|
||||
|
||||
export function initSidebar(renderContent: () => void) {
|
||||
const navItems = document.querySelectorAll('.nav-list li');
|
||||
const titleElement = document.getElementById('current-tab-title') as HTMLHeadingElement;
|
||||
const btnAddAsset = document.getElementById('btn-add-asset') as HTMLButtonElement;
|
||||
|
||||
navItems.forEach(item => {
|
||||
item.addEventListener('click', () => {
|
||||
// 탭 UI 업데이트
|
||||
navItems.forEach(nav => nav.classList.remove('active'));
|
||||
item.classList.add('active');
|
||||
|
||||
// 상태 업데이트
|
||||
state.activeCategory = item.getAttribute('data-category') as 'hw' | 'sw';
|
||||
state.activeSubTab = item.getAttribute('data-tab') || '대시보드';
|
||||
|
||||
// 타이틀 업데이트 (Deep Green 포인트 컬러 유지)
|
||||
const catName = state.activeCategory === 'hw' ? '하드웨어' : '소프트웨어';
|
||||
if (titleElement) {
|
||||
titleElement.textContent = `${catName} / ${state.activeSubTab}`;
|
||||
}
|
||||
|
||||
// 추가 버튼 노출 여부 (대시보드에서는 숨김)
|
||||
if (btnAddAsset) {
|
||||
if (state.activeSubTab === '대시보드') {
|
||||
btnAddAsset.classList.add('hidden');
|
||||
} else {
|
||||
btnAddAsset.classList.remove('hidden');
|
||||
}
|
||||
}
|
||||
|
||||
// 화면 리렌더링
|
||||
renderContent();
|
||||
});
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user