feat: 소프트웨어 자산 관리 기능 고도화 및 대시보드 누적 비용 분석 기능 추가
This commit is contained in:
@@ -1,26 +1,26 @@
|
||||
/**
|
||||
* 모든 모달의 공통 기능 (닫기, ESC 처리, 배경 클릭 등)을 관리하는 베이스 모듈입니다.
|
||||
*/
|
||||
export function initBaseModal() {
|
||||
const closeAllModals = () => {
|
||||
const modals = document.querySelectorAll('.modal-overlay');
|
||||
modals.forEach(modal => modal.classList.add('hidden'));
|
||||
};
|
||||
export function closeModals() {
|
||||
const modals = document.querySelectorAll('.modal-overlay');
|
||||
modals.forEach(modal => modal.classList.add('hidden'));
|
||||
}
|
||||
|
||||
export function initBaseModal() {
|
||||
// ESC 키로 닫기
|
||||
window.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape') closeAllModals();
|
||||
if (e.key === 'Escape') closeModals();
|
||||
});
|
||||
|
||||
// 배경(Overlay) 클릭 시 닫기 (동적 생성된 모달 대응을 위해 이벤트 위임 고려 가능하나 일단 단순 구현)
|
||||
// 배경(Overlay) 클릭 시 닫기
|
||||
document.addEventListener('click', (e) => {
|
||||
const target = e.target as HTMLElement;
|
||||
if (target.classList.contains('modal-overlay')) {
|
||||
closeAllModals();
|
||||
closeModals();
|
||||
}
|
||||
});
|
||||
|
||||
return { closeAllModals };
|
||||
return { closeAllModals: closeModals };
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -211,3 +211,35 @@ export function autoExtractForm(idPrefix: string, fieldMap: Record<string, strin
|
||||
return result;
|
||||
}
|
||||
|
||||
/**
|
||||
* 10. 날짜 자동 마스킹 및 포커스 제어 (Auto-jump)
|
||||
*/
|
||||
export function applyDateMask(el: HTMLInputElement) {
|
||||
if (!el) return;
|
||||
|
||||
el.placeholder = 'YYYY-MM-DD';
|
||||
el.maxLength = 10;
|
||||
|
||||
el.addEventListener('input', (e) => {
|
||||
let value = el.value.replace(/[^0-9]/g, ''); // 숫자만 남김
|
||||
let result = '';
|
||||
|
||||
if (value.length <= 4) {
|
||||
result = value;
|
||||
} else if (value.length <= 6) {
|
||||
result = value.substring(0, 4) + '-' + value.substring(4);
|
||||
} else {
|
||||
result = value.substring(0, 4) + '-' + value.substring(4, 6) + '-' + value.substring(6, 10);
|
||||
}
|
||||
|
||||
el.value = result;
|
||||
});
|
||||
|
||||
// 엔터 키나 입력 완료 시 유효성 검사 (선택 사항)
|
||||
el.addEventListener('blur', () => {
|
||||
const val = el.value;
|
||||
if (val && !/^\d{4}-\d{2}-\d{2}$/.test(val)) {
|
||||
// 형식이 맞지 않으면 경고 효과 등을 줄 수 있음
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@@ -1,135 +1,231 @@
|
||||
import { state } from '../../core/state';
|
||||
import { SoftwareAsset } from '../../core/excelHandler';
|
||||
import { openModal } from './BaseModal';
|
||||
import { openModal, closeModals } from './BaseModal';
|
||||
import { openSwUserModal } from './SWUserModal';
|
||||
import { ASSET_SCHEMA, UI_TEXT } from '../../core/schema';
|
||||
import { createIcons, History, Plus, X, Save, Edit2, RotateCcw } from 'lucide';
|
||||
import { createIcons, History, Plus, X, Save, Edit2, RotateCcw, Calendar } from 'lucide';
|
||||
import { CORP_LIST } from './SharedData';
|
||||
import {
|
||||
generateOptionsHTML,
|
||||
setFieldValue,
|
||||
getFieldValue,
|
||||
setEditLock,
|
||||
createModalFrameHTML,
|
||||
autoFillForm,
|
||||
autoExtractForm
|
||||
applyDateMask
|
||||
} from './ModalUtils';
|
||||
|
||||
let currentSwAsset: SoftwareAsset | null = null;
|
||||
let isEditMode = false;
|
||||
|
||||
/**
|
||||
* 소프트웨어 필드 매핑 (통합 스키마 기반)
|
||||
* 소프트웨어는 자산번호를 사용하지 않으므로 제거함
|
||||
*/
|
||||
const SW_FIELD_MAP: Record<string, string> = {
|
||||
'법인': ASSET_SCHEMA.CORP.key,
|
||||
'제품명': ASSET_SCHEMA.PRODUCT.key,
|
||||
'수량': ASSET_SCHEMA.QTY.key,
|
||||
'금액': ASSET_SCHEMA.PRICE.key,
|
||||
'구매일': ASSET_SCHEMA.PURCHASE_YM.key,
|
||||
'시작일': '시작일',
|
||||
'납품업체': ASSET_SCHEMA.VENDOR.key,
|
||||
'비고': ASSET_SCHEMA.REMARKS.key,
|
||||
'플랫폼명': ASSET_SCHEMA.PLATFORM.key,
|
||||
'부서': '부서',
|
||||
'계정명': ASSET_SCHEMA.ACCOUNT.key,
|
||||
'결제수단': ASSET_SCHEMA.PAY_METHOD.key,
|
||||
'연결카드번호': ASSET_SCHEMA.CARD_NUM.key,
|
||||
'결제일': ASSET_SCHEMA.PAY_DAY.key,
|
||||
'당월청구액': ASSET_SCHEMA.BILLING.key,
|
||||
'라이선스유형': ASSET_SCHEMA.LICENSE_TYPE.key,
|
||||
'만료일': ASSET_SCHEMA.EXPIRY.key,
|
||||
'라이선스키': ASSET_SCHEMA.LICENSE_KEY.key
|
||||
};
|
||||
const SW_MODAL_HTML = `
|
||||
<div id="sw-asset-modal" class="modal-overlay hidden">
|
||||
<div class="modal-content wide">
|
||||
<div class="modal-header">
|
||||
<h2 id="sw-modal-title">소프트웨어 상세 정보</h2>
|
||||
<button id="btn-close-sw-modal" class="btn-icon" aria-label="닫기"><i data-lucide="x"></i></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="modal-body-split">
|
||||
<div class="modal-form-area">
|
||||
<form id="sw-asset-form" class="grid-form">
|
||||
<input type="hidden" id="sw-asset-id" />
|
||||
|
||||
<!-- Group 1: 기본 정보 (Identity) -->
|
||||
<div class="form-section-title">기본 정보 (Identity)</div>
|
||||
<div class="form-group">
|
||||
<label for="sw-asset-type">자산 유형</label>
|
||||
<select id="sw-asset-type" required>
|
||||
<option value="구독SW">구독SW</option>
|
||||
<option value="영구SW">영구SW</option>
|
||||
<option value="클라우드">클라우드</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="sw-분야">분야</label>
|
||||
<select id="sw-분야" required>
|
||||
<option value="업무공통">업무공통</option>
|
||||
<option value="개발S/W">개발S/W</option>
|
||||
<option value="디자인">디자인</option>
|
||||
<option value="설계S/W">설계S/W</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
const SW_FORM_HTML = `
|
||||
<!-- Group 1: 기본 정보 -->
|
||||
<div class="form-section-title">기본 정보 (Identity)</div>
|
||||
<div class="form-group">
|
||||
<label for="sw-asset-type">자산 유형</label>
|
||||
<select id="sw-asset-type" required>
|
||||
<option value="구독SW">구독SW</option>
|
||||
<option value="영구SW">영구SW</option>
|
||||
<option value="클라우드">클라우드</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="sw-법인">${ASSET_SCHEMA.CORP.ui}</label>
|
||||
<select id="sw-법인" required>${generateOptionsHTML(CORP_LIST)}</select>
|
||||
</div>
|
||||
<div class="form-group full-width">
|
||||
<label for="sw-제품명">${ASSET_SCHEMA.PRODUCT.ui}</label>
|
||||
<input type="text" id="sw-제품명" required />
|
||||
</div>
|
||||
<div class="form-group cloud-only"><label for="sw-플랫폼명">${ASSET_SCHEMA.PLATFORM.ui}</label><input type="text" id="sw-플랫폼명" placeholder="예: AWS, Cafe24" /></div>
|
||||
<div class="form-group cloud-only"><label for="sw-부서">담당부서</label><input type="text" id="sw-부서" /></div>
|
||||
<div class="form-group">
|
||||
<label for="sw-법인">법인</label>
|
||||
<select id="sw-법인" required>${generateOptionsHTML(CORP_LIST)}</select>
|
||||
</div>
|
||||
<div class="form-group full-width">
|
||||
<label for="sw-제품명">제품명 / 서비스명</label>
|
||||
<input type="text" id="sw-제품명" required />
|
||||
</div>
|
||||
<div class="form-group cloud-only">
|
||||
<label for="sw-플랫폼명">플랫폼명</label>
|
||||
<input type="text" id="sw-플랫폼명" placeholder="예: AWS, Cafe24" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="sw-부서">조직 / 부서</label>
|
||||
<input type="text" id="sw-부서" />
|
||||
</div>
|
||||
|
||||
<!-- Group 2: 라이선스 및 계약 -->
|
||||
<div class="form-section-title">라이선스 및 계약 정보</div>
|
||||
<div class="form-group sw-standard-field" id="sw-license-type-group"><label for="sw-라이선스유형">${ASSET_SCHEMA.LICENSE_TYPE.ui}</label><input type="text" id="sw-라이선스유형" /></div>
|
||||
<div class="form-group sw-standard-field" id="sw-license-key-group"><label for="sw-라이선스키">${ASSET_SCHEMA.LICENSE_KEY.ui}</label><input type="text" id="sw-라이선스키" /></div>
|
||||
<div class="form-group sw-standard-field"><label for="sw-수량">${ASSET_SCHEMA.QTY.ui}</label><input type="number" id="sw-수량" min="0" /></div>
|
||||
<div class="form-group sw-standard-field"><label for="sw-금액">${ASSET_SCHEMA.PRICE.ui}</label><input type="text" id="sw-금액" oninput="this.value=this.value.replace(/[^0-9]/g,'').replace(/\\\\B(?=(\\\\d{3})+(?!\\\\d))/g,',')" /></div>
|
||||
<!-- Group 2: 라이선스 및 계약 (License/Contract) -->
|
||||
<div class="form-section-title">라이선스 및 계약 정보</div>
|
||||
<div class="form-group sw-standard-field">
|
||||
<label for="sw-수량">보유 수량</label>
|
||||
<input type="number" id="sw-수량" min="0" />
|
||||
</div>
|
||||
<div class="form-group sw-standard-field">
|
||||
<label for="sw-금액">도입 금액</label>
|
||||
<input type="text" id="sw-금액" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',')" />
|
||||
</div>
|
||||
|
||||
<div class="form-group cloud-only"><label for="sw-계정명">${ASSET_SCHEMA.ACCOUNT.ui}</label><input type="text" id="sw-계정명" /></div>
|
||||
<div class="form-group cloud-only"><label for="sw-결제수단">${ASSET_SCHEMA.PAY_METHOD.ui}</label><select id="sw-결제수단"><option value="">선택안함</option><option value="법인카드">법인카드</option><option value="인보이스">인보이스</option></select></div>
|
||||
<div class="form-group cloud-only"><label for="sw-연결카드번호">${ASSET_SCHEMA.CARD_NUM.ui}</label><input type="text" id="sw-연결카드번호" maxlength="4" /></div>
|
||||
<div class="form-group cloud-only"><label for="sw-결제일">${ASSET_SCHEMA.PAY_DAY.ui}</label><input type="number" id="sw-결제일" min="1" max="31" /></div>
|
||||
<div class="form-group cloud-only"><label for="sw-당월청구액">${ASSET_SCHEMA.BILLING.ui}</label><input type="text" id="sw-당월청구액" oninput="this.value=this.value.replace(/[^0-9]/g,'').replace(/\\\\B(?=(\\\\d{3})+(?!\\\\d))/g,',')" /></div>
|
||||
<!-- Group 3: 클라우드 전용 정보 (Cloud Specific) -->
|
||||
<div class="form-group cloud-only">
|
||||
<label for="sw-계정명">계정명 (이메일)</label>
|
||||
<input type="text" id="sw-계정명" />
|
||||
</div>
|
||||
<div class="form-group cloud-only">
|
||||
<label for="sw-결제수단">결제수단</label>
|
||||
<select id="sw-결제수단">
|
||||
<option value="">선택안함</option>
|
||||
<option value="법인카드">법인카드</option>
|
||||
<option value="인보이스">인보이스</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group cloud-only">
|
||||
<label for="sw-연결카드번호">연결카드번호(뒷4자리)</label>
|
||||
<input type="text" id="sw-연결카드번호" maxlength="4" />
|
||||
</div>
|
||||
<div class="form-group cloud-only">
|
||||
<label for="sw-결제일">결제일 (기준일)</label>
|
||||
<input type="number" id="sw-결제일" min="1" max="31" />
|
||||
</div>
|
||||
<div class="form-group cloud-only">
|
||||
<label for="sw-당월청구액">당월 청구액(원)</label>
|
||||
<input type="text" id="sw-당월청구액" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',')" />
|
||||
</div>
|
||||
|
||||
<!-- Group 4: 관리 정보 -->
|
||||
<div class="form-section-title">관리 및 비고</div>
|
||||
<div class="form-group sw-standard-field"><label for="sw-구매일">구매일자</label><input type="date" id="sw-구매일" /></div>
|
||||
<div class="form-group sw-standard-field" id="sw-start-group"><label for="sw-시작일">시작일</label><input type="date" id="sw-시작일" /></div>
|
||||
<div class="form-group sw-standard-field" id="sw-expiry-group"><label for="sw-만료일">${ASSET_SCHEMA.EXPIRY.ui}</label><input type="date" id="sw-만료일" /></div>
|
||||
<div class="form-group sw-standard-field"><label for="sw-납품업체">${ASSET_SCHEMA.VENDOR.ui}</label><input type="text" id="sw-납품업체" /></div>
|
||||
<div class="form-group full-width"><label for="sw-비고">${ASSET_SCHEMA.REMARKS.ui}</label><textarea id="sw-비고" rows="2"></textarea></div>
|
||||
<!-- Group 4: 관리 정보 (Management) -->
|
||||
<div class="form-section-title">관리 및 비고</div>
|
||||
<div class="form-group sw-standard-field">
|
||||
<label for="sw-구매일">구매일</label>
|
||||
<div style="display:flex; gap:0.25rem; align-items:center; position:relative;">
|
||||
<input type="text" id="sw-구매일" style="flex:1;" />
|
||||
<button type="button" class="btn-icon" onclick="const p = document.getElementById('sw-구매일-picker'); p.value = document.getElementById('sw-구매일').value; p.showPicker();" style="padding:0.25rem;">
|
||||
<i data-lucide="calendar" style="width:18px; height:18px; color:var(--primary-color);"></i>
|
||||
</button>
|
||||
<input type="date" id="sw-구매일-picker" style="position:absolute; width:0; height:0; opacity:0; pointer-events:none;" onchange="document.getElementById('sw-구매일').value = this.value" tabindex="-1" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group sw-standard-field">
|
||||
<label for="sw-납품업체">납품업체</label>
|
||||
<input type="text" id="sw-납품업체" />
|
||||
</div>
|
||||
<div class="form-group sw-standard-field">
|
||||
<label for="sw-시작일">시작일 (구독/유지보수)</label>
|
||||
<div style="display:flex; gap:0.25rem; align-items:center; position:relative;">
|
||||
<input type="text" id="sw-시작일" style="flex:1;" />
|
||||
<button type="button" class="btn-icon" onclick="const p = document.getElementById('sw-시작일-picker'); p.value = document.getElementById('sw-시작일').value; p.showPicker();" style="padding:0.25rem;">
|
||||
<i data-lucide="calendar" style="width:18px; height:18px; color:var(--primary-color);"></i>
|
||||
</button>
|
||||
<input type="date" id="sw-시작일-picker" style="position:absolute; width:0; height:0; opacity:0; pointer-events:none;" onchange="document.getElementById('sw-시작일').value = this.value" tabindex="-1" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group sw-standard-field" id="sw-expiry-group">
|
||||
<label for="sw-만료일">만료일 (종료일)</label>
|
||||
<div style="display:flex; gap:0.25rem; align-items:center; position:relative;">
|
||||
<input type="text" id="sw-만료일" style="flex:1;" />
|
||||
<button type="button" class="btn-icon" onclick="const p = document.getElementById('sw-만료일-picker'); p.value = document.getElementById('sw-만료일').value; p.showPicker();" style="padding:0.25rem;">
|
||||
<i data-lucide="calendar" style="width:18px; height:18px; color:var(--primary-color);"></i>
|
||||
</button>
|
||||
<input type="date" id="sw-만료일-picker" style="position:absolute; width:0; height:0; opacity:0; pointer-events:none;" onchange="document.getElementById('sw-만료일').value = this.value" tabindex="-1" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group full-width">
|
||||
<label for="sw-비고">비고</label>
|
||||
<textarea id="sw-비고" rows="2"></textarea>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div id="sw-user-section" class="user-management-section" style="margin-top: 2rem;">
|
||||
<div class="section-header" style="display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem;">
|
||||
<h3 style="font-size:1rem; font-weight:600;">사용자 할당 현황</h3>
|
||||
<button type="button" id="btn-open-sw-update" class="btn btn-outline btn-sm">할당 관리 <i data-lucide="plus" style="width:14px; height:14px;"></i></button>
|
||||
<div id="sw-user-section" class="user-management-section" style="margin-top: 2rem; border-top: 1px solid var(--border-color); padding-top: 1.5rem;">
|
||||
<button type="button" id="btn-open-sw-user" class="btn btn-outline btn-sm" title="사용자 관리">
|
||||
<i data-lucide="users" style="width:16px; height:16px; margin-right:4px;"></i> 사용자 관리
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-history-area">
|
||||
<div class="history-header" style="display:flex; justify-content:space-between; align-items:center;">
|
||||
<h3><i data-lucide="history" style="width:16px; height:16px;"></i> 업데이트 내역</h3>
|
||||
<button type="button" id="btn-open-sw-update" class="btn btn-outline btn-sm">
|
||||
계약 업데이트 <i data-lucide="refresh-ccw" style="width:14px; height:14px;"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div id="sw-history-list" class="history-timeline"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button id="btn-delete-sw-asset" class="btn btn-outline btn-danger">삭제</button>
|
||||
<div class="footer-actions">
|
||||
<button id="btn-revert-sw-edit" class="btn btn-outline hidden">수정 취소</button>
|
||||
<button id="btn-cancel-sw-modal" class="btn btn-outline">닫기</button>
|
||||
<button id="btn-save-sw-asset" class="btn btn-primary">수정</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 계약/유지보수 기간 갱신 및 업데이트 모달 -->
|
||||
<div id="sw-update-modal" class="modal-overlay hidden" style="z-index: 1100;">
|
||||
<div class="modal-content" style="max-width: 500px;">
|
||||
<div class="modal-header">
|
||||
<h2>계약 업데이트 반영</h2>
|
||||
<button id="btn-close-sw-update" class="btn-icon"><i data-lucide="x"></i></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="grid-form" style="grid-template-columns: 1fr;">
|
||||
<div class="form-group">
|
||||
<label>업데이트 일자</label>
|
||||
<input type="date" id="sw-update-date" />
|
||||
</div>
|
||||
<div class="form-group sub-sw-update">
|
||||
<label>새로운 계약 기간</label>
|
||||
<div style="display: flex; align-items: center; gap: 0.5rem;">
|
||||
<input type="text" id="sw-update-start" placeholder="YYYY-MM-DD" style="flex: 1;" />
|
||||
<span>~</span>
|
||||
<input type="text" id="sw-update-end" placeholder="YYYY-MM-DD" style="flex: 1;" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group perm-sw-update" style="display:none;">
|
||||
<label>유지보수 체결 (상태 연동)</label>
|
||||
<label style="display:flex; align-items:center; gap:0.5rem; height: 38px; cursor: pointer;">
|
||||
<input type="checkbox" id="sw-update-maintenance" /> 유효 상태로 갱신
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>발생 비용</label>
|
||||
<input type="text" id="sw-update-cost" oninput="this.value = this.value.replace(/[^0-9]/g, '') ? Number(this.value.replace(/[^0-9]/g, '')).toLocaleString() : ''" placeholder="ex) 500,000" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>상세 내용 (메모)</label>
|
||||
<input type="text" id="sw-update-note" placeholder="예: 25년도 구독 연장 결제 완료" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<div></div>
|
||||
<div class="footer-actions">
|
||||
<button id="btn-cancel-sw-update" class="btn btn-outline">취소</button>
|
||||
<button id="btn-save-sw-update" class="btn btn-primary">반영하기</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="sw-assigned-users-summary" class="user-summary-grid"></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
function renderSwHistory(swId: string) {
|
||||
const container = document.getElementById('sw-history-list');
|
||||
if (!container) return;
|
||||
const logs = (state.masterData.logs || []).filter(l => l.assetId === swId).sort((a,b) => new Date(b.date).getTime() - new Date(a.date).getTime());
|
||||
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.replace(/\n/g, '<br>')}</div>
|
||||
</div>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
function renderUserSummary(swId: string) {
|
||||
const container = document.getElementById('sw-assigned-users-summary');
|
||||
if (!container) return;
|
||||
const userMapping = state.masterData.swUsers.find(u => u.sw_id === swId);
|
||||
if (!userMapping || !userMapping.userData || userMapping.userData.length === 0) {
|
||||
container.innerHTML = '<div class="empty-summary">할당된 사용자가 없습니다.</div>';
|
||||
return;
|
||||
}
|
||||
container.innerHTML = userMapping.userData.map(u => `
|
||||
<div class="user-badge-item"><span class="u-name">${u[3] || '이름없음'}</span><span class="u-dept">${u[1] || '부서없음'}</span></div>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
function applySwTypeUI(type: string) {
|
||||
const cloudFields = document.querySelectorAll('.cloud-only');
|
||||
const swFields = document.querySelectorAll('.sw-standard-field');
|
||||
const userSection = document.getElementById('sw-user-section');
|
||||
const keyGroup = document.getElementById('sw-license-key-group');
|
||||
const typeGroup = document.getElementById('sw-license-type-group');
|
||||
const expiryGroup = document.getElementById('sw-expiry-group');
|
||||
const startGroup = document.getElementById('sw-start-group');
|
||||
|
||||
if (type === '클라우드') {
|
||||
cloudFields.forEach(el => (el as HTMLElement).style.display = 'flex');
|
||||
@@ -139,59 +235,83 @@ function applySwTypeUI(type: string) {
|
||||
cloudFields.forEach(el => (el as HTMLElement).style.display = 'none');
|
||||
swFields.forEach(el => (el as HTMLElement).style.display = 'flex');
|
||||
if (userSection) userSection.style.display = 'block';
|
||||
if (type === '구독SW') {
|
||||
if (keyGroup) keyGroup.style.display = 'none';
|
||||
if (typeGroup) typeGroup.style.display = 'flex';
|
||||
|
||||
if (type === '구독SW' || type === '영구SW') {
|
||||
if (expiryGroup) expiryGroup.style.display = 'flex';
|
||||
if (startGroup) startGroup.style.display = 'flex';
|
||||
} else if (type === '영구SW') {
|
||||
if (keyGroup) keyGroup.style.display = 'flex';
|
||||
if (typeGroup) typeGroup.style.display = 'none';
|
||||
if (expiryGroup) expiryGroup.style.display = 'none';
|
||||
if (startGroup) startGroup.style.display = 'flex';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export function openSwModal(asset: SoftwareAsset, mode: 'view' | 'add' = 'view') {
|
||||
function fillSwFormData(asset: SoftwareAsset) {
|
||||
setFieldValue('sw-asset-id', asset.id);
|
||||
setFieldValue('sw-asset-type', asset.type);
|
||||
setFieldValue('sw-분야', asset.분야 || '업무공통');
|
||||
setFieldValue('sw-법인', asset.법인);
|
||||
|
||||
setFieldValue('sw-부서', asset.부서 || '');
|
||||
setFieldValue('sw-제품명', asset.제품명);
|
||||
setFieldValue('sw-수량', asset.수량);
|
||||
setFieldValue('sw-금액', asset.금액);
|
||||
setFieldValue('sw-구매일', asset.구매일 || '');
|
||||
setFieldValue('sw-시작일', asset.시작일 || '');
|
||||
setFieldValue('sw-납품업체', asset.납품업체 || '');
|
||||
setFieldValue('sw-비고', asset.비고 || '');
|
||||
|
||||
if (asset.type === '클라우드') {
|
||||
setFieldValue('sw-플랫폼명', (asset as any).플랫폼명 || '');
|
||||
setFieldValue('sw-계정명', (asset as any).계정명 || '');
|
||||
setFieldValue('sw-결제수단', (asset as any).결제수단 || '');
|
||||
setFieldValue('sw-연결카드번호', (asset as any).연결카드번호 || '');
|
||||
setFieldValue('sw-결제일', (asset as any).결제일 || '');
|
||||
setFieldValue('sw-당월청구액', (asset as any).당월청구액 || '');
|
||||
} else if (asset.type === '구독SW' || asset.type === '영구SW') {
|
||||
setFieldValue('sw-만료일', (asset as any).만료일 || '');
|
||||
}
|
||||
|
||||
renderSwHistory(asset.id);
|
||||
}
|
||||
|
||||
|
||||
|
||||
function renderSwHistory(swId: string) {
|
||||
const container = document.getElementById('sw-history-list');
|
||||
if (!container) return;
|
||||
const logs = (state.masterData.logs || []).filter(l => l.assetId === swId);
|
||||
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('');
|
||||
}
|
||||
|
||||
export function openSwModal(asset: SoftwareAsset, mode: 'view' | 'add' | 'edit' = 'view') {
|
||||
currentSwAsset = asset;
|
||||
const modal = document.getElementById('sw-asset-modal')!;
|
||||
|
||||
// 수정 잠금 상태 제어
|
||||
setEditLock('sw-asset-form', mode, {
|
||||
saveBtnId: 'btn-save-sw-asset',
|
||||
revertBtnId: 'btn-revert-sw-edit',
|
||||
addLogBtnId: 'btn-add-sw-log'
|
||||
revertBtnId: 'btn-revert-sw-edit'
|
||||
});
|
||||
isEditMode = (mode === 'add');
|
||||
autoFillForm('sw', asset, SW_FIELD_MAP);
|
||||
|
||||
// 자산 유형 select를 명시적으로 설정 (hidden input과 충돌 방지)
|
||||
const typeSelect = document.getElementById('sw-asset-type') as HTMLSelectElement;
|
||||
if (typeSelect) typeSelect.value = asset.type;
|
||||
|
||||
isEditMode = (mode === 'add' || mode === 'edit');
|
||||
|
||||
fillSwFormData(asset);
|
||||
applySwTypeUI(asset.type);
|
||||
renderUserSummary(asset.id);
|
||||
renderSwHistory(asset.id);
|
||||
|
||||
modal.classList.remove('hidden');
|
||||
createIcons({ icons: { X, History, Plus } });
|
||||
}
|
||||
|
||||
export function initSwModal(onSave: () => void, closeModalsCb: () => void) {
|
||||
export function initSwModal(onSave: () => void, closeModals: () => void) {
|
||||
if (!document.getElementById('sw-asset-modal')) {
|
||||
const html = createModalFrameHTML('sw', '소프트웨어 상세 정보', SW_FORM_HTML, {
|
||||
historyTitle: '업데이트 내역',
|
||||
addLogBtnId: 'btn-add-sw-log'
|
||||
});
|
||||
document.body.insertAdjacentHTML('beforeend', html);
|
||||
const logModalHTML = `
|
||||
<div id="sw-log-modal" class="modal-overlay hidden" style="z-index: 1100;">
|
||||
<div class="modal-content" style="max-width: 400px;">
|
||||
<div class="modal-header"><h2>${UI_TEXT.ACTION.HISTORY_ADD}</h2><button id="btn-close-sw-log" class="btn-icon"><i data-lucide="x"></i></button></div>
|
||||
<div class="modal-body"><div class="grid-form" style="grid-template-columns: 1fr;"><div class="form-group"><label>날짜</label><input type="date" id="new-log-date" /></div><div class="form-group"><label>상세 내용</label><textarea id="new-log-details" rows="3"></textarea></div></div></div>
|
||||
<div class="modal-footer"><div></div><div class="footer-actions"><button id="btn-cancel-sw-log" class="btn btn-outline">${UI_TEXT.ACTION.CANCEL}</button><button id="btn-confirm-sw-log" class="btn btn-primary">추가</button></div></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
document.body.insertAdjacentHTML('beforeend', logModalHTML);
|
||||
document.body.insertAdjacentHTML('beforeend', SW_MODAL_HTML);
|
||||
}
|
||||
|
||||
const form = document.getElementById('sw-asset-form') as HTMLFormElement;
|
||||
@@ -199,47 +319,71 @@ export function initSwModal(onSave: () => void, closeModalsCb: () => void) {
|
||||
const revertBtn = document.getElementById('btn-revert-sw-edit')!;
|
||||
const deleteBtn = document.getElementById('btn-delete-sw-asset')!;
|
||||
const userAssignBtn = document.getElementById('btn-open-sw-user')!;
|
||||
const userUpdateBtn = document.getElementById('btn-open-sw-update')!;
|
||||
const logAddBtn = document.getElementById('btn-add-sw-log')!;
|
||||
const logModal = document.getElementById('sw-log-modal')!;
|
||||
const btnOpenUpdate = document.getElementById('btn-open-sw-update')!;
|
||||
const typeSelect = document.getElementById('sw-asset-type') as HTMLSelectElement;
|
||||
|
||||
typeSelect?.addEventListener('change', () => {
|
||||
applySwTypeUI(typeSelect.value);
|
||||
});
|
||||
|
||||
const closeModalAction = () => { closeModalsCb(); isEditMode = false; };
|
||||
// 날짜 스마트 마스킹 적용
|
||||
['sw-구매일', 'sw-시작일', 'sw-만료일', 'sw-update-start', 'sw-update-end'].forEach(id => {
|
||||
applyDateMask(document.getElementById(id) as HTMLInputElement);
|
||||
});
|
||||
|
||||
createIcons({ icons: { Calendar } });
|
||||
|
||||
const closeModalAction = () => { closeModals(); isEditMode = false; };
|
||||
document.getElementById('btn-close-sw-modal')?.addEventListener('click', closeModalAction);
|
||||
document.getElementById('btn-cancel-sw-modal')?.addEventListener('click', closeModalAction);
|
||||
|
||||
revertBtn.addEventListener('click', () => {
|
||||
setEditLock('sw-asset-form', 'view', {
|
||||
saveBtnId: 'btn-save-sw-asset',
|
||||
revertBtnId: 'btn-revert-sw-edit',
|
||||
addLogBtnId: 'btn-add-sw-log'
|
||||
setEditLock('sw-asset-form', 'view', {
|
||||
saveBtnId: 'btn-save-sw-asset',
|
||||
revertBtnId: 'btn-revert-sw-edit'
|
||||
});
|
||||
isEditMode = false;
|
||||
if (currentSwAsset) openSwModal(currentSwAsset, 'view');
|
||||
if (currentSwAsset) fillSwFormData(currentSwAsset);
|
||||
});
|
||||
|
||||
// 날짜 필드는 type="date"로 변경되어 별도 제한 로직 불필요
|
||||
|
||||
saveBtn.addEventListener('click', () => {
|
||||
if (!currentSwAsset) return;
|
||||
if (!isEditMode) {
|
||||
setEditLock('sw-asset-form', 'edit', {
|
||||
saveBtnId: 'btn-save-sw-asset',
|
||||
revertBtnId: 'btn-revert-sw-edit',
|
||||
addLogBtnId: 'btn-add-hw-log'
|
||||
setEditLock('sw-asset-form', 'edit', {
|
||||
saveBtnId: 'btn-save-sw-asset',
|
||||
revertBtnId: 'btn-revert-sw-edit'
|
||||
});
|
||||
isEditMode = true;
|
||||
return;
|
||||
}
|
||||
const extracted = autoExtractForm('sw', SW_FIELD_MAP);
|
||||
const updated = { ...currentSwAsset, ...extracted, 수량: parseInt(extracted[ASSET_SCHEMA.QTY.key] || '0') };
|
||||
|
||||
const type = getFieldValue('sw-asset-type') || currentSwAsset.type;
|
||||
updated.type = type;
|
||||
const type = getFieldValue('sw-asset-type');
|
||||
const updated: any = {
|
||||
...currentSwAsset,
|
||||
분야: getFieldValue('sw-분야'),
|
||||
법인: getFieldValue('sw-법인'),
|
||||
부서: getFieldValue('sw-부서'),
|
||||
|
||||
제품명: getFieldValue('sw-제품명'),
|
||||
수량: parseInt(getFieldValue('sw-수량') || '0'),
|
||||
금액: getFieldValue('sw-금액'),
|
||||
구매일: getFieldValue('sw-구매일'),
|
||||
시작일: getFieldValue('sw-시작일'),
|
||||
납품업체: getFieldValue('sw-납품업체'),
|
||||
비고: getFieldValue('sw-비고'),
|
||||
type: type
|
||||
};
|
||||
|
||||
if (type === '클라우드') {
|
||||
updated.플랫폼명 = getFieldValue('sw-플랫폼명');
|
||||
updated.계정명 = getFieldValue('sw-계정명');
|
||||
updated.결제수단 = getFieldValue('sw-결제수단');
|
||||
updated.연결카드번호 = getFieldValue('sw-연결카드번호');
|
||||
updated.결제일 = getFieldValue('sw-결제일');
|
||||
updated.당월청구액 = getFieldValue('sw-당월청구액').replace(/,/g, '');
|
||||
} else if (type === '구독SW' || type === '영구SW') {
|
||||
updated.만료일 = getFieldValue('sw-만료일');
|
||||
}
|
||||
|
||||
// 데이터 저장 로직 (state 업데이트)
|
||||
const oldType = currentSwAsset.type;
|
||||
@@ -255,44 +399,104 @@ export function initSwModal(onSave: () => void, closeModalsCb: () => void) {
|
||||
let targetList: SoftwareAsset[] = [];
|
||||
if (newType === '구독SW') targetList = state.masterData.subSw;
|
||||
else if (newType === '영구SW') targetList = state.masterData.permSw;
|
||||
else targetList = (state.masterData as any).cloud || [];
|
||||
else if (newType === '클라우드') targetList = state.masterData.cloud;
|
||||
|
||||
const idx = targetList.findIndex(a => a.id === updated.id);
|
||||
if (idx > -1) targetList[idx] = updated; else targetList.push(updated);
|
||||
if (idx > -1) targetList[idx] = updated;
|
||||
else targetList.push(updated);
|
||||
|
||||
onSave();
|
||||
setEditLock('sw-asset-form', 'view', {
|
||||
saveBtnId: 'btn-save-sw-asset',
|
||||
revertBtnId: 'btn-revert-sw-edit',
|
||||
addLogBtnId: 'btn-add-sw-log'
|
||||
});
|
||||
isEditMode = false;
|
||||
closeModalAction();
|
||||
});
|
||||
|
||||
deleteBtn.addEventListener('click', () => {
|
||||
if (currentSwAsset && confirm(UI_TEXT.MESSAGES.CONFIRM_DELETE)) {
|
||||
if (!currentSwAsset) return;
|
||||
if (confirm('삭제하시겠습니까?')) {
|
||||
const type = currentSwAsset.type;
|
||||
if (type === '구독SW') state.masterData.subSw = state.masterData.subSw.filter(a => a.id !== currentSwAsset!.id);
|
||||
else if (type === '영구SW') state.masterData.permSw = state.masterData.permSw.filter(a => a.id !== currentSwAsset!.id);
|
||||
onSave(); closeModalAction();
|
||||
else if (type === '클라우드') state.masterData.cloud = state.masterData.cloud.filter(a => a.id !== currentSwAsset!.id);
|
||||
onSave();
|
||||
closeModalAction();
|
||||
}
|
||||
});
|
||||
|
||||
userUpdateBtn.addEventListener('click', () => { if (currentSwAsset) openSwUserModal(currentSwAsset); });
|
||||
logAddBtn.addEventListener('click', () => {
|
||||
logModal.classList.remove('hidden');
|
||||
(document.getElementById('new-log-date') as HTMLInputElement).value = new Date().toISOString().split('T')[0];
|
||||
(document.getElementById('new-log-details') as HTMLTextAreaElement).value = '';
|
||||
userAssignBtn.addEventListener('click', () => {
|
||||
if (currentSwAsset) openSwUserModal(currentSwAsset);
|
||||
});
|
||||
document.getElementById('btn-close-sw-log')?.addEventListener('click', () => logModal.classList.add('hidden'));
|
||||
document.getElementById('btn-cancel-sw-log')?.addEventListener('click', () => logModal.classList.add('hidden'));
|
||||
document.getElementById('btn-confirm-sw-log')?.addEventListener('click', () => {
|
||||
if (!currentSwAsset) return;
|
||||
const date = (document.getElementById('new-log-date') as HTMLInputElement).value;
|
||||
const details = (document.getElementById('new-log-details') as HTMLTextAreaElement).value;
|
||||
if (!date || !details) return;
|
||||
state.masterData.logs = state.masterData.logs || [];
|
||||
state.masterData.logs.push({ id: Math.random().toString(36).substring(2, 9), assetId: currentSwAsset.id, date, user: '담당자', details });
|
||||
logModal.classList.add('hidden'); renderSwHistory(currentSwAsset.id);
|
||||
|
||||
// 자산 업데이트(계약 갱신) 모달 로직
|
||||
const subModal = document.getElementById('sw-update-modal')!;
|
||||
const btnCloseUpdate = document.getElementById('btn-close-sw-update')!;
|
||||
const btnCancelUpdate = document.getElementById('btn-cancel-sw-update')!;
|
||||
const btnSaveUpdate = document.getElementById('btn-save-sw-update')!;
|
||||
|
||||
const closeUpdateModal = () => subModal.classList.add('hidden');
|
||||
btnCloseUpdate?.addEventListener('click', closeUpdateModal);
|
||||
btnCancelUpdate?.addEventListener('click', closeUpdateModal);
|
||||
|
||||
btnOpenUpdate?.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
if (!isEditMode) {
|
||||
alert('자산을 수정 모드로 변경한 후 업데이트를 진행해주세요.');
|
||||
return;
|
||||
}
|
||||
|
||||
subModal.classList.remove('hidden');
|
||||
|
||||
(document.getElementById('sw-update-date') as HTMLInputElement).value = new Date().toISOString().substring(0, 10);
|
||||
(document.getElementById('sw-update-start') as HTMLInputElement).value = '';
|
||||
(document.getElementById('sw-update-end') as HTMLInputElement).value = '';
|
||||
(document.getElementById('sw-update-cost') as HTMLInputElement).value = '';
|
||||
(document.getElementById('sw-update-note') as HTMLInputElement).value = '';
|
||||
|
||||
document.querySelector('.sub-sw-update')!.setAttribute('style', 'display:flex; flex-direction:column;');
|
||||
document.querySelector('.perm-sw-update')!.setAttribute('style', 'display:none');
|
||||
});
|
||||
|
||||
btnSaveUpdate?.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
const isSub = getFieldValue('sw-asset-type') === '구독SW';
|
||||
const date = (document.getElementById('sw-update-date') as HTMLInputElement).value;
|
||||
const start = (document.getElementById('sw-update-start') as HTMLInputElement).value;
|
||||
const end = (document.getElementById('sw-update-end') as HTMLInputElement).value;
|
||||
const maintenance = (document.getElementById('sw-update-maintenance') as HTMLInputElement).checked;
|
||||
const cost = (document.getElementById('sw-update-cost') as HTMLInputElement).value;
|
||||
const note = (document.getElementById('sw-update-note') as HTMLInputElement).value;
|
||||
|
||||
const periodStr = (start || end) ? `${start || ''} ~ ${end || ''}` : '';
|
||||
|
||||
let details = `[업데이트] ${note || '계약 갱신'}\n`;
|
||||
if (cost) details += `비용 추가: ${cost}원\n`;
|
||||
|
||||
if (periodStr) details += `계약 변경: -> ${periodStr}\n`;
|
||||
// 메인 폼에 시작일 만료일 자동 세팅
|
||||
if (start) setFieldValue('sw-시작일', start);
|
||||
if (end) setFieldValue('sw-만료일', end);
|
||||
|
||||
// 금액 갱신 (선택사항)
|
||||
if (cost) {
|
||||
if (getFieldValue('sw-asset-type') === '클라우드') {
|
||||
setFieldValue('sw-당월청구액', cost);
|
||||
} else {
|
||||
setFieldValue('sw-금액', cost);
|
||||
}
|
||||
}
|
||||
|
||||
// 이력 탭 갱신 (메모리상)
|
||||
if (!state.masterData.logs) state.masterData.logs = [];
|
||||
state.masterData.logs.push({
|
||||
id: Math.random().toString(36).substring(2, 9),
|
||||
assetId: currentSwAsset ? currentSwAsset.id : 'NEW',
|
||||
date,
|
||||
details,
|
||||
cost: cost ? Number(String(cost).replace(/,/g, '')) : 0,
|
||||
user: '관리자'
|
||||
});
|
||||
|
||||
closeUpdateModal();
|
||||
renderSwHistory(currentSwAsset ? currentSwAsset.id : '');
|
||||
onSave(); // 로그 즉시 저장
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
import { state } from '../../core/state';
|
||||
import { SoftwareAsset, SWUser } from '../../core/excelHandler';
|
||||
import { openModal } from './BaseModal';
|
||||
import { createIcons, Edit2, X, Paperclip } from 'lucide';
|
||||
import { createIcons, Edit2, X, Paperclip, Calendar } from 'lucide';
|
||||
import { CORP_LIST, ORG_LIST } from './SharedData';
|
||||
import { generateOptionsHTML, setFieldValue, getFieldValue } from './ModalUtils';
|
||||
import { generateOptionsHTML, setFieldValue, getFieldValue, applyDateMask } from './ModalUtils';
|
||||
|
||||
let currentSwUserAsset: SoftwareAsset | null = null;
|
||||
let tempSwUsers: SWUser[] = [];
|
||||
let tempSwUsers: any[] = [];
|
||||
|
||||
const SW_USER_MODAL_HTML = `
|
||||
<div id="sw-user-modal" class="modal-overlay hidden">
|
||||
@@ -28,6 +28,7 @@ const SW_USER_MODAL_HTML = `
|
||||
<thead>
|
||||
<tr>
|
||||
<th>조직</th>
|
||||
<th>부서</th>
|
||||
<th>직위</th>
|
||||
<th>이름</th>
|
||||
<th>사용기간</th>
|
||||
@@ -58,7 +59,11 @@ const SW_USER_MODAL_HTML = `
|
||||
<input type="hidden" id="edit-user-index" value="-1" />
|
||||
<div class="form-group">
|
||||
<label>조직</label>
|
||||
<select id="new-user-부서">${generateOptionsHTML(ORG_LIST)}</select>
|
||||
<select id="new-user-조직">${generateOptionsHTML(ORG_LIST)}</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>부서</label>
|
||||
<input type="text" id="new-user-부서" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>직위</label>
|
||||
@@ -69,8 +74,24 @@ const SW_USER_MODAL_HTML = `
|
||||
<input type="text" id="new-user-이름" required />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>사용기간</label>
|
||||
<input type="text" id="new-user-사용기간" placeholder="ex) 2024-01-01 ~ 2024-12-31" />
|
||||
<label>사용 시작일</label>
|
||||
<div style="display:flex; gap:0.25rem; align-items:center; position:relative;">
|
||||
<input type="text" id="new-user-시작일" style="flex:1;" />
|
||||
<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;">
|
||||
<i data-lucide="calendar" style="width:18px; height:18px; color:var(--primary-color);"></i>
|
||||
</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" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>사용 종료일</label>
|
||||
<div style="display:flex; gap:0.25rem; align-items:center; position:relative;">
|
||||
<input type="text" id="new-user-종료일" style="flex:1;" />
|
||||
<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;">
|
||||
<i data-lucide="calendar" style="width:18px; height:18px; color:var(--primary-color);"></i>
|
||||
</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" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>신청서 (증빙)</label>
|
||||
@@ -93,14 +114,16 @@ export function openSwUserModal(asset: SoftwareAsset) {
|
||||
const swInfo = document.getElementById('sw-user-sw-info')!;
|
||||
swInfo.innerHTML = `
|
||||
<div style="background:var(--bg-light); padding:1rem; border-radius:6px; margin-bottom:1.5rem;">
|
||||
<div style="font-size:0.8rem; color:var(--text-muted); margin-bottom:0.25rem;">${asset.법인} | ${asset.자산번호}</div>
|
||||
<div style="font-size:0.8rem; color:var(--text-muted); margin-bottom:0.25rem;">${asset.법인}</div>
|
||||
<div style="font-size:1.1rem; font-weight:700; color:var(--primary-color);">${asset.제품명}</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// 기존 사용자 데이터 복사 (원본 보호를 위해 temp 사용)
|
||||
const existingMapping = state.masterData.swUsers.find(u => u.sw_id === asset.id);
|
||||
tempSwUsers = existingMapping ? JSON.parse(JSON.stringify(existingMapping.userData || [])) : [];
|
||||
tempSwUsers = existingMapping ? (existingMapping.userData || []).map((u: any) => ({
|
||||
조직: u[0], 부서: u[1], 직위: u[2], 이름: u[3], 사용기간: u[4], 신청서명: u[5]
|
||||
})) : [];
|
||||
|
||||
renderUserList();
|
||||
modal.classList.remove('hidden');
|
||||
@@ -119,7 +142,7 @@ function renderUserList() {
|
||||
tempSwUsers.forEach((user, idx) => {
|
||||
const tr = document.createElement('tr');
|
||||
tr.innerHTML = `
|
||||
|
||||
<td>${user.조직 || ''}</td>
|
||||
<td>${user.부서 || ''}</td>
|
||||
<td>${user.직위 || ''}</td>
|
||||
<td>${user.이름 || ''}</td>
|
||||
@@ -164,10 +187,20 @@ function openUserEditSubModal(idx: number = -1) {
|
||||
|
||||
if (idx > -1) {
|
||||
const user = tempSwUsers[idx];
|
||||
setFieldValue('new-user-조직', user.조직);
|
||||
setFieldValue('new-user-부서', user.부서);
|
||||
setFieldValue('new-user-직위', user.직위);
|
||||
setFieldValue('new-user-이름', user.이름);
|
||||
setFieldValue('new-user-사용기간', user.사용기간);
|
||||
|
||||
// 사용기간 파싱 (yyyy-mm-dd ~ yyyy-mm-dd)
|
||||
if (user.사용기간 && user.사용기간.includes('~')) {
|
||||
const parts = user.사용기간.split('~');
|
||||
setFieldValue('new-user-시작일', parts[0].trim());
|
||||
setFieldValue('new-user-종료일', parts[1].trim());
|
||||
} else {
|
||||
setFieldValue('new-user-시작일', '');
|
||||
setFieldValue('new-user-종료일', '');
|
||||
}
|
||||
}
|
||||
|
||||
subModal.classList.remove('hidden');
|
||||
@@ -182,6 +215,12 @@ export function initSwUserModal(onSave: () => void, closeModals: () => void) {
|
||||
const addUserBtn = document.getElementById('btn-open-add-user')!;
|
||||
const confirmUserBtn = document.getElementById('btn-confirm-user-edit')!;
|
||||
|
||||
['new-user-시작일', 'new-user-종료일'].forEach(id => {
|
||||
applyDateMask(document.getElementById(id) as HTMLInputElement);
|
||||
});
|
||||
|
||||
createIcons({ icons: { Calendar } });
|
||||
|
||||
addUserBtn.addEventListener('click', () => openUserEditSubModal());
|
||||
|
||||
confirmUserBtn.addEventListener('click', () => {
|
||||
@@ -195,7 +234,7 @@ export function initSwUserModal(onSave: () => void, closeModals: () => void) {
|
||||
const existingIdx = state.masterData.swUsers.findIndex(u => u.sw_id === currentSwUserAsset!.id);
|
||||
const newMapping = {
|
||||
sw_id: currentSwUserAsset!.id,
|
||||
userData: tempSwUsers.map(u => ['', u.부서, u.직위, u.이름, u.사용기간, u.신청서명])
|
||||
userData: tempSwUsers.map(u => [u.조직, u.부서, u.직위, u.이름, u.사용기간, u.신청서명])
|
||||
};
|
||||
|
||||
if (existingIdx > -1) state.masterData.swUsers[existingIdx] = newMapping as any;
|
||||
@@ -225,11 +264,11 @@ function saveUserDataToList() {
|
||||
const 신청서명 = 신청서Input.files && 신청서Input.files.length > 0 ? 신청서Input.files[0].name : (idx > -1 ? tempSwUsers[idx].신청서명 : '');
|
||||
|
||||
const userData: any = {
|
||||
|
||||
조직: getFieldValue('new-user-조직'),
|
||||
부서: getFieldValue('new-user-부서'),
|
||||
직위: getFieldValue('new-user-직위'),
|
||||
이름: getFieldValue('new-user-이름'),
|
||||
사용기간: getFieldValue('new-user-사용기간'),
|
||||
사용기간: `${getFieldValue('new-user-시작일')} ~ ${getFieldValue('new-user-종료일')}`,
|
||||
신청서명
|
||||
};
|
||||
|
||||
|
||||
@@ -92,6 +92,7 @@ export interface HardwareLog {
|
||||
date: string;
|
||||
details: string;
|
||||
user: string;
|
||||
cost?: number;
|
||||
}
|
||||
|
||||
export interface MasterAssetData {
|
||||
@@ -119,7 +120,7 @@ const EQUIP_HEADERS = ['구매법인', '비품유형', '자산코드', '명칭',
|
||||
const MOBILE_HEADERS = ['구매법인', '자산코드', '명칭', '위치', '관리자', '기기유형', 'OS', '구매연월', '금액', '납품업체', '품의서명', '비고'];
|
||||
|
||||
const SUB_SW_HEADERS = ['ID', '분야', '법인', '부서', '제품명', '구매연월', '만료일', '라이선스유형', '금액', '수량', '계정명', '납품업체', '비고'];
|
||||
const PERM_SW_HEADERS = ['ID', '분야', '법인', '부서', '제품명', '구매연월', '라이선스키', '금액', '수량', '계정명', '납품업체', '비고'];
|
||||
const PERM_SW_HEADERS = ['ID', '분야', '법인', '부서', '제품명', '구매연월', '만료일', '라이선스키', '금액', '수량', '계정명', '납품업체', '비고'];
|
||||
const CLOUD_HEADERS = ['ID', '플랫폼명', '법인', '부서', '사용용도(제품명)', '계정명', '결제수단', '결제일', '연결카드번호', '당월청구액', '비고'];
|
||||
|
||||
export function downloadTemplate() {
|
||||
@@ -157,7 +158,7 @@ export function exportToExcel(masterData: MasterAssetData) {
|
||||
{ tab: '전산비품', list: masterData.equip, headers: EQUIP_HEADERS, map: (a: any) => [a.법인, a.비품유형, a.자산코드, a.명칭, a.위치, a.관리자, a.IP주소, a.MACaddress, a.HW사양, a.OS, a.구매일||a.구매연월, a.금액, a.납품업체, a.품의서명, a.비고] },
|
||||
{ tab: '모바일기기', list: masterData.mobile, headers: MOBILE_HEADERS, map: (a: any) => [a.법인, a.자산코드, a.명칭, a.위치, a.관리자, a.type, a.OS, a.구매일||a.구매연월, a.금액, a.납품업체, a.품의서명, a.비고] },
|
||||
{ tab: '구독SW', list: masterData.subSw, headers: SUB_SW_HEADERS, map: (a: any) => [a.id, a.분야, a.법인, a.부서, a.제품명, a.구매일||a.구매연월, a.만료일, a.라이선스유형, a.금액, a.수량, a.계정명, a.납품업체, a.비고] },
|
||||
{ tab: '영구SW', list: masterData.permSw, headers: PERM_SW_HEADERS, map: (a: any) => [a.id, a.분야, a.법인, a.부서, a.제품명, a.구매일||a.구매연월, a.라이선스키, a.금액, a.수량, a.계정명, a.납품업체, a.비고] }
|
||||
{ tab: '영구SW', list: masterData.permSw, headers: PERM_SW_HEADERS, map: (a: any) => [a.id, a.분야, a.법인, a.부서, a.제품명, a.구매일||a.구매연월, a.만료일, a.라이선스키, a.금액, a.수량, a.계정명, a.납품업체, a.비고] }
|
||||
];
|
||||
|
||||
exportMap.forEach(m => {
|
||||
@@ -189,7 +190,7 @@ export async function parseExcel(file: File): Promise<MasterAssetData> {
|
||||
} else if (sheetName === '구독SW') {
|
||||
rows.forEach(r => data.subSw.push({ id: r['ID']||Math.random().toString(36).substring(2, 9), type: '구독SW', 분야: r['분야']||'', 법인: r['법인']||'', 부서: r['부서']||'', 제품명: r['제품명']||'', 구매연월: r['구매연월']||r['구매일']||'', 만료일: r['만료일']||'', 라이선스유형: r['라이선스유형']||'', 금액: r['금액']||'', 수량: parseInt(r['수량']||'1'), 계정명: r['계정명']||'', 납품업체: r['납품업체']||'', 비고: r['비고']||'' }));
|
||||
} else if (sheetName === '영구SW') {
|
||||
rows.forEach(r => data.permSw.push({ id: r['ID']||Math.random().toString(36).substring(2, 9), type: '영구SW', 분야: r['분야']||'', 법인: r['법인']||'', 부서: r['부서']||'', 제품명: r['제품명']||'', 구매연월: r['구매연월']||r['구매일']||'', 라이선스키: r['라이선스키']||'', 금액: r['금액']||'', 수량: parseInt(r['수량']||'1'), 계정명: r['계정명']||'', 납품업체: r['납품업체']||'', 비고: r['비고']||'' }));
|
||||
rows.forEach(r => data.permSw.push({ id: r['ID']||Math.random().toString(36).substring(2, 9), type: '영구SW', 분야: r['분야']||'', 법인: r['법인']||'', 부서: r['부서']||'', 제품명: r['제품명']||'', 구매연월: r['구매연월']||r['구매일']||'', 만료일: r['만료일']||'', 라이선스키: r['라이선스키']||'', 금액: r['금액']||'', 수량: parseInt(r['수량']||'1'), 계정명: r['계정명']||'', 납품업체: r['납품업체']||'', 비고: r['비고']||'' }));
|
||||
}
|
||||
});
|
||||
resolve(data);
|
||||
|
||||
@@ -51,16 +51,16 @@ export const state: AppState = {
|
||||
export async function loadMasterDataFromDB() {
|
||||
try {
|
||||
const endpoints = [
|
||||
{ key: 'pc', url: 'http://172.16.40.100:3000/api/pc' },
|
||||
{ key: 'server', url: 'http://172.16.40.100:3000/api/server' },
|
||||
{ key: 'storage', url: 'http://172.16.40.100:3000/api/storage' },
|
||||
{ key: 'equip', url: 'http://172.16.40.100:3000/api/equip' },
|
||||
{ key: 'mobile', url: 'http://172.16.40.100:3000/api/mobile' },
|
||||
{ key: 'subSw', url: 'http://172.16.40.100:3000/api/sw/sub' },
|
||||
{ key: 'permSw', url: 'http://172.16.40.100:3000/api/sw/perm' },
|
||||
{ key: 'cloud', url: 'http://172.16.40.100:3000/api/cloud' },
|
||||
{ key: 'swUsers', url: 'http://172.16.40.100:3000/api/sw-users' },
|
||||
{ key: 'logs', url: 'http://172.16.40.100:3000/api/logs' }
|
||||
{ key: 'pc', url: `http://${location.hostname}:3000/api/pc` },
|
||||
{ key: 'server', url: `http://${location.hostname}:3000/api/server` },
|
||||
{ key: 'storage', url: `http://${location.hostname}:3000/api/storage` },
|
||||
{ key: 'equip', url: `http://${location.hostname}:3000/api/equip` },
|
||||
{ key: 'mobile', url: `http://${location.hostname}:3000/api/mobile` },
|
||||
{ key: 'subSw', url: `http://${location.hostname}:3000/api/sw/sub` },
|
||||
{ key: 'permSw', url: `http://${location.hostname}:3000/api/sw/perm` },
|
||||
{ key: 'cloud', url: `http://${location.hostname}:3000/api/cloud` },
|
||||
{ key: 'swUsers', url: `http://${location.hostname}:3000/api/sw-users` },
|
||||
{ key: 'logs', url: `http://${location.hostname}:3000/api/logs` }
|
||||
];
|
||||
|
||||
const results = await Promise.all(endpoints.map(e => fetch(e.url)));
|
||||
@@ -195,7 +195,7 @@ export function deleteHardwareAsset(assetId: string) {
|
||||
*/
|
||||
export async function saveSoftwareAsset(asset: SoftwareAsset) {
|
||||
try {
|
||||
const response = await fetch('http://172.16.40.100:3000/api/software/save', {
|
||||
const response = await fetch(`http://${location.hostname}:3000/api/software/save`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(asset)
|
||||
@@ -224,7 +224,7 @@ export async function saveSoftwareAsset(asset: SoftwareAsset) {
|
||||
*/
|
||||
export async function deleteSoftwareAsset(type: string, id: string) {
|
||||
try {
|
||||
const response = await fetch(`http://172.16.40.100:3000/api/asset/${type}/${id}`, {
|
||||
const response = await fetch(`http://${location.hostname}:3000/api/asset/${type}/${id}`, {
|
||||
method: 'DELETE'
|
||||
});
|
||||
|
||||
|
||||
25
src/main.ts
25
src/main.ts
@@ -30,15 +30,16 @@ async function apiBatchSave(url: string, data: any[], label: string) {
|
||||
}
|
||||
}
|
||||
|
||||
const savePcToDB = () => apiBatchSave('http://172.16.40.100:3000/api/pc/batch', state.masterData.pc, '개인PC');
|
||||
const saveServerToDB = () => apiBatchSave('http://172.16.40.100:3000/api/server/batch', state.masterData.server, '서버');
|
||||
const saveStorageToDB = () => apiBatchSave('http://172.16.40.100:3000/api/storage/batch', state.masterData.storage, '스토리지');
|
||||
const saveEquipToDB = () => apiBatchSave('http://172.16.40.100:3000/api/equip/batch', state.masterData.equip, '전산비품');
|
||||
const saveMobileToDB = () => apiBatchSave('http://172.16.40.100:3000/api/mobile/batch', state.masterData.mobile, '모바일기기');
|
||||
const saveSubSwToDB = () => apiBatchSave('http://172.16.40.100:3000/api/sw/sub/batch', state.masterData.subSw, '구독SW');
|
||||
const savePermSwToDB = () => apiBatchSave('http://172.16.40.100:3000/api/sw/perm/batch', state.masterData.permSw, '영구SW');
|
||||
const saveCloudToDB = () => apiBatchSave('http://172.16.40.100:3000/api/cloud/batch', state.masterData.cloud, '클라우드');
|
||||
const saveSwUsersToDB = () => apiBatchSave('http://172.16.40.100:3000/api/sw-users/batch', state.masterData.swUsers, 'SW사용자');
|
||||
const savePcToDB = () => apiBatchSave(`http://${location.hostname}:3000/api/pc/batch`, state.masterData.pc, '개인PC');
|
||||
const saveServerToDB = () => apiBatchSave(`http://${location.hostname}:3000/api/server/batch`, state.masterData.server, '서버');
|
||||
const saveStorageToDB = () => apiBatchSave(`http://${location.hostname}:3000/api/storage/batch`, state.masterData.storage, '스토리지');
|
||||
const saveEquipToDB = () => apiBatchSave(`http://${location.hostname}:3000/api/equip/batch`, state.masterData.equip, '전산비품');
|
||||
const saveMobileToDB = () => apiBatchSave(`http://${location.hostname}:3000/api/mobile/batch`, state.masterData.mobile, '모바일기기');
|
||||
const saveSubSwToDB = () => apiBatchSave(`http://${location.hostname}:3000/api/sw/sub/batch`, state.masterData.subSw, '구독SW');
|
||||
const savePermSwToDB = () => apiBatchSave(`http://${location.hostname}:3000/api/sw/perm/batch`, state.masterData.permSw, '영구SW');
|
||||
const saveCloudToDB = () => apiBatchSave(`http://${location.hostname}:3000/api/cloud/batch`, state.masterData.cloud, '클라우드');
|
||||
const saveSwUsersToDB = () => apiBatchSave(`http://${location.hostname}:3000/api/sw-users/batch`, state.masterData.swUsers, 'SW사용자');
|
||||
const saveLogsToDB = () => apiBatchSave(`http://${location.hostname}:3000/api/logs/batch`, state.masterData.logs, '자산 로그');
|
||||
|
||||
// 화면 갱신 통합 핸들러 (대시보드 vs 리스트)
|
||||
function refreshView() {
|
||||
@@ -59,7 +60,8 @@ async function saveAllHardwareToDB() {
|
||||
saveServerToDB(),
|
||||
saveStorageToDB(),
|
||||
saveEquipToDB(),
|
||||
saveMobileToDB()
|
||||
saveMobileToDB(),
|
||||
saveLogsToDB()
|
||||
]);
|
||||
await loadMasterDataFromDB();
|
||||
refreshView();
|
||||
@@ -71,7 +73,8 @@ async function saveAllSoftwareToDB() {
|
||||
saveSubSwToDB(),
|
||||
savePermSwToDB(),
|
||||
saveCloudToDB(),
|
||||
saveSwUsersToDB()
|
||||
saveSwUsersToDB(),
|
||||
saveLogsToDB()
|
||||
]);
|
||||
// 저장 후 최신 데이터 다시 로드 (정합성)
|
||||
await loadMasterDataFromDB();
|
||||
|
||||
@@ -9,6 +9,10 @@ export function renderSwDashboard(container: HTMLElement) {
|
||||
let subQty = 0, subUsed = 0, subExp = 0, subTotal = 0;
|
||||
let permQty = 0, permUsed = 0, permExp = 0, permTotal = 0;
|
||||
|
||||
let subCost2026 = 0;
|
||||
let permCost2026 = 0;
|
||||
let cloudCost2026 = 0;
|
||||
|
||||
const currentYear = new Date().getFullYear();
|
||||
|
||||
const corps = ['한맥', '삼안', '바론'];
|
||||
@@ -19,7 +23,7 @@ export function renderSwDashboard(container: HTMLElement) {
|
||||
categories.forEach(c => costByCat[c] = 0);
|
||||
|
||||
// 통합 SW 데이터
|
||||
const allSw = [...state.masterData.subSw, ...state.masterData.permSw];
|
||||
const allSw = [...state.masterData.subSw, ...state.masterData.permSw, ...state.masterData.cloud];
|
||||
|
||||
allSw.forEach(sw => {
|
||||
const userMapping = state.masterData.swUsers.find(u => u.sw_id === sw.id);
|
||||
@@ -36,12 +40,35 @@ export function renderSwDashboard(container: HTMLElement) {
|
||||
if (isSWExpiring(sw)) permExp++;
|
||||
}
|
||||
|
||||
if (sw.구매일 && sw.구매일.startsWith(String(currentYear))) {
|
||||
// 초기 도입 비용 (2026년 구매건)
|
||||
if (sw.구매일 && sw.구매일.startsWith('2026')) {
|
||||
if (sw.type === '구독SW') subCost2026 += price;
|
||||
else if (sw.type === '영구SW') permCost2026 += price;
|
||||
else if (sw.type === '클라우드') cloudCost2026 += price;
|
||||
|
||||
if (costByCorp[sw.법인] !== undefined) costByCorp[sw.법인] += price;
|
||||
if (sw.분야 && costByCat[sw.분야] !== undefined) costByCat[sw.분야] += price;
|
||||
}
|
||||
});
|
||||
|
||||
// 누적 추가 비용 집계 (2026년 계약 업데이트 로그 기반)
|
||||
if (state.masterData.logs) {
|
||||
state.masterData.logs.forEach(log => {
|
||||
if (log.date && log.date.startsWith('2026') && log.cost) {
|
||||
const asset = allSw.find(a => a.id === log.assetId);
|
||||
if (asset) {
|
||||
const cost = Number(log.cost) || 0;
|
||||
if (asset.type === '구독SW') subCost2026 += cost;
|
||||
else if (asset.type === '영구SW') permCost2026 += cost;
|
||||
else if (asset.type === '클라우드') cloudCost2026 += cost;
|
||||
|
||||
if (costByCorp[asset.법인] !== undefined) costByCorp[asset.법인] += cost;
|
||||
if (asset.분야 && costByCat[asset.분야] !== undefined) costByCat[asset.분야] += cost;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const subPer = subQty > 0 ? Math.round((subUsed/subQty)*100) : 0;
|
||||
const permPer = permQty > 0 ? Math.round((permUsed/permQty)*100) : 0;
|
||||
const subExpPer = subTotal > 0 ? Math.round((subExp/subTotal)*100) : 0;
|
||||
@@ -95,42 +122,32 @@ export function renderSwDashboard(container: HTMLElement) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 class="dashboard-section-title">${currentYear}년 도입 비용 분석</h3>
|
||||
<div class="dashboard-layout-2col">
|
||||
<div class="dashboard-card">
|
||||
<h4 style="margin-bottom:1rem; font-size:0.9rem; color:var(--text-muted);">구매법인별 도입 금액 (원)</h4>
|
||||
<canvas id="chart-sw-corp"></canvas>
|
||||
<h3 class="dashboard-section-title">2026년 누적 도입 비용 분석</h3>
|
||||
|
||||
<div style="display:grid; grid-template-columns: repeat(3, 1fr); gap:1.5rem; margin-bottom:1.5rem;">
|
||||
<div class="dashboard-card" style="min-height:auto;">
|
||||
<span style="font-size:1rem; font-weight:700; color:var(--text-main);">구독 SW 누적 비용 (2026)</span>
|
||||
<div style="font-size: 0.8125rem; color:var(--text-muted); margin-bottom: 1rem;">갱신 및 추가 비용 합계</div>
|
||||
<div style="font-size: 2rem; font-weight:700; color:var(--dash-primary);">₩ ${subCost2026.toLocaleString()}</div>
|
||||
<div style="width: 100%; height: 4px; background-color: var(--primary-color); border-radius: 2px; margin-top: 0.5rem;"></div>
|
||||
</div>
|
||||
<div class="dashboard-card">
|
||||
<h4 style="margin-bottom:1rem; font-size:0.9rem; color:var(--text-muted);">분야별 도입 금액 (원)</h4>
|
||||
<canvas id="chart-sw-cat"></canvas>
|
||||
<div class="dashboard-card" style="min-height:auto;">
|
||||
<span style="font-size:1rem; font-weight:700; color:var(--text-main);">영구 SW 누적 비용 (2026)</span>
|
||||
<div style="font-size: 0.8125rem; color:var(--text-muted); margin-bottom: 1rem;">유지보수 및 신규 도입 합계</div>
|
||||
<div style="font-size: 2rem; font-weight:700; color:#3b82f6;">₩ ${permCost2026.toLocaleString()}</div>
|
||||
<div style="width: 100%; height: 4px; background-color: #3b82f6; border-radius: 2px; margin-top: 0.5rem;"></div>
|
||||
</div>
|
||||
<div class="dashboard-card" style="min-height:auto;">
|
||||
<span style="font-size:1rem; font-weight:700; color:var(--text-main);">클라우드 누적 비용 (2026)</span>
|
||||
<div style="font-size: 0.8125rem; color:var(--text-muted); margin-bottom: 1rem;">월별 청구액 누적 합계</div>
|
||||
<div style="font-size: 2rem; font-weight:700; color:#f59e0b;">₩ ${cloudCost2026.toLocaleString()}</div>
|
||||
<div style="width: 100%; height: 4px; background-color: #f59e0b; border-radius: 2px; margin-top: 0.5rem;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
`;
|
||||
|
||||
setTimeout(() => {
|
||||
if (typeof Chart === 'undefined') return;
|
||||
|
||||
const ctxCorp = (document.getElementById('chart-sw-corp') as HTMLCanvasElement)?.getContext('2d');
|
||||
if (ctxCorp) {
|
||||
new Chart(ctxCorp, {
|
||||
type: 'bar',
|
||||
data: { labels: corps, datasets: [{ data: corps.map(c => costByCorp[c]), backgroundColor: 'rgba(30, 81, 73, 0.8)', borderRadius: 4 }] },
|
||||
options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } } }
|
||||
});
|
||||
}
|
||||
|
||||
const ctxCat = (document.getElementById('chart-sw-cat') as HTMLCanvasElement)?.getContext('2d');
|
||||
if (ctxCat) {
|
||||
new Chart(ctxCat, {
|
||||
type: 'bar',
|
||||
data: { labels: categories, datasets: [{ data: categories.map(c => costByCat[c]), backgroundColor: 'rgba(59, 130, 246, 0.8)', borderRadius: 4 }] },
|
||||
options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } } }
|
||||
});
|
||||
}
|
||||
}, 100);
|
||||
|
||||
container.querySelector('[data-action="sub-usage"]')?.addEventListener('click', () => openSwUsageDetail('구독 소프트웨어 사용 목록', state.masterData.subSw));
|
||||
container.querySelector('[data-action="perm-usage"]')?.addEventListener('click', () => openSwUsageDetail('영구 소프트웨어 사용 목록', state.masterData.permSw));
|
||||
container.querySelector('[data-action="sub-exp"]')?.addEventListener('click', () => openSwDashboardDetail('구독 SW 만료 예정 목록', state.masterData.subSw.filter(sw => isSWExpiring(sw))));
|
||||
|
||||
@@ -98,7 +98,7 @@ export function renderCloudList(container: HTMLElement) {
|
||||
<td>${asset[ASSET_SCHEMA.ACCOUNT.key]||''}</td>
|
||||
<td class="text-center">${paymentBadge}</td>
|
||||
<td class="text-center">${asset[ASSET_SCHEMA.PAY_DAY.key] ? asset[ASSET_SCHEMA.PAY_DAY.key] + '일' : ''}</td>
|
||||
<td class="text-right" style="font-weight:600;">₩ ${asset[ASSET_SCHEMA.BILLING.key] ? Number(asset[ASSET_SCHEMA.BILLING.key]).toLocaleString() : '0'}</td>
|
||||
<td class="text-right" style="font-weight:600;">₩ ${asset[ASSET_SCHEMA.BILLING.key] ? Number(String(asset[ASSET_SCHEMA.BILLING.key]).replace(/,/g, '')).toLocaleString() : '0'}</td>
|
||||
<td>${asset[ASSET_SCHEMA.REMARKS.key]||''}</td>
|
||||
`;
|
||||
|
||||
|
||||
@@ -1,14 +1,11 @@
|
||||
import { state } from '../../core/state';
|
||||
import { openSwModal } from '../../components/Modal/SWModal';
|
||||
import { sortAssets } from '../../core/utils';
|
||||
import { openSwUserModal } from '../../components/Modal/SWUserModal';
|
||||
import { sortAssets, formatPrice } from '../../core/utils';
|
||||
import { CORP_LIST } from '../../components/Modal/SharedData';
|
||||
import { generateOptionsHTML } from '../../components/Modal/ModalUtils';
|
||||
import { ASSET_SCHEMA, UI_TEXT } from '../../core/schema';
|
||||
import { createIcons, RefreshCcw } from 'lucide';
|
||||
import { createIcons, Edit2, Users, RefreshCcw } from 'lucide';
|
||||
|
||||
/**
|
||||
* 소프트웨어(구독/영구) 자산 목록 뷰
|
||||
*/
|
||||
export function renderSwList(container: HTMLElement) {
|
||||
const isSub = state.activeSubTab === '구독SW';
|
||||
const fullList = sortAssets(isSub ? state.masterData.subSw : state.masterData.permSw);
|
||||
@@ -17,7 +14,7 @@ export function renderSwList(container: HTMLElement) {
|
||||
filterBar.className = 'search-bar';
|
||||
filterBar.innerHTML = `
|
||||
<div class="search-item flex-1">
|
||||
<label>통합 검색 (${ASSET_SCHEMA.PRODUCT.ui}/부서)</label>
|
||||
<label>통합 검색 (제품명/부서)</label>
|
||||
<input type="text" id="filter-keyword" placeholder="검색어를 입력하세요..." autocomplete="off">
|
||||
</div>
|
||||
<div class="search-item">
|
||||
@@ -31,11 +28,11 @@ export function renderSwList(container: HTMLElement) {
|
||||
</select>
|
||||
</div>
|
||||
<div class="search-item">
|
||||
<label>${ASSET_SCHEMA.CORP.ui}</label>
|
||||
<label>법인</label>
|
||||
<select id="filter-corp">${generateOptionsHTML(CORP_LIST, '', true)}</select>
|
||||
</div>
|
||||
<button id="btn-reset-filters" class="btn btn-outline btn-reset">
|
||||
<i data-lucide="refresh-ccw"></i> ${UI_TEXT.ACTION.RESET_FILTER}
|
||||
<i data-lucide="refresh-ccw"></i> 필터 초기화
|
||||
</button>
|
||||
`;
|
||||
container.appendChild(filterBar);
|
||||
@@ -49,14 +46,16 @@ export function renderSwList(container: HTMLElement) {
|
||||
<th style="text-align:center;">No.</th>
|
||||
<th style="text-align:center;">상태</th>
|
||||
<th style="text-align:center;">분야</th>
|
||||
<th style="text-align:center;">${ASSET_SCHEMA.CORP.ui}</th>
|
||||
<th style="text-align:center;">법인</th>
|
||||
<th style="text-align:center;">부서</th>
|
||||
<th style="text-align:center;">${ASSET_SCHEMA.PRODUCT.ui}</th>
|
||||
<th style="text-align:center;">${ASSET_SCHEMA.PURCHASE_YM.ui}</th>
|
||||
${isSub ? `<th style="text-align:center;">${ASSET_SCHEMA.EXPIRY.ui}</th>` : ''}
|
||||
<th style="text-align:center;">${ASSET_SCHEMA.PRICE.ui}</th>
|
||||
<th style="text-align:center;">${ASSET_SCHEMA.QTY.ui}</th>
|
||||
<th style="text-align:center;">제품명</th>
|
||||
<th style="text-align:center;">구매일</th>
|
||||
<th style="text-align:center;">시작일</th>
|
||||
<th style="text-align:center;">만료일</th>
|
||||
<th style="text-align:center;">금액</th>
|
||||
<th style="text-align:center;">수량</th>
|
||||
<th style="text-align:center;">사용가능</th>
|
||||
<th style="text-align:center;">사용자</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="dynamic-tbody"></tbody>
|
||||
@@ -76,38 +75,49 @@ export function renderSwList(container: HTMLElement) {
|
||||
const corp = corpSelect ? corpSelect.value : '';
|
||||
|
||||
const filtered = fullList.filter(asset => {
|
||||
const matchKeyword = !keyword || ((asset as any)[ASSET_SCHEMA.PRODUCT.key] || '').toLowerCase().includes(keyword) || (asset.부서 || '').toLowerCase().includes(keyword);
|
||||
const matchKeyword = !keyword || (asset.제품명 || '').toLowerCase().includes(keyword) || (asset.부서 || '').toLowerCase().includes(keyword);
|
||||
const matchField = !field || asset.분야 === field;
|
||||
const matchCorp = !corp || (asset as any)[ASSET_SCHEMA.CORP.key] === corp;
|
||||
const matchCorp = !corp || asset.법인 === corp;
|
||||
return matchKeyword && matchField && matchCorp;
|
||||
});
|
||||
|
||||
tbody.innerHTML = '';
|
||||
if (filtered.length === 0) {
|
||||
tbody.innerHTML = `<tr><td colspan="${isSub ? 11 : 10}" style="text-align:center; padding: 3rem; color: var(--text-muted);">${UI_TEXT.MESSAGES.NO_DATA}</td></tr>`;
|
||||
tbody.innerHTML = `<tr><td colspan="13" style="text-align:center; padding: 3rem; color: var(--text-muted);">검색 결과가 없습니다.</td></tr>`;
|
||||
return;
|
||||
}
|
||||
|
||||
filtered.forEach((asset, idx) => {
|
||||
const assigned = state.masterData.swUsers.filter(u => u.sw_id === asset.id).length;
|
||||
const qty = typeof (asset as any)[ASSET_SCHEMA.QTY.key] === 'number' ? (asset as any)[ASSET_SCHEMA.QTY.key] : parseInt((asset as any)[ASSET_SCHEMA.QTY.key]||'0', 10);
|
||||
const qty = typeof asset.수량 === 'number' ? asset.수량 : parseInt(asset.수량||'0', 10);
|
||||
const avail = qty - assigned;
|
||||
|
||||
let statusBadge = '';
|
||||
let statusHtml = '';
|
||||
if (isSub) {
|
||||
let isExpired = false;
|
||||
if ((asset as any)[ASSET_SCHEMA.EXPIRY.key]) {
|
||||
const parts = (asset as any)[ASSET_SCHEMA.EXPIRY.key].split('~');
|
||||
const endDateStr = parts[parts.length - 1].trim().replace(/\./g, '-');
|
||||
if (asset.만료일) {
|
||||
const endDateStr = asset.만료일.replace(/\./g, '-');
|
||||
const endDate = new Date(endDateStr);
|
||||
if (!isNaN(endDate.getTime())) {
|
||||
endDate.setHours(23, 59, 59, 999);
|
||||
if (endDate < new Date()) isExpired = true;
|
||||
}
|
||||
}
|
||||
statusBadge = isExpired ? `<span class="badge badge-danger">만료</span>` : `<span class="badge badge-primary">사용중</span>`;
|
||||
if (isExpired) statusHtml = `<span style="background: var(--danger, #ef4444); color: white; padding: 2px 6px; border-radius: 4px; font-size: 0.75rem; font-weight: bold; white-space: nowrap;">만료</span>`;
|
||||
else statusHtml = `<span style="background: var(--primary-color, #1E5149); color: white; padding: 2px 6px; border-radius: 4px; font-size: 0.75rem; font-weight: bold; white-space: nowrap;">사용중</span>`;
|
||||
} else {
|
||||
statusBadge = asset.유지보수여부 ? `<span class="badge badge-success">유효</span>` : `<span class="badge badge-muted">없음</span>`;
|
||||
let isMaintenance = false;
|
||||
if (asset.시작일 && asset.만료일) {
|
||||
const startDate = new Date(asset.시작일.replace(/\./g, '-'));
|
||||
const endDate = new Date(asset.만료일.replace(/\./g, '-'));
|
||||
const today = new Date();
|
||||
if (!isNaN(startDate.getTime()) && !isNaN(endDate.getTime())) {
|
||||
endDate.setHours(23, 59, 59, 999);
|
||||
if (today >= startDate && today <= endDate) isMaintenance = true;
|
||||
}
|
||||
}
|
||||
if (isMaintenance) statusHtml = `<span style="background: #3b82f6; color: white; padding: 2px 6px; border-radius: 4px; font-size: 0.75rem; font-weight: bold; white-space: nowrap;">유지보수</span>`;
|
||||
else statusHtml = `<span style="background: #6b7280; color: white; padding: 2px 6px; border-radius: 4px; font-size: 0.75rem; font-weight: bold; white-space: nowrap;">보유중</span>`;
|
||||
}
|
||||
|
||||
const tr = document.createElement('tr');
|
||||
@@ -115,22 +125,36 @@ export function renderSwList(container: HTMLElement) {
|
||||
|
||||
tr.innerHTML = `
|
||||
<td style="text-align:center;">${idx+1}</td>
|
||||
<td style="text-align:center;">${statusBadge}</td>
|
||||
<td style="text-align:center;">${asset.분야||''}</td>
|
||||
<td style="text-align:center;">${(asset as any)[ASSET_SCHEMA.CORP.key]}</td>
|
||||
<td style="text-align:center;">${asset.부서||''}</td>
|
||||
<td>${(asset as any)[ASSET_SCHEMA.PRODUCT.key]}</td>
|
||||
<td style="text-align:center;">${(asset as any)[ASSET_SCHEMA.PURCHASE_YM.key]||''}</td>
|
||||
${isSub ? `<td style="text-align:center;">${(asset as any)[ASSET_SCHEMA.EXPIRY.key]||''}</td>` : ''}
|
||||
<td style="text-align:right;">${Number((asset as any)[ASSET_SCHEMA.PRICE.key]||0).toLocaleString()}</td>
|
||||
<td style="text-align:center;">${statusHtml}</td>
|
||||
<td>${asset.분야||''}</td>
|
||||
<td>${asset.법인}</td>
|
||||
<td>${asset.부서||''}</td>
|
||||
<td>${asset.제품명}</td>
|
||||
<td style="text-align:center;">${asset.구매일||''}</td>
|
||||
<td style="text-align:center;">${asset.시작일||''}</td>
|
||||
<td style="text-align:center;">${asset.만료일||''}</td>
|
||||
<td style="text-align:right;">${formatPrice(asset.금액)}</td>
|
||||
<td style="text-align:center;">${qty}</td>
|
||||
<td style="text-align:center;"><strong style="color: ${avail > 0 ? 'var(--primary-color)' : 'var(--danger)'}">${avail}</strong></td>
|
||||
<td style="text-align:center;">
|
||||
<button class="btn-icon btn-user-mgmt" title="사용자 관리" style="margin: 0 auto; color: var(--primary-color);">
|
||||
<i data-lucide="users" style="width:18px; height:18px;"></i>
|
||||
</button>
|
||||
</td>
|
||||
`;
|
||||
|
||||
tr.addEventListener('click', () => openSwModal(asset, 'view'));
|
||||
const userBtn = tr.querySelector('.btn-user-mgmt');
|
||||
userBtn?.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
openSwUserModal(asset);
|
||||
});
|
||||
|
||||
tr.addEventListener('click', (e) => {
|
||||
openSwModal(asset, 'view');
|
||||
});
|
||||
tbody.appendChild(tr);
|
||||
});
|
||||
createIcons({ icons: { RefreshCcw } });
|
||||
createIcons({ icons: { Edit2, Users, RefreshCcw } });
|
||||
};
|
||||
|
||||
document.getElementById('filter-keyword')?.addEventListener('input', updateTable);
|
||||
|
||||
@@ -40,9 +40,8 @@ export function renderSWTable(mainContent: HTMLElement) {
|
||||
container.innerHTML = `<div style="padding:2rem; color:var(--text-muted);">"${tab}" 탭에 대한 소프트웨어 리스트 뷰가 정의되지 않았습니다.</div>`;
|
||||
}
|
||||
} else if (state.activeCategory === 'ops') {
|
||||
// 운영 서비스 관련 탭 처리
|
||||
if (['도메인', '메일', '메신저', '청구비용'].includes(tab)) {
|
||||
renderCloudList(container); // 일단 클라우드 리스트로 공통 처리
|
||||
renderCloudList(container);
|
||||
} else {
|
||||
container.innerHTML = `<div style="padding:2rem; color:var(--text-muted);">"${tab}" 탭에 대한 운영 서비스 뷰가 정의되지 않았습니다.</div>`;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user