285 lines
13 KiB
TypeScript
285 lines
13 KiB
TypeScript
import { state, saveJobSpec, deleteJobSpec } from '../../core/state';
|
|
import { BaseModal } from './BaseModal';
|
|
import { setFieldValue } from './ModalUtils';
|
|
import { UI_TEXT } from '../../core/schema';
|
|
import { calculatePcScoreDeductive } from '../../core/utils';
|
|
|
|
class JobSpecModal extends BaseModal {
|
|
constructor() {
|
|
super('job-spec', '직무별 기준 사양');
|
|
}
|
|
|
|
protected renderFrameHTML(): string {
|
|
const sharedStyle = 'height: 38px !important; box-sizing: border-box !important; font-size: 13px; margin: 0;';
|
|
const inputStyle = sharedStyle;
|
|
|
|
return `
|
|
<div id="job-spec-asset-modal" class="modal-overlay hidden">
|
|
<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>
|
|
<div class="modal-content" style="max-width: 500px; width: 100%;">
|
|
<div class="modal-header">
|
|
<h2 id="job-spec-modal-title" style="margin: 0; font-size: 18px; font-weight: 800; color: white;">\${this.title}</h2>
|
|
<button id="btn-close-job-spec-modal" class="btn-icon" aria-label="닫기" style="font-size: 28px; color: white; background: none; border: none; cursor: pointer; line-height: 1;">×</button>
|
|
</div>
|
|
<div class="modal-body" style="padding: 24px; overflow-y: auto;">
|
|
<form id="job-spec-asset-form" class="grid-form" style="display: flex; flex-direction: column; gap: 16px;">
|
|
<input type="hidden" id="job-spec-id" name="id" />
|
|
|
|
<div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
|
|
<label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">직무명</label>
|
|
<input type="text" id="job-spec-job-name" name="job_name" placeholder="예: BIM 모델러, 개발자, 엔지니어" required style="\${inputStyle} width: 100%;" />
|
|
</div>
|
|
|
|
<div class="form-group" style="display: flex; flex-direction: column; gap: 6px; position: relative;">
|
|
<label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">권장 CPU 사양</label>
|
|
<input type="text" id="job-spec-cpu-standard" name="cpu_standard" placeholder="CPU 검색..." required style="\${inputStyle} width: 100%;" autocomplete="off" />
|
|
<div id="job-spec-cpu-autocomplete" class="autocomplete-list hidden"></div>
|
|
</div>
|
|
|
|
<div class="form-group" style="display: flex; flex-direction: column; gap: 6px; position: relative;">
|
|
<label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">권장 RAM 사양</label>
|
|
<input type="text" id="job-spec-ram-standard" name="ram_standard" placeholder="RAM 검색..." required style="\${inputStyle} width: 100%;" autocomplete="off" />
|
|
<div id="job-spec-ram-autocomplete" class="autocomplete-list hidden"></div>
|
|
</div>
|
|
|
|
<div class="form-group" style="display: flex; flex-direction: column; gap: 6px; position: relative;">
|
|
<label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">권장 GPU 사양</label>
|
|
<input type="text" id="job-spec-gpu-standard" name="gpu_standard" placeholder="GPU 검색..." required style="\${inputStyle} width: 100%;" autocomplete="off" />
|
|
<div id="job-spec-gpu-autocomplete" class="autocomplete-list hidden"></div>
|
|
</div>
|
|
|
|
<div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
|
|
<label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">성능 기준 점수 (이상, 자동 계산됨)</label>
|
|
<input type="number" id="job-spec-min-score" name="min_score" placeholder="자동 계산 대기..." required style="\${inputStyle} width: 100%;" readonly />
|
|
</div>
|
|
|
|
<div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
|
|
<label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">비고 (메모)</label>
|
|
<textarea id="job-spec-remarks" name="remarks" placeholder="기타 필요 사양 및 안내 사항" style="box-sizing: border-box !important; font-size: 13px; margin: 0; min-height: 80px; width: 100%; padding: 8px; border: 1px solid var(--border-color); border-radius: 4px; resize: vertical;"></textarea>
|
|
</div>
|
|
</form>
|
|
</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);">
|
|
<button id="btn-delete-job-spec-asset" class="btn btn-outline btn-danger" style="height: 42px;">삭제</button>
|
|
<div class="footer-actions" style="display: flex; gap: 8px;">
|
|
<button id="btn-revert-job-spec-edit" class="btn btn-outline hidden" style="height: 42px;">수정 취소</button>
|
|
<button id="btn-cancel-job-spec-modal" class="btn btn-outline" style="height: 42px;">닫기</button>
|
|
<button id="btn-save-job-spec-asset" class="btn btn-primary" style="height: 42px;">수정</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
protected initChildLogic(onSave: () => void, closeModals: () => void): void {
|
|
const saveBtn = document.getElementById('btn-save-job-spec-asset')!;
|
|
const revertBtn = document.getElementById('btn-revert-job-spec-edit')!;
|
|
const deleteBtn = document.getElementById('btn-delete-job-spec-asset')!;
|
|
|
|
saveBtn.addEventListener('click', async () => {
|
|
if (!this.currentAsset) return;
|
|
if (!this.isEditMode) {
|
|
this.setEditLockMode('edit');
|
|
this.isEditMode = true;
|
|
return;
|
|
}
|
|
|
|
const jobName = (document.getElementById('job-spec-job-name') as HTMLInputElement).value.trim();
|
|
const cpuStd = (document.getElementById('job-spec-cpu-standard') as HTMLInputElement).value.trim();
|
|
const ramStd = (document.getElementById('job-spec-ram-standard') as HTMLInputElement).value.trim();
|
|
const gpuStd = (document.getElementById('job-spec-gpu-standard') as HTMLInputElement).value.trim();
|
|
const minScoreStr = (document.getElementById('job-spec-min-score') as HTMLInputElement).value;
|
|
const remarks = (document.getElementById('job-spec-remarks') as HTMLTextAreaElement).value.trim();
|
|
|
|
if (!jobName) {
|
|
alert('직무명을 입력해 주세요.');
|
|
return;
|
|
}
|
|
|
|
const updated = {
|
|
id: this.currentAsset.id || null,
|
|
job_name: jobName,
|
|
cpu_standard: cpuStd,
|
|
ram_standard: ramStd,
|
|
gpu_standard: gpuStd,
|
|
min_score: minScoreStr !== '' ? parseInt(minScoreStr, 10) : 0,
|
|
remarks: remarks
|
|
};
|
|
|
|
if (await saveJobSpec(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('정말로 이 직무별 기준 사양을 삭제하시겠습니까?')) return;
|
|
|
|
if (await deleteJobSpec(this.currentAsset.id)) {
|
|
alert('성공적으로 삭제되었습니다.');
|
|
onSave(); this.close(); closeModals();
|
|
}
|
|
});
|
|
|
|
// 자동완성 바인딩
|
|
this.bindAutocomplete('job-spec-cpu-standard', 'job-spec-cpu-autocomplete', 'CPU');
|
|
this.bindAutocomplete('job-spec-ram-standard', 'job-spec-ram-autocomplete', 'RAM');
|
|
this.bindAutocomplete('job-spec-gpu-standard', 'job-spec-gpu-autocomplete', 'GPU');
|
|
|
|
// 실시간 점수 계산 이벤트 바인딩
|
|
const inputs = ['job-spec-cpu-standard', 'job-spec-ram-standard', 'job-spec-gpu-standard'];
|
|
inputs.forEach(id => {
|
|
const el = document.getElementById(id);
|
|
el?.addEventListener('input', () => this.updateMinScore());
|
|
el?.addEventListener('change', () => this.updateMinScore());
|
|
});
|
|
}
|
|
|
|
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 = (state.masterData.partsMaster || []).filter((c: any) => c.category === category);
|
|
const filtered = filterText
|
|
? items.filter((c: any) => 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: any) => `<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.updateMinScore();
|
|
}
|
|
});
|
|
|
|
document.addEventListener('mousedown', (e) => {
|
|
if (e.target !== input && !list.contains(e.target as Node)) {
|
|
list.classList.add('hidden');
|
|
}
|
|
});
|
|
}
|
|
|
|
private updateMinScore(): void {
|
|
const cpu = (document.getElementById('job-spec-cpu-standard') as HTMLInputElement)?.value || '';
|
|
const ram = (document.getElementById('job-spec-ram-standard') as HTMLInputElement)?.value || '';
|
|
const gpu = (document.getElementById('job-spec-gpu-standard') as HTMLInputElement)?.value || '';
|
|
|
|
const score = calculatePcScoreDeductive(cpu, ram, gpu, '');
|
|
|
|
const minScoreEl = document.getElementById('job-spec-min-score') as HTMLInputElement;
|
|
if (minScoreEl) {
|
|
minScoreEl.value = score.toString();
|
|
}
|
|
}
|
|
|
|
protected fillFormData(asset: any): void {
|
|
setFieldValue('job-spec-id', asset.id || '');
|
|
setFieldValue('job-spec-job-name', asset.job_name || '');
|
|
setFieldValue('job-spec-cpu-standard', asset.cpu_standard || '');
|
|
setFieldValue('job-spec-ram-standard', asset.ram_standard || '');
|
|
setFieldValue('job-spec-gpu-standard', asset.gpu_standard || '');
|
|
setFieldValue('job-spec-min-score', asset.min_score !== undefined ? asset.min_score.toString() : '100');
|
|
setFieldValue('job-spec-remarks', asset.remarks || '');
|
|
}
|
|
|
|
protected onAfterOpen(asset: any, mode: string): void {
|
|
const titleEl = document.getElementById('job-spec-modal-title');
|
|
|
|
if (titleEl) {
|
|
if (mode === 'add') {
|
|
titleEl.textContent = '신규 직무별 기준 사양 등록';
|
|
} else {
|
|
titleEl.textContent = '직무별 기준 사양 상세 편집';
|
|
}
|
|
}
|
|
|
|
const deleteBtn = document.getElementById('btn-delete-job-spec-asset')!;
|
|
const saveBtn = document.getElementById('btn-save-job-spec-asset')!;
|
|
|
|
deleteBtn.style.display = (mode === 'add') ? 'none' : 'block';
|
|
|
|
if (mode === 'add') {
|
|
this.setEditLockMode('edit');
|
|
this.isEditMode = true;
|
|
saveBtn.textContent = '등록';
|
|
saveBtn.style.display = 'block';
|
|
} else {
|
|
this.setEditLockMode('view');
|
|
this.isEditMode = false;
|
|
saveBtn.textContent = '수정';
|
|
saveBtn.style.display = 'block';
|
|
}
|
|
|
|
this.updateMinScore();
|
|
}
|
|
}
|
|
|
|
export const jobSpecModal = new JobSpecModal();
|
|
|
|
export function initJobSpecModal(onSave: () => void, closeModals: () => void) {
|
|
jobSpecModal.init(onSave, closeModals);
|
|
}
|
|
|
|
export function openJobSpecModal(asset: any, mode: 'view' | 'edit' | 'add' = 'view') {
|
|
jobSpecModal.open(asset, mode);
|
|
}
|