Taehoon/ITAM
2
0
Fork 0
Code Issues 15 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 서버 자산 관리 리스트 고도화 및 3개 관리대장 데이터 통합

Browse Source
This commit is contained in:
이태훈
2026-04-14 18:01:52 +09:00
parent e4914ee66d
commit 157330b06d
8 changed files with 2054 additions and 457 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
src/components/Modal/HWModal.ts
View File

@@ -2,6 +2,27 @@ import { state } from '../../state';
import { HardwareAsset } from '../../excelHandler';
import { openModal } from './BaseModal';
/**
* 폼의 모든 입력 필드를 활성화/비활성화 처리
*/
function setFormReadOnly(form: HTMLFormElement, isReadOnly: boolean) {
const inputs = form.querySelectorAll('input, select, textarea');
inputs.forEach(input => {
if (input.type === 'file') {
(input as HTMLElement).style.display = isReadOnly ? 'none' : 'block';
return;
}
if (isReadOnly) {
(input as HTMLElement).setAttribute('readonly', 'true');
if (input.tagName === 'SELECT') (input as HTMLSelectElement).disabled = true;
} else {
(input as HTMLElement).removeAttribute('readonly');
if (input.tagName === 'SELECT') (input as HTMLSelectElement).disabled = false;
}
});
}
/**
* 하드웨어(서버, 전산비품 등) 모달 초기화 및 로직 제어
*/
@@ -10,33 +31,56 @@ export function initHWModal(renderContent: () => void, closeModals: () => void)
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 (btnSaveHw.textContent === '수정') {
setFormReadOnly(hwForm, false);
btnSaveHw.textContent = '저장';
return;
}
// 현재 버튼이 '저장' 상태인 경우 (실제 저장 로직)
if (!hwForm.checkValidity()) { hwForm.reportValidity(); return; }
const id = (document.getElementById('hw-asset-id') as HTMLInputElement).value;
const type = (document.getElementById('hw-asset-type') 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,
type: type,
법인: (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,
관리자: (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,
IP2: (document.getElementById('hw-IP2') as HTMLInputElement).value,
MACaddress: (document.getElementById('hw-MACaddress') as HTMLInputElement).value,
OS: (document.getElementById('hw-OS') as HTMLInputElement).value,
CPU: (document.getElementById('hw-CPU') as HTMLInputElement).value,
RAM: (document.getElementById('hw-RAM') as HTMLInputElement).value,
SSD1: (document.getElementById('hw-SSD1') as HTMLInputElement).value,
SSD2: (document.getElementById('hw-SSD2') 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-용도') as HTMLInputElement).value,
상세: (document.getElementById('hw-상세') as HTMLInputElement).value,
원격접속: (document.getElementById('hw-원격접속') as HTMLInputElement).value,
서버ID: (document.getElementById('hw-서버ID') as HTMLInputElement).value,
서버PW: (document.getElementById('hw-서버PW') as HTMLInputElement).value,
비고: (document.getElementById('hw-비고') as HTMLInputElement).value,
품의서명,
비품유형: (document.getElementById('hw-asset-type') as HTMLInputElement).value === '전산비품'
? (document.getElementById('hw-비품유형') as HTMLSelectElement).value : undefined
비품유형: type === '전산비품' ? (document.getElementById('hw-비품유형') as HTMLSelectElement).value : undefined,
storage유형: (document.getElementById('hw-용도') as HTMLInputElement).value
};
if (id) {
@@ -64,49 +108,75 @@ export function initHWModal(renderContent: () => void, closeModals: () => void)
/**
* 하드웨어 상세 모달 열기
* @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')!;
const btnSaveHw = document.getElementById('btn-save-hw-asset') as HTMLButtonElement;
const currentType = asset ? asset.type : state.activeSubTab;
openModal('hw-asset-modal');
hwForm.reset();
// 타입에 따른 필드 노출 제어
const serverFields = document.querySelectorAll('.server-only');
const nonServerFields = document.querySelectorAll('.non-server');
if (currentType === '서버') {
serverFields.forEach(el => (el as HTMLElement).style.display = 'flex');
nonServerFields.forEach(el => (el as HTMLElement).style.display = 'none');
} else {
serverFields.forEach(el => (el as HTMLElement).style.display = 'none');
nonServerFields.forEach(el => (el as HTMLElement).style.display = 'flex');
}
if (asset) {
document.getElementById('hw-modal-title')!.textContent = '자산 상세 정보 수정';
document.getElementById('hw-modal-title')!.textContent = `${currentType} 상세 정보 수정`;
deleteBtn.style.display = 'block';
btnSaveHw.textContent = '수정';
setFormReadOnly(hwForm, true); // 수정 시 초기 상태는 읽기 전용
(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.자산코드 || '';
(document.getElementById('hw-명칭') as HTMLInputElement).value = asset.명칭 || '';
(document.getElementById('hw-위치') as HTMLInputElement).value = asset.위치 || '';
(document.getElementById('hw-담당자_정') as HTMLInputElement).value = asset.담당자_정 || asset.관리자 || '';
(document.getElementById('hw-담당자_부') as HTMLInputElement).value = asset.담당자_부 || '';
(document.getElementById('hw-IP주소') as HTMLInputElement).value = asset.IP주소 || '';
(document.getElementById('hw-IP2') as HTMLInputElement).value = asset.IP2 || '';
(document.getElementById('hw-MACaddress') as HTMLInputElement).value = asset.MACaddress || '';
(document.getElementById('hw-OS') as HTMLInputElement).value = asset.OS || '';
(document.getElementById('hw-CPU') as HTMLInputElement).value = asset.CPU || '';
(document.getElementById('hw-RAM') as HTMLInputElement).value = asset.RAM || '';
(document.getElementById('hw-SSD1') as HTMLInputElement).value = asset.SSD1 || '';
(document.getElementById('hw-SSD2') as HTMLInputElement).value = asset.SSD2 || '';
(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 HTMLInputElement).value = asset.납품업체 || '';
(document.getElementById('hw-용도') as HTMLInputElement).value = asset.용도 || asset.storage유형 || '';
(document.getElementById('hw-상세') as HTMLInputElement).value = asset.상세 || '';
(document.getElementById('hw-원격접속') as HTMLInputElement).value = asset.원격접속 || '';
(document.getElementById('hw-서버ID') as HTMLInputElement).value = asset.서버ID || '';
(document.getElementById('hw-서버PW') as HTMLInputElement).value = asset.서버PW || '';
(document.getElementById('hw-비고') as HTMLInputElement).value = asset.비고 || '';
(document.getElementById('hw-품의서명') as HTMLElement).innerText = asset.품의서명 ? `📎${asset.품의서명}` : '';
(document.getElementById('hw-비품유형') as HTMLSelectElement).value = asset.비품유형 || '노트북';
if (currentType === '전산비품') {
(document.getElementById('hw-비품유형') as HTMLSelectElement).value = asset.비품유형 || '노트북';
}
} else {
document.getElementById('hw-modal-title')!.textContent = `새 ${state.activeSubTab} 자산 추가`;
document.getElementById('hw-modal-title')!.textContent = `새 ${currentType} 자산 추가`;
deleteBtn.style.display = 'none';
btnSaveHw.textContent = '저장';
setFormReadOnly(hwForm, false); // 신규 등록 시 편집 가능 상태
(document.getElementById('hw-asset-id') as HTMLInputElement).value = '';
(document.getElementById('hw-asset-type') as HTMLInputElement).value = state.activeSubTab;
(document.getElementById('hw-asset-type') as HTMLInputElement).value = currentType;
(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';
}
document.getElementById('hw-비품유형-group')!.style.display = (currentType === '전산비품') ? 'block' : 'none';
}