172 lines
7.2 KiB
TypeScript
172 lines
7.2 KiB
TypeScript
import { state, savePartsMaster, deletePartsMaster } from '../../core/state';
|
|
import { BaseModal } from './BaseModal';
|
|
import { generateOptionsHTML, setFieldValue, getFieldValue } from './ModalUtils';
|
|
import { createIcons, X, Save, Plus } from 'lucide';
|
|
import { UI_TEXT } from '../../core/schema';
|
|
|
|
class PartsMasterModal extends BaseModal {
|
|
constructor() {
|
|
super('parts-master', '부품 표준 정보');
|
|
}
|
|
|
|
protected renderFrameHTML(): string {
|
|
return `
|
|
<div id="parts-master-asset-modal" class="modal-overlay hidden">
|
|
<div class="modal-content narrow">
|
|
<div class="modal-header">
|
|
<div class="header-left">
|
|
<h2 id="parts-master-modal-title" class="modal-title">${this.title}</h2>
|
|
<div id="parts-master-header-identity" class="header-identity"></div>
|
|
</div>
|
|
<button id="btn-close-parts-master-modal" class="btn-icon" aria-label="닫기">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="parts-master-asset-form" class="grid-form vertical-form">
|
|
<input type="hidden" id="parts-master-id" name="id" />
|
|
|
|
<div class="form-group">
|
|
<label>부품 분류</label>
|
|
<select id="parts-master-category" name="category">
|
|
<option value="CPU">CPU</option>
|
|
<option value="GPU">GPU</option>
|
|
<option value="RAM">RAM</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>부품 표준 명칭</label>
|
|
<input type="text" id="parts-master-component-name" name="component_name" placeholder="예: Intel Core i7-14700K" required />
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>성능 등급</label>
|
|
<input type="text" id="parts-master-score-tier" name="score_tier" placeholder="예: i7 / S / 최적" required />
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>감점 점수 (양수로 입력)</label>
|
|
<input type="number" id="parts-master-deduction" name="deduction" placeholder="예: 5" required />
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button id="btn-delete-parts-master-asset" class="btn btn-outline btn-danger">삭제</button>
|
|
<div class="footer-actions">
|
|
<button id="btn-revert-parts-master-edit" class="btn btn-outline hidden">수정 취소</button>
|
|
<button id="btn-cancel-parts-master-modal" class="btn btn-outline">닫기</button>
|
|
<button id="btn-save-parts-master-asset" class="btn btn-primary">수정</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
protected initChildLogic(onSave: () => void, closeModals: () => void): void {
|
|
const saveBtn = document.getElementById('btn-save-parts-master-asset')!;
|
|
const revertBtn = document.getElementById('btn-revert-parts-master-edit')!;
|
|
const deleteBtn = document.getElementById('btn-delete-parts-master-asset')!;
|
|
|
|
saveBtn.addEventListener('click', async () => {
|
|
if (!this.currentAsset) return;
|
|
if (!this.isEditMode) {
|
|
this.setEditLockMode('edit');
|
|
this.isEditMode = true;
|
|
return;
|
|
}
|
|
|
|
const category = (document.getElementById('parts-master-category') as HTMLSelectElement).value;
|
|
const compName = (document.getElementById('parts-master-component-name') as HTMLInputElement).value.trim();
|
|
const tier = (document.getElementById('parts-master-score-tier') as HTMLInputElement).value.trim();
|
|
const deductStr = (document.getElementById('parts-master-deduction') as HTMLInputElement).value;
|
|
|
|
if (!compName || !tier || deductStr === '') {
|
|
alert('모든 필드를 올바르게 입력해 주세요.');
|
|
return;
|
|
}
|
|
|
|
const updated = {
|
|
id: this.currentAsset.id || null,
|
|
category,
|
|
component_name: compName,
|
|
score_tier: tier,
|
|
deduction: parseInt(deductStr, 10)
|
|
};
|
|
|
|
if (await savePartsMaster(updated)) {
|
|
alert(UI_TEXT.MESSAGES.SAVE_SUCCESS);
|
|
onSave(); this.close(); closeModals();
|
|
}
|
|
});
|
|
|
|
revertBtn.addEventListener('click', () => {
|
|
this.setEditLockMode('view');
|
|
if (this.currentAsset) this.fillFormData(this.currentAsset);
|
|
});
|
|
|
|
deleteBtn.addEventListener('click', async () => {
|
|
if (!this.currentAsset || !this.currentAsset.id) return;
|
|
if (!confirm('정말로 이 부품 마스터 정보를 삭제하시겠습니까?\n삭제 시 기존 등록 PC 중 이 부품명을 사용하는 PC의 자동완성 정합성 체크에 영향을 줄 수 있습니다.')) return;
|
|
|
|
if (await deletePartsMaster(Number(this.currentAsset.id))) {
|
|
alert('성공적으로 삭제되었습니다.');
|
|
onSave(); this.close(); closeModals();
|
|
}
|
|
});
|
|
|
|
createIcons({ icons: { Plus, X, Save } });
|
|
}
|
|
|
|
protected fillFormData(asset: any): void {
|
|
setFieldValue('parts-master-id', asset.id || '');
|
|
setFieldValue('parts-master-category', asset.category || 'CPU');
|
|
setFieldValue('parts-master-component-name', asset.component_name || '');
|
|
setFieldValue('parts-master-score-tier', asset.score_tier || '');
|
|
setFieldValue('parts-master-deduction', asset.deduction !== undefined ? asset.deduction.toString() : '0');
|
|
this.updateHeaderIdentity(asset);
|
|
}
|
|
|
|
protected onAfterOpen(asset: any, mode: string): void {
|
|
const titleEl = document.getElementById('parts-master-modal-title');
|
|
if (titleEl) {
|
|
titleEl.textContent = (mode === 'add') ? '신규 부품 마스터 등록' : '부품 마스터 상세 편집';
|
|
}
|
|
|
|
const deleteBtn = document.getElementById('btn-delete-parts-master-asset')!;
|
|
const saveBtn = document.getElementById('btn-save-parts-master-asset')!;
|
|
|
|
deleteBtn.style.display = (mode === 'add') ? 'none' : 'block';
|
|
|
|
if (mode === 'add' || mode === 'edit') {
|
|
saveBtn.textContent = (mode === 'add') ? '등록' : '저장';
|
|
saveBtn.style.display = 'block';
|
|
} else {
|
|
saveBtn.textContent = '수정';
|
|
saveBtn.style.display = 'block';
|
|
}
|
|
this.updateHeaderIdentity(asset);
|
|
}
|
|
|
|
private updateHeaderIdentity(asset: any) {
|
|
const container = document.getElementById('parts-master-header-identity');
|
|
if (!container) return;
|
|
|
|
if (this.currentMode === 'add') {
|
|
container.innerHTML = '<span class="badge badge-primary">신규 등록</span>';
|
|
return;
|
|
}
|
|
|
|
const cat = asset.category || '';
|
|
const name = asset.component_name || '';
|
|
|
|
container.innerHTML = `
|
|
<span class="asset-code-title">${name}</span>
|
|
<span class="service-type-badge">${cat}</span>
|
|
`;
|
|
}
|
|
}
|
|
|
|
export const partsMasterModal = new PartsMasterModal();
|
|
export function initPartsMasterModal(onSave: () => void, closeModals: () => void) { partsMasterModal.init(onSave, closeModals); }
|
|
export function openPartsMasterModal(asset: any, mode: 'view' | 'edit' | 'add' = 'view') { partsMasterModal.open(asset, mode); }
|