style: revert content/logic to main while preserving Vercel UI styles
- Reverted HWModal to unified form structure from main branch - Restored original field positions and visibility logic in all modals - Applied Vercel-inspired CSS classes and removed legacy inline styles - Restored SwDashboard 2x2 layout from main - Cleaned up unused modular form files - Fixed TypeError related to ASSET_MFR schema key
This commit is contained in:
@@ -111,9 +111,16 @@ export function closeModals() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export function initBaseModal() {
|
export function initBaseModal() {
|
||||||
// ESC 키로 모든 모달 닫기
|
// ESC 키로 모든 모달 닫기 (위치보기 팝업이 있으면 그것부터 닫음)
|
||||||
window.addEventListener('keydown', (e) => {
|
window.addEventListener('keydown', (e) => {
|
||||||
if (e.key === 'Escape') closeModals();
|
if (e.key === 'Escape') {
|
||||||
|
const picker = document.querySelector('.image-picker-overlay');
|
||||||
|
if (picker) {
|
||||||
|
picker.remove();
|
||||||
|
} else {
|
||||||
|
closeModals();
|
||||||
|
}
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
return { closeAllModals: closeModals };
|
return { closeAllModals: closeModals };
|
||||||
|
|||||||
@@ -2,7 +2,7 @@ import { state, saveAsset, deleteAsset } from '../../core/state';
|
|||||||
import { BaseModal } from './BaseModal';
|
import { BaseModal } from './BaseModal';
|
||||||
import { CORP_LIST } from './SharedData';
|
import { CORP_LIST } from './SharedData';
|
||||||
import { generateOptionsHTML, setFieldValue, getFieldValue } from './ModalUtils';
|
import { generateOptionsHTML, setFieldValue, getFieldValue } from './ModalUtils';
|
||||||
import { createIcons, X, Save, Database, CalendarClock, Edit2, History, Plus } from 'lucide';
|
import { createIcons, X, Save, History, Plus } from 'lucide';
|
||||||
import { formatExcelDate } from '../../core/excelHandler';
|
import { formatExcelDate } from '../../core/excelHandler';
|
||||||
import { UI_TEXT } from '../../core/schema';
|
import { UI_TEXT } from '../../core/schema';
|
||||||
|
|
||||||
@@ -16,15 +16,15 @@ class DomainAssetModal extends BaseModal {
|
|||||||
<div id="domain-asset-modal" class="modal-overlay hidden">
|
<div id="domain-asset-modal" class="modal-overlay hidden">
|
||||||
<div class="modal-content wide">
|
<div class="modal-content wide">
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
<h2 id="domain-modal-title">${this.title}</h2>
|
<h2 id="domain-modal-title" class="modal-title">${this.title}</h2>
|
||||||
<button id="btn-close-domain-modal" class="btn-icon" aria-label="닫기"><i data-lucide="x"></i></button>
|
<button id="btn-close-domain-modal" class="btn-icon" aria-label="닫기">×</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-body">
|
<div class="modal-body">
|
||||||
<div class="modal-body-split">
|
<div class="modal-body-split">
|
||||||
<div class="modal-form-area">
|
<div class="modal-form-area">
|
||||||
<form id="domain-asset-form" class="grid-form">
|
<form id="domain-asset-form" class="grid-form">
|
||||||
<input type="hidden" id="domain-id" name="id" />
|
<input type="hidden" id="domain-id" name="id" />
|
||||||
|
|
||||||
<div class="form-section-title">기본 정보</div>
|
<div class="form-section-title">기본 정보</div>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label>구분</label>
|
<label>구분</label>
|
||||||
@@ -58,7 +58,7 @@ class DomainAssetModal extends BaseModal {
|
|||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label>비용 (연간/월간)</label>
|
<label>비용 (연간/월간)</label>
|
||||||
<input type="text" id="domain-price" name="price" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/\\\\B(?=(\\\\d{3})+(?!\\\\d))/g, ',')" />
|
<input type="text" id="domain-price" name="price" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',')" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-section-title">담당자 및 비고</div>
|
<div class="form-section-title">담당자 및 비고</div>
|
||||||
@@ -78,9 +78,9 @@ class DomainAssetModal extends BaseModal {
|
|||||||
</div>
|
</div>
|
||||||
<div class="modal-history-area">
|
<div class="modal-history-area">
|
||||||
<div class="history-header">
|
<div class="history-header">
|
||||||
<h3><i data-lucide="history" style="width:16px; height:16px;"></i> 변경 이력</h3>
|
<h3><i data-lucide="history"></i> 변경 이력</h3>
|
||||||
<button type="button" id="btn-add-domain-log" class="btn btn-outline btn-sm">
|
<button type="button" id="btn-add-domain-log" class="btn btn-outline btn-sm">
|
||||||
이력 추가 <i data-lucide="plus" style="width:14px; height:14px;"></i>
|
이력 추가 <i data-lucide="plus"></i>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div id="domain-history-list" class="history-timeline"></div>
|
<div id="domain-history-list" class="history-timeline"></div>
|
||||||
@@ -141,7 +141,7 @@ class DomainAssetModal extends BaseModal {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
createIcons({ icons: { History, Plus, Save, CalendarClock, Database } });
|
createIcons({ icons: { History, Plus, Save, X } });
|
||||||
}
|
}
|
||||||
|
|
||||||
protected fillFormData(asset: any): void {
|
protected fillFormData(asset: any): void {
|
||||||
@@ -163,7 +163,7 @@ class DomainAssetModal extends BaseModal {
|
|||||||
protected onAfterOpen(asset: any, mode: string): void {
|
protected onAfterOpen(asset: any, mode: string): void {
|
||||||
const titleEl = document.getElementById('domain-modal-title');
|
const titleEl = document.getElementById('domain-modal-title');
|
||||||
if (titleEl) titleEl.textContent = (mode === 'add') ? '신규 도메인 등록' : '도메인 정보 상세';
|
if (titleEl) titleEl.textContent = (mode === 'add') ? '신규 도메인 등록' : '도메인 정보 상세';
|
||||||
|
|
||||||
const deleteBtn = document.getElementById('btn-delete-domain-asset');
|
const deleteBtn = document.getElementById('btn-delete-domain-asset');
|
||||||
if (deleteBtn) deleteBtn.style.display = (mode === 'add') ? 'none' : 'block';
|
if (deleteBtn) deleteBtn.style.display = (mode === 'add') ? 'none' : 'block';
|
||||||
}
|
}
|
||||||
@@ -173,16 +173,10 @@ class DomainAssetModal extends BaseModal {
|
|||||||
if (!container) return;
|
if (!container) return;
|
||||||
const logs = (state.masterData.logs || []).filter(l => l.assetId === assetId);
|
const logs = (state.masterData.logs || []).filter(l => l.assetId === assetId);
|
||||||
if (logs.length === 0) { container.innerHTML = '<div class="empty-history">이력이 없습니다.</div>'; return; }
|
if (logs.length === 0) { container.innerHTML = '<div class="empty-history">이력이 없습니다.</div>'; return; }
|
||||||
container.innerHTML = logs.map(l => `<div class=\"history-item\"><div class=\"history-date\">${l.date}</div><div class=\"history-user\">${l.user}</div><div class=\"history-details\">${l.details}</div></div>`).join('');
|
container.innerHTML = logs.map(l => `<div class="history-item"><div class="history-date">${l.date}</div><div class="history-user">${l.user}</div><div class="history-details">${l.details}</div></div>`).join('');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export const domainModal = new DomainAssetModal();
|
export const domainModal = new DomainAssetModal();
|
||||||
|
export function initDomainModal(onSave: () => void, closeModals: () => void) { domainModal.init(onSave, closeModals); }
|
||||||
export function initDomainModal(onSave: () => void, closeModals: () => void) {
|
export function openDomainModal(asset: any, mode: 'view' | 'edit' | 'add' = 'view') { domainModal.open(asset, mode); }
|
||||||
domainModal.init(onSave, closeModals);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function openDomainModal(asset: any, mode: 'view' | 'edit' | 'add' = 'view') {
|
|
||||||
domainModal.open(asset, mode);
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -1,38 +0,0 @@
|
|||||||
import { ASSET_SCHEMA } from '../../../core/schema';
|
|
||||||
import { generateOptionsHTML } from '../ModalUtils';
|
|
||||||
import { CORP_LIST, ORG_LIST } from '../SharedData';
|
|
||||||
|
|
||||||
export function renderCommonHwFields(): string {
|
|
||||||
return `
|
|
||||||
<div class="form-section-title">구매 및 증빙 정보</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label>${ASSET_SCHEMA.PURCHASE_DATE.ui}</label>
|
|
||||||
<input type="text" id="hw-purchase_date" name="purchase_date" placeholder="YYYY-MM-DD" />
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label>${ASSET_SCHEMA.PURCHASE_VENDOR.ui}</label>
|
|
||||||
<input type="text" id="hw-purchase_vendor" name="purchase_vendor" />
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label>${ASSET_SCHEMA.PURCHASE_AMOUNT.ui}</label>
|
|
||||||
<input type="text" id="hw-purchase_amount" name="purchase_amount" placeholder="0" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/\\\\B(?=(\\\\d{3})+(?!\\\\d))/g, ',')" />
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label>${ASSET_SCHEMA.APPROVAL_DOC.ui} (첨부파일)</label>
|
|
||||||
<div class="file-upload-wrapper">
|
|
||||||
<input type="file" id="hw-approval_document_file" style="display:none;" />
|
|
||||||
<div class="input-with-btn">
|
|
||||||
<button type="button" id="btn-file-select" onclick="document.getElementById('hw-approval_document_file').click()" class="btn btn-outline btn-loc-action">
|
|
||||||
<span id="hw-file-name-display">파일 선택...</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<input type="hidden" id="hw-approval_document" name="approval_document" />
|
|
||||||
<div id="hw-file-link-container"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="form-group full-width">
|
|
||||||
<label>${ASSET_SCHEMA.MEMO.ui}</label>
|
|
||||||
<textarea id="hw-memo" name="memo" rows="3"></textarea>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
@@ -1,72 +0,0 @@
|
|||||||
import { ASSET_SCHEMA } from '../../../core/schema';
|
|
||||||
import { generateOptionsHTML } from '../ModalUtils';
|
|
||||||
import { CORP_LIST, ORG_LIST, HW_STATUS_LIST } from '../SharedData';
|
|
||||||
|
|
||||||
export function renderPcForm(): string {
|
|
||||||
return `
|
|
||||||
<div class="form-section-title">기본 정보 (PC/노트북)</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label>${ASSET_SCHEMA.ASSET_CODE.ui}</label>
|
|
||||||
<div class="input-with-btn">
|
|
||||||
<input type="text" id="hw-asset_code" name="asset_code" placeholder="자동 생성" readonly />
|
|
||||||
<button type="button" id="btn-gen-hw-code" class="btn btn-outline">생성</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label>${ASSET_SCHEMA.PURCHASE_CORP.ui}</label>
|
|
||||||
<select id="hw-purchase_corp" name="purchase_corp">${generateOptionsHTML(CORP_LIST)}</select>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label>${ASSET_SCHEMA.HW_STATUS.ui}</label>
|
|
||||||
<select id="hw-hw_status" name="hw_status">${generateOptionsHTML(HW_STATUS_LIST)}</select>
|
|
||||||
</div>
|
|
||||||
<div class="form-group full-width">
|
|
||||||
<label>${ASSET_SCHEMA.ASSET_PURPOSE.ui}</label>
|
|
||||||
<input type="text" id="hw-asset_purpose" name="asset_purpose" placeholder="자산의 용도를 입력하세요" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-section-title">사용자 및 조직</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label>${ASSET_SCHEMA.CURRENT_DEPT.ui}</label>
|
|
||||||
<select id="hw-current_dept" name="current_dept">${generateOptionsHTML(ORG_LIST)}</select>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label>${ASSET_SCHEMA.CURRENT_USER.ui}</label>
|
|
||||||
<input type="text" id="hw-user_current" name="user_current" />
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label>${ASSET_SCHEMA.USER_POSITION.ui}</label>
|
|
||||||
<input type="text" id="hw-user_position" name="user_position" />
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label>${ASSET_SCHEMA.EMP_NO.ui}</label>
|
|
||||||
<input type="text" id="hw-emp_no" name="emp_no" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-section-title">시스템 사양</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label>${ASSET_SCHEMA.MODEL_NAME.ui}</label>
|
|
||||||
<input type="text" id="hw-model_name" name="model_name" />
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label>${ASSET_SCHEMA.OS.ui}</label>
|
|
||||||
<input type="text" id="hw-os" name="os" />
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label>${ASSET_SCHEMA.CPU.ui}</label>
|
|
||||||
<input type="text" id="hw-cpu" name="cpu" />
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label>${ASSET_SCHEMA.RAM.ui}</label>
|
|
||||||
<input type="text" id="hw-ram" name="ram" />
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label>${ASSET_SCHEMA.GPU.ui}</label>
|
|
||||||
<input type="text" id="hw-gpu" name="gpu" />
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label>${ASSET_SCHEMA.MAC_ADDR.ui}</label>
|
|
||||||
<input type="text" id="hw-mac_address" name="mac_address" />
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
@@ -1,90 +0,0 @@
|
|||||||
import { ASSET_SCHEMA } from '../../../core/schema';
|
|
||||||
import { generateOptionsHTML } from '../ModalUtils';
|
|
||||||
import { CORP_LIST, LOCATION_DATA, HW_STATUS_LIST } from '../SharedData';
|
|
||||||
|
|
||||||
export function renderServerForm(): string {
|
|
||||||
return `
|
|
||||||
<div class="form-section-title">기본 정보 (서버)</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label>${ASSET_SCHEMA.ASSET_CODE.ui}</label>
|
|
||||||
<div class="input-with-btn">
|
|
||||||
<input type="text" id="hw-asset_code" name="asset_code" placeholder="자동 생성" readonly />
|
|
||||||
<button type="button" id="btn-gen-hw-code" class="btn btn-outline">생성</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label>${ASSET_SCHEMA.PURCHASE_CORP.ui}</label>
|
|
||||||
<select id="hw-purchase_corp" name="purchase_corp">${generateOptionsHTML(CORP_LIST)}</select>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label>${ASSET_SCHEMA.HW_STATUS.ui}</label>
|
|
||||||
<select id="hw-hw_status" name="hw_status">${generateOptionsHTML(HW_STATUS_LIST)}</select>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label>${ASSET_SCHEMA.MONITORING.ui}</label>
|
|
||||||
<select id="hw-monitoring" name="monitoring">
|
|
||||||
<option value="비대상">비대상</option>
|
|
||||||
<option value="대상">대상</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div class="form-group full-width">
|
|
||||||
<label>${ASSET_SCHEMA.ASSET_PURPOSE.ui}</label>
|
|
||||||
<input type="text" id="hw-asset_purpose" name="asset_purpose" placeholder="서버의 용도를 입력하세요" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-section-title">시스템 사양</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label>${ASSET_SCHEMA.MODEL_NAME.ui}</label>
|
|
||||||
<input type="text" id="hw-model_name" name="model_name" />
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label>${ASSET_SCHEMA.OS.ui}</label>
|
|
||||||
<input type="text" id="hw-os" name="os" />
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label>${ASSET_SCHEMA.CPU.ui}</label>
|
|
||||||
<input type="text" id="hw-cpu" name="cpu" />
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label>${ASSET_SCHEMA.RAM.ui}</label>
|
|
||||||
<input type="text" id="hw-ram" name="ram" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-section-title">네트워크 및 접속 정보</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label>${ASSET_SCHEMA.IP_ADDR.ui}</label>
|
|
||||||
<input type="text" id="hw-ip_address" name="ip_address" />
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label>${ASSET_SCHEMA.IP_ADDR2.ui}</label>
|
|
||||||
<input type="text" id="hw-ip_address_2" name="ip_address_2" />
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label>${ASSET_SCHEMA.REMOTE_TOOL.ui}</label>
|
|
||||||
<input type="text" id="hw-remote_tool" name="remote_tool" />
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label>${ASSET_SCHEMA.REMOTE_ID.ui}</label>
|
|
||||||
<input type="text" id="hw-remote_id" name="remote_id" />
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label>${ASSET_SCHEMA.REMOTE_PW.ui}</label>
|
|
||||||
<input type="text" id="hw-remote_pw" name="remote_pw" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-section-title">설치 위치</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label>건물/위치</label>
|
|
||||||
<select id="hw-bldg-select" name="location">${generateOptionsHTML(Object.keys(LOCATION_DATA))}</select>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label>${ASSET_SCHEMA.LOC_DETAIL.ui}</label>
|
|
||||||
<div class="input-with-btn">
|
|
||||||
<select id="hw-location_detail" name="location_detail" style="flex: 1;"><option value="">선택</option></select>
|
|
||||||
<button type="button" id="btn-reg-loc-map" class="btn btn-primary hidden">위치등록</button>
|
|
||||||
<button type="button" id="btn-view-loc-map" class="btn btn-primary hidden">위치보기</button>
|
|
||||||
</div>
|
|
||||||
<input type="hidden" id="hw-loc_x" name="loc_x" /><input type="hidden" id="hw-loc_y" name="loc_y" /><input type="hidden" id="hw-location_photo" name="location_photo" />
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
@@ -1,24 +1,25 @@
|
|||||||
import { state, saveAsset, deleteAsset } from '../../core/state';
|
import { state, saveAsset, deleteAsset } from '../../core/state';
|
||||||
import { ASSET_SCHEMA, UI_TEXT } from '../../core/schema';
|
import { ASSET_SCHEMA, UI_TEXT } from '../../core/schema';
|
||||||
import {
|
import { calculatePcScoreDeductive, getPcGrade } from '../../core/utils';
|
||||||
generateOptionsHTML,
|
import {
|
||||||
setFieldValue,
|
generateOptionsHTML,
|
||||||
getFieldValue,
|
setFieldValue,
|
||||||
parseAndSetLocation,
|
getFieldValue,
|
||||||
bindLocationEvents,
|
parseAndSetLocation,
|
||||||
|
bindLocationEvents,
|
||||||
applyDateMask
|
applyDateMask
|
||||||
} from './ModalUtils';
|
} from './ModalUtils';
|
||||||
import { CORP_LIST, LOCATION_DATA, CATEGORY_TYPE_MAP, HW_STATUS_LIST, ORG_LIST, IMAGE_LOCATIONS, TYPE_PREFIX_MAP } from './SharedData';
|
import { CORP_LIST, LOCATION_DATA, CATEGORY_TYPE_MAP, HW_STATUS_LIST, ORG_LIST, IMAGE_LOCATIONS, TYPE_PREFIX_MAP } from './SharedData';
|
||||||
import { BaseModal } from './BaseModal';
|
import { BaseModal } from './BaseModal';
|
||||||
import { renderPcForm } from './Forms/PcForm';
|
|
||||||
import { renderServerForm } from './Forms/ServerForm';
|
|
||||||
import { renderCommonHwFields } from './Forms/CommonHwFields';
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 하드웨어 자산 상세 모달 (Modular Edition)
|
* 하드웨어 자산 상세 모달 (Styled Main Edition)
|
||||||
|
* - 내용/순서는 main 버전 준수
|
||||||
|
* - 스타일은 ux_setting의 Vercel 디자인 준수
|
||||||
*/
|
*/
|
||||||
class HwAssetModal extends BaseModal {
|
class HwAssetModal extends BaseModal {
|
||||||
private dynamicMapConfig: Record<string, any[]> = {};
|
private dynamicMapConfig: Record<string, any[]> = {};
|
||||||
|
private masterComponents: any[] = [];
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
super('hw', '자산 상세 정보');
|
super('hw', '자산 상세 정보');
|
||||||
@@ -29,7 +30,7 @@ class HwAssetModal extends BaseModal {
|
|||||||
<div id="hw-asset-modal" class="modal-overlay hidden">
|
<div id="hw-asset-modal" class="modal-overlay hidden">
|
||||||
<div class="modal-content wide">
|
<div class="modal-content wide">
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
<div class="header-left">
|
<div class="header-left" style="display: flex; align-items: center; gap: 0.75rem;">
|
||||||
<h2 id="hw-modal-title" class="modal-title">${this.title}</h2>
|
<h2 id="hw-modal-title" class="modal-title">${this.title}</h2>
|
||||||
<div class="category-badge-wrapper" id="hw-category-badge-container"></div>
|
<div class="category-badge-wrapper" id="hw-category-badge-container"></div>
|
||||||
</div>
|
</div>
|
||||||
@@ -40,8 +41,22 @@ class HwAssetModal extends BaseModal {
|
|||||||
<div class="modal-form-area">
|
<div class="modal-form-area">
|
||||||
<form id="hw-asset-form" class="grid-form">
|
<form id="hw-asset-form" class="grid-form">
|
||||||
<input type="hidden" id="hw-id" name="id" />
|
<input type="hidden" id="hw-id" name="id" />
|
||||||
|
<input type="hidden" id="hw-remotes-data" name="remotes" />
|
||||||
<!-- 기본 분류 필드 (항상 표시) -->
|
<input type="hidden" id="hw-volumes-data" name="volumes" />
|
||||||
|
|
||||||
|
<!-- [SECTION 1] 기본 관리 정보 -->
|
||||||
|
<div class="form-section-title">기본 관리 정보</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>${ASSET_SCHEMA.ASSET_CODE.ui}</label>
|
||||||
|
<div class="input-with-btn">
|
||||||
|
<input type="text" id="hw-asset_code" name="asset_code" placeholder="자동 생성" readonly />
|
||||||
|
<button type="button" id="btn-gen-hw-code" class="btn btn-outline">생성</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>${ASSET_SCHEMA.PURCHASE_CORP.ui}</label>
|
||||||
|
<select id="hw-purchase_corp" name="purchase_corp">${generateOptionsHTML(CORP_LIST)}</select>
|
||||||
|
</div>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label>${ASSET_SCHEMA.CATEGORY.ui}</label>
|
<label>${ASSET_SCHEMA.CATEGORY.ui}</label>
|
||||||
<select id="hw-category" name="category">
|
<select id="hw-category" name="category">
|
||||||
@@ -55,19 +70,161 @@ class HwAssetModal extends BaseModal {
|
|||||||
<option value="">구분을 먼저 선택하세요</option>
|
<option value="">구분을 먼저 선택하세요</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
<hr class="form-divider" style="grid-column: 1 / -1; margin: 1rem 0; border: none; border-top: 1px solid var(--hairline);" />
|
<label>${ASSET_SCHEMA.HW_STATUS.ui}</label>
|
||||||
|
<select id="hw-hw_status" name="hw_status">${generateOptionsHTML(HW_STATUS_LIST)}</select>
|
||||||
<!-- 동적 폼 영역 -->
|
</div>
|
||||||
<div id="dynamic-form-content" class="dynamic-form-container" style="grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;">
|
<div class="form-group">
|
||||||
<div style="grid-column: 1 / -1; padding: 3rem; text-align: center; color: var(--mute);">
|
<label>${ASSET_SCHEMA.SERVICE_TYPE.ui}</label>
|
||||||
자산 구분을 선택하면 해당 서식이 표시됩니다.
|
<select id="hw-service_type" name="service_type">
|
||||||
</div>
|
<option value="외부">외부</option>
|
||||||
|
<option value="내부">내부</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="form-group full-width">
|
||||||
|
<label>${ASSET_SCHEMA.ASSET_PURPOSE.ui}</label>
|
||||||
|
<input type="text" id="hw-asset_purpose" name="asset_purpose" placeholder="자산의 용도를 입력하세요" />
|
||||||
|
</div>
|
||||||
|
<div class="form-group infra-only monitoring-field">
|
||||||
|
<label>${ASSET_SCHEMA.MONITORING.ui}</label>
|
||||||
|
<select id="hw-monitoring" name="monitoring">
|
||||||
|
<option value="비대상">비대상</option>
|
||||||
|
<option value="대상">대상</option>
|
||||||
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 공통 필드 영역 (구매 정보 등) -->
|
<!-- [SECTION 2] 조직 및 사용자 정보 -->
|
||||||
<div id="common-form-content" class="common-form-container hidden" style="grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;">
|
<div class="form-section-title">사용자 및 조직 정보</div>
|
||||||
${renderCommonHwFields()}
|
<div class="form-group">
|
||||||
|
<label>${ASSET_SCHEMA.CURRENT_DEPT.ui}</label>
|
||||||
|
<select id="hw-current_dept" name="current_dept">${generateOptionsHTML(ORG_LIST)}</select>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>${ASSET_SCHEMA.MANAGER_MAIN.ui}</label>
|
||||||
|
<input type="text" id="hw-manager_primary" name="manager_primary" />
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>${ASSET_SCHEMA.MANAGER_SUB.ui}</label>
|
||||||
|
<input type="text" id="hw-manager_secondary" name="manager_secondary" />
|
||||||
|
</div>
|
||||||
|
<div class="form-group personal-only">
|
||||||
|
<label>${ASSET_SCHEMA.CURRENT_USER.ui}</label>
|
||||||
|
<input type="text" id="hw-user_current" name="user_current" />
|
||||||
|
</div>
|
||||||
|
<div class="form-group personal-only">
|
||||||
|
<label>${ASSET_SCHEMA.USER_POSITION.ui}</label>
|
||||||
|
<input type="text" id="hw-user_position" name="user_position" />
|
||||||
|
</div>
|
||||||
|
<div class="form-group personal-only">
|
||||||
|
<label>${ASSET_SCHEMA.PREV_USER.ui}</label>
|
||||||
|
<input type="text" id="hw-previous_user" name="previous_user" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- [SECTION 3] 하드웨어 사양 -->
|
||||||
|
<div class="form-section-title hardware-section">시스템 사양 정보</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>${ASSET_SCHEMA.MODEL_NAME.ui}</label>
|
||||||
|
<input type="text" id="hw-model_name" name="model_name" />
|
||||||
|
</div>
|
||||||
|
<div class="form-group sn-only">
|
||||||
|
<label>${ASSET_SCHEMA.SERIAL_NUM.ui}</label>
|
||||||
|
<input type="text" id="hw-serial_num" name="serial_num" />
|
||||||
|
</div>
|
||||||
|
<div class="form-group spec-only">
|
||||||
|
<label>${ASSET_SCHEMA.OS.ui}</label>
|
||||||
|
<input type="text" id="hw-os" name="os" />
|
||||||
|
</div>
|
||||||
|
<div class="form-group spec-only" style="position: relative;">
|
||||||
|
<label>${ASSET_SCHEMA.CPU.ui}</label>
|
||||||
|
<input type="text" id="hw-cpu" name="cpu" autocomplete="off" />
|
||||||
|
<div id="hw-cpu-list" class="autocomplete-list hidden"></div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group spec-only" style="position: relative;">
|
||||||
|
<label>${ASSET_SCHEMA.RAM.ui}</label>
|
||||||
|
<input type="text" id="hw-ram" name="ram" autocomplete="off" />
|
||||||
|
<div id="hw-ram-list" class="autocomplete-list hidden"></div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group spec-only" style="position: relative;">
|
||||||
|
<label>${ASSET_SCHEMA.GPU.ui}</label>
|
||||||
|
<input type="text" id="hw-gpu" name="gpu" autocomplete="off" />
|
||||||
|
<div id="hw-gpu-list" class="autocomplete-list hidden"></div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group spec-only">
|
||||||
|
<label>적정성 등급</label>
|
||||||
|
<div id="hw-pc-grade-badge" class="badge">정보 부족</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group monitor-only">
|
||||||
|
<label>${ASSET_SCHEMA.MONITOR_INCH.ui}</label>
|
||||||
|
<input type="text" id="hw-monitor_inch" name="monitor_inch" />
|
||||||
|
</div>
|
||||||
|
<div class="form-group spec-only">
|
||||||
|
<label>${ASSET_SCHEMA.ASSET_MFR.ui}</label>
|
||||||
|
<input type="text" id="hw-asset_mfr" name="asset_mfr" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 동적 볼륨 정보 -->
|
||||||
|
<div class="form-group full-width spec-only">
|
||||||
|
<label>디스크 구성 (Volume)</label>
|
||||||
|
<div id="hw-volume-container" style="display: flex; flex-direction: column; gap: 8px;"></div>
|
||||||
|
<button type="button" id="btn-add-volume" class="btn btn-outline btn-sm" style="margin-top: 8px;">+ 볼륨 추가</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- [SECTION 4] 네트워크 및 원격 정보 -->
|
||||||
|
<div class="form-section-title net-only">네트워크 및 원격 관리</div>
|
||||||
|
<div class="form-group full-width net-only">
|
||||||
|
<label>접속 정보 (IP / MAC / Remote)</label>
|
||||||
|
<div id="hw-remote-info-container" style="display: flex; flex-direction: column; gap: 12px;"></div>
|
||||||
|
<button type="button" id="btn-add-remote-info" class="btn btn-outline btn-sm" style="margin-top: 8px;">+ 접속 정보 추가</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- [SECTION 5] 위치 정보 -->
|
||||||
|
<div class="form-section-title location-section">물리적 위치 정보</div>
|
||||||
|
<div class="form-group location-field">
|
||||||
|
<label>건물/층</label>
|
||||||
|
<select id="hw-bldg-select">${generateOptionsHTML(Object.keys(LOCATION_DATA))}</select>
|
||||||
|
</div>
|
||||||
|
<div class="form-group location-field">
|
||||||
|
<label>상세 위치</label>
|
||||||
|
<div class="input-with-btn">
|
||||||
|
<select id="hw-location_detail" name="location_detail" style="flex: 1;">
|
||||||
|
<option value="">층을 먼저 선택하세요</option>
|
||||||
|
</select>
|
||||||
|
<button type="button" id="btn-reg-loc-map" class="btn btn-outline hidden">위치 등록</button>
|
||||||
|
<button type="button" id="btn-view-loc-map" class="btn btn-outline hidden">위치 확인</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 숨김 처리된 좌표 필드 -->
|
||||||
|
<input type="hidden" id="hw-loc_x" name="loc_x" />
|
||||||
|
<input type="hidden" id="hw-loc_y" name="loc_y" />
|
||||||
|
<input type="hidden" id="hw-location_photo" name="location_photo" />
|
||||||
|
|
||||||
|
<!-- [SECTION 6] 구매 및 기타 정보 -->
|
||||||
|
<div class="form-section-title">구매 및 기타 정보</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>${ASSET_SCHEMA.PURCHASE_DATE.ui}</label>
|
||||||
|
<input type="text" id="hw-purchase_date" name="purchase_date" placeholder="YYYY-MM-DD" />
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>${ASSET_SCHEMA.PURCHASE_VENDOR.ui}</label>
|
||||||
|
<input type="text" id="hw-purchase_vendor" name="purchase_vendor" />
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>${ASSET_SCHEMA.PURCHASE_AMOUNT.ui}</label>
|
||||||
|
<input type="text" id="hw-purchase_amount" name="purchase_amount" />
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>${ASSET_SCHEMA.APPROVAL_DOC.ui}</label>
|
||||||
|
<div class="input-with-btn">
|
||||||
|
<input type="hidden" id="hw-approval_document" name="approval_document" />
|
||||||
|
<div id="hw-file-name-display" class="is-readonly-field" style="flex: 1; border: 1px solid var(--hairline); border-radius: 6px; padding: 0 12px; height: clamp(34px, 4.5vmin, 44px); display: flex; align-items: center; font-size: var(--fs-sm); color: var(--mute);">파일 선택...</div>
|
||||||
|
<div id="hw-file-link-container"></div>
|
||||||
|
<input type="file" id="hw-approval_document_file" style="display: none;" />
|
||||||
|
<button type="button" id="btn-file-select" class="btn btn-outline">파일 찾기</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group full-width">
|
||||||
|
<label>${ASSET_SCHEMA.MEMO.ui}</label>
|
||||||
|
<textarea id="hw-memo" name="memo" rows="3" placeholder="기타 참고 사항을 입력하세요"></textarea>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
@@ -75,7 +232,6 @@ class HwAssetModal extends BaseModal {
|
|||||||
<div class="modal-history-area">
|
<div class="modal-history-area">
|
||||||
<div class="history-header">
|
<div class="history-header">
|
||||||
<h3>자산 변동 이력</h3>
|
<h3>자산 변동 이력</h3>
|
||||||
<button type="button" id="btn-add-hw-log" class="btn btn-outline btn-sm">이력 추가</button>
|
|
||||||
</div>
|
</div>
|
||||||
<div id="hw-history-list" class="history-timeline"></div>
|
<div id="hw-history-list" class="history-timeline"></div>
|
||||||
</div>
|
</div>
|
||||||
@@ -84,86 +240,151 @@ class HwAssetModal extends BaseModal {
|
|||||||
<div class="modal-footer">
|
<div class="modal-footer">
|
||||||
<button id="btn-delete-hw-asset" class="btn btn-outline btn-danger">삭제</button>
|
<button id="btn-delete-hw-asset" class="btn btn-outline btn-danger">삭제</button>
|
||||||
<div class="footer-actions">
|
<div class="footer-actions">
|
||||||
<button id="btn-revert-hw-edit" class="btn btn-outline hidden">수정 취소</button>
|
|
||||||
<button id="btn-cancel-hw-modal" class="btn btn-outline">닫기</button>
|
<button id="btn-cancel-hw-modal" class="btn btn-outline">닫기</button>
|
||||||
<button id="btn-save-hw-asset" class="btn btn-primary">저장</button>
|
<button id="btn-save-hw-asset" class="btn btn-primary">저장</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<style>
|
||||||
|
.autocomplete-list {
|
||||||
|
position: absolute;
|
||||||
|
top: 100%;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
max-height: 150px;
|
||||||
|
overflow-y: auto;
|
||||||
|
background-color: white;
|
||||||
|
border: 1px solid var(--border-color, #E2E8F0);
|
||||||
|
border-top: none;
|
||||||
|
border-radius: 0 0 4px 4px;
|
||||||
|
z-index: 1000;
|
||||||
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
.autocomplete-item {
|
||||||
|
padding: 8px 12px;
|
||||||
|
font-size: 13px;
|
||||||
|
color: #334155;
|
||||||
|
cursor: pointer;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
.autocomplete-item:hover {
|
||||||
|
background-color: #F1F5F9;
|
||||||
|
color: #1E5149;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.hidden {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
private renderDynamicForm(category: string) {
|
|
||||||
const dynamicContainer = document.getElementById('dynamic-form-content');
|
|
||||||
const commonContainer = document.getElementById('common-form-content');
|
|
||||||
const badgeContainer = document.getElementById('hw-category-badge-container');
|
|
||||||
if (!dynamicContainer || !commonContainer || !badgeContainer) return;
|
|
||||||
|
|
||||||
if (!category) {
|
|
||||||
dynamicContainer.innerHTML = `<div style="grid-column: 1 / -1; padding: 3rem; text-align: center; color: var(--mute);">자산 구분을 선택하면 해당 서식이 표시됩니다.</div>`;
|
|
||||||
commonContainer.classList.add('hidden');
|
|
||||||
badgeContainer.innerHTML = '';
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
commonContainer.classList.remove('hidden');
|
|
||||||
badgeContainer.innerHTML = `<span class="badge badge-primary">${category}</span>`;
|
|
||||||
|
|
||||||
if (category === 'PC' || category === '노트북') {
|
|
||||||
dynamicContainer.innerHTML = renderPcForm();
|
|
||||||
} else if (category === '서버' || category === '스토리지' || category === '네트워크') {
|
|
||||||
dynamicContainer.innerHTML = renderServerForm();
|
|
||||||
} else {
|
|
||||||
// 기타 하드웨어 (업무지원장비 등) - 서버 폼의 기본 필드를 재활용하거나 범용 폼 사용
|
|
||||||
dynamicContainer.innerHTML = renderServerForm();
|
|
||||||
}
|
|
||||||
|
|
||||||
// 폼 변경 후 이벤트 재바인딩
|
|
||||||
this.rebindDynamicEvents();
|
|
||||||
}
|
|
||||||
|
|
||||||
private rebindDynamicEvents() {
|
|
||||||
const bldgSelect = document.getElementById('hw-bldg-select') as HTMLSelectElement;
|
|
||||||
if (bldgSelect) {
|
|
||||||
bindLocationEvents('hw-bldg-select', 'hw-location_detail', '', '');
|
|
||||||
bldgSelect.addEventListener('change', () => setTimeout(() => this.updateMapButtonVisibility(), 100));
|
|
||||||
document.getElementById('hw-location_detail')?.addEventListener('change', () => this.updateMapButtonVisibility());
|
|
||||||
}
|
|
||||||
|
|
||||||
const purchaseDate = document.getElementById('hw-purchase_date') as HTMLInputElement;
|
|
||||||
if (purchaseDate) applyDateMask(purchaseDate);
|
|
||||||
|
|
||||||
// 파일 업로드 이벤트 재연동
|
|
||||||
const fileInput = document.getElementById('hw-approval_document_file') as HTMLInputElement;
|
|
||||||
fileInput?.addEventListener('change', async (e) => this.handleFileUpload(e));
|
|
||||||
|
|
||||||
// 코드 생성 이벤트 재연동
|
|
||||||
document.getElementById('btn-gen-hw-code')?.addEventListener('click', () => this.handleGenerateCode());
|
|
||||||
|
|
||||||
// 위치 맵 관련 이벤트
|
|
||||||
document.getElementById('btn-reg-loc-map')?.addEventListener('click', (e) => this.handleRegLocMap(e));
|
|
||||||
document.getElementById('btn-view-loc-map')?.addEventListener('click', (e) => this.handleViewLocMap(e));
|
|
||||||
}
|
|
||||||
|
|
||||||
protected initChildLogic(onSave: () => void, closeModals: () => void): void {
|
protected initChildLogic(onSave: () => void, closeModals: () => void): void {
|
||||||
const saveBtn = document.getElementById('btn-save-hw-asset')!;
|
const saveBtn = document.getElementById('btn-save-hw-asset')!;
|
||||||
const revertBtn = document.getElementById('btn-revert-hw-edit')!;
|
|
||||||
const deleteBtn = document.getElementById('btn-delete-hw-asset')!;
|
const deleteBtn = document.getElementById('btn-delete-hw-asset')!;
|
||||||
const categorySelect = document.getElementById('hw-category') as HTMLSelectElement;
|
const categorySelect = document.getElementById('hw-category') as HTMLSelectElement;
|
||||||
const typeSelect = document.getElementById('hw-asset_type') as HTMLSelectElement;
|
const typeSelect = document.getElementById('hw-asset_type') as HTMLSelectElement;
|
||||||
|
const bldgSelect = document.getElementById('hw-bldg-select') as HTMLSelectElement;
|
||||||
|
const detailSelect = document.getElementById('hw-location_detail') as HTMLSelectElement;
|
||||||
|
|
||||||
|
this.fetchMapConfig();
|
||||||
|
this.fetchMasterComponents().then(() => {
|
||||||
|
this.bindAutocomplete('hw-cpu', 'hw-cpu-list', 'CPU');
|
||||||
|
this.bindAutocomplete('hw-ram', 'hw-ram-list', 'RAM');
|
||||||
|
this.bindAutocomplete('hw-gpu', 'hw-gpu-list', 'GPU');
|
||||||
|
});
|
||||||
|
|
||||||
categorySelect.addEventListener('change', () => {
|
categorySelect.addEventListener('change', () => {
|
||||||
const cat = categorySelect.value;
|
const cat = categorySelect.value;
|
||||||
const types = CATEGORY_TYPE_MAP[cat] || [];
|
const types = CATEGORY_TYPE_MAP[cat] || [];
|
||||||
typeSelect.innerHTML = types.length > 0 ? generateOptionsHTML(types, '', true) : '<option value="">구분을 먼저 선택하세요</option>';
|
typeSelect.innerHTML = types.length > 0 ? generateOptionsHTML(types, '', true) : '<option value="">구분을 먼저 선택하세요</option>';
|
||||||
this.renderDynamicForm(cat);
|
this.applyRoleVisibility();
|
||||||
if (this.currentAsset) {
|
|
||||||
// 새로 생성된 폼에 기존 데이터 다시 채우기
|
const badgeContainer = document.getElementById('hw-category-badge-container');
|
||||||
this.fillFormData(this.currentAsset);
|
if (badgeContainer) {
|
||||||
|
badgeContainer.innerHTML = cat ? `<span class="badge badge-primary">${cat}</span>` : '';
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
typeSelect.addEventListener('change', () => this.applyRoleVisibility());
|
||||||
|
|
||||||
|
bindLocationEvents('hw-bldg-select', 'hw-location_detail', '', '');
|
||||||
|
bldgSelect.addEventListener('change', () => setTimeout(() => this.updateMapButtonVisibility(), 100));
|
||||||
|
detailSelect.addEventListener('change', () => this.updateMapButtonVisibility());
|
||||||
|
|
||||||
|
applyDateMask(document.getElementById('hw-purchase_date') as HTMLInputElement);
|
||||||
|
|
||||||
|
document.getElementById('btn-gen-hw-code')?.addEventListener('click', async () => {
|
||||||
|
const cat = categorySelect.value;
|
||||||
|
if (!cat) { alert('구분을 먼저 선택해주세요.'); return; }
|
||||||
|
const prefix = TYPE_PREFIX_MAP[cat] || 'ETC';
|
||||||
|
const purchaseDate = (document.getElementById('hw-purchase_date') as HTMLInputElement)?.value || '';
|
||||||
|
try {
|
||||||
|
const res = await fetch(`http://${location.hostname}:3000/api/generate-asset-code?prefix=${prefix}&purchaseDate=${purchaseDate}`);
|
||||||
|
const data = await res.json();
|
||||||
|
if (data.nextCode) setFieldValue('hw-asset_code', data.nextCode);
|
||||||
|
} catch (err) { console.error('코드 생성 실패:', err); }
|
||||||
|
});
|
||||||
|
|
||||||
|
const fileSelectBtn = document.getElementById('btn-file-select');
|
||||||
|
const fileInput = document.getElementById('hw-approval_document_file') as HTMLInputElement;
|
||||||
|
fileSelectBtn?.addEventListener('click', () => fileInput.click());
|
||||||
|
fileInput?.addEventListener('change', async (e) => {
|
||||||
|
const file = (e.target as HTMLInputElement).files?.[0];
|
||||||
|
if (!file) return;
|
||||||
|
const fileNameDisplay = document.getElementById('hw-file-name-display');
|
||||||
|
const fileLinkContainer = document.getElementById('hw-file-link-container');
|
||||||
|
if (fileNameDisplay) fileNameDisplay.textContent = file.name;
|
||||||
|
const reader = new FileReader();
|
||||||
|
reader.onload = async () => {
|
||||||
|
try {
|
||||||
|
const res = await fetch(`http://${location.hostname}:3000/api/upload`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({ fileName: file.name, fileData: reader.result })
|
||||||
|
});
|
||||||
|
const data = await res.json();
|
||||||
|
if (data.success) {
|
||||||
|
setFieldValue('hw-approval_document', data.filePath);
|
||||||
|
if (fileLinkContainer) {
|
||||||
|
fileLinkContainer.innerHTML = `<a href="http://${location.hostname}:3000${data.filePath}" target="_blank" class="btn btn-outline btn-sm">[파일 보기]</a>`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (err) { console.error('파일 업로드 실패:', err); alert('파일 업로드 중 오류가 발생했습니다.'); }
|
||||||
|
};
|
||||||
|
reader.readAsDataURL(file);
|
||||||
|
});
|
||||||
|
|
||||||
|
document.getElementById('btn-reg-loc-map')?.addEventListener('click', async (e) => {
|
||||||
|
e.preventDefault(); e.stopPropagation();
|
||||||
|
const bldg = bldgSelect.value;
|
||||||
|
const detail = detailSelect.value;
|
||||||
|
await this.fetchMapConfig();
|
||||||
|
const images = this.getImagesForLocation(bldg, detail);
|
||||||
|
if (images) this.openImagePicker(images, `${detail} 위치 등록`);
|
||||||
|
});
|
||||||
|
|
||||||
|
document.getElementById('btn-view-loc-map')?.addEventListener('click', async (e) => {
|
||||||
|
e.preventDefault(); e.stopPropagation();
|
||||||
|
await this.fetchMapConfig();
|
||||||
|
const x = getFieldValue('hw-loc_x');
|
||||||
|
const y = getFieldValue('hw-loc_y');
|
||||||
|
const savedImg = getFieldValue('hw-location_photo');
|
||||||
|
const bldg = bldgSelect.value;
|
||||||
|
const detail = detailSelect.value;
|
||||||
|
const images = this.getImagesForLocation(bldg, detail);
|
||||||
|
if (images) {
|
||||||
|
const imgPath = savedImg && images.includes(savedImg) ? savedImg : images[0];
|
||||||
|
this.openImagePreview(imgPath, `${detail} 위치 확인`, x, y);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
document.getElementById('btn-add-volume')?.addEventListener('click', () => this.addVolumeRow());
|
||||||
|
document.getElementById('btn-add-remote-info')?.addEventListener('click', () => this.addRemoteInfoRow());
|
||||||
|
|
||||||
deleteBtn.addEventListener('click', async () => {
|
deleteBtn.addEventListener('click', async () => {
|
||||||
if (!this.currentAsset || !confirm(UI_TEXT.MESSAGES.CONFIRM_DELETE)) return;
|
if (!this.currentAsset || !confirm(UI_TEXT.MESSAGES.CONFIRM_DELETE)) return;
|
||||||
if (await deleteAsset(this.getCategoryKey(this.currentAsset), this.currentAsset.id)) {
|
if (await deleteAsset(this.getCategoryKey(this.currentAsset), this.currentAsset.id)) {
|
||||||
@@ -171,26 +392,42 @@ class HwAssetModal extends BaseModal {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
revertBtn.addEventListener('click', () => {
|
|
||||||
this.setEditLockMode('view');
|
|
||||||
if (this.currentAsset) this.fillFormData(this.currentAsset);
|
|
||||||
});
|
|
||||||
|
|
||||||
saveBtn.addEventListener('click', async () => {
|
saveBtn.addEventListener('click', async () => {
|
||||||
if (!this.currentAsset) return;
|
if (!this.currentAsset) return;
|
||||||
if (!this.isEditMode) {
|
|
||||||
this.setEditLockMode('edit');
|
// 동적 볼륨 데이터 수집
|
||||||
this.isEditMode = true;
|
const vols: any[] = [];
|
||||||
this.updateMapButtonVisibility();
|
document.querySelectorAll('#hw-volume-container .volume-row').forEach((row, idx) => {
|
||||||
this.toggleFileUploadUI(true);
|
const type = (row.querySelector('.vol-type') as HTMLSelectElement).value;
|
||||||
return;
|
const cap = (row.querySelector('.vol-cap') as HTMLInputElement).value;
|
||||||
}
|
const unit = (row.querySelector('.vol-unit') as HTMLSelectElement).value;
|
||||||
|
if (cap) vols.push({ type, capacity: parseFloat(cap), unit, slot: idx + 1 });
|
||||||
|
});
|
||||||
|
setFieldValue('hw-volumes-data', JSON.stringify(vols));
|
||||||
|
|
||||||
|
// 동적 네트워크/원격 데이터 수집
|
||||||
|
const nets: any[] = [];
|
||||||
|
document.querySelectorAll('#hw-remote-info-container .remote-info-row').forEach(row => {
|
||||||
|
const type = (row.querySelector('.ri-type') as HTMLSelectElement).value;
|
||||||
|
const val1 = (row.querySelector('.ri-val1') as HTMLInputElement).value;
|
||||||
|
|
||||||
|
if (type === 'IP' && val1) {
|
||||||
|
const tool = (row.querySelector('.ri-tool') as HTMLSelectElement)?.value || '';
|
||||||
|
const id = (row.querySelector('.ri-id') as HTMLInputElement)?.value || '';
|
||||||
|
const pw = (row.querySelector('.ri-pw') as HTMLInputElement)?.value || '';
|
||||||
|
const val2Str = (id || pw) ? JSON.stringify({ id, pw }) : '';
|
||||||
|
nets.push({ type: 'IP', name: tool, val1: val1, val2: val2Str });
|
||||||
|
} else if (type === 'MAC' && val1) {
|
||||||
|
nets.push({ type: 'MAC', name: 'MAC 주소', val1: val1, val2: '' });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
setFieldValue('hw-remotes-data', JSON.stringify(nets));
|
||||||
|
|
||||||
const formData = new FormData(this.formEl!);
|
const formData = new FormData(this.formEl!);
|
||||||
const updated = { ...this.currentAsset };
|
const updated = { ...this.currentAsset };
|
||||||
formData.forEach((value, key) => { if (key !== 'id') updated[key] = value; });
|
formData.forEach((value, key) => { if (key !== 'id') updated[key] = value; });
|
||||||
const bldgSelect = document.getElementById('hw-bldg-select') as HTMLSelectElement;
|
updated.location = bldgSelect.value;
|
||||||
if (bldgSelect) updated.location = bldgSelect.value;
|
|
||||||
|
|
||||||
if (await saveAsset(this.getCategoryKey(updated), updated)) {
|
if (await saveAsset(this.getCategoryKey(updated), updated)) {
|
||||||
alert(UI_TEXT.MESSAGES.SAVE_SUCCESS);
|
alert(UI_TEXT.MESSAGES.SAVE_SUCCESS);
|
||||||
onSave(); this.close(); closeModals();
|
onSave(); this.close(); closeModals();
|
||||||
@@ -198,109 +435,185 @@ class HwAssetModal extends BaseModal {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
private async handleGenerateCode() {
|
private addVolumeRow(vol: any = { type: 'SSD', capacity: '', unit: 'GB' }) {
|
||||||
const categorySelect = document.getElementById('hw-category') as HTMLSelectElement;
|
const container = document.getElementById('hw-volume-container');
|
||||||
const cat = categorySelect.value;
|
if (!container) return;
|
||||||
if (!cat) { alert('구분을 먼저 선택해주세요.'); return; }
|
const row = document.createElement('div');
|
||||||
const prefix = TYPE_PREFIX_MAP[cat] || 'ETC';
|
row.className = 'volume-row flex items-center gap-2';
|
||||||
const purchaseDate = (document.getElementById('hw-purchase_date') as HTMLInputElement)?.value || '';
|
const inputStyle = 'height: clamp(34px, 4.5vmin, 44px) !important; box-sizing: border-box !important; font-size: var(--fs-sm); margin: 0; padding: 0 8px;';
|
||||||
try {
|
row.innerHTML = `
|
||||||
const res = await fetch(`http://${location.hostname}:3000/api/generate-asset-code?prefix=${prefix}&purchaseDate=${purchaseDate}`);
|
<select class="vol-type" style="${inputStyle} width: 80px;" ${!this.isEditMode ? 'disabled' : ''}>
|
||||||
const data = await res.json();
|
<option value="SSD" ${vol.type === 'SSD' ? 'selected' : ''}>SSD</option>
|
||||||
if (data.nextCode) setFieldValue('hw-asset_code', data.nextCode);
|
<option value="HDD" ${vol.type === 'HDD' ? 'selected' : ''}>HDD</option>
|
||||||
} catch (err) { console.error('코드 생성 실패:', err); }
|
<option value="NVMe" ${vol.type === 'NVMe' ? 'selected' : ''}>NVMe</option>
|
||||||
|
</select>
|
||||||
|
<input type="number" class="vol-cap" value="${vol.capacity || ''}" placeholder="용량" style="${inputStyle} flex: 1;" ${!this.isEditMode ? 'readonly' : ''} />
|
||||||
|
<select class="vol-unit" style="${inputStyle} width: 70px;" ${!this.isEditMode ? 'disabled' : ''}>
|
||||||
|
<option value="GB" ${vol.unit === 'GB' ? 'selected' : ''}>GB</option>
|
||||||
|
<option value="TB" ${vol.unit === 'TB' ? 'selected' : ''}>TB</option>
|
||||||
|
</select>
|
||||||
|
<button type="button" class="btn btn-outline btn-remove-row edit-only-btn" style="height: clamp(34px, 4.5vmin, 44px) !important; padding: 0 12px; color: var(--danger); border-color: var(--danger); display: ${this.isEditMode ? 'inline-flex' : 'none'};">×</button>
|
||||||
|
`;
|
||||||
|
row.querySelector('.btn-remove-row')?.addEventListener('click', () => row.remove());
|
||||||
|
container.appendChild(row);
|
||||||
}
|
}
|
||||||
|
|
||||||
private async handleFileUpload(e: Event) {
|
private addRemoteInfoRow(info: any = { type: 'IP', name: '원격접속', val1: '', val2: '' }) {
|
||||||
const file = (e.target as HTMLInputElement).files?.[0];
|
const container = document.getElementById('hw-remote-info-container');
|
||||||
if (!file) return;
|
if (!container) return;
|
||||||
const fileNameDisplay = document.getElementById('hw-file-name-display');
|
|
||||||
const fileLinkContainer = document.getElementById('hw-file-link-container');
|
let parsedId = '';
|
||||||
if (fileNameDisplay) fileNameDisplay.textContent = file.name;
|
let parsedPw = '';
|
||||||
const reader = new FileReader();
|
if (info.type === 'IP' && info.val2) {
|
||||||
reader.onload = async () => {
|
try {
|
||||||
try {
|
const parsed = typeof info.val2 === 'string' ? JSON.parse(info.val2) : info.val2;
|
||||||
const res = await fetch(`http://${location.hostname}:3000/api/upload`, {
|
parsedId = parsed.id || '';
|
||||||
method: 'POST',
|
parsedPw = parsed.pw || '';
|
||||||
headers: { 'Content-Type': 'application/json' },
|
} catch (e) {
|
||||||
body: JSON.stringify({ fileName: file.name, fileData: reader.result })
|
parsedId = info.val2;
|
||||||
});
|
|
||||||
const data = await res.json();
|
|
||||||
if (data.success) {
|
|
||||||
setFieldValue('hw-approval_document', data.filePath);
|
|
||||||
if (fileLinkContainer) {
|
|
||||||
fileLinkContainer.innerHTML = `<a href="http://${location.hostname}:3000${data.filePath}" target="_blank" class="btn btn-outline btn-sm">[업로드 완료: 파일 보기]</a>`;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
} catch (err) { console.error('파일 업로드 실패:', err); alert('파일 업로드 중 오류가 발생했습니다.'); }
|
|
||||||
};
|
|
||||||
reader.readAsDataURL(file);
|
|
||||||
}
|
|
||||||
|
|
||||||
private async handleRegLocMap(e: MouseEvent) {
|
|
||||||
e.preventDefault(); e.stopPropagation();
|
|
||||||
const bldgSelect = document.getElementById('hw-bldg-select') as HTMLSelectElement;
|
|
||||||
const detailSelect = document.getElementById('hw-location_detail') as HTMLSelectElement;
|
|
||||||
await this.fetchMapConfig();
|
|
||||||
const images = this.getImagesForLocation(bldgSelect.value, detailSelect.value);
|
|
||||||
if (images) this.openImagePicker(images, `${detailSelect.value} 위치 등록`);
|
|
||||||
}
|
|
||||||
|
|
||||||
private async handleViewLocMap(e: MouseEvent) {
|
|
||||||
e.preventDefault(); e.stopPropagation();
|
|
||||||
await this.fetchMapConfig();
|
|
||||||
const x = getFieldValue('hw-loc_x');
|
|
||||||
const y = getFieldValue('hw-loc_y');
|
|
||||||
const savedImg = getFieldValue('hw-location_photo');
|
|
||||||
const bldg = getFieldValue('hw-bldg-select');
|
|
||||||
const detail = getFieldValue('hw-location_detail');
|
|
||||||
const images = this.getImagesForLocation(bldg, detail);
|
|
||||||
if (images) {
|
|
||||||
const imgPath = savedImg && images.includes(savedImg) ? savedImg : images[0];
|
|
||||||
this.openImagePreview(imgPath, `${detail} 위치 확인`, x, y);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const row = document.createElement('div');
|
||||||
|
row.className = 'remote-info-row flex-col gap-1 w-full';
|
||||||
|
const baseStyle = 'height: clamp(34px, 4.5vmin, 44px) !important; box-sizing: border-box !important; margin: 0;';
|
||||||
|
const compactStyle = `${baseStyle} font-size: var(--fs-xs); padding: 0 6px;`;
|
||||||
|
|
||||||
|
const line1 = document.createElement('div');
|
||||||
|
line1.className = 'ri-line flex items-center gap-1.5';
|
||||||
|
line1.innerHTML = `
|
||||||
|
<select class="ri-type" ${!this.isEditMode ? 'disabled' : ''} style="${compactStyle} width: 75px; flex-shrink: 0;">
|
||||||
|
<option value="IP" ${info.type === 'IP' ? 'selected' : ''}>IP 주소</option>
|
||||||
|
<option value="MAC" ${info.type === 'MAC' ? 'selected' : ''}>MAC 주소</option>
|
||||||
|
</select>
|
||||||
|
<input type="text" class="ri-val1" value="${info.val1 || ''}" placeholder="주소 입력" ${!this.isEditMode ? 'readonly' : ''} style="${compactStyle} flex: 1; min-width: 0;" />
|
||||||
|
<button type="button" class="btn-outline btn-remove-row ri-remove-btn edit-only-btn" style="height: clamp(34px, 4.5vmin, 44px) !important; padding: 0 10px; color: var(--danger); border-color: var(--danger); flex-shrink: 0; display: ${this.isEditMode ? 'inline-flex' : 'none'};">×</button>
|
||||||
|
`;
|
||||||
|
|
||||||
|
const line2 = document.createElement('div');
|
||||||
|
line2.className = 'ri-line ri-cred-line flex items-center gap-1.5';
|
||||||
|
if (info.type !== 'IP') line2.classList.add('hidden');
|
||||||
|
|
||||||
|
line2.innerHTML = `
|
||||||
|
<div class="ri-connector" style="width: 16px; border-left: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); height: 16px; margin-left: 10px; margin-top: -12px; flex-shrink: 0;"></div>
|
||||||
|
<select class="ri-tool" ${!this.isEditMode ? 'disabled' : ''} style="${compactStyle} width: 85px; flex-shrink: 0;">
|
||||||
|
<option value="원격접속" ${info.name === '원격접속' ? 'selected' : ''}>원격접속</option>
|
||||||
|
<option value="리눅스" ${info.name === '리눅스' ? 'selected' : ''}>리눅스</option>
|
||||||
|
<option value="기타" ${info.name === '기타' ? 'selected' : ''}>기타</option>
|
||||||
|
</select>
|
||||||
|
<input type="text" class="ri-id" value="${parsedId}" placeholder="원격 ID" ${!this.isEditMode ? 'readonly' : ''} style="${compactStyle} flex: 1; min-width: 0;" />
|
||||||
|
<input type="text" class="ri-pw" value="${parsedPw}" placeholder="원격 PW" ${!this.isEditMode ? 'readonly' : ''} style="${compactStyle} flex: 1; min-width: 0;" />
|
||||||
|
`;
|
||||||
|
|
||||||
|
row.appendChild(line1);
|
||||||
|
row.appendChild(line2);
|
||||||
|
|
||||||
|
const typeSelect = row.querySelector('.ri-type') as HTMLSelectElement;
|
||||||
|
typeSelect.addEventListener('change', (e) => {
|
||||||
|
const isIP = (e.target as HTMLSelectElement).value === 'IP';
|
||||||
|
line2.classList.toggle('hidden', !isIP);
|
||||||
|
if (!isIP) {
|
||||||
|
(row.querySelector('.ri-id') as HTMLInputElement).value = '';
|
||||||
|
(row.querySelector('.ri-pw') as HTMLInputElement).value = '';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
row.querySelector('.btn-remove-row')?.addEventListener('click', () => row.remove());
|
||||||
|
container.appendChild(row);
|
||||||
|
}
|
||||||
|
|
||||||
|
private toggleEditOnlyBtns(isEdit: boolean) {
|
||||||
|
['btn-add-volume', 'btn-add-remote-info'].forEach(id => {
|
||||||
|
const btn = document.getElementById(id);
|
||||||
|
if (btn) btn.classList.toggle('hidden', !isEdit);
|
||||||
|
});
|
||||||
|
document.querySelectorAll('.edit-only-btn').forEach(btn => {
|
||||||
|
(btn as HTMLElement).style.display = isEdit ? 'inline-flex' : 'none';
|
||||||
|
});
|
||||||
|
|
||||||
|
const containers = ['#hw-volume-container', '#hw-remote-info-container'];
|
||||||
|
containers.forEach(selector => {
|
||||||
|
document.querySelectorAll(`${selector} input`).forEach(input => {
|
||||||
|
if (isEdit) input.removeAttribute('readonly');
|
||||||
|
else input.setAttribute('readonly', 'true');
|
||||||
|
});
|
||||||
|
document.querySelectorAll(`${selector} select`).forEach(select => {
|
||||||
|
if (isEdit) select.removeAttribute('disabled');
|
||||||
|
else select.setAttribute('disabled', 'true');
|
||||||
|
});
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
protected fillFormData(asset: any): void {
|
protected fillFormData(asset: any): void {
|
||||||
// 1. 분류 먼저 설정 및 동적 폼 렌더링
|
setFieldValue('hw-id', asset.id);
|
||||||
|
setFieldValue('hw-asset_code', asset.asset_code || '');
|
||||||
|
setFieldValue('hw-purchase_corp', asset.purchase_corp || '');
|
||||||
setFieldValue('hw-category', asset.category || '');
|
setFieldValue('hw-category', asset.category || '');
|
||||||
this.renderDynamicForm(asset.category || '');
|
|
||||||
|
|
||||||
// 2. 타입 설정
|
|
||||||
const types = CATEGORY_TYPE_MAP[asset.category] || [];
|
const types = CATEGORY_TYPE_MAP[asset.category] || [];
|
||||||
const typeSelect = document.getElementById('hw-asset_type') as HTMLSelectElement;
|
const typeSelect = document.getElementById('hw-asset_type') as HTMLSelectElement;
|
||||||
if (typeSelect) typeSelect.innerHTML = types.length > 0 ? generateOptionsHTML(types, asset.asset_type, true) : '<option value="">구분을 먼저 선택하세요</option>';
|
if (typeSelect) typeSelect.innerHTML = types.length > 0 ? generateOptionsHTML(types, asset.asset_type, true) : '<option value="">구분을 먼저 선택하세요</option>';
|
||||||
setFieldValue('hw-asset_type', asset.asset_type || '');
|
setFieldValue('hw-asset_type', asset.asset_type || '');
|
||||||
|
|
||||||
// 3. 나머지 데이터 채우기 (공통 및 동적 필드)
|
|
||||||
setFieldValue('hw-id', asset.id);
|
|
||||||
setFieldValue('hw-asset_code', asset.asset_code || '');
|
|
||||||
setFieldValue('hw-purchase_corp', asset.purchase_corp || '');
|
|
||||||
setFieldValue('hw-hw_status', asset.hw_status || '운영');
|
setFieldValue('hw-hw_status', asset.hw_status || '운영');
|
||||||
|
setFieldValue('hw-service_type', asset.service_type || '외부');
|
||||||
|
setFieldValue('hw-asset_purpose', asset.asset_purpose || '');
|
||||||
setFieldValue('hw-current_dept', asset.current_dept || '');
|
setFieldValue('hw-current_dept', asset.current_dept || '');
|
||||||
setFieldValue('hw-manager_primary', asset.manager_primary || '');
|
setFieldValue('hw-manager_primary', asset.manager_primary || '');
|
||||||
setFieldValue('hw-manager_secondary', asset.manager_secondary || '');
|
setFieldValue('hw-manager_secondary', asset.manager_secondary || '');
|
||||||
setFieldValue('hw-user_current', asset.user_current || '');
|
setFieldValue('hw-user_current', asset.user_current || '');
|
||||||
setFieldValue('hw-user_position', asset.user_position || '');
|
setFieldValue('hw-user_position', asset.user_position || '');
|
||||||
setFieldValue('hw-emp_no', asset.emp_no || '');
|
setFieldValue('hw-previous_user', asset.previous_user || '');
|
||||||
setFieldValue('hw-model_name', asset.model_name || '');
|
setFieldValue('hw-model_name', asset.model_name || '');
|
||||||
|
setFieldValue('hw-asset_mfr', asset.asset_mfr || '');
|
||||||
|
setFieldValue('hw-os', asset.os || '');
|
||||||
setFieldValue('hw-cpu', asset.cpu || '');
|
setFieldValue('hw-cpu', asset.cpu || '');
|
||||||
setFieldValue('hw-ram', asset.ram || '');
|
setFieldValue('hw-ram', asset.ram || '');
|
||||||
setFieldValue('hw-os', asset.os || '');
|
|
||||||
setFieldValue('hw-gpu', asset.gpu || '');
|
setFieldValue('hw-gpu', asset.gpu || '');
|
||||||
setFieldValue('hw-mac_address', asset.mac_address || '');
|
setFieldValue('hw-mainboard', asset.mainboard || '');
|
||||||
setFieldValue('hw-ip_address', asset.ip_address || '');
|
|
||||||
setFieldValue('hw-ip_address_2', asset.ip_address_2 || '');
|
// 동적 볼륨 렌더링
|
||||||
setFieldValue('hw-remote_tool', asset.remote_tool || '');
|
const volumeContainer = document.getElementById('hw-volume-container');
|
||||||
setFieldValue('hw-remote_id', asset.remote_id || '');
|
if (volumeContainer) volumeContainer.innerHTML = '';
|
||||||
setFieldValue('hw-remote_pw', asset.remote_pw || '');
|
let vols = [];
|
||||||
|
try { vols = asset.volumes ? (typeof asset.volumes === 'string' ? JSON.parse(asset.volumes) : asset.volumes) : []; } catch(e) {}
|
||||||
|
vols.forEach((v: any) => this.addVolumeRow(v));
|
||||||
|
|
||||||
|
// 통합 원격 접속 정보 렌더링 초기화 및 생성
|
||||||
|
const remoteInfoContainer = document.getElementById('hw-remote-info-container');
|
||||||
|
if (remoteInfoContainer) {
|
||||||
|
remoteInfoContainer.innerHTML = '';
|
||||||
|
let nets = [];
|
||||||
|
try {
|
||||||
|
nets = asset.remotes ? (typeof asset.remotes === 'string' ? JSON.parse(asset.remotes) : asset.remotes) : [];
|
||||||
|
} catch(e) {}
|
||||||
|
|
||||||
|
// Fallback for legacy data
|
||||||
|
if (nets.length === 0 && (asset.ip_address || asset.mac_address || asset.remote_tool || asset.remote_id)) {
|
||||||
|
if (asset.ip_address) {
|
||||||
|
const tool = asset.remote_tool || '원격접속';
|
||||||
|
const creds = (asset.remote_id || asset.remote_pw) ? JSON.stringify({ id: asset.remote_id || '', pw: asset.remote_pw || '' }) : '';
|
||||||
|
nets.push({ type: 'IP', name: tool, val1: asset.ip_address, val2: creds });
|
||||||
|
}
|
||||||
|
if (asset.mac_address) {
|
||||||
|
nets.push({ type: 'MAC', name: 'MAC 주소', val1: asset.mac_address, val2: '' });
|
||||||
|
}
|
||||||
|
if (!asset.ip_address && (asset.remote_tool || asset.remote_id)) {
|
||||||
|
const creds = JSON.stringify({ id: asset.remote_id || '', pw: asset.remote_pw || '' });
|
||||||
|
nets.push({ type: 'IP', name: asset.remote_tool || '기타', val1: '', val2: creds });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
nets.forEach((n: any) => this.addRemoteInfoRow(n));
|
||||||
|
}
|
||||||
|
|
||||||
setFieldValue('hw-monitoring', asset.monitoring || '비대상');
|
setFieldValue('hw-monitoring', asset.monitoring || '비대상');
|
||||||
|
setFieldValue('hw-serial_num', asset.serial_num || '');
|
||||||
|
setFieldValue('hw-monitor_inch', asset.monitor_inch || '');
|
||||||
|
setFieldValue('hw-volume', asset.volume || '');
|
||||||
|
setFieldValue('hw-asset_count', asset.asset_count || '');
|
||||||
setFieldValue('hw-purchase_date', asset.purchase_date || '');
|
setFieldValue('hw-purchase_date', asset.purchase_date || '');
|
||||||
setFieldValue('hw-purchase_vendor', asset.purchase_vendor || '');
|
setFieldValue('hw-purchase_vendor', asset.purchase_vendor || '');
|
||||||
setFieldValue('hw-purchase_amount', asset.purchase_amount || '');
|
setFieldValue('hw-purchase_amount', asset.purchase_amount || '');
|
||||||
setFieldValue('hw-approval_document', asset.approval_document || '');
|
setFieldValue('hw-approval_document', asset.approval_document || '');
|
||||||
setFieldValue('hw-asset_purpose', asset.asset_purpose || '');
|
|
||||||
|
|
||||||
const docName = document.getElementById('hw-file-name-display');
|
const docName = document.getElementById('hw-file-name-display');
|
||||||
if (docName) docName.textContent = asset.approval_document ? asset.approval_document.split('/').pop() : '파일 선택...';
|
if (docName) docName.textContent = asset.approval_document ? asset.approval_document.split('/').pop() : '파일 선택...';
|
||||||
const fileLinkContainer = document.getElementById('hw-file-link-container');
|
const fileLinkContainer = document.getElementById('hw-file-link-container');
|
||||||
@@ -309,25 +622,31 @@ class HwAssetModal extends BaseModal {
|
|||||||
} else if (fileLinkContainer) {
|
} else if (fileLinkContainer) {
|
||||||
fileLinkContainer.innerHTML = '';
|
fileLinkContainer.innerHTML = '';
|
||||||
}
|
}
|
||||||
|
|
||||||
setFieldValue('hw-memo', asset.memo || '');
|
setFieldValue('hw-memo', asset.memo || '');
|
||||||
setFieldValue('hw-location_detail', asset.location_detail || '');
|
setFieldValue('hw-location_detail', asset.location_detail || '');
|
||||||
setFieldValue('hw-loc_x', asset.loc_x || '');
|
setFieldValue('hw-loc_x', asset.loc_x || '');
|
||||||
setFieldValue('hw-loc_y', asset.loc_y || '');
|
setFieldValue('hw-loc_y', asset.loc_y || '');
|
||||||
setFieldValue('hw-location_photo', asset.location_photo || asset.loc_img || '');
|
setFieldValue('hw-location_photo', asset.location_photo || asset.loc_img || '');
|
||||||
|
parseAndSetLocation(asset.location || '', asset.location_detail || '', 'hw-bldg-select', 'hw-location_detail');
|
||||||
const bldgSelect = document.getElementById('hw-bldg-select') as HTMLSelectElement;
|
|
||||||
if (bldgSelect) {
|
|
||||||
parseAndSetLocation(asset.location || '', asset.location_detail || '', 'hw-bldg-select', 'hw-location_detail');
|
|
||||||
}
|
|
||||||
|
|
||||||
this.renderHistory(asset.id);
|
this.renderHistory(asset.id);
|
||||||
|
this.applyRoleVisibility();
|
||||||
|
this.updatePcGradeBadge();
|
||||||
|
|
||||||
|
const badgeContainer = document.getElementById('hw-category-badge-container');
|
||||||
|
if (badgeContainer) {
|
||||||
|
badgeContainer.innerHTML = asset.category ? `<span class="badge badge-primary">${asset.category}</span>` : '';
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
protected onAfterOpen(asset: any, mode: string): void {
|
protected onAfterOpen(asset: any, mode: string): void {
|
||||||
const genBtn = document.getElementById('btn-gen-hw-code');
|
const genBtn = document.getElementById('btn-gen-hw-code');
|
||||||
if (genBtn) genBtn.style.display = (mode === 'add') ? 'inline-flex' : 'none';
|
if (genBtn) genBtn.style.display = (mode === 'add') ? 'inline-flex' : 'none';
|
||||||
this.toggleFileUploadUI(mode !== 'view');
|
this.toggleFileUploadUI(mode !== 'view');
|
||||||
|
this.toggleEditOnlyBtns(mode !== 'view');
|
||||||
this.updateMapButtonVisibility();
|
this.updateMapButtonVisibility();
|
||||||
|
this.applyRoleVisibility();
|
||||||
}
|
}
|
||||||
|
|
||||||
private toggleFileUploadUI(showUpload: boolean) {
|
private toggleFileUploadUI(showUpload: boolean) {
|
||||||
@@ -335,13 +654,37 @@ class HwAssetModal extends BaseModal {
|
|||||||
if (fileBtn) fileBtn.style.display = showUpload ? 'inline-flex' : 'none';
|
if (fileBtn) fileBtn.style.display = showUpload ? 'inline-flex' : 'none';
|
||||||
}
|
}
|
||||||
|
|
||||||
private updateMapButtonVisibility() {
|
private applyRoleVisibility(): void {
|
||||||
const bldgSelect = document.getElementById('hw-bldg-select') as HTMLSelectElement;
|
const category = (document.getElementById('hw-category') as HTMLSelectElement)?.value || '';
|
||||||
const detailSelect = document.getElementById('hw-location_detail') as HTMLSelectElement;
|
const type = (document.getElementById('hw-asset_type') as HTMLSelectElement)?.value || '';
|
||||||
if (!bldgSelect || !detailSelect) return;
|
|
||||||
|
|
||||||
const bldg = bldgSelect.value;
|
const infraCategories = ['서버', '저장매체', '네트워크', '보안장비', '공간정보장비'];
|
||||||
const detail = detailSelect.value;
|
const isInfra = infraCategories.includes(category) || type.includes('서버') || type.includes('저장시스템');
|
||||||
|
const personalCategories = ['PC', '노트북', '모바일', '태블릿'];
|
||||||
|
const isPersonal = (personalCategories.includes(category) || type.includes('개인PC') || type.includes('노트북')) && !type.includes('서버PC');
|
||||||
|
const specCategories = ['PC', '서버', '노트북', '스토리지', '워크스테이션'];
|
||||||
|
const hasSpec = specCategories.includes(category) || type.includes('서버PC');
|
||||||
|
const noNetCategories = ['저장매체', '네트워크', '공간정보장비', 'PC부품', '사무가구'];
|
||||||
|
const showNet = (isInfra || isPersonal) && !noNetCategories.includes(category);
|
||||||
|
const hasSN = !['사무가구', 'PC부품'].includes(category);
|
||||||
|
const isParts = ['PC부품', '사무가구'].includes(category);
|
||||||
|
const showRemote = category === '서버' || type.includes('서버');
|
||||||
|
|
||||||
|
document.querySelectorAll('.remote-section, .remote-field, .monitoring-field').forEach(el => (el as HTMLElement).style.display = showRemote ? '' : 'none');
|
||||||
|
document.querySelectorAll('.net-only').forEach(el => (el as HTMLElement).style.display = showNet ? '' : 'none');
|
||||||
|
document.querySelectorAll('.spec-only').forEach(el => (el as HTMLElement).style.display = hasSpec ? '' : 'none');
|
||||||
|
document.querySelectorAll('.location-section, .location-field').forEach(el => (el as HTMLElement).style.display = (isInfra || category === '공간정보장비') ? '' : 'none');
|
||||||
|
document.querySelectorAll('.org-user-section, .org-user-field').forEach(el => (el as HTMLElement).style.display = (isPersonal || isParts || category === '업무지원장비') ? '' : 'none');
|
||||||
|
document.querySelectorAll('.personal-only').forEach(el => (el as HTMLElement).style.display = isPersonal ? '' : 'none');
|
||||||
|
document.querySelectorAll('.sn-only').forEach(el => (el as HTMLElement).style.display = hasSN ? '' : 'none');
|
||||||
|
document.querySelectorAll('.monitor-only').forEach(el => (el as HTMLElement).style.display = type.includes('모니터') ? '' : 'none');
|
||||||
|
document.querySelectorAll('.parts-only').forEach(el => (el as HTMLElement).style.display = isParts ? '' : 'none');
|
||||||
|
document.querySelectorAll('.hardware-section').forEach(el => (el as HTMLElement).style.display = (hasSpec || isParts) ? '' : 'none');
|
||||||
|
}
|
||||||
|
|
||||||
|
private updateMapButtonVisibility() {
|
||||||
|
const bldg = getFieldValue('hw-bldg-select');
|
||||||
|
const detail = getFieldValue('hw-location_detail');
|
||||||
const x = getFieldValue('hw-loc_x');
|
const x = getFieldValue('hw-loc_x');
|
||||||
const y = getFieldValue('hw-loc_y');
|
const y = getFieldValue('hw-loc_y');
|
||||||
const hasCoords = (x !== '' && y !== '' && x !== 'null' && y !== 'null');
|
const hasCoords = (x !== '' && y !== '' && x !== 'null' && y !== 'null');
|
||||||
@@ -349,17 +692,11 @@ class HwAssetModal extends BaseModal {
|
|||||||
const regLocBtn = document.getElementById('btn-reg-loc-map')!;
|
const regLocBtn = document.getElementById('btn-reg-loc-map')!;
|
||||||
const viewLocBtn = document.getElementById('btn-view-loc-map')!;
|
const viewLocBtn = document.getElementById('btn-view-loc-map')!;
|
||||||
|
|
||||||
if (hasImage && this.isEditMode) {
|
if (hasImage && this.isEditMode) regLocBtn.classList.remove('hidden');
|
||||||
regLocBtn.classList.remove('hidden');
|
else regLocBtn.classList.add('hidden');
|
||||||
} else {
|
|
||||||
regLocBtn.classList.add('hidden');
|
|
||||||
}
|
|
||||||
|
|
||||||
if (hasImage && hasCoords) {
|
if (hasImage && hasCoords) viewLocBtn.classList.remove('hidden');
|
||||||
viewLocBtn.classList.remove('hidden');
|
else viewLocBtn.classList.add('hidden');
|
||||||
} else {
|
|
||||||
viewLocBtn.classList.add('hidden');
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
private getImagesForLocation(bldg: string, detail: string): string[] | null {
|
private getImagesForLocation(bldg: string, detail: string): string[] | null {
|
||||||
@@ -399,7 +736,7 @@ class HwAssetModal extends BaseModal {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="image-picker-footer"><button id="btn-picker-cancel" class="btn btn-outline" style="color:var(--mute); border-color:var(--hairline);">취소</button><button id="btn-picker-save" class="btn btn-primary">위치 확정</button></div>
|
<div class="image-picker-footer"><button id="btn-picker-cancel" class="btn btn-outline">취소</button><button id="btn-picker-save" class="btn btn-primary">위치 확정</button></div>
|
||||||
</div>`;
|
</div>`;
|
||||||
let selectedX = ''; let selectedY = '';
|
let selectedX = ''; let selectedY = '';
|
||||||
const container = overlay.querySelector('#picker-container') as HTMLElement;
|
const container = overlay.querySelector('#picker-container') as HTMLElement;
|
||||||
@@ -415,7 +752,7 @@ class HwAssetModal extends BaseModal {
|
|||||||
overlay.querySelector('.btn-close-picker')?.addEventListener('click', () => overlay.remove());
|
overlay.querySelector('.btn-close-picker')?.addEventListener('click', () => overlay.remove());
|
||||||
overlay.querySelector('#btn-picker-cancel')?.addEventListener('click', () => overlay.remove());
|
overlay.querySelector('#btn-picker-cancel')?.addEventListener('click', () => overlay.remove());
|
||||||
overlay.querySelector('#btn-picker-save')?.addEventListener('click', () => {
|
overlay.querySelector('#btn-picker-save')?.addEventListener('click', () => {
|
||||||
if (!selectedX || !selectedY) { alert('위치를 선택해주세요.'); return; }
|
if (!selectedX || !selectedY) { alert('위치를 선택해주세요.'); return; }
|
||||||
setFieldValue('hw-loc_x', selectedX); setFieldValue('hw-loc_y', selectedY);
|
setFieldValue('hw-loc_x', selectedX); setFieldValue('hw-loc_y', selectedY);
|
||||||
setFieldValue('hw-location_photo', imagePaths[currentIdx]);
|
setFieldValue('hw-location_photo', imagePaths[currentIdx]);
|
||||||
this.updateMapButtonVisibility(); overlay.remove();
|
this.updateMapButtonVisibility(); overlay.remove();
|
||||||
@@ -444,7 +781,6 @@ class HwAssetModal extends BaseModal {
|
|||||||
</div>
|
</div>
|
||||||
<div class="image-picker-footer"><button id="btn-preview-close" class="btn btn-primary">확인</button></div>
|
<div class="image-picker-footer"><button id="btn-preview-close" class="btn btn-primary">확인</button></div>
|
||||||
</div>`;
|
</div>`;
|
||||||
|
|
||||||
document.body.appendChild(overlay);
|
document.body.appendChild(overlay);
|
||||||
if (!isHtmlMap && digitalMap) {
|
if (!isHtmlMap && digitalMap) {
|
||||||
const curX = parseFloat(x || '0'); const curY = parseFloat(y || '0');
|
const curX = parseFloat(x || '0'); const curY = parseFloat(y || '0');
|
||||||
@@ -452,9 +788,8 @@ class HwAssetModal extends BaseModal {
|
|||||||
const sx = parseFloat(rect.getAttribute('x') || '0');
|
const sx = parseFloat(rect.getAttribute('x') || '0');
|
||||||
const sy = parseFloat(rect.getAttribute('y') || '0');
|
const sy = parseFloat(rect.getAttribute('y') || '0');
|
||||||
if (Math.abs(sx - curX) < 0.1 && Math.abs(sy - curY) < 0.1) {
|
if (Math.abs(sx - curX) < 0.1 && Math.abs(sy - curY) < 0.1) {
|
||||||
rect.style.fill = 'rgba(255, 61, 0, 0.5)'; // 주황색 강조
|
rect.style.fill = 'rgba(255, 61, 0, 0.5)';
|
||||||
rect.style.stroke = '#FF3D00';
|
rect.style.stroke = '#FF3D00'; rect.style.strokeWidth = '1.2';
|
||||||
rect.style.strokeWidth = '1.2';
|
|
||||||
rect.style.filter = 'drop-shadow(0 0 6px rgba(255, 61, 0, 0.8))';
|
rect.style.filter = 'drop-shadow(0 0 6px rgba(255, 61, 0, 0.8))';
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
@@ -466,8 +801,8 @@ class HwAssetModal extends BaseModal {
|
|||||||
private renderHistory(assetId: string) {
|
private renderHistory(assetId: string) {
|
||||||
const container = document.getElementById('hw-history-list');
|
const container = document.getElementById('hw-history-list');
|
||||||
if (!container) return;
|
if (!container) return;
|
||||||
const logs = (state.masterData.logs || []).filter(l => l.assetId === assetId || l.asset_id === assetId);
|
const logs = (state.masterData.logs || []).filter(l => l.asset_id === assetId || l.assetId === assetId);
|
||||||
if (logs.length === 0) { container.innerHTML = '<div class="empty-history">이력이 없습니다.</div>'; return; }
|
if (logs.length === 0) { container.innerHTML = '<div class="empty-history">기록된 변동 이력이 없습니다.</div>'; return; }
|
||||||
container.innerHTML = logs.map(l => `<div class="history-item"><div class="history-date">${l.log_date || l.date || ''}</div><div class="history-user">${l.log_user || l.user || '시스템'}</div><div class="history-details">${l.details}</div></div>`).join('');
|
container.innerHTML = logs.map(l => `<div class="history-item"><div class="history-date">${l.log_date || l.date || ''}</div><div class="history-user">${l.log_user || l.user || '시스템'}</div><div class="history-details">${l.details}</div></div>`).join('');
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -483,6 +818,64 @@ class HwAssetModal extends BaseModal {
|
|||||||
if (cat === 'PC부품') return 'pcParts';
|
if (cat === 'PC부품') return 'pcParts';
|
||||||
return (cat === 'PC' || code.startsWith('PC')) ? 'pc' : 'officeSupplies';
|
return (cat === 'PC' || code.startsWith('PC')) ? 'pc' : 'officeSupplies';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private async fetchMasterComponents(): Promise<void> {
|
||||||
|
try {
|
||||||
|
const res = await fetch(`http://${location.hostname}:3000/api/hardware-components`);
|
||||||
|
this.masterComponents = await res.json();
|
||||||
|
} catch (err) { console.error('Failed to fetch master components:', err); }
|
||||||
|
}
|
||||||
|
|
||||||
|
private bindAutocomplete(inputId: string, autocompleteId: string, category: string) {
|
||||||
|
const input = document.getElementById(inputId) as HTMLInputElement;
|
||||||
|
const list = document.getElementById(autocompleteId) as HTMLDivElement;
|
||||||
|
if (!input || !list) return;
|
||||||
|
|
||||||
|
const showList = (filterText: string = '') => {
|
||||||
|
if (!this.isEditMode) return;
|
||||||
|
const items = this.masterComponents.filter(c => c.category === category);
|
||||||
|
const filtered = filterText
|
||||||
|
? items.filter(c => c.component_name.toLowerCase().includes(filterText.toLowerCase()))
|
||||||
|
: items;
|
||||||
|
|
||||||
|
if (filtered.length === 0) {
|
||||||
|
list.innerHTML = '<div class="autocomplete-item" style="color: #94a3b8; cursor: default;">검색 결과 없음</div>';
|
||||||
|
} else {
|
||||||
|
list.innerHTML = filtered.map(c => `<div class="autocomplete-item" data-val="${c.component_name}">${c.component_name}</div>`).join('');
|
||||||
|
}
|
||||||
|
list.classList.remove('hidden');
|
||||||
|
};
|
||||||
|
|
||||||
|
input.addEventListener('focus', () => showList(input.value));
|
||||||
|
input.addEventListener('input', () => showList(input.value));
|
||||||
|
list.addEventListener('mousedown', (e) => {
|
||||||
|
const item = (e.target as HTMLElement).closest('.autocomplete-item');
|
||||||
|
if (item && item.getAttribute('data-val')) {
|
||||||
|
input.value = item.getAttribute('data-val') || '';
|
||||||
|
list.classList.add('hidden');
|
||||||
|
this.updatePcGradeBadge();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
document.addEventListener('mousedown', (e) => {
|
||||||
|
if (e.target !== input && !list.contains(e.target as Node)) list.classList.add('hidden');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
private updatePcGradeBadge(): void {
|
||||||
|
const cpu = (document.getElementById('hw-cpu') as HTMLInputElement)?.value || '';
|
||||||
|
const ram = (document.getElementById('hw-ram') as HTMLInputElement)?.value || '';
|
||||||
|
const gpu = (document.getElementById('hw-gpu') as HTMLInputElement)?.value || '';
|
||||||
|
const date = (document.getElementById('hw-purchase_date') as HTMLInputElement)?.value || '';
|
||||||
|
|
||||||
|
const score = calculatePcScoreDeductive(cpu, ram, gpu, date);
|
||||||
|
const grade = getPcGrade(score);
|
||||||
|
|
||||||
|
const badge = document.getElementById('hw-pc-grade-badge');
|
||||||
|
if (badge) {
|
||||||
|
badge.textContent = `${grade.name} (${score}점)`;
|
||||||
|
badge.className = `badge ${grade.class}`;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export const hwModal = new HwAssetModal();
|
export const hwModal = new HwAssetModal();
|
||||||
|
|||||||
@@ -117,13 +117,22 @@ export function setEditLock(
|
|||||||
form.classList.remove('is-view-mode');
|
form.classList.remove('is-view-mode');
|
||||||
form.classList.add('is-edit-mode');
|
form.classList.add('is-edit-mode');
|
||||||
saveBtn.textContent = '저장';
|
saveBtn.textContent = '저장';
|
||||||
revertBtn.classList.toggle('hidden', mode === 'add'); // 신규 추가 시에는 취소 버튼 숨김
|
revertBtn.classList.toggle('hidden', mode === 'add');
|
||||||
|
|
||||||
|
// 모든 필드 활성화
|
||||||
|
const inputs = form.querySelectorAll('input, select, textarea');
|
||||||
|
inputs.forEach(input => {
|
||||||
|
const el = input as HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
|
||||||
|
if (el.name !== 'asset_code' && !el.id.includes('asset-id')) { // 자산번호 등 일부는 편집 모드에서도 잠금 유지
|
||||||
|
el.disabled = false;
|
||||||
|
if ('readOnly' in el) (el as HTMLInputElement).readOnly = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
// 번호 생성 버튼은 '추가(add)' 시에만 노출
|
// 번호 생성 버튼은 '추가(add)' 시에만 노출
|
||||||
if (generateBtn) {
|
if (generateBtn) {
|
||||||
generateBtn.style.display = mode === 'add' ? 'flex' : 'none';
|
generateBtn.style.display = mode === 'add' ? 'flex' : 'none';
|
||||||
}
|
}
|
||||||
// 내역 추가 버튼 노출
|
|
||||||
if (addLogBtn) addLogBtn.style.display = 'flex';
|
if (addLogBtn) addLogBtn.style.display = 'flex';
|
||||||
} else {
|
} else {
|
||||||
// 조회 모드 (잠금)
|
// 조회 모드 (잠금)
|
||||||
@@ -132,7 +141,13 @@ export function setEditLock(
|
|||||||
saveBtn.textContent = '수정';
|
saveBtn.textContent = '수정';
|
||||||
revertBtn.classList.add('hidden');
|
revertBtn.classList.add('hidden');
|
||||||
|
|
||||||
// 조회 모드에서는 버튼들 숨김
|
// 모든 필드 잠금
|
||||||
|
const inputs = form.querySelectorAll('input, select, textarea');
|
||||||
|
inputs.forEach(input => {
|
||||||
|
const el = input as HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
|
||||||
|
el.disabled = true; // select의 경우 disabled 필요
|
||||||
|
});
|
||||||
|
|
||||||
if (generateBtn) generateBtn.style.display = 'none';
|
if (generateBtn) generateBtn.style.display = 'none';
|
||||||
if (addLogBtn) addLogBtn.style.display = 'none';
|
if (addLogBtn) addLogBtn.style.display = 'none';
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -4,10 +4,10 @@ import { API_BASE_URL } from '../../core/utils';
|
|||||||
|
|
||||||
export class PCFlowModal {
|
export class PCFlowModal {
|
||||||
private static instance: PCFlowModal | null = null;
|
private static instance: PCFlowModal | null = null;
|
||||||
|
|
||||||
private modalEl: HTMLElement | null = null;
|
private modalEl: HTMLElement | null = null;
|
||||||
private currentFlowType: 'checkout' | 'return' | 'move' = 'checkout';
|
private currentFlowType: 'checkout' | 'return' | 'move' = 'checkout';
|
||||||
|
|
||||||
// Selected state
|
// Selected state
|
||||||
private selectedUser: any = null;
|
private selectedUser: any = null;
|
||||||
private selectedTargetUser: any = null;
|
private selectedTargetUser: any = null;
|
||||||
@@ -30,7 +30,7 @@ export class PCFlowModal {
|
|||||||
|
|
||||||
this.modalEl = document.getElementById('pc-flow-modal');
|
this.modalEl = document.getElementById('pc-flow-modal');
|
||||||
this.setupEventListeners(onSave);
|
this.setupEventListeners(onSave);
|
||||||
|
|
||||||
// Set default date to today
|
// Set default date to today
|
||||||
const dateInput = document.getElementById('pc-flow-date') as HTMLInputElement;
|
const dateInput = document.getElementById('pc-flow-date') as HTMLInputElement;
|
||||||
if (dateInput) {
|
if (dateInput) {
|
||||||
@@ -59,14 +59,19 @@ export class PCFlowModal {
|
|||||||
this.selectedTargetUser = null;
|
this.selectedTargetUser = null;
|
||||||
this.selectedPC = null;
|
this.selectedPC = null;
|
||||||
this.currentFlowType = 'checkout';
|
this.currentFlowType = 'checkout';
|
||||||
|
|
||||||
const radioCheckout = document.querySelector('input[name="flow-type"][value="checkout"]') as HTMLInputElement;
|
const radioCheckout = document.querySelector('input[name="flow-type"][value="checkout"]') as HTMLInputElement;
|
||||||
if (radioCheckout) radioCheckout.checked = true;
|
if (radioCheckout) {
|
||||||
|
radioCheckout.checked = true;
|
||||||
|
document.querySelectorAll('.flow-type-label').forEach(l => {
|
||||||
|
l.classList.toggle('active', l.contains(radioCheckout));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
// Reset text fields
|
// Reset text fields
|
||||||
const userSearch = document.getElementById('pc-flow-user-search') as HTMLInputElement;
|
const userSearch = document.getElementById('pc-flow-user-search') as HTMLInputElement;
|
||||||
if (userSearch) userSearch.value = '';
|
if (userSearch) userSearch.value = '';
|
||||||
|
|
||||||
const targetUserSearch = document.getElementById('pc-flow-target-user-search') as HTMLInputElement;
|
const targetUserSearch = document.getElementById('pc-flow-target-user-search') as HTMLInputElement;
|
||||||
if (targetUserSearch) targetUserSearch.value = '';
|
if (targetUserSearch) targetUserSearch.value = '';
|
||||||
|
|
||||||
@@ -94,7 +99,7 @@ export class PCFlowModal {
|
|||||||
label.classList.add('active');
|
label.classList.add('active');
|
||||||
radio.checked = true;
|
radio.checked = true;
|
||||||
this.currentFlowType = radio.value as any;
|
this.currentFlowType = radio.value as any;
|
||||||
|
|
||||||
// Reset selected PC when switching flow types
|
// Reset selected PC when switching flow types
|
||||||
this.selectedPC = null;
|
this.selectedPC = null;
|
||||||
this.updateUI();
|
this.updateUI();
|
||||||
@@ -104,16 +109,16 @@ export class PCFlowModal {
|
|||||||
// 1. Source User Autocomplete Search
|
// 1. Source User Autocomplete Search
|
||||||
const userSearch = document.getElementById('pc-flow-user-search') as HTMLInputElement;
|
const userSearch = document.getElementById('pc-flow-user-search') as HTMLInputElement;
|
||||||
const userSuggestions = document.getElementById('pc-flow-user-suggestions')!;
|
const userSuggestions = document.getElementById('pc-flow-user-suggestions')!;
|
||||||
|
|
||||||
userSearch?.addEventListener('input', () => {
|
userSearch?.addEventListener('input', () => {
|
||||||
const query = userSearch.value.trim().toLowerCase();
|
const query = userSearch.value.trim().toLowerCase();
|
||||||
if (!query) {
|
if (!query) {
|
||||||
userSuggestions.classList.add('hidden');
|
userSuggestions.classList.add('hidden');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const users = state.masterData.users || [];
|
const users = state.masterData.users || [];
|
||||||
const filtered = users.filter((u: any) =>
|
const filtered = users.filter((u: any) =>
|
||||||
(u.user_name && u.user_name.toLowerCase().includes(query)) ||
|
(u.user_name && u.user_name.toLowerCase().includes(query)) ||
|
||||||
(u.dept_name && u.dept_name.toLowerCase().includes(query)) ||
|
(u.dept_name && u.dept_name.toLowerCase().includes(query)) ||
|
||||||
(u.emp_no && u.emp_no.toString().includes(query))
|
(u.emp_no && u.emp_no.toString().includes(query))
|
||||||
@@ -133,7 +138,7 @@ export class PCFlowModal {
|
|||||||
this.selectedUser = user;
|
this.selectedUser = user;
|
||||||
userSearch.value = `${user.user_name} (${user.dept_name} / 사번:${user.emp_no || '-'})`;
|
userSearch.value = `${user.user_name} (${user.dept_name} / 사번:${user.emp_no || '-'})`;
|
||||||
userSuggestions.classList.add('hidden');
|
userSuggestions.classList.add('hidden');
|
||||||
|
|
||||||
// Automatically populate details if return or move
|
// Automatically populate details if return or move
|
||||||
if (this.currentFlowType === 'return' || this.currentFlowType === 'move') {
|
if (this.currentFlowType === 'return' || this.currentFlowType === 'move') {
|
||||||
this.selectedPC = null; // Reset selection
|
this.selectedPC = null; // Reset selection
|
||||||
@@ -161,16 +166,16 @@ export class PCFlowModal {
|
|||||||
// 2. Target User Autocomplete Search (For Moves)
|
// 2. Target User Autocomplete Search (For Moves)
|
||||||
const targetUserSearch = document.getElementById('pc-flow-target-user-search') as HTMLInputElement;
|
const targetUserSearch = document.getElementById('pc-flow-target-user-search') as HTMLInputElement;
|
||||||
const targetSuggestions = document.getElementById('pc-flow-target-user-suggestions')!;
|
const targetSuggestions = document.getElementById('pc-flow-target-user-suggestions')!;
|
||||||
|
|
||||||
targetUserSearch?.addEventListener('input', () => {
|
targetUserSearch?.addEventListener('input', () => {
|
||||||
const query = targetUserSearch.value.trim().toLowerCase();
|
const query = targetUserSearch.value.trim().toLowerCase();
|
||||||
if (!query) {
|
if (!query) {
|
||||||
targetSuggestions.classList.add('hidden');
|
targetSuggestions.classList.add('hidden');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const users = state.masterData.users || [];
|
const users = state.masterData.users || [];
|
||||||
const filtered = users.filter((u: any) =>
|
const filtered = users.filter((u: any) =>
|
||||||
(u.user_name && u.user_name.toLowerCase().includes(query)) ||
|
(u.user_name && u.user_name.toLowerCase().includes(query)) ||
|
||||||
(u.dept_name && u.dept_name.toLowerCase().includes(query)) ||
|
(u.dept_name && u.dept_name.toLowerCase().includes(query)) ||
|
||||||
(u.emp_no && u.emp_no.toString().includes(query))
|
(u.emp_no && u.emp_no.toString().includes(query))
|
||||||
@@ -197,7 +202,7 @@ export class PCFlowModal {
|
|||||||
// 3. Stock PC Autocomplete Search (For Checkout)
|
// 3. Stock PC Autocomplete Search (For Checkout)
|
||||||
const stockSearch = document.getElementById('pc-flow-stock-search') as HTMLInputElement;
|
const stockSearch = document.getElementById('pc-flow-stock-search') as HTMLInputElement;
|
||||||
const stockSuggestions = document.getElementById('pc-flow-stock-suggestions')!;
|
const stockSuggestions = document.getElementById('pc-flow-stock-suggestions')!;
|
||||||
|
|
||||||
const showStockSuggestions = () => {
|
const showStockSuggestions = () => {
|
||||||
const query = stockSearch.value.trim().toLowerCase();
|
const query = stockSearch.value.trim().toLowerCase();
|
||||||
|
|
||||||
@@ -205,11 +210,11 @@ export class PCFlowModal {
|
|||||||
const pcs = state.masterData.pc || [];
|
const pcs = state.masterData.pc || [];
|
||||||
const filtered = pcs.filter((p: any) => {
|
const filtered = pcs.filter((p: any) => {
|
||||||
const status = (p.hw_status || '').trim();
|
const status = (p.hw_status || '').trim();
|
||||||
const matchesQuery = !query ||
|
const matchesQuery = !query ||
|
||||||
(p.asset_code && p.asset_code.toLowerCase().includes(query)) ||
|
(p.asset_code && p.asset_code.toLowerCase().includes(query)) ||
|
||||||
(p.model_name && p.model_name.toLowerCase().includes(query)) ||
|
(p.model_name && p.model_name.toLowerCase().includes(query)) ||
|
||||||
(p.cpu && p.cpu.toLowerCase().includes(query));
|
(p.cpu && p.cpu.toLowerCase().includes(query));
|
||||||
|
|
||||||
return (status === '대기' || status === '미할당' || status === '재고') && matchesQuery;
|
return (status === '대기' || status === '미할당' || status === '재고') && matchesQuery;
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -419,7 +424,7 @@ export class PCFlowModal {
|
|||||||
const userPcsList = document.getElementById('user-pcs-list')!;
|
const userPcsList = document.getElementById('user-pcs-list')!;
|
||||||
if (this.selectedUser && (this.currentFlowType === 'return' || this.currentFlowType === 'move')) {
|
if (this.selectedUser && (this.currentFlowType === 'return' || this.currentFlowType === 'move')) {
|
||||||
const allPcs = state.masterData.pc || [];
|
const allPcs = state.masterData.pc || [];
|
||||||
const userPcs = allPcs.filter((p: any) =>
|
const userPcs = allPcs.filter((p: any) =>
|
||||||
(p.emp_no && p.emp_no.toString() === this.selectedUser.emp_no?.toString()) ||
|
(p.emp_no && p.emp_no.toString() === this.selectedUser.emp_no?.toString()) ||
|
||||||
(p.user_current && p.user_current === this.selectedUser.user_name)
|
(p.user_current && p.user_current === this.selectedUser.user_name)
|
||||||
);
|
);
|
||||||
@@ -460,7 +465,6 @@ export class PCFlowModal {
|
|||||||
return `
|
return `
|
||||||
<div id="pc-flow-modal" class="modal-overlay hidden">
|
<div id="pc-flow-modal" class="modal-overlay hidden">
|
||||||
<div class="modal-content wide">
|
<div class="modal-content wide">
|
||||||
|
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
<h2 class="modal-title">
|
<h2 class="modal-title">
|
||||||
<i data-lucide="refresh-cw"></i> PC 이동/반납 (불출/반납/이동)
|
<i data-lucide="refresh-cw"></i> PC 이동/반납 (불출/반납/이동)
|
||||||
@@ -473,7 +477,7 @@ export class PCFlowModal {
|
|||||||
<!-- 왼쪽 영역: 입력 폼 -->
|
<!-- 왼쪽 영역: 입력 폼 -->
|
||||||
<div class="modal-form-area">
|
<div class="modal-form-area">
|
||||||
<div class="grid-form flex-col">
|
<div class="grid-form flex-col">
|
||||||
|
|
||||||
<!-- 1. 처리 유형 -->
|
<!-- 1. 처리 유형 -->
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label>1. 처리 유형 선택</label>
|
<label>1. 처리 유형 선택</label>
|
||||||
@@ -542,7 +546,7 @@ export class PCFlowModal {
|
|||||||
<div class="history-header">
|
<div class="history-header">
|
||||||
<h3>선택 내역 요약</h3>
|
<h3>선택 내역 요약</h3>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style="display: flex; flex-direction: column; gap: 1rem;">
|
<div style="display: flex; flex-direction: column; gap: 1rem;">
|
||||||
<!-- 사원 요약 카드 -->
|
<!-- 사원 요약 카드 -->
|
||||||
<div id="summary-user-card" class="summary-info-card">
|
<div id="summary-user-card" class="summary-info-card">
|
||||||
@@ -582,7 +586,6 @@ export class PCFlowModal {
|
|||||||
<button id="btn-submit-pc-flow" class="btn btn-primary">이동/반납 처리 완료</button>
|
<button id="btn-submit-pc-flow" class="btn btn-primary">이동/반납 처리 완료</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
import { state, savePartsMaster, deletePartsMaster } from '../../core/state';
|
import { state, savePartsMaster, deletePartsMaster } from '../../core/state';
|
||||||
import { BaseModal } from './BaseModal';
|
import { BaseModal } from './BaseModal';
|
||||||
import { generateOptionsHTML, setFieldValue, getFieldValue } from './ModalUtils';
|
import { generateOptionsHTML, setFieldValue, getFieldValue } from './ModalUtils';
|
||||||
import { createIcons, X, Save, Database, Edit2, Plus } from 'lucide';
|
import { createIcons, X, Save, Plus } from 'lucide';
|
||||||
import { UI_TEXT } from '../../core/schema';
|
import { UI_TEXT } from '../../core/schema';
|
||||||
|
|
||||||
class PartsMasterModal extends BaseModal {
|
class PartsMasterModal extends BaseModal {
|
||||||
@@ -10,52 +10,48 @@ class PartsMasterModal extends BaseModal {
|
|||||||
}
|
}
|
||||||
|
|
||||||
protected renderFrameHTML(): string {
|
protected renderFrameHTML(): string {
|
||||||
const sharedStyle = 'height: 38px !important; box-sizing: border-box !important; font-size: 13px; margin: 0;';
|
|
||||||
const inputStyle = sharedStyle;
|
|
||||||
const selectStyle = sharedStyle;
|
|
||||||
|
|
||||||
return `
|
return `
|
||||||
<div id="parts-master-asset-modal" class="modal-overlay hidden">
|
<div id="parts-master-asset-modal" class="modal-overlay hidden">
|
||||||
<div class="modal-content" style="max-width: 500px; width: 100%;">
|
<div class="modal-content" style="max-width: 500px;">
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
<h2 id="parts-master-modal-title" style="margin: 0; font-size: 18px; font-weight: 800; color: white;">${this.title}</h2>
|
<h2 id="parts-master-modal-title" class="modal-title">${this.title}</h2>
|
||||||
<button id="btn-close-parts-master-modal" class="btn-icon" aria-label="닫기" style="font-size: 28px; color: white; background: none; border: none; cursor: pointer; line-height: 1;">×</button>
|
<button id="btn-close-parts-master-modal" class="btn-icon" aria-label="닫기">×</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-body" style="padding: 24px; overflow-y: auto;">
|
<div class="modal-body">
|
||||||
<form id="parts-master-asset-form" class="grid-form" style="display: flex; flex-direction: column; gap: 16px;">
|
<form id="parts-master-asset-form" class="grid-form" style="grid-template-columns: 1fr;">
|
||||||
<input type="hidden" id="parts-master-id" name="id" />
|
<input type="hidden" id="parts-master-id" name="id" />
|
||||||
|
|
||||||
<div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
|
<div class="form-group">
|
||||||
<label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">부품 분류</label>
|
<label>부품 분류</label>
|
||||||
<select id="parts-master-category" name="category" style="${selectStyle}">
|
<select id="parts-master-category" name="category">
|
||||||
<option value="CPU">CPU</option>
|
<option value="CPU">CPU</option>
|
||||||
<option value="GPU">GPU</option>
|
<option value="GPU">GPU</option>
|
||||||
<option value="RAM">RAM</option>
|
<option value="RAM">RAM</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
|
<div class="form-group">
|
||||||
<label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">부품 표준 명칭</label>
|
<label>부품 표준 명칭</label>
|
||||||
<input type="text" id="parts-master-component-name" name="component_name" placeholder="예: Intel Core i7-14700K" required style="${inputStyle} width: 100%;" />
|
<input type="text" id="parts-master-component-name" name="component_name" placeholder="예: Intel Core i7-14700K" required />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
|
<div class="form-group">
|
||||||
<label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">성능 등급</label>
|
<label>성능 등급</label>
|
||||||
<input type="text" id="parts-master-score-tier" name="score_tier" placeholder="예: i7 / S / 최적" required style="${inputStyle} width: 100%;" />
|
<input type="text" id="parts-master-score-tier" name="score_tier" placeholder="예: i7 / S / 최적" required />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
|
<div class="form-group">
|
||||||
<label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">감점 점수 (양수로 입력)</label>
|
<label>감점 점수 (양수로 입력)</label>
|
||||||
<input type="number" id="parts-master-deduction" name="deduction" placeholder="예: 5" required style="${inputStyle} width: 100%;" />
|
<input type="number" id="parts-master-deduction" name="deduction" placeholder="예: 5" required />
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-footer" style="display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; background: #f8fafc; border-top: 1px solid var(--border-color);">
|
<div class="modal-footer">
|
||||||
<button id="btn-delete-parts-master-asset" class="btn btn-outline btn-danger" style="height: 42px;">삭제</button>
|
<button id="btn-delete-parts-master-asset" class="btn btn-outline btn-danger">삭제</button>
|
||||||
<div class="footer-actions" style="display: flex; gap: 8px;">
|
<div class="footer-actions">
|
||||||
<button id="btn-revert-parts-master-edit" class="btn btn-outline hidden" style="height: 42px;">수정 취소</button>
|
<button id="btn-revert-parts-master-edit" class="btn btn-outline hidden">수정 취소</button>
|
||||||
<button id="btn-cancel-parts-master-modal" class="btn btn-outline" style="height: 42px;">닫기</button>
|
<button id="btn-cancel-parts-master-modal" class="btn btn-outline">닫기</button>
|
||||||
<button id="btn-save-parts-master-asset" class="btn btn-primary" style="height: 42px;">수정</button>
|
<button id="btn-save-parts-master-asset" class="btn btn-primary">수정</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -109,11 +105,13 @@ class PartsMasterModal extends BaseModal {
|
|||||||
if (!this.currentAsset || !this.currentAsset.id) return;
|
if (!this.currentAsset || !this.currentAsset.id) return;
|
||||||
if (!confirm('정말로 이 부품 마스터 정보를 삭제하시겠습니까?\n삭제 시 기존 등록 PC 중 이 부품명을 사용하는 PC의 자동완성 정합성 체크에 영향을 줄 수 있습니다.')) return;
|
if (!confirm('정말로 이 부품 마스터 정보를 삭제하시겠습니까?\n삭제 시 기존 등록 PC 중 이 부품명을 사용하는 PC의 자동완성 정합성 체크에 영향을 줄 수 있습니다.')) return;
|
||||||
|
|
||||||
if (await deletePartsMaster(this.currentAsset.id)) {
|
if (await deletePartsMaster(Number(this.currentAsset.id))) {
|
||||||
alert('성공적으로 삭제되었습니다.');
|
alert('성공적으로 삭제되었습니다.');
|
||||||
onSave(); this.close(); closeModals();
|
onSave(); this.close(); closeModals();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
createIcons({ icons: { Plus, X, Save } });
|
||||||
}
|
}
|
||||||
|
|
||||||
protected fillFormData(asset: any): void {
|
protected fillFormData(asset: any): void {
|
||||||
@@ -126,19 +124,13 @@ class PartsMasterModal extends BaseModal {
|
|||||||
|
|
||||||
protected onAfterOpen(asset: any, mode: string): void {
|
protected onAfterOpen(asset: any, mode: string): void {
|
||||||
const titleEl = document.getElementById('parts-master-modal-title');
|
const titleEl = document.getElementById('parts-master-modal-title');
|
||||||
|
|
||||||
if (titleEl) {
|
if (titleEl) {
|
||||||
if (mode === 'add') {
|
titleEl.textContent = (mode === 'add') ? '신규 부품 마스터 등록' : '부품 마스터 상세 편집';
|
||||||
titleEl.textContent = '신규 부품 마스터 등록';
|
|
||||||
} else {
|
|
||||||
titleEl.textContent = '부품 마스터 상세 편집';
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const deleteBtn = document.getElementById('btn-delete-parts-master-asset')!;
|
const deleteBtn = document.getElementById('btn-delete-parts-master-asset')!;
|
||||||
const saveBtn = document.getElementById('btn-save-parts-master-asset')!;
|
const saveBtn = document.getElementById('btn-save-parts-master-asset')!;
|
||||||
|
|
||||||
// 추가 모드일 때는 삭제 버튼 숨김
|
|
||||||
deleteBtn.style.display = (mode === 'add') ? 'none' : 'block';
|
deleteBtn.style.display = (mode === 'add') ? 'none' : 'block';
|
||||||
|
|
||||||
if (mode === 'add') {
|
if (mode === 'add') {
|
||||||
@@ -156,11 +148,5 @@ class PartsMasterModal extends BaseModal {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export const partsMasterModal = new PartsMasterModal();
|
export const partsMasterModal = new PartsMasterModal();
|
||||||
|
export function initPartsMasterModal(onSave: () => void, closeModals: () => void) { partsMasterModal.init(onSave, closeModals); }
|
||||||
export function initPartsMasterModal(onSave: () => void, closeModals: () => void) {
|
export function openPartsMasterModal(asset: any, mode: 'view' | 'edit' | 'add' = 'view') { partsMasterModal.open(asset, mode); }
|
||||||
partsMasterModal.init(onSave, closeModals);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function openPartsMasterModal(asset: any, mode: 'view' | 'edit' | 'add' = 'view') {
|
|
||||||
partsMasterModal.open(asset, mode);
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -1,14 +1,14 @@
|
|||||||
import { state, saveAsset, deleteAsset } from '../../core/state';
|
import { state, saveAsset, deleteAsset } from '../../core/state';
|
||||||
import { BaseModal } from './BaseModal';
|
import { BaseModal } from './BaseModal';
|
||||||
import { openSwUserModal } from './SWUserModal';
|
import { openSwUserModal } from './SWUserModal';
|
||||||
import { createIcons, History, Plus, X, Save, Edit2, RotateCcw, Calendar, Users } from 'lucide';
|
import { createIcons, History, Plus, X, Save, RotateCcw, Calendar, Users } from 'lucide';
|
||||||
import { CORP_LIST } from './SharedData';
|
import { CORP_LIST } from './SharedData';
|
||||||
import { ASSET_SCHEMA, UI_TEXT } from '../../core/schema';
|
import { ASSET_SCHEMA, UI_TEXT } from '../../core/schema';
|
||||||
import { API_BASE_URL } from '../../core/utils';
|
import { API_BASE_URL } from '../../core/utils';
|
||||||
import {
|
import {
|
||||||
generateOptionsHTML,
|
generateOptionsHTML,
|
||||||
setFieldValue,
|
setFieldValue,
|
||||||
getFieldValue,
|
getFieldValue,
|
||||||
applyDateMask
|
applyDateMask
|
||||||
} from './ModalUtils';
|
} from './ModalUtils';
|
||||||
|
|
||||||
@@ -22,15 +22,15 @@ class SwAssetModal extends BaseModal {
|
|||||||
<div id="sw-asset-modal" class="modal-overlay hidden">
|
<div id="sw-asset-modal" class="modal-overlay hidden">
|
||||||
<div class="modal-content wide">
|
<div class="modal-content wide">
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
<h2 id="sw-modal-title">${this.title}</h2>
|
<h2 id="sw-modal-title" class="modal-title">${this.title}</h2>
|
||||||
<button id="btn-close-sw-modal" class="btn-icon" aria-label="닫기"><i data-lucide="x"></i></button>
|
<button id="btn-close-sw-modal" class="btn-icon" aria-label="닫기">×</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-body">
|
<div class="modal-body">
|
||||||
<div class="modal-body-split">
|
<div class="modal-body-split">
|
||||||
<div class="modal-form-area">
|
<div class="modal-form-area">
|
||||||
<form id="sw-asset-form" class="grid-form">
|
<form id="sw-asset-form" class="grid-form">
|
||||||
<input type="hidden" id="sw-asset-id" name="id" />
|
<input type="hidden" id="sw-asset-id" name="id" />
|
||||||
|
|
||||||
<div class="form-section-title">기본 정보 (Identity)</div>
|
<div class="form-section-title">기본 정보 (Identity)</div>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label>자산 유형</label>
|
<label>자산 유형</label>
|
||||||
@@ -81,7 +81,7 @@ class SwAssetModal extends BaseModal {
|
|||||||
</div>
|
</div>
|
||||||
<div class="form-group sw-standard-field">
|
<div class="form-group sw-standard-field">
|
||||||
<label>${ASSET_SCHEMA.PURCHASE_AMOUNT.ui}</label>
|
<label>${ASSET_SCHEMA.PURCHASE_AMOUNT.ui}</label>
|
||||||
<input type="text" id="sw-금액" name="purchase_amount" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/\\\\B(?=(\\\\d{3})+(?!\\\\d))/g, ',')" />
|
<input type="text" id="sw-금액" name="purchase_amount" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',')" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-group cloud-only">
|
<div class="form-group cloud-only">
|
||||||
@@ -151,7 +151,7 @@ class SwAssetModal extends BaseModal {
|
|||||||
<div class="history-header">
|
<div class="history-header">
|
||||||
<h3><i data-lucide="history"></i> 업데이트 내역</h3>
|
<h3><i data-lucide="history"></i> 업데이트 내역</h3>
|
||||||
<button type="button" id="btn-open-sw-update" class="btn btn-outline btn-sm">
|
<button type="button" id="btn-open-sw-update" class="btn btn-outline btn-sm">
|
||||||
계약 업데이트 <i data-lucide="refresh-ccw"></i>
|
계약 업데이트 <i data-lucide="rotate-ccw"></i>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div id="sw-history-list" class="history-timeline"></div>
|
<div id="sw-history-list" class="history-timeline"></div>
|
||||||
@@ -174,7 +174,7 @@ class SwAssetModal extends BaseModal {
|
|||||||
<div class="modal-content" style="max-width: 500px;">
|
<div class="modal-content" style="max-width: 500px;">
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
<h2 class="modal-title">계약 업데이트 반영</h2>
|
<h2 class="modal-title">계약 업데이트 반영</h2>
|
||||||
<button id="btn-close-sw-update" class="btn-icon"><i data-lucide="x"></i></button>
|
<button id="btn-close-sw-update" class="btn-icon">×</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-body">
|
<div class="modal-body">
|
||||||
<div class="grid-form" style="grid-template-columns: 1fr;">
|
<div class="grid-form" style="grid-template-columns: 1fr;">
|
||||||
@@ -209,6 +209,15 @@ class SwAssetModal extends BaseModal {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<style>
|
||||||
|
.hidden-picker {
|
||||||
|
position: absolute;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -231,7 +240,6 @@ class SwAssetModal extends BaseModal {
|
|||||||
if (this.currentAsset) openSwUserModal(this.currentAsset);
|
if (this.currentAsset) openSwUserModal(this.currentAsset);
|
||||||
});
|
});
|
||||||
|
|
||||||
// 업데이트 모달 로직
|
|
||||||
const subModal = document.getElementById('sw-update-modal')!;
|
const subModal = document.getElementById('sw-update-modal')!;
|
||||||
const closeUpdate = () => subModal.classList.add('hidden');
|
const closeUpdate = () => subModal.classList.add('hidden');
|
||||||
document.getElementById('btn-close-sw-update')?.addEventListener('click', closeUpdate);
|
document.getElementById('btn-close-sw-update')?.addEventListener('click', closeUpdate);
|
||||||
@@ -278,7 +286,7 @@ class SwAssetModal extends BaseModal {
|
|||||||
const formData = new FormData(this.formEl!);
|
const formData = new FormData(this.formEl!);
|
||||||
const updated = { ...this.currentAsset };
|
const updated = { ...this.currentAsset };
|
||||||
formData.forEach((value, key) => { updated[key] = value; });
|
formData.forEach((value, key) => { updated[key] = value; });
|
||||||
|
|
||||||
let categoryKey = (type === '내부SW') ? 'swInternal' : (type === '클라우드' ? 'cloud' : 'swExternal');
|
let categoryKey = (type === '내부SW') ? 'swInternal' : (type === '클라우드' ? 'cloud' : 'swExternal');
|
||||||
if (await saveAsset(categoryKey, updated)) { onSave(); this.close(); closeModals(); }
|
if (await saveAsset(categoryKey, updated)) { onSave(); this.close(); closeModals(); }
|
||||||
});
|
});
|
||||||
@@ -356,16 +364,10 @@ class SwAssetModal extends BaseModal {
|
|||||||
if (!container) return;
|
if (!container) return;
|
||||||
const logs = (state.masterData.logs || []).filter(l => l.assetId === swId);
|
const logs = (state.masterData.logs || []).filter(l => l.assetId === swId);
|
||||||
if (logs.length === 0) { container.innerHTML = '<div class="empty-history">수정 이력이 없습니다.</div>'; return; }
|
if (logs.length === 0) { container.innerHTML = '<div class="empty-history">수정 이력이 없습니다.</div>'; return; }
|
||||||
container.innerHTML = logs.map(l => `<div class=\"history-item\"><div class=\"history-date\">${l.date}</div><div class=\"history-user\">${l.user}</div><div class=\"history-details\">${l.details}</div></div>`).join('');
|
container.innerHTML = logs.map(l => `<div class="history-item"><div class="history-date">${l.date}</div><div class="history-user">${l.user}</div><div class="history-details">${l.details}</div></div>`).join('');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export const swModal = new SwAssetModal();
|
export const swModal = new SwAssetModal();
|
||||||
|
export function initSwModal(onSave: () => void, closeModals: () => void) { swModal.init(onSave, closeModals); }
|
||||||
export function initSwModal(onSave: () => void, closeModals: () => void) {
|
export function openSwModal(asset: any, mode: 'view' | 'add' | 'edit' = 'view') { swModal.open(asset, mode); }
|
||||||
swModal.init(onSave, closeModals);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function openSwModal(asset: any, mode: 'view' | 'add' | 'edit' = 'view') {
|
|
||||||
swModal.open(asset, mode);
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -16,14 +16,14 @@ class SwUserModal extends BaseModal {
|
|||||||
<div id="sw-user-asset-modal" class="modal-overlay hidden">
|
<div id="sw-user-asset-modal" class="modal-overlay hidden">
|
||||||
<div class="modal-content wide">
|
<div class="modal-content wide">
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
<h2 id="sw-user-title">${this.title}</h2>
|
<h2 id="sw-user-title" class="modal-title">${this.title}</h2>
|
||||||
<button id="btn-close-sw-user-modal" class="btn-icon"><i data-lucide="x"></i></button>
|
<button id="btn-close-sw-user-modal" class="btn-icon" aria-label="닫기">×</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-body">
|
<div class="modal-body">
|
||||||
<div class="sw-info-summary" id="sw-user-sw-info"></div>
|
<div class="sw-info-summary" id="sw-user-sw-info"></div>
|
||||||
|
|
||||||
<div class="user-list-toolbar" style="display:flex; justify-content:space-between; margin-bottom:1rem; align-items:center;">
|
<div class="user-list-toolbar" style="display:flex; justify-content:space-between; margin-bottom:1rem; align-items:center;">
|
||||||
<h3 style="font-size:1rem; font-weight:600;">할당된 사용자 목록</h3>
|
<h3 class="detail-section-title">할당된 사용자 목록</h3>
|
||||||
<button type="button" id="btn-open-add-user" class="btn btn-primary btn-sm"><i data-lucide="plus"></i> 사용자 추가</button>
|
<button type="button" id="btn-open-add-user" class="btn btn-primary btn-sm"><i data-lucide="plus"></i> 사용자 추가</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -55,10 +55,10 @@ class SwUserModal extends BaseModal {
|
|||||||
|
|
||||||
<!-- 사용자 추가/수정 서브 모달 -->
|
<!-- 사용자 추가/수정 서브 모달 -->
|
||||||
<div id="sw-user-edit-modal" class="modal-overlay hidden" style="z-index: 1100;">
|
<div id="sw-user-edit-modal" class="modal-overlay hidden" style="z-index: 1100;">
|
||||||
<div class="modal-content" style="width: 400px;">
|
<div class="modal-content" style="max-width: 400px;">
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
<h3 id="sw-user-edit-title">사용자 정보</h3>
|
<h3 id="sw-user-edit-title" class="modal-title">사용자 정보</h3>
|
||||||
<button id="btn-close-user-edit" class="btn-icon"><i data-lucide="x"></i></button>
|
<button id="btn-close-user-edit" class="btn-icon">×</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-body">
|
<div class="modal-body">
|
||||||
<form id="sw-user-edit-form" class="grid-form" style="grid-template-columns: 1fr;">
|
<form id="sw-user-edit-form" class="grid-form" style="grid-template-columns: 1fr;">
|
||||||
@@ -81,22 +81,22 @@ class SwUserModal extends BaseModal {
|
|||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label>사용 시작일</label>
|
<label>사용 시작일</label>
|
||||||
<div style="display:flex; gap:0.25rem; align-items:center; position:relative;">
|
<div class="input-with-btn">
|
||||||
<input type="text" id="new-user-시작일" style="flex:1;" />
|
<input type="text" id="new-user-시작일" />
|
||||||
<button type="button" class="btn-icon" onclick="const p = document.getElementById('new-user-시작일-picker'); p.value = document.getElementById('new-user-시작일').value; p.showPicker();" style="padding:0.25rem;">
|
<button type="button" class="btn-icon" onclick="const p = document.getElementById('new-user-시작일-picker'); p.value = document.getElementById('new-user-시작일').value; p.showPicker();">
|
||||||
<i data-lucide="calendar" style="width:18px; height:18px; color:var(--primary-color);"></i>
|
<i data-lucide="calendar"></i>
|
||||||
</button>
|
</button>
|
||||||
<input type="date" id="new-user-시작일-picker" style="position:absolute; width:0; height:0; opacity:0; pointer-events:none;" onchange="document.getElementById('new-user-시작일').value = this.value" tabindex="-1" />
|
<input type="date" id="new-user-시작일-picker" class="hidden-picker" onchange="document.getElementById('new-user-시작일').value = this.value" tabindex="-1" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label>사용 종료일</label>
|
<label>사용 종료일</label>
|
||||||
<div style="display:flex; gap:0.25rem; align-items:center; position:relative;">
|
<div class="input-with-btn">
|
||||||
<input type="text" id="new-user-종료일" style="flex:1;" />
|
<input type="text" id="new-user-종료일" />
|
||||||
<button type="button" class="btn-icon" onclick="const p = document.getElementById('new-user-종료일-picker'); p.value = document.getElementById('new-user-종료일').value; p.showPicker();" style="padding:0.25rem;">
|
<button type="button" class="btn-icon" onclick="const p = document.getElementById('new-user-종료일-picker'); p.value = document.getElementById('new-user-종료일').value; p.showPicker();">
|
||||||
<i data-lucide="calendar" style="width:18px; height:18px; color:var(--primary-color);"></i>
|
<i data-lucide="calendar"></i>
|
||||||
</button>
|
</button>
|
||||||
<input type="date" id="new-user-종료일-picker" style="position:absolute; width:0; height:0; opacity:0; pointer-events:none;" onchange="document.getElementById('new-user-종료일').value = this.value" tabindex="-1" />
|
<input type="date" id="new-user-종료일-picker" class="hidden-picker" onchange="document.getElementById('new-user-종료일').value = this.value" tabindex="-1" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
@@ -111,6 +111,15 @@ class SwUserModal extends BaseModal {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<style>
|
||||||
|
.hidden-picker {
|
||||||
|
position: absolute;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -140,10 +149,9 @@ class SwUserModal extends BaseModal {
|
|||||||
onSave(); this.close(); closeModals();
|
onSave(); this.close(); closeModals();
|
||||||
});
|
});
|
||||||
|
|
||||||
// 닫기 이벤트들 (BaseModal의 공통 버튼 외 추가분)
|
|
||||||
document.getElementById('btn-close-sw-user-modal')?.addEventListener('click', () => this.close());
|
document.getElementById('btn-close-sw-user-modal')?.addEventListener('click', () => this.close());
|
||||||
document.getElementById('btn-cancel-sw-user')?.addEventListener('click', () => this.close());
|
document.getElementById('btn-cancel-sw-user')?.addEventListener('click', () => this.close());
|
||||||
|
|
||||||
const subModal = document.getElementById('sw-user-edit-modal')!;
|
const subModal = document.getElementById('sw-user-edit-modal')!;
|
||||||
const closeSub = () => subModal.classList.add('hidden');
|
const closeSub = () => subModal.classList.add('hidden');
|
||||||
document.getElementById('btn-close-user-edit')?.addEventListener('click', closeSub);
|
document.getElementById('btn-close-user-edit')?.addEventListener('click', closeSub);
|
||||||
@@ -155,9 +163,9 @@ class SwUserModal extends BaseModal {
|
|||||||
protected fillFormData(asset: any): void {
|
protected fillFormData(asset: any): void {
|
||||||
const swInfo = document.getElementById('sw-user-sw-info')!;
|
const swInfo = document.getElementById('sw-user-sw-info')!;
|
||||||
swInfo.innerHTML = `
|
swInfo.innerHTML = `
|
||||||
<div style="background:var(--bg-light); padding:1rem; border-radius:6px; margin-bottom:1.5rem;">
|
<div class="sw-info-header" style="margin-bottom: 1.5rem; border-bottom: 1px solid var(--hairline); padding-bottom: 1rem;">
|
||||||
<div style="font-size:0.8rem; color:var(--text-muted); margin-bottom:0.25rem;">${asset.purchase_corp || asset.법인 || ''}</div>
|
<div class="detail-label-sm">${asset.purchase_corp || asset.법인 || ''}</div>
|
||||||
<div style="font-size:1.1rem; font-weight:700; color:var(--primary-color);">${asset.product_name || asset.제품명 || ''}</div>
|
<div class="asset-code-title">${asset.product_name || asset.제품명 || ''}</div>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
@@ -165,7 +173,7 @@ class SwUserModal extends BaseModal {
|
|||||||
this.tempSwUsers = existingMapping ? (existingMapping.userData || []).map((u: any) => ({
|
this.tempSwUsers = existingMapping ? (existingMapping.userData || []).map((u: any) => ({
|
||||||
조직: u[0], 부서: u[1], 직위: u[2], 이름: u[3], 사용기간: u[4], 신청서명: u[5]
|
조직: u[0], 부서: u[1], 직위: u[2], 이름: u[3], 사용기간: u[4], 신청서명: u[5]
|
||||||
})) : [];
|
})) : [];
|
||||||
|
|
||||||
this.renderUserList();
|
this.renderUserList();
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -173,9 +181,10 @@ class SwUserModal extends BaseModal {
|
|||||||
|
|
||||||
private renderUserList() {
|
private renderUserList() {
|
||||||
const tbody = document.getElementById('sw-user-table-body')!;
|
const tbody = document.getElementById('sw-user-table-body')!;
|
||||||
|
if (!tbody) return;
|
||||||
tbody.innerHTML = '';
|
tbody.innerHTML = '';
|
||||||
if (this.tempSwUsers.length === 0) {
|
if (this.tempSwUsers.length === 0) {
|
||||||
tbody.innerHTML = '<tr><td colspan="7" style="text-align:center; padding:2rem; color:var(--text-muted);">할당된 사용자가 없습니다.</td></tr>';
|
tbody.innerHTML = '<tr><td colspan="7" style="text-align:center; padding:2rem; color:var(--mute);">할당된 사용자가 없습니다.</td></tr>';
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -257,11 +266,5 @@ class SwUserModal extends BaseModal {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export const swUserModal = new SwUserModal();
|
export const swUserModal = new SwUserModal();
|
||||||
|
export function initSwUserModal(onSave: () => void, closeModals: () => void) { swUserModal.init(onSave, closeModals); }
|
||||||
export function initSwUserModal(onSave: () => void, closeModals: () => void) {
|
export function openSwUserModal(asset: any) { swUserModal.open(asset); }
|
||||||
swUserModal.init(onSave, closeModals);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function openSwUserModal(asset: any) {
|
|
||||||
swUserModal.open(asset);
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -10,55 +10,52 @@ class UserModal extends BaseModal {
|
|||||||
}
|
}
|
||||||
|
|
||||||
protected renderFrameHTML(): string {
|
protected renderFrameHTML(): string {
|
||||||
const sharedStyle = 'height: 38px !important; box-sizing: border-box !important; font-size: 13px; margin: 0;';
|
|
||||||
const inputStyle = sharedStyle;
|
|
||||||
|
|
||||||
return `
|
return `
|
||||||
<div id="user-asset-modal" class="modal-overlay hidden">
|
<div id="user-asset-modal" class="modal-overlay hidden">
|
||||||
<div class="modal-content" style="max-width: 500px; width: 100%;">
|
<div class="modal-content" style="max-width: 500px;">
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
<h2 id="user-modal-title" style="margin: 0; font-size: 18px; font-weight: 800; color: white;">\${this.title}</h2>
|
<h2 id="user-modal-title" class="modal-title">${this.title}</h2>
|
||||||
<button id="btn-close-user-modal" class="btn-icon" aria-label="닫기" style="font-size: 28px; color: white; background: none; border: none; cursor: pointer; line-height: 1;">×</button>
|
<button id="btn-close-user-modal" class="btn-icon" aria-label="닫기">×</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-body" style="padding: 24px; overflow-y: auto;">
|
<div class="modal-body">
|
||||||
<form id="user-asset-form" class="grid-form" style="display: flex; flex-direction: column; gap: 16px;">
|
<form id="user-asset-form" class="grid-form" style="grid-template-columns: 1fr;">
|
||||||
<input type="hidden" id="user-id" name="id" />
|
<input type="hidden" id="user-id" name="id" />
|
||||||
|
|
||||||
<div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
|
<div class="form-group">
|
||||||
<label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">사번</label>
|
<label>사번</label>
|
||||||
<input type="text" id="user-emp-no" name="emp_no" placeholder="예: HM202601" required style="\${inputStyle} width: 100%;" />
|
<input type="text" id="user-emp-no" name="emp_no" placeholder="예: HM202601" required />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
|
<div class="form-group">
|
||||||
<label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">사용자명</label>
|
<label>사용자명</label>
|
||||||
<input type="text" id="user-name-input" name="user_name" placeholder="예: 홍길동" required style="\${inputStyle} width: 100%;" />
|
<input type="text" id="user-name-input" name="user_name" placeholder="예: 홍길동" required />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
|
<div class="form-group">
|
||||||
<label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">사용조직 (부서)</label>
|
<label>사용조직 (부서)</label>
|
||||||
<input type="text" id="user-dept" name="dept_name" placeholder="예: 기술개발센터" required style="\${inputStyle} width: 100%;" />
|
<input type="text" id="user-dept" name="dept_name" placeholder="예: 기술개발센터" required />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
|
<div class="form-group">
|
||||||
<label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">직무 (직급)</label>
|
<label>직무 (직급)</label>
|
||||||
<input type="text" id="user-position-input" name="position" placeholder="예: BIM모델러" required style="\${inputStyle} width: 100%;" />
|
<input type="text" id="user-position-input" name="position" placeholder="예: BIM모델러" required />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
|
<div class="form-group">
|
||||||
<label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">상태</label>
|
<label>상태</label>
|
||||||
<select id="user-status" name="status" style="\${sharedStyle}">
|
<select id="user-status" name="status">
|
||||||
<option value="재직">재직</option>
|
<option value="재직">재직</option>
|
||||||
<option value="퇴직">퇴직</option>
|
<option value="퇴직">퇴직</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-footer" style="display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; background: #f8fafc; border-top: 1px solid var(--border-color);">
|
<div class="modal-footer">
|
||||||
<button id="btn-delete-user-asset" class="btn btn-outline btn-danger" style="height: 42px;">삭제</button>
|
<button id="btn-delete-user-asset" class="btn btn-outline btn-danger">삭제</button>
|
||||||
<div class="footer-actions" style="display: flex; gap: 8px;">
|
<div class="footer-actions">
|
||||||
<button id="btn-revert-user-edit" class="btn btn-outline hidden" style="height: 42px;">수정 취소</button>
|
<button id="btn-revert-user-edit" class="btn btn-outline hidden">수정 취소</button>
|
||||||
<button id="btn-cancel-user-modal" class="btn btn-outline" style="height: 42px;">닫기</button>
|
<button id="btn-cancel-user-modal" class="btn btn-outline">닫기</button>
|
||||||
<button id="btn-save-user-asset" class="btn btn-primary" style="height: 42px;">수정</button>
|
<button id="btn-save-user-asset" class="btn btn-primary">수정</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -119,6 +116,8 @@ class UserModal extends BaseModal {
|
|||||||
onSave(); this.close(); closeModals();
|
onSave(); this.close(); closeModals();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
createIcons({ icons: { Save, X } });
|
||||||
}
|
}
|
||||||
|
|
||||||
protected fillFormData(asset: any): void {
|
protected fillFormData(asset: any): void {
|
||||||
@@ -132,18 +131,13 @@ class UserModal extends BaseModal {
|
|||||||
|
|
||||||
protected onAfterOpen(asset: any, mode: string): void {
|
protected onAfterOpen(asset: any, mode: string): void {
|
||||||
const titleEl = document.getElementById('user-modal-title');
|
const titleEl = document.getElementById('user-modal-title');
|
||||||
|
|
||||||
if (titleEl) {
|
if (titleEl) {
|
||||||
if (mode === 'add') {
|
titleEl.textContent = (mode === 'add') ? '신규 임직원 등록' : '임직원 정보 수정';
|
||||||
titleEl.textContent = '신규 임직원 등록';
|
|
||||||
} else {
|
|
||||||
titleEl.textContent = '임직원 정보 수정';
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const deleteBtn = document.getElementById('btn-delete-user-asset')!;
|
const deleteBtn = document.getElementById('btn-delete-user-asset')!;
|
||||||
const saveBtn = document.getElementById('btn-save-user-asset')!;
|
const saveBtn = document.getElementById('btn-save-user-asset')!;
|
||||||
|
|
||||||
deleteBtn.style.display = (mode === 'add') ? 'none' : 'block';
|
deleteBtn.style.display = (mode === 'add') ? 'none' : 'block';
|
||||||
|
|
||||||
if (mode === 'add') {
|
if (mode === 'add') {
|
||||||
@@ -161,11 +155,5 @@ class UserModal extends BaseModal {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export const userModal = new UserModal();
|
export const userModal = new UserModal();
|
||||||
|
export function initUserModal(onSave: () => void, closeModals: () => void) { userModal.init(onSave, closeModals); }
|
||||||
export function initUserModal(onSave: () => void, closeModals: () => void) {
|
export function openUserModal(asset: any, mode: 'view' | 'edit' | 'add' = 'view') { userModal.open(asset, mode); }
|
||||||
userModal.init(onSave, closeModals);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function openUserModal(asset: any, mode: 'view' | 'edit' | 'add' = 'view') {
|
|
||||||
userModal.open(asset, mode);
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -1,16 +1,15 @@
|
|||||||
import { state } from '../../core/state';
|
import { state } from '../../core/state';
|
||||||
import { openSwDashboardDetail, openSwUsageDetail } from '../../components/Modal/DashboardDetailModal';
|
import { openSwUsageDetail } from '../../components/Modal/DashboardDetailModal';
|
||||||
import { normalizeDate } from '../../core/utils';
|
import { normalizeDate } from '../../core/utils';
|
||||||
import { ASSET_SCHEMA } from '../../core/schema';
|
import { ASSET_SCHEMA } from '../../core/schema';
|
||||||
|
|
||||||
export function renderSwDashboard(container: HTMLElement) {
|
export function renderSwDashboard(container: HTMLElement) {
|
||||||
let extQty = 0, extUsed = 0, extExp = 0, extTotal = 0;
|
let extQty = 0, extUsed = 0, extTotal = 0;
|
||||||
let intQty = 0, intUsed = 0, intExp = 0, intTotal = 0;
|
let intQty = 0, intUsed = 0, intTotal = 0;
|
||||||
|
|
||||||
let extCost2026 = 0;
|
let extCost2026 = 0;
|
||||||
let intCost2026 = 0;
|
let intCost2026 = 0;
|
||||||
|
|
||||||
// 통합 SW 데이터
|
|
||||||
const allSw = [...state.masterData.swExternal, ...state.masterData.swInternal];
|
const allSw = [...state.masterData.swExternal, ...state.masterData.swInternal];
|
||||||
|
|
||||||
allSw.forEach(sw => {
|
allSw.forEach(sw => {
|
||||||
@@ -21,7 +20,6 @@ export function renderSwDashboard(container: HTMLElement) {
|
|||||||
|
|
||||||
if (sw.asset_type === '외부SW' || sw.type === '외부SW') {
|
if (sw.asset_type === '외부SW' || sw.type === '외부SW') {
|
||||||
extQty += qty; extUsed += assigned; extTotal++;
|
extQty += qty; extUsed += assigned; extTotal++;
|
||||||
if (isSWExpiring(sw)) extExp++;
|
|
||||||
if (sw[ASSET_SCHEMA.PURCHASE_DATE.key]?.startsWith('2026')) extCost2026 += price;
|
if (sw[ASSET_SCHEMA.PURCHASE_DATE.key]?.startsWith('2026')) extCost2026 += price;
|
||||||
} else {
|
} else {
|
||||||
intQty += qty; intUsed += assigned; intTotal++;
|
intQty += qty; intUsed += assigned; intTotal++;
|
||||||
@@ -35,36 +33,36 @@ export function renderSwDashboard(container: HTMLElement) {
|
|||||||
container.innerHTML = `
|
container.innerHTML = `
|
||||||
<div class="view-container">
|
<div class="view-container">
|
||||||
<h3 class="dashboard-section-title">소프트웨어 라이선스 현황</h3>
|
<h3 class="dashboard-section-title">소프트웨어 라이선스 현황</h3>
|
||||||
|
|
||||||
<div class="dashboard-layout-2col" style="margin-bottom: 1.5rem;">
|
<div class="dashboard-layout-2col">
|
||||||
<div class="dashboard-card" data-action="ext-usage" style="cursor:pointer; min-height:auto;">
|
<div class="dashboard-card clickable" data-action="ext-usage">
|
||||||
<span style="font-size:1.21rem; font-weight:700; color:var(--text-main);">외부 소프트웨어 사용율</span>
|
<div class="stat-label">외부 소프트웨어 사용율</div>
|
||||||
<div style="font-size: 1.02rem; color:var(--text-muted); margin-bottom: 1rem;">${extQty}카피 중 ${extUsed}개 할당</div>
|
<div class="stat-sub">${extQty}카피 중 ${extUsed}개 할당</div>
|
||||||
<div style="font-size: 2.21rem; font-weight:700; color:var(--dash-primary);">${extPer}%</div>
|
<div class="stat-value"><span>${extPer}</span><span>%</span></div>
|
||||||
<div style="width: 100%; height: 4px; background-color: var(--border-color); border-radius: 2px; overflow: hidden; margin-top: 0.5rem;">
|
<div class="stat-progress-bar">
|
||||||
<div style="width: ${extPer}%; height: 100%; background-color: var(--dash-primary);"></div>
|
<div class="progress-fill" style="width: ${extPer}%;"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="dashboard-card" data-action="int-usage" style="cursor:pointer; min-height:auto;">
|
<div class="dashboard-card clickable" data-action="int-usage">
|
||||||
<span style="font-size:1.21rem; font-weight:700; color:var(--text-main);">내부 소프트웨어 현황</span>
|
<div class="stat-label">내부 소프트웨어 현황</div>
|
||||||
<div style="font-size: 1.02rem; color:var(--text-muted); margin-bottom: 1rem;">등록된 내부 솔루션: ${intTotal}개</div>
|
<div class="stat-sub">등록된 내부 솔루션: ${intTotal}개</div>
|
||||||
<div style="font-size: 2.21rem; font-weight:700; color:var(--dash-primary);">${intPer}%</div>
|
<div class="stat-value"><span>${intPer}</span><span>%</span></div>
|
||||||
<div style="width: 100%; height: 4px; background-color: var(--border-color); border-radius: 2px; overflow: hidden; margin-top: 0.5rem;">
|
<div class="stat-progress-bar">
|
||||||
<div style="width: ${intPer}%; height: 100%; background-color: var(--dash-primary);"></div>
|
<div class="progress-fill" style="width: ${intPer}%;"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3 class="dashboard-section-title">2026년 누적 도입 비용 분석</h3>
|
<h3 class="dashboard-section-title">2026년 누적 도입 비용 분석</h3>
|
||||||
|
|
||||||
<div style="display:grid; grid-template-columns: repeat(2, 1fr); gap:1.5rem; margin-bottom:1.5rem;">
|
<div class="dashboard-layout-2col">
|
||||||
<div class="dashboard-card" style="min-height:auto;">
|
<div class="dashboard-card">
|
||||||
<span style="font-size:1.21rem; font-weight:700; color:var(--text-main);">외부 SW 누적 비용 (2026)</span>
|
<div class="stat-label">외부 SW 누적 비용 (2026)</div>
|
||||||
<div style="font-size: 2.21rem; font-weight:700; color:var(--dash-primary);">₩ ${extCost2026.toLocaleString()}</div>
|
<div class="stat-value"><span>₩ ${extCost2026.toLocaleString()}</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="dashboard-card" style="min-height:auto;">
|
<div class="dashboard-card">
|
||||||
<span style="font-size:1.21rem; font-weight:700; color:var(--text-main);">내부 SW 누적 비용 (2026)</span>
|
<div class="stat-label">내부 SW 누적 비용 (2026)</div>
|
||||||
<div style="font-size: 2.21rem; font-weight:700; color:#3b82f6;">₩ ${intCost2026.toLocaleString()}</div>
|
<div class="stat-value" style="color: var(--color-blue);"><span>₩ ${intCost2026.toLocaleString()}</span></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -73,11 +71,3 @@ export function renderSwDashboard(container: HTMLElement) {
|
|||||||
container.querySelector('[data-action="ext-usage"]')?.addEventListener('click', () => openSwUsageDetail('외부 소프트웨어 사용 목록', state.masterData.swExternal));
|
container.querySelector('[data-action="ext-usage"]')?.addEventListener('click', () => openSwUsageDetail('외부 소프트웨어 사용 목록', state.masterData.swExternal));
|
||||||
container.querySelector('[data-action="int-usage"]')?.addEventListener('click', () => openSwUsageDetail('내부 소프트웨어 사용 목록', state.masterData.swInternal));
|
container.querySelector('[data-action="int-usage"]')?.addEventListener('click', () => openSwUsageDetail('내부 소프트웨어 사용 목록', state.masterData.swInternal));
|
||||||
}
|
}
|
||||||
|
|
||||||
function isSWExpiring(sw: any) {
|
|
||||||
const expiry = sw[ASSET_SCHEMA.EXPIRED_DATE.key];
|
|
||||||
if (!expiry) return false;
|
|
||||||
const endMs = new Date(normalizeDate(expiry)).getTime();
|
|
||||||
const diffDays = (endMs - Date.now()) / (1000 * 60 * 60 * 24);
|
|
||||||
return diffDays >= 0 && diffDays <= 30;
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -58,7 +58,7 @@ export function renderPartsMasterList(container: HTMLElement) {
|
|||||||
let color = '#3b82f6'; // blue
|
let color = '#3b82f6'; // blue
|
||||||
if (score >= 20) color = '#ef4444'; // red
|
if (score >= 20) color = '#ef4444'; // red
|
||||||
else if (score >= 10) color = '#f59e0b'; // orange
|
else if (score >= 10) color = '#f59e0b'; // orange
|
||||||
return `<strong style="color: ${color}; font-size: 14px;">-${score}점</strong>`;
|
return `<strong style="color: ${color};">-${score}점</strong>`;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|||||||
Reference in New Issue
Block a user