feat: 서버 상세 모달 그룹화 및 전역 UI/UX 통일, 조회/수정 모드 구현
주요 변경 사항: - 서버 자산 상세 정보 4개 그룹(Identity, Connectivity, Specs, Operation)으로 최적화 - 모달 내 조회/수정 모드 전환 및 수정 강조색(#FF3D00) 적용 - 모든 모달의 버튼 사이즈 및 폰트 스타일 가이드 준수 통일 - 수정 취소(Revert) 기능 및 누락된 대시보드 상세 모달 추가 - TypeScript 타입 오류 및 런타임 렌더링 결함 긴급 복구
This commit is contained in:
@@ -7,12 +7,15 @@ declare var Chart: any;
|
||||
* 대시보드 렌더링 메인 함수
|
||||
*/
|
||||
export function renderDashboard(mainContent: HTMLElement) {
|
||||
if (!mainContent) return;
|
||||
mainContent.innerHTML = '';
|
||||
|
||||
// 기존 차트 리소스 해제
|
||||
state.activeCharts.forEach(c => {
|
||||
if (c && typeof c.destroy === 'function') c.destroy();
|
||||
});
|
||||
if (state.activeCharts) {
|
||||
state.activeCharts.forEach(c => {
|
||||
if (c && typeof c.destroy === 'function') c.destroy();
|
||||
});
|
||||
}
|
||||
state.activeCharts = [];
|
||||
|
||||
if (state.activeCategory === 'hw') {
|
||||
@@ -41,7 +44,6 @@ function renderHwDashboard(container: HTMLElement) {
|
||||
else groups[a.type].normal.push(a);
|
||||
});
|
||||
|
||||
// 사용현황 카드 생성
|
||||
let usageCards = '';
|
||||
types.forEach((t, i) => {
|
||||
const total = groups[t].idle.length + groups[t].active.length;
|
||||
@@ -69,7 +71,6 @@ function renderHwDashboard(container: HTMLElement) {
|
||||
</div>`;
|
||||
});
|
||||
|
||||
// 노후화 카드 생성
|
||||
let agedCards = '';
|
||||
types.forEach((t, i) => {
|
||||
const total = groups[t].aged.length + groups[t].normal.length;
|
||||
@@ -104,7 +105,6 @@ function renderHwDashboard(container: HTMLElement) {
|
||||
<div class="dashboard-layout-2col">${agedCards}</div>
|
||||
`;
|
||||
|
||||
// 클릭 이벤트 바인딩
|
||||
container.querySelectorAll('[data-action="idle"]').forEach(card => {
|
||||
card.addEventListener('click', () => {
|
||||
const t = card.getAttribute('data-type')!;
|
||||
@@ -135,7 +135,7 @@ function renderSwDashboard(container: HTMLElement) {
|
||||
state.masterData.sw.forEach(sw => {
|
||||
const assigned = state.masterData.swUsers.filter(u => u.swId === sw.id).length;
|
||||
const qty = typeof sw.수량 === 'number' ? sw.수량 : parseInt(sw.수량||'0', 10);
|
||||
const priceStr = sw.금액 ? sw.금액.replace(/,/g, '') : '0';
|
||||
const priceStr = sw.금액 ? String(sw.금액).replace(/,/g, '') : '0';
|
||||
const price = parseInt(priceStr, 10) || 0;
|
||||
|
||||
if (sw.type === '구독SW') {
|
||||
@@ -146,7 +146,6 @@ function renderSwDashboard(container: HTMLElement) {
|
||||
if (isSWExpiring(sw)) permExp++;
|
||||
}
|
||||
|
||||
// 오늘이 속해있는 년도(2026)의 사용 금액 합계
|
||||
if (sw.구매일 && sw.구매일.startsWith(currentYear)) {
|
||||
if (costByCorp[sw.법인] !== undefined) costByCorp[sw.법인] += price;
|
||||
if (sw.분야 && costByCat[sw.분야] !== undefined) costByCat[sw.분야] += price;
|
||||
@@ -232,7 +231,6 @@ function renderSwDashboard(container: HTMLElement) {
|
||||
</div>
|
||||
`;
|
||||
|
||||
// 차트 생성
|
||||
setTimeout(() => {
|
||||
const ctxCorp = (document.getElementById('chart-cost-corp') as HTMLCanvasElement)?.getContext('2d');
|
||||
const ctxCat = (document.getElementById('chart-cost-cat') as HTMLCanvasElement)?.getContext('2d');
|
||||
@@ -247,7 +245,7 @@ function renderSwDashboard(container: HTMLElement) {
|
||||
data: corps.map(c => costByCorp[c]),
|
||||
backgroundColor: '#3b82f6',
|
||||
borderRadius: 4,
|
||||
barThickness: 20 // 막대 두께 줄임
|
||||
barThickness: 20
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
@@ -258,11 +256,9 @@ function renderSwDashboard(container: HTMLElement) {
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
ticks: { callback: (v: any) => v.toLocaleString() },
|
||||
grid: { display: false } // 가로줄 삭제
|
||||
},
|
||||
x: {
|
||||
grid: { display: false }
|
||||
}
|
||||
},
|
||||
x: { grid: { display: false } }
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -279,7 +275,7 @@ function renderSwDashboard(container: HTMLElement) {
|
||||
data: categories.map(c => costByCat[c]),
|
||||
backgroundColor: '#10b981',
|
||||
borderRadius: 4,
|
||||
barThickness: 20 // 막대 두께 줄임
|
||||
barThickness: 20
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
@@ -290,11 +286,9 @@ function renderSwDashboard(container: HTMLElement) {
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
ticks: { callback: (v: any) => v.toLocaleString() },
|
||||
grid: { display: false } // 가로줄 삭제
|
||||
},
|
||||
x: {
|
||||
grid: { display: false }
|
||||
}
|
||||
},
|
||||
x: { grid: { display: false } }
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -302,7 +296,6 @@ function renderSwDashboard(container: HTMLElement) {
|
||||
}
|
||||
}, 0);
|
||||
|
||||
// 클릭 이벤트 바인딩
|
||||
container.querySelector('[data-action="sub-usage"]')?.addEventListener('click', () => {
|
||||
openSwUsageDetail('구독 소프트웨어 사용 목록', state.masterData.sw.filter(sw => sw.type === '구독SW'));
|
||||
});
|
||||
@@ -317,7 +310,6 @@ function renderSwDashboard(container: HTMLElement) {
|
||||
});
|
||||
}
|
||||
|
||||
// --- 공통 헬퍼 함수들 ---
|
||||
function isHwIdle(a: HardwareAsset) {
|
||||
if (a.type === '개인PC') return !a.사용자 || a.사용자.trim() === '' || a.사용자.trim() === '-';
|
||||
if (a.type === '스토리지') return !a.담당자_정 || a.담당자_정.trim() === '' || a.담당자_정.trim() === '-';
|
||||
@@ -326,7 +318,11 @@ function isHwIdle(a: HardwareAsset) {
|
||||
|
||||
function getHwAgeYears(a: HardwareAsset) {
|
||||
if (!a.구매일) return 0;
|
||||
return (Date.now() - new Date(a.구매일).getTime()) / (1000 * 60 * 60 * 24 * 365.25);
|
||||
try {
|
||||
const buyDate = new Date(a.구매일.replace(/\./g, '-'));
|
||||
if (isNaN(buyDate.getTime())) return 0;
|
||||
return (Date.now() - buyDate.getTime()) / (1000 * 60 * 60 * 24 * 365.25);
|
||||
} catch { return 0; }
|
||||
}
|
||||
|
||||
function isSWExpiring(sw: SoftwareAsset) {
|
||||
@@ -339,29 +335,30 @@ function isSWExpiring(sw: SoftwareAsset) {
|
||||
return diffDays >= 0 && diffDays <= 30;
|
||||
}
|
||||
} else if (sw.type === '영구SW' && sw.비고 && sw.비고.includes('유지보수: ~')) {
|
||||
const endStr = sw.비고.split('~')[1].trim();
|
||||
const endMs = new Date(endStr.replace(/\./g, '-')).getTime();
|
||||
const diffDays = (endMs - Date.now()) / (1000 * 60 * 60 * 24);
|
||||
return diffDays >= 0 && diffDays <= 30;
|
||||
try {
|
||||
const endStr = sw.비고.split('~')[1].trim();
|
||||
const endMs = new Date(endStr.replace(/\./g, '-')).getTime();
|
||||
const diffDays = (endMs - Date.now()) / (1000 * 60 * 60 * 24);
|
||||
return diffDays >= 0 && diffDays <= 30;
|
||||
} catch { return false; }
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
// --- 대시보드 상세 모달 제어 (main.ts의 함수 재사용 또는 이동 필요) ---
|
||||
// 일단 main.ts에 있는 함수를 전역에서 가져와 쓸 수 없으므로, 여기서 직접 정의하거나 main.ts에서 export 해야 합니다.
|
||||
// 구조 개선을 위해 main.ts에서 이 함수들도 DashboardView로 옮기는 것이 좋습니다.
|
||||
|
||||
function openDashboardDetail(title: string, list: HardwareAsset[]) {
|
||||
const modal = document.getElementById('dashboard-detail-modal') as HTMLDivElement;
|
||||
const titleEl = document.getElementById('dashboard-detail-modal-title') as HTMLHeadingElement;
|
||||
const tbody = document.getElementById('dashboard-detail-tbody') as HTMLTableSectionElement;
|
||||
const thead = tbody.closest('table')!.querySelector('thead')!;
|
||||
const modal = document.getElementById('dashboard-detail-modal');
|
||||
if (!modal) return;
|
||||
const titleEl = document.getElementById('dashboard-detail-modal-title');
|
||||
const tbody = document.getElementById('dashboard-detail-tbody');
|
||||
if (!titleEl || !tbody) return;
|
||||
const thead = tbody.closest('table')?.querySelector('thead');
|
||||
if (!thead) return;
|
||||
|
||||
titleEl.textContent = title;
|
||||
thead.innerHTML = `<tr><th>No</th><th>유형</th><th>자산코드</th><th>명칭/모델</th><th>위치</th><th>담당/사용자</th><th>구매일</th><th>금액</th></tr>`;
|
||||
tbody.innerHTML = '';
|
||||
if (list.length === 0) {
|
||||
tbody.innerHTML = `<tr><td colspan="8" style="text-align:center;">해당 조건의 자산이 없습니다.</td></tr>`;
|
||||
tbody.innerHTML = `<tr><td colspan="8" style="text-align:center; padding: 2rem;">해당 조건의 자산이 없습니다.</td></tr>`;
|
||||
} else {
|
||||
list.forEach((asset, idx) => {
|
||||
let manager = asset.관리자 || asset.사용자 || asset.담당자_정 || '-';
|
||||
@@ -375,10 +372,13 @@ function openDashboardDetail(title: string, list: HardwareAsset[]) {
|
||||
}
|
||||
|
||||
function openSwDashboardDetail(title: string, list: SoftwareAsset[]) {
|
||||
const modal = document.getElementById('dashboard-detail-modal') as HTMLDivElement;
|
||||
const titleEl = document.getElementById('dashboard-detail-modal-title') as HTMLHeadingElement;
|
||||
const tbody = document.getElementById('dashboard-detail-tbody') as HTMLTableSectionElement;
|
||||
const thead = tbody.closest('table')!.querySelector('thead')!;
|
||||
const modal = document.getElementById('dashboard-detail-modal');
|
||||
if (!modal) return;
|
||||
const titleEl = document.getElementById('dashboard-detail-modal-title');
|
||||
const tbody = document.getElementById('dashboard-detail-tbody');
|
||||
if (!titleEl || !tbody) return;
|
||||
const thead = tbody.closest('table')?.querySelector('thead');
|
||||
if (!thead) return;
|
||||
|
||||
titleEl.textContent = title;
|
||||
thead.innerHTML = `<tr><th>No</th><th>유형</th><th>법인</th><th>제품명</th><th>수량</th><th>금액</th></tr>`;
|
||||
@@ -392,10 +392,13 @@ function openSwDashboardDetail(title: string, list: SoftwareAsset[]) {
|
||||
}
|
||||
|
||||
function openSwUsageDetail(title: string, list: SoftwareAsset[]) {
|
||||
const modal = document.getElementById('dashboard-detail-modal') as HTMLDivElement;
|
||||
const titleEl = document.getElementById('dashboard-detail-modal-title') as HTMLHeadingElement;
|
||||
const tbody = document.getElementById('dashboard-detail-tbody') as HTMLTableSectionElement;
|
||||
const thead = tbody.closest('table')!.querySelector('thead')!;
|
||||
const modal = document.getElementById('dashboard-detail-modal');
|
||||
if (!modal) return;
|
||||
const titleEl = document.getElementById('dashboard-detail-modal-title');
|
||||
const tbody = document.getElementById('dashboard-detail-tbody');
|
||||
if (!titleEl || !tbody) return;
|
||||
const thead = tbody.closest('table')?.querySelector('thead');
|
||||
if (!thead) return;
|
||||
|
||||
titleEl.textContent = title;
|
||||
thead.innerHTML = `<tr><th>No</th><th>법인</th><th>제품명</th><th>수량</th><th>사용중</th><th>사용가능</th></tr>`;
|
||||
@@ -409,5 +412,3 @@ function openSwUsageDetail(title: string, list: SoftwareAsset[]) {
|
||||
});
|
||||
modal.classList.remove('hidden');
|
||||
}
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user