feat: migrate ServerPC data to asset_pc, enhance filters with location, and standardize page headers
- 서버PC 자산을 asset_pc 테이블로 통합 마이그레이션 및 스키마 확장 (위치, IP 정보 복구 완료) - 하드웨어 자산 페이지의 구매법인 필터를 자산위치 필터로 교체 및 동적 데이터 바인딩 적용 - 모든 자산 리스트 페이지 상단에 설명(Description) 필드 추가 및 헤더 표준화 - 상세 모달 내 삭제 버튼 기능 구현 및 서버PC 용도 필드 노출 오류 수정 - 현 사용조직 필터 리스트가 비어있던 DOM 셀렉터 버그 수정
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
import { state } from '../../core/state';
|
||||
import { HardwareAsset } from '../../core/excelHandler';
|
||||
import { openHwModal } from '../../components/Modal/HWModal';
|
||||
import { calculateAssetAge, normalizeDate } from '../../core/utils';
|
||||
import { ASSET_SCHEMA } from '../../core/schema';
|
||||
|
||||
declare var Chart: any;
|
||||
|
||||
@@ -12,14 +12,14 @@ export function renderHwDashboard(container: HTMLElement) {
|
||||
let totalAge = 0;
|
||||
let countWithDate = 0;
|
||||
let over5YearsCount = 0;
|
||||
let latestAsset: HardwareAsset | null = null;
|
||||
let latestAsset: any | null = null;
|
||||
let latestYear = 0;
|
||||
|
||||
const ageGroups = { stable: 0, warning: 0, critical: 0 };
|
||||
const yearlyCount: Record<string, number> = {};
|
||||
|
||||
allHw.forEach(a => {
|
||||
const pDate = a.구매일 || (a as any).purchase_date;
|
||||
const pDate = a[ASSET_SCHEMA.PURCHASE_DATE.key];
|
||||
if (!pDate) return;
|
||||
|
||||
const age = calculateAssetAge(pDate);
|
||||
@@ -53,10 +53,10 @@ export function renderHwDashboard(container: HTMLElement) {
|
||||
|
||||
// 교체 시급 대상 TOP 10 (오래된 순)
|
||||
const criticalList = [...allHw]
|
||||
.filter(a => (a.구매일 || (a as any).purchase_date))
|
||||
.filter(a => a[ASSET_SCHEMA.PURCHASE_DATE.key])
|
||||
.sort((a, b) => {
|
||||
const dateA = new Date(normalizeDate(a.구매일 || (a as any).purchase_date)).getTime();
|
||||
const dateB = new Date(normalizeDate(b.구매일 || (b as any).purchase_date)).getTime();
|
||||
const dateA = new Date(normalizeDate(a[ASSET_SCHEMA.PURCHASE_DATE.key])).getTime();
|
||||
const dateB = new Date(normalizeDate(b[ASSET_SCHEMA.PURCHASE_DATE.key])).getTime();
|
||||
return dateA - dateB;
|
||||
})
|
||||
.slice(0, 10);
|
||||
@@ -69,19 +69,23 @@ export function renderHwDashboard(container: HTMLElement) {
|
||||
<span style="font-size:1rem; font-weight:700; color:var(--text-main);">전체 평균 사용 연수</span>
|
||||
<div style="font-size: 0.8125rem; color:var(--text-muted); margin-bottom: 1rem;">전체 자산 기준 (권장 4.5년)</div>
|
||||
<div style="font-size: 2rem; font-weight:700; color:var(--dash-primary);">${avgAge}년</div>
|
||||
<div style="width: 100%; height: 4px; background-color: var(--dash-primary); border-radius: 2px; margin-top: 0.5rem;"></div>
|
||||
<div style="width: 100%; height: 4px; background-color: var(--border-color); border-radius: 2px; overflow: hidden; margin-top: 0.5rem;">
|
||||
<div style="width: ${Math.min(100, (Number(avgAge)/4.5)*100)}%; height: 100%; background-color: var(--dash-primary);"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dashboard-card" style="min-height:auto;">
|
||||
<span style="font-size:1rem; font-weight:700; color:var(--text-main);">5년 이상 노후 자산 비율</span>
|
||||
<div style="font-size: 0.8125rem; color:var(--text-muted); margin-bottom: 1rem;">총 ${over5YearsCount}대 해당</div>
|
||||
<div style="font-size: 2rem; font-weight:700; color:${over5Rate >= 20 ? 'var(--dash-danger)' : 'var(--dash-primary)'};">${over5Rate}%</div>
|
||||
<div style="width: 100%; height: 4px; background-color: ${over5Rate >= 20 ? 'var(--dash-danger)' : 'var(--dash-primary)'}; border-radius: 2px; margin-top: 0.5rem;"></div>
|
||||
<div style="width: 100%; height: 4px; background-color: var(--border-color); border-radius: 2px; overflow: hidden; margin-top: 0.5rem;">
|
||||
<div style="width: ${over5Rate}%; height: 100%; background-color: ${over5Rate >= 20 ? 'var(--dash-danger)' : 'var(--dash-primary)'};"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dashboard-card" style="min-height:auto;">
|
||||
<span style="font-size:1rem; font-weight:700; color:var(--text-main);">최신 도입 모델 (${latestYear}년)</span>
|
||||
<div style="font-size: 0.8125rem; color:var(--text-muted); margin-bottom: 1rem;">자산번호: ${(latestAsset as any)?.자산코드 || '-'}</div>
|
||||
<div style="font-size: 1.25rem; font-weight:700; color:var(--primary-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height: 3rem; display: flex; align-items: center;" title="${(latestAsset as any)?.모델명 || '정보 없음'}">
|
||||
${(latestAsset as any)?.모델명 || '정보 없음'}
|
||||
<div style="font-size: 0.8125rem; color:var(--text-muted); margin-bottom: 1rem;">자산번호: ${latestAsset ? latestAsset[ASSET_SCHEMA.ASSET_CODE.key] : '-'}</div>
|
||||
<div style="font-size: 1.25rem; font-weight:700; color:var(--primary-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height: 3rem; display: flex; align-items: center;" title="${latestAsset ? latestAsset[ASSET_SCHEMA.MODEL_NAME.key] : '정보 없음'}">
|
||||
${latestAsset ? (latestAsset[ASSET_SCHEMA.MODEL_NAME.key] || latestAsset[ASSET_SCHEMA.ASSET_NAME.key] || '정보 없음') : '정보 없음'}
|
||||
</div>
|
||||
<div style="width: 100%; height: 4px; background-color: var(--primary-color); border-radius: 2px; margin-top: 0.5rem;"></div>
|
||||
</div>
|
||||
@@ -103,27 +107,31 @@ export function renderHwDashboard(container: HTMLElement) {
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>순위</th>
|
||||
<th>자산번호</th>
|
||||
<th>유형</th>
|
||||
<th>모델명</th>
|
||||
<th>사용자/담당자</th>
|
||||
<th>구매연월</th>
|
||||
<th>연령</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>
|
||||
${criticalList.map((a, i) => `
|
||||
<tr class="clickable-row" data-id="${a.id}">
|
||||
${criticalList.map((a, i) => {
|
||||
const pDate = a[ASSET_SCHEMA.PURCHASE_DATE.key];
|
||||
const age = calculateAssetAge(pDate);
|
||||
return `
|
||||
<tr class="clickable-row" data-id="${a.id}" style="cursor:pointer;">
|
||||
<td style="text-align:center; font-weight:600; color:var(--text-muted)">${i + 1}</td>
|
||||
<td>${a.자산코드 || '-'}</td>
|
||||
<td><span class="badge-type">${a.type}</span></td>
|
||||
<td>${a.모델명 || a.명칭 || '-'}</td>
|
||||
<td>${a.사용자 || a.담당자_정 || '-'}</td>
|
||||
<td style="text-align:center;">${a.구매일 || (a as any).purchase_date || '-'}</td>
|
||||
<td style="text-align:center;"><strong style="color:${calculateAssetAge(a.구매일 || (a as any).purchase_date) >= 5 ? 'var(--danger)' : 'inherit'}">${calculateAssetAge(a.구매일 || (a as any).purchase_date)}년</strong></td>
|
||||
<td style="text-align:center;">${a[ASSET_SCHEMA.ASSET_CODE.key] || '-'}</td>
|
||||
<td style="text-align:center;"><span class="badge-type">${a[ASSET_SCHEMA.ASSET_TYPE.key] || a.category || ''}</span></td>
|
||||
<td>${a[ASSET_SCHEMA.MODEL_NAME.key] || a[ASSET_SCHEMA.ASSET_NAME.key] || '-'}</td>
|
||||
<td style="text-align:center;">${a[ASSET_SCHEMA.MANAGER_MAIN.key] || '-'}</td>
|
||||
<td style="text-align:center;">${pDate || '-'}</td>
|
||||
<td style="text-align:center;"><strong style="color:${age >= 5 ? 'var(--danger)' : 'inherit'}">${age}년</strong></td>
|
||||
</tr>
|
||||
`).join('')}
|
||||
`;
|
||||
}).join('')}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -147,7 +155,7 @@ export function renderHwDashboard(container: HTMLElement) {
|
||||
|
||||
function initAgingCharts(ageGroups: any, yearlyCount: Record<string, number>) {
|
||||
const agingCtx = document.getElementById('chart-aging-dist') as HTMLCanvasElement;
|
||||
if (agingCtx) {
|
||||
if (agingCtx && typeof Chart !== 'undefined') {
|
||||
new Chart(agingCtx, {
|
||||
type: 'doughnut',
|
||||
data: {
|
||||
@@ -168,7 +176,7 @@ function initAgingCharts(ageGroups: any, yearlyCount: Record<string, number>) {
|
||||
}
|
||||
|
||||
const trendCtx = document.getElementById('chart-purchase-trend') as HTMLCanvasElement;
|
||||
if (trendCtx) {
|
||||
if (trendCtx && typeof Chart !== 'undefined') {
|
||||
const years = Object.keys(yearlyCount).sort();
|
||||
new Chart(trendCtx, {
|
||||
type: 'bar',
|
||||
|
||||
@@ -1,119 +1,56 @@
|
||||
import { state } from '../../core/state';
|
||||
import { SoftwareAsset } from '../../core/excelHandler';
|
||||
import { openSwDashboardDetail, openSwUsageDetail, openCloudDashboardDetail } from '../../components/Modal/DashboardDetailModal';
|
||||
import { openSwDashboardDetail, openSwUsageDetail } from '../../components/Modal/DashboardDetailModal';
|
||||
import { normalizeDate } from '../../core/utils';
|
||||
|
||||
declare var Chart: any;
|
||||
import { ASSET_SCHEMA } from '../../core/schema';
|
||||
|
||||
export function renderSwDashboard(container: HTMLElement) {
|
||||
let subQty = 0, subUsed = 0, subExp = 0, subTotal = 0;
|
||||
let permQty = 0, permUsed = 0, permExp = 0, permTotal = 0;
|
||||
let extQty = 0, extUsed = 0, extExp = 0, extTotal = 0;
|
||||
let intQty = 0, intUsed = 0, intExp = 0, intTotal = 0;
|
||||
|
||||
let subCost2026 = 0;
|
||||
let permCost2026 = 0;
|
||||
let extCost2026 = 0;
|
||||
let intCost2026 = 0;
|
||||
|
||||
const currentYear = new Date().getFullYear();
|
||||
|
||||
const corps = ['한맥', '삼안', '바론'];
|
||||
const categories = ['업무공통', '개발S/W', '디자인', '설계S/W'];
|
||||
|
||||
const costByCorp: Record<string, number> = { '한맥': 0, '삼안': 0, '바론': 0 };
|
||||
const costByCat: Record<string, number> = {};
|
||||
categories.forEach(c => costByCat[c] = 0);
|
||||
|
||||
// 통합 SW 데이터 (클라우드 제외)
|
||||
const allSw = [...state.masterData.subSw, ...state.masterData.permSw];
|
||||
// 통합 SW 데이터
|
||||
const allSw = [...state.masterData.swExternal, ...state.masterData.swInternal];
|
||||
|
||||
allSw.forEach(sw => {
|
||||
const assigned = state.masterData.swUsers.filter(u => u.sw_id === sw.id).length;
|
||||
const qty = typeof sw.수량 === 'number' ? sw.수량 : parseInt(sw.수량||'0', 10);
|
||||
const priceStr = sw.금액 ? String(sw.금액).replace(/,/g, '') : '0';
|
||||
const qty = typeof sw[ASSET_SCHEMA.ASSET_COUNT.key] === 'number' ? sw[ASSET_SCHEMA.ASSET_COUNT.key] : parseInt(sw[ASSET_SCHEMA.ASSET_COUNT.key]||'0', 10);
|
||||
const priceStr = sw[ASSET_SCHEMA.PURCHASE_AMOUNT.key] ? String(sw[ASSET_SCHEMA.PURCHASE_AMOUNT.key]).replace(/,/g, '') : '0';
|
||||
const price = parseInt(priceStr, 10) || 0;
|
||||
|
||||
if (sw.type === '구독SW') {
|
||||
subQty += qty; subUsed += assigned; subTotal++;
|
||||
if (isSWExpiring(sw)) subExp++;
|
||||
} else if (sw.type === '영구SW') {
|
||||
permQty += qty; permUsed += assigned; permTotal++;
|
||||
if (isSWExpiring(sw)) permExp++;
|
||||
}
|
||||
|
||||
// 초기 도입 비용 (2026년 구매건)
|
||||
if (sw.구매일 && sw.구매일.startsWith('2026')) {
|
||||
if (sw.type === '구독SW') subCost2026 += price;
|
||||
else if (sw.type === '영구SW') permCost2026 += price;
|
||||
|
||||
if (costByCorp[sw.법인] !== undefined) costByCorp[sw.법인] += price;
|
||||
if (sw.분야 && costByCat[sw.분야] !== undefined) costByCat[sw.분야] += price;
|
||||
if (sw.asset_type === '외부SW' || sw.type === '외부SW') {
|
||||
extQty += qty; extUsed += assigned; extTotal++;
|
||||
if (isSWExpiring(sw)) extExp++;
|
||||
if (sw[ASSET_SCHEMA.PURCHASE_DATE.key]?.startsWith('2026')) extCost2026 += price;
|
||||
} else {
|
||||
intQty += qty; intUsed += assigned; intTotal++;
|
||||
if (sw[ASSET_SCHEMA.PURCHASE_DATE.key]?.startsWith('2026')) intCost2026 += 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;
|
||||
|
||||
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;
|
||||
const permExpPer = permTotal > 0 ? Math.round((permExp/permTotal)*100) : 0;
|
||||
const extPer = extQty > 0 ? Math.round((extUsed/extQty)*100) : 0;
|
||||
const intPer = intQty > 0 ? Math.round((intUsed/intQty)*100) : 0;
|
||||
|
||||
container.innerHTML = `
|
||||
<div class="view-container">
|
||||
<h3 class="dashboard-section-title">소프트웨어 라이선스 현황</h3>
|
||||
|
||||
<div class="dashboard-layout-2col" style="margin-bottom: 1.5rem;">
|
||||
<div class="dashboard-card" data-action="sub-usage" style="cursor:pointer; min-height:auto;">
|
||||
<span style="font-size:1rem; font-weight:700; color:var(--text-main);">구독 소프트웨어 사용율</span>
|
||||
<div style="font-size: 0.8125rem; color:var(--text-muted); margin-bottom: 1rem;">${subQty}카피 중 ${subUsed}개 할당</div>
|
||||
<div style="font-size: 2rem; font-weight:700; color:var(--dash-primary);">${subPer}%</div>
|
||||
<div class="dashboard-card" data-action="ext-usage" style="cursor:pointer; min-height:auto;">
|
||||
<span style="font-size:1rem; font-weight:700; color:var(--text-main);">외부 소프트웨어 사용율</span>
|
||||
<div style="font-size: 0.8125rem; color:var(--text-muted); margin-bottom: 1rem;">${extQty}카피 중 ${extUsed}개 할당</div>
|
||||
<div style="font-size: 2rem; font-weight:700; color:var(--dash-primary);">${extPer}%</div>
|
||||
<div style="width: 100%; height: 4px; background-color: var(--border-color); border-radius: 2px; overflow: hidden; margin-top: 0.5rem;">
|
||||
<div style="width: ${subPer}%; height: 100%; background-color: var(--dash-primary);"></div>
|
||||
<div style="width: ${extPer}%; height: 100%; background-color: var(--dash-primary);"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dashboard-card" data-action="perm-usage" style="cursor:pointer; min-height:auto;">
|
||||
<span style="font-size:1rem; font-weight:700; color:var(--text-main);">영구 소프트웨어 사용율</span>
|
||||
<div style="font-size: 0.8125rem; color:var(--text-muted); margin-bottom: 1rem;">${permQty}카피 중 ${permUsed}개 할당</div>
|
||||
<div style="font-size: 2rem; font-weight:700; color:var(--dash-primary);">${permPer}%</div>
|
||||
<div style="width: 100%; height: 4px; background-color: var(--border-color); border-radius: 2px; overflow: hidden; margin-top: 0.5rem;">
|
||||
<div style="width: ${permPer}%; height: 100%; background-color: var(--dash-primary);"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dashboard-layout-2col" style="margin-bottom: 1.5rem;">
|
||||
<div class="dashboard-card" data-action="sub-exp" style="flex-direction:row; justify-content:space-between; align-items:center; cursor:pointer; min-height:auto;">
|
||||
<div style="flex:1;">
|
||||
<span style="font-size:1rem; font-weight:700; color:var(--text-main);">구독 SW 만료 예정<br><span style="font-size:0.8rem;font-weight:400;color:var(--text-muted);">(30일 이내)</span></span>
|
||||
<div style="font-size: 1.5rem; font-weight:700; color:${subExp > 0 ? 'var(--dash-danger)' : 'var(--text-main)'}; margin-top:0.5rem;">${subExp}개 제품</div>
|
||||
</div>
|
||||
<div style="width: 50px; height: 50px; border-radius: 50%; background: conic-gradient(var(--dash-danger) ${subExpPer}%, var(--border-color) 0); display:flex; justify-content:center; align-items:center;">
|
||||
<div style="width: 40px; height: 40px; border-radius: 50%; background: var(--white); display:flex; justify-content:center; align-items:center;">
|
||||
<span style="font-size: 0.75rem; color:var(--text-muted); font-weight:600;">${subExpPer}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dashboard-card" data-action="perm-exp" style="flex-direction:row; justify-content:space-between; align-items:center; cursor:pointer; min-height:auto;">
|
||||
<div style="flex:1;">
|
||||
<span style="font-size:1rem; font-weight:700; color:var(--text-main);">유지보수 만료 예정<br><span style="font-size:0.8rem;font-weight:400;color:var(--text-muted);">(30일 이내)</span></span>
|
||||
<div style="font-size: 1.5rem; font-weight:700; color:${permExp > 0 ? 'var(--dash-danger)' : 'var(--text-main)'}; margin-top:0.5rem;">${permExp}개 제품</div>
|
||||
</div>
|
||||
<div style="width: 50px; height: 50px; border-radius: 50%; background: conic-gradient(var(--dash-danger) ${permExpPer}%, var(--border-color) 0); display:flex; justify-content:center; align-items:center;">
|
||||
<div style="width: 40px; height: 40px; border-radius: 50%; background: var(--white); display:flex; justify-content:center; align-items:center;">
|
||||
<span style="font-size: 0.75rem; color:var(--text-muted); font-weight:600;">${permExpPer}%</span>
|
||||
</div>
|
||||
<div class="dashboard-card" data-action="int-usage" style="cursor:pointer; min-height:auto;">
|
||||
<span style="font-size:1rem; font-weight:700; color:var(--text-main);">내부 소프트웨어 현황</span>
|
||||
<div style="font-size: 0.8125rem; color:var(--text-muted); margin-bottom: 1rem;">등록된 내부 솔루션: ${intTotal}개</div>
|
||||
<div style="font-size: 2rem; font-weight:700; color:var(--dash-primary);">${intPer}%</div>
|
||||
<div style="width: 100%; height: 4px; background-color: var(--border-color); border-radius: 2px; overflow: hidden; margin-top: 0.5rem;">
|
||||
<div style="width: ${intPer}%; height: 100%; background-color: var(--dash-primary);"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -122,42 +59,25 @@ export function renderSwDashboard(container: HTMLElement) {
|
||||
|
||||
<div style="display:grid; grid-template-columns: repeat(2, 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>
|
||||
<span style="font-size:1rem; font-weight:700; color:var(--text-main);">외부 SW 누적 비용 (2026)</span>
|
||||
<div style="font-size: 2rem; font-weight:700; color:var(--dash-primary);">₩ ${extCost2026.toLocaleString()}</div>
|
||||
</div>
|
||||
<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>
|
||||
<span style="font-size:1rem; font-weight:700; color:var(--text-main);">내부 SW 누적 비용 (2026)</span>
|
||||
<div style="font-size: 2rem; font-weight:700; color:#3b82f6;">₩ ${intCost2026.toLocaleString()}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
`;
|
||||
|
||||
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))));
|
||||
container.querySelector('[data-action="perm-exp"]')?.addEventListener('click', () => openSwDashboardDetail('유지보수 만료 예정 목록', state.masterData.permSw.filter(sw => isSWExpiring(sw))));
|
||||
container.querySelector('[data-action="ext-usage"]')?.addEventListener('click', () => openSwUsageDetail('외부 소프트웨어 사용 목록', state.masterData.swExternal));
|
||||
container.querySelector('[data-action="int-usage"]')?.addEventListener('click', () => openSwUsageDetail('내부 소프트웨어 사용 목록', state.masterData.swInternal));
|
||||
}
|
||||
|
||||
function isSWExpiring(sw: SoftwareAsset) {
|
||||
if (sw.type === '구독SW' && sw.만료일) {
|
||||
const endMs = new Date(normalizeDate(sw.만료일)).getTime();
|
||||
const diffDays = (endMs - Date.now()) / (1000 * 60 * 60 * 24);
|
||||
return diffDays >= 0 && diffDays <= 30;
|
||||
} else if (sw.type === '영구SW' && sw.비고 && sw.비고.includes('유지보수: ~')) {
|
||||
try {
|
||||
const parts = sw.비고.split('~');
|
||||
if (parts.length > 1) {
|
||||
const endMs = new Date(normalizeDate(parts[1].trim())).getTime();
|
||||
const diffDays = (endMs - Date.now()) / (1000 * 60 * 60 * 24);
|
||||
return diffDays >= 0 && diffDays <= 30;
|
||||
}
|
||||
} catch { return false; }
|
||||
}
|
||||
return false;
|
||||
function isSWExpiring(sw: any) {
|
||||
const expiry = sw[ASSET_SCHEMA.EXPIRY_DATE.key];
|
||||
if (!expiry) return false;
|
||||
const endMs = new Date(normalizeDate(expiry)).getTime();
|
||||
const diffDays = (endMs - Date.now()) / (1000 * 60 * 60 * 24);
|
||||
return diffDays >= 0 && diffDays <= 30;
|
||||
}
|
||||
|
||||
@@ -1,38 +1,23 @@
|
||||
import { state } from '../../core/state';
|
||||
import { openSwModal } from '../../components/Modal/SWModal';
|
||||
import { ASSET_SCHEMA, UI_TEXT } from '../../core/schema';
|
||||
import { dynamicSort, getActionButtonsHTML } from '../../core/utils';
|
||||
import { dynamicSort, formatInline, getActionButtonsHTML, renderPageHeader } from '../../core/utils';
|
||||
import { setupTableSorting, SortState } from '../../core/tableHandler';
|
||||
import { createIcons, Cloud, CreditCard, DollarSign, RefreshCcw, Download, Upload, FileSpreadsheet, Plus } from 'lucide';
|
||||
import { renderFilterBar, applyCommonFilters } from '../../core/filterHandler';
|
||||
import { createIcons, Cloud, CreditCard, DollarSign, RefreshCcw, Plus } from 'lucide';
|
||||
|
||||
/**
|
||||
* 클라우드(운영 서비스) 자산 목록 뷰
|
||||
* 라인 정렬 보정 및 헤더 통일
|
||||
*/
|
||||
export function renderCloudList(container: HTMLElement) {
|
||||
const getFullList = () => state.masterData.cloud || [];
|
||||
renderPageHeader(container, '클라우드');
|
||||
|
||||
const fullList = state.masterData.cloud || [];
|
||||
let sortState: SortState = { key: '', direction: 'asc' };
|
||||
let currentFilters = { keyword: '', corp: '', dept: '', field: '' };
|
||||
|
||||
const filterBar = document.createElement('div');
|
||||
filterBar.className = 'search-bar';
|
||||
filterBar.innerHTML = `
|
||||
<div class="search-item flex-1">
|
||||
<label>통합 검색 (${ASSET_SCHEMA.PRODUCT_NAME.ui}/${ASSET_SCHEMA.CURRENT_DEPT.ui}/${ASSET_SCHEMA.EMAIL_ACCOUNT.ui})</label>
|
||||
<input type="text" id="filter-keyword" placeholder="검색어를 입력하세요..." autocomplete="off">
|
||||
</div>
|
||||
<div class="search-item">
|
||||
<label>${ASSET_SCHEMA.PURCHASE_METHOD.ui}</label>
|
||||
<select id="filter-payment">
|
||||
<option value="">전체 결제수단</option>
|
||||
<option value="법인카드">법인카드</option>
|
||||
<option value="인보이스">인보이스 (월별송금)</option>
|
||||
</select>
|
||||
</div>
|
||||
<button id="btn-reset-filters" class="btn btn-outline btn-reset">
|
||||
<i data-lucide="refresh-ccw"></i> ${UI_TEXT.ACTION.RESET_FILTER}
|
||||
</button>
|
||||
${getActionButtonsHTML()}
|
||||
`;
|
||||
container.appendChild(filterBar);
|
||||
|
||||
const tableWrapper = document.createElement('div');
|
||||
@@ -41,12 +26,11 @@ export function renderCloudList(container: HTMLElement) {
|
||||
table.innerHTML = `
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-center" style="width:50px;">No.</th>
|
||||
<th data-sort="${ASSET_SCHEMA.PRODUCT_NAME.key}">${ASSET_SCHEMA.PRODUCT_NAME.ui}</th>
|
||||
<th data-sort="${ASSET_SCHEMA.ASSET_PURPOSE.key}">${ASSET_SCHEMA.ASSET_PURPOSE.ui}</th>
|
||||
<th data-sort="${ASSET_SCHEMA.PURCHASE_VENDOR.key}">${ASSET_SCHEMA.PURCHASE_VENDOR.ui}</th>
|
||||
<th class="text-center" data-sort="${ASSET_SCHEMA.PURCHASE_AMOUNT.key}">${ASSET_SCHEMA.PURCHASE_AMOUNT.ui}</th>
|
||||
<th style="width: 30%;">${ASSET_SCHEMA.MEMO.ui}</th>
|
||||
<th class="col-memo" data-sort="${ASSET_SCHEMA.MEMO.key}">${ASSET_SCHEMA.MEMO.ui}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="cloud-tbody"></tbody>
|
||||
@@ -57,20 +41,7 @@ export function renderCloudList(container: HTMLElement) {
|
||||
const tbody = table.querySelector('tbody')!;
|
||||
|
||||
const updateTable = () => {
|
||||
const keywordInput = document.getElementById('filter-keyword') as HTMLInputElement;
|
||||
const paymentSelect = document.getElementById('filter-payment') as HTMLSelectElement;
|
||||
|
||||
const keyword = keywordInput ? keywordInput.value.toLowerCase().trim() : '';
|
||||
const payment = paymentSelect ? paymentSelect.value : '';
|
||||
|
||||
let filtered = getFullList().filter(asset => {
|
||||
const kwMatch = !keyword ||
|
||||
(asset[ASSET_SCHEMA.PRODUCT_NAME.key] || '').toLowerCase().includes(keyword) ||
|
||||
(asset[ASSET_SCHEMA.ASSET_PURPOSE.key] || '').toLowerCase().includes(keyword) ||
|
||||
(asset[ASSET_SCHEMA.PURCHASE_VENDOR.key] || '').toLowerCase().includes(keyword);
|
||||
const payMatch = !payment || asset[ASSET_SCHEMA.PURCHASE_METHOD.key] === payment;
|
||||
return kwMatch && payMatch;
|
||||
});
|
||||
let filtered = applyCommonFilters(fullList, currentFilters, ['PRODUCT_NAME', 'ASSET_PURPOSE', 'PURCHASE_VENDOR']);
|
||||
|
||||
if (sortState.key) {
|
||||
filtered = dynamicSort(filtered, sortState.key, sortState.direction);
|
||||
@@ -78,7 +49,7 @@ export function renderCloudList(container: HTMLElement) {
|
||||
|
||||
tbody.innerHTML = '';
|
||||
if (filtered.length === 0) {
|
||||
tbody.innerHTML = `<tr><td colspan="6" class="text-center" style="padding: 3rem; color: var(--text-muted);">${UI_TEXT.MESSAGES.NO_DATA}</td></tr>`;
|
||||
tbody.innerHTML = `<tr><td colspan="5" class="text-center" style="padding: 3rem; color: var(--text-muted);">${UI_TEXT.MESSAGES.NO_DATA}</td></tr>`;
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -87,12 +58,11 @@ export function renderCloudList(container: HTMLElement) {
|
||||
tr.style.cursor = 'pointer';
|
||||
|
||||
tr.innerHTML = `
|
||||
<td class="text-center">${idx+1}</td>
|
||||
<td>${asset[ASSET_SCHEMA.PRODUCT_NAME.key]||''}</td>
|
||||
<td>${asset[ASSET_SCHEMA.ASSET_PURPOSE.key]||''}</td>
|
||||
<td>${asset[ASSET_SCHEMA.PURCHASE_VENDOR.key]||''}</td>
|
||||
<td class="text-right" style="font-weight:600;">₩ ${asset[ASSET_SCHEMA.PURCHASE_AMOUNT.key] ? Number(String(asset[ASSET_SCHEMA.PURCHASE_AMOUNT.key]).replace(/,/g, '')).toLocaleString() : '0'}</td>
|
||||
<td>${formatInline(asset[ASSET_SCHEMA.MEMO.key]||'')}</td>
|
||||
<td class="col-memo">${formatInline(asset[ASSET_SCHEMA.MEMO.key]||'')}</td>
|
||||
`;
|
||||
|
||||
tr.addEventListener('click', () => openSwModal(asset, 'view'));
|
||||
@@ -104,16 +74,31 @@ export function renderCloudList(container: HTMLElement) {
|
||||
updateTable();
|
||||
});
|
||||
|
||||
createIcons({ icons: { Cloud, CreditCard, DollarSign, RefreshCcw, Download, Upload, FileSpreadsheet, Plus } });
|
||||
createIcons({ icons: { Cloud, CreditCard, DollarSign, RefreshCcw, Plus } });
|
||||
};
|
||||
|
||||
document.getElementById('filter-keyword')?.addEventListener('input', updateTable);
|
||||
document.getElementById('filter-payment')?.addEventListener('change', updateTable);
|
||||
document.getElementById('btn-reset-filters')?.addEventListener('click', () => {
|
||||
if (document.getElementById('filter-keyword')) (document.getElementById('filter-keyword') as HTMLInputElement).value = '';
|
||||
if (document.getElementById('filter-payment')) (document.getElementById('filter-payment') as HTMLSelectElement).value = '';
|
||||
updateTable();
|
||||
renderFilterBar(filterBar, {
|
||||
keywordLabel: `통합 검색 (${ASSET_SCHEMA.PRODUCT_NAME.ui}/${ASSET_SCHEMA.PURCHASE_VENDOR.ui})`,
|
||||
showCorp: true,
|
||||
showDept: true,
|
||||
onFilterChange: (filters) => {
|
||||
currentFilters = filters;
|
||||
updateTable();
|
||||
}
|
||||
});
|
||||
|
||||
// Populate Dept Options
|
||||
const deptSelect = container.querySelector('#filter-dept') as HTMLSelectElement;
|
||||
if (deptSelect) {
|
||||
const orgUnits = Array.from(new Set(fullList.map(a => a[ASSET_SCHEMA.CURRENT_DEPT.key]))).filter(Boolean).sort();
|
||||
orgUnits.forEach(dept => {
|
||||
const opt = document.createElement('option');
|
||||
opt.value = String(dept);
|
||||
opt.textContent = String(dept);
|
||||
deptSelect.appendChild(opt);
|
||||
});
|
||||
}
|
||||
|
||||
updateTable();
|
||||
}
|
||||
|
||||
|
||||
@@ -1,29 +1,22 @@
|
||||
import { state } from '../../core/state';
|
||||
import { formatInline, sortAssets, dynamicSort, getActionButtonsHTML } from '../../core/utils';
|
||||
import { formatInline, sortAssets, dynamicSort, renderPageHeader } from '../../core/utils';
|
||||
import { ASSET_SCHEMA, UI_TEXT } from '../../core/schema';
|
||||
import { setupTableSorting, SortState } from '../../core/tableHandler';
|
||||
import { createIcons, RefreshCcw, Download, Upload, FileSpreadsheet, Plus } from 'lucide';
|
||||
import { renderFilterBar, applyCommonFilters } from '../../core/filterHandler';
|
||||
import { createIcons, RefreshCcw, Plus } from 'lucide';
|
||||
|
||||
/**
|
||||
* 비용관리 자산 목록 뷰
|
||||
*/
|
||||
export function renderCostList(container: HTMLElement) {
|
||||
// 비용관리 데이터는 cloud 또는 별도 테이블에 있을 수 있음.
|
||||
renderPageHeader(container, '비용관리');
|
||||
|
||||
const fullList = sortAssets(state.masterData.cloud?.filter((a: any) => a.category === '비용관리') || []);
|
||||
let sortState: SortState = { key: '', direction: 'asc' };
|
||||
let currentFilters = { keyword: '', corp: '', dept: '', field: '' };
|
||||
|
||||
const filterBar = document.createElement('div');
|
||||
filterBar.className = 'search-bar';
|
||||
filterBar.innerHTML = `
|
||||
<div class="search-item flex-1">
|
||||
<label>통합 검색 (${ASSET_SCHEMA.PRODUCT_NAME.ui}/${ASSET_SCHEMA.MANAGER_MAIN.ui})</label>
|
||||
<input type="text" id="filter-keyword" placeholder="검색어를 입력하세요..." autocomplete="off">
|
||||
</div>
|
||||
<button id="btn-reset-filters" class="btn btn-outline btn-reset">
|
||||
<i data-lucide="refresh-ccw"></i> ${UI_TEXT.ACTION.RESET_FILTER}
|
||||
</button>
|
||||
${getActionButtonsHTML()}
|
||||
`;
|
||||
container.appendChild(filterBar);
|
||||
|
||||
const tableWrapper = document.createElement('div');
|
||||
@@ -32,14 +25,12 @@ export function renderCostList(container: HTMLElement) {
|
||||
table.innerHTML = `
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-center" style="width:50px;">No.</th>
|
||||
<th class="text-center" data-sort="${ASSET_SCHEMA.ASSET_TYPE.key}">${ASSET_SCHEMA.ASSET_TYPE.ui}</th>
|
||||
<th data-sort="${ASSET_SCHEMA.ASSET_PURPOSE.key}">${ASSET_SCHEMA.ASSET_PURPOSE.ui}</th>
|
||||
<th class="text-center" data-sort="${ASSET_SCHEMA.MANAGER_MAIN.key}">현 사용자</th>
|
||||
<th class="text-center" data-sort="${ASSET_SCHEMA.LOCATION.key}">${ASSET_SCHEMA.LOCATION.ui}(건물)</th>
|
||||
<th class="text-center" data-sort="${ASSET_SCHEMA.LOC_DETAIL.key}">${ASSET_SCHEMA.LOC_DETAIL.ui}</th>
|
||||
<th class="text-center" data-sort="${ASSET_SCHEMA.LOCATION.key}">${ASSET_SCHEMA.LOCATION.ui}</th>
|
||||
<th data-sort="${ASSET_SCHEMA.EMAIL_ACCOUNT.key}">${ASSET_SCHEMA.EMAIL_ACCOUNT.ui}</th>
|
||||
<th class="text-center" data-sort="${ASSET_SCHEMA.MEMO.key}">${ASSET_SCHEMA.MEMO.ui}</th>
|
||||
<th class="col-memo" data-sort="${ASSET_SCHEMA.MEMO.key}">${ASSET_SCHEMA.MEMO.ui}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="dynamic-tbody"></tbody>
|
||||
@@ -50,16 +41,7 @@ export function renderCostList(container: HTMLElement) {
|
||||
const tbody = table.querySelector('tbody')!;
|
||||
|
||||
const updateTable = () => {
|
||||
const keywordInput = document.getElementById('filter-keyword') as HTMLInputElement;
|
||||
const keyword = keywordInput ? keywordInput.value.toLowerCase().trim() : '';
|
||||
|
||||
let filtered = fullList.filter(asset => {
|
||||
const matchKeyword = !keyword ||
|
||||
String(asset[ASSET_SCHEMA.PRODUCT_NAME.key]||'').toLowerCase().includes(keyword) ||
|
||||
String(asset[ASSET_SCHEMA.MANAGER_MAIN.key]||'').toLowerCase().includes(keyword) ||
|
||||
String(asset[ASSET_SCHEMA.EMAIL_ACCOUNT.key]||'').toLowerCase().includes(keyword);
|
||||
return matchKeyword;
|
||||
});
|
||||
let filtered = applyCommonFilters(fullList, currentFilters, ['PRODUCT_NAME', 'MANAGER_MAIN', 'EMAIL_ACCOUNT']);
|
||||
|
||||
if (sortState.key) {
|
||||
filtered = dynamicSort(filtered, sortState.key, sortState.direction);
|
||||
@@ -67,24 +49,26 @@ export function renderCostList(container: HTMLElement) {
|
||||
|
||||
tbody.innerHTML = '';
|
||||
if (filtered.length === 0) {
|
||||
tbody.innerHTML = `<tr><td colspan="8" class="text-center" style="padding: 3rem; color: var(--text-muted);">${UI_TEXT.MESSAGES.NO_DATA}</td></tr>`;
|
||||
tbody.innerHTML = `<tr><td colspan="6" class="text-center" style="padding: 3rem; color: var(--text-muted);">${UI_TEXT.MESSAGES.NO_DATA}</td></tr>`;
|
||||
return;
|
||||
}
|
||||
|
||||
filtered.forEach((asset, idx) => {
|
||||
const tr = document.createElement('tr');
|
||||
tr.style.cursor = 'pointer';
|
||||
|
||||
const loc = asset[ASSET_SCHEMA.LOCATION.key] || '';
|
||||
const detail = asset[ASSET_SCHEMA.LOC_DETAIL.key] || '';
|
||||
const displayLoc = detail ? `${loc}(${detail})` : (loc || '-');
|
||||
|
||||
tr.innerHTML = `
|
||||
<td class="text-center">${idx + 1}</td>
|
||||
<td class="text-center">${asset[ASSET_SCHEMA.ASSET_TYPE.key] || ''}</td>
|
||||
<td>${formatInline(asset[ASSET_SCHEMA.ASSET_PURPOSE.key] || '-')}</td>
|
||||
<td class="text-center">${asset[ASSET_SCHEMA.MANAGER_MAIN.key] || '-'}</td>
|
||||
<td class="text-center">${asset[ASSET_SCHEMA.LOCATION.key] || '-'}</td>
|
||||
<td class="text-center">${asset[ASSET_SCHEMA.LOC_DETAIL.key] || '-'}</td>
|
||||
<td class="text-center">${displayLoc}</td>
|
||||
<td>${asset[ASSET_SCHEMA.EMAIL_ACCOUNT.key] || '-'}</td>
|
||||
<td class="text-center">${formatInline(asset[ASSET_SCHEMA.MEMO.key]||'-')}</td>
|
||||
<td class="col-memo">${formatInline(asset[ASSET_SCHEMA.MEMO.key]||'-')}</td>
|
||||
`;
|
||||
// 비용관리 모달이 따로 없으면 일단 SW모달 또는 알림
|
||||
tr.addEventListener('click', () => alert('상세 정보 준비 중입니다.'));
|
||||
tbody.appendChild(tr);
|
||||
});
|
||||
@@ -94,14 +78,31 @@ export function renderCostList(container: HTMLElement) {
|
||||
updateTable();
|
||||
});
|
||||
|
||||
createIcons({ icons: { RefreshCcw, Download, Upload, FileSpreadsheet, Plus } });
|
||||
createIcons({ icons: { RefreshCcw, Plus } });
|
||||
};
|
||||
|
||||
document.getElementById('filter-keyword')?.addEventListener('input', updateTable);
|
||||
document.getElementById('btn-reset-filters')?.addEventListener('click', () => {
|
||||
(document.getElementById('filter-keyword') as HTMLInputElement).value = '';
|
||||
updateTable();
|
||||
renderFilterBar(filterBar, {
|
||||
keywordLabel: `통합 검색 (${ASSET_SCHEMA.PRODUCT_NAME.ui}/${ASSET_SCHEMA.MANAGER_MAIN.ui})`,
|
||||
showCorp: true,
|
||||
showDept: true,
|
||||
onFilterChange: (filters) => {
|
||||
currentFilters = filters;
|
||||
updateTable();
|
||||
}
|
||||
});
|
||||
|
||||
// Populate Dept Options
|
||||
const deptSelect = container.querySelector('#filter-dept') as HTMLSelectElement;
|
||||
if (deptSelect) {
|
||||
const orgUnits = Array.from(new Set(fullList.map(a => a[ASSET_SCHEMA.CURRENT_DEPT.key]))).filter(Boolean).sort();
|
||||
orgUnits.forEach(dept => {
|
||||
const opt = document.createElement('option');
|
||||
opt.value = String(dept);
|
||||
opt.textContent = String(dept);
|
||||
deptSelect.appendChild(opt);
|
||||
});
|
||||
}
|
||||
|
||||
updateTable();
|
||||
}
|
||||
|
||||
|
||||
@@ -1,31 +1,23 @@
|
||||
import { state } from '../../core/state';
|
||||
import { formatPrice, dynamicSort, createBadge, getActionButtonsHTML } from '../../core/utils';
|
||||
import { createIcons, Plus, Edit2, Trash2, RefreshCcw, Download, Upload, FileSpreadsheet } from 'lucide';
|
||||
import { dynamicSort, formatInline, getActionButtonsHTML, renderPageHeader } from '../../core/utils';
|
||||
import { createIcons, Plus, Edit2, Trash2, RefreshCcw } from 'lucide';
|
||||
import { openDomainModal } from '../../components/Modal/DomainModal';
|
||||
import { setupTableSorting, SortState } from '../../core/tableHandler';
|
||||
import { ASSET_SCHEMA } from '../../core/schema';
|
||||
import { renderFilterBar, applyCommonFilters } from '../../core/filterHandler';
|
||||
|
||||
// 정렬 상태를 모듈 수준에서 관리하여 화면 갱신 시에도 유지되도록 함
|
||||
let persistentSortState: SortState = { key: '', direction: 'asc' };
|
||||
|
||||
export function renderDomainList(container: HTMLElement) {
|
||||
container.innerHTML = '';
|
||||
renderPageHeader(container, '도메인');
|
||||
|
||||
const fullList = state.masterData.domain;
|
||||
let currentFilters = { keyword: '', corp: '', dept: '', field: '' };
|
||||
|
||||
// 검색바 및 액션 버튼 추가
|
||||
// 검색바 추가
|
||||
const filterBar = document.createElement('div');
|
||||
filterBar.className = 'search-bar';
|
||||
filterBar.innerHTML = `
|
||||
<div class="search-item flex-1">
|
||||
<label>통합 검색 (${ASSET_SCHEMA.DOMAIN_ADDR.ui}/${ASSET_SCHEMA.PRODUCT_NAME.ui})</label>
|
||||
<input type="text" id="filter-keyword" placeholder="검색어를 입력하세요..." autocomplete="off">
|
||||
</div>
|
||||
<button id="btn-reset-filters" class="btn btn-outline btn-reset">
|
||||
<i data-lucide="refresh-ccw"></i> 필터 초기화
|
||||
</button>
|
||||
${getActionButtonsHTML()}
|
||||
`;
|
||||
container.appendChild(filterBar);
|
||||
|
||||
const tableWrapper = document.createElement('div');
|
||||
@@ -34,13 +26,12 @@ export function renderDomainList(container: HTMLElement) {
|
||||
table.innerHTML = `
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="text-align:center; width:50px;">No.</th>
|
||||
<th style="text-align:left;" data-sort="${ASSET_SCHEMA.DOMAIN_ADDR.key}">${ASSET_SCHEMA.DOMAIN_ADDR.ui}</th>
|
||||
<th style="text-align:left;" data-sort="${ASSET_SCHEMA.ASSET_PURPOSE.key}">${ASSET_SCHEMA.ASSET_PURPOSE.ui}</th>
|
||||
<th style="text-align:center;" data-sort="${ASSET_SCHEMA.ASSET_TYPE.key}">${ASSET_SCHEMA.ASSET_TYPE.ui}</th>
|
||||
<th style="text-align:center;" data-sort="${ASSET_SCHEMA.PURCHASE_CORP.key}">${ASSET_SCHEMA.PURCHASE_CORP.ui}</th>
|
||||
<th style="text-align:center;" data-sort="${ASSET_SCHEMA.EXPIRY_DATE.key}">${ASSET_SCHEMA.EXPIRY_DATE.ui}</th>
|
||||
<th style="text-align:center;" data-sort="${ASSET_SCHEMA.MEMO.key}">${ASSET_SCHEMA.MEMO.ui}</th>
|
||||
<th style="text-align:center;" data-sort="${ASSET_SCHEMA.EXPIRED_DATE.key}">${ASSET_SCHEMA.EXPIRED_DATE.ui}</th>
|
||||
<th class="col-memo" data-sort="${ASSET_SCHEMA.MEMO.key}">${ASSET_SCHEMA.MEMO.ui}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="dynamic-tbody"></tbody>
|
||||
@@ -51,16 +42,7 @@ export function renderDomainList(container: HTMLElement) {
|
||||
const tbody = table.querySelector('tbody')!;
|
||||
|
||||
const updateTable = () => {
|
||||
const keywordInput = document.getElementById('filter-keyword') as HTMLInputElement;
|
||||
const keyword = keywordInput ? keywordInput.value.toLowerCase().trim() : '';
|
||||
|
||||
let filtered = fullList.filter(item => {
|
||||
const matchKeyword = !keyword ||
|
||||
(item[ASSET_SCHEMA.DOMAIN_ADDR.key] || '').toLowerCase().includes(keyword) ||
|
||||
(item[ASSET_SCHEMA.ASSET_PURPOSE.key] || '').toLowerCase().includes(keyword) ||
|
||||
(item[ASSET_SCHEMA.PRODUCT_NAME.key] || '').toLowerCase().includes(keyword);
|
||||
return matchKeyword;
|
||||
});
|
||||
let filtered = applyCommonFilters(fullList, currentFilters, ['DOMAIN_ADDR', 'ASSET_PURPOSE', 'PRODUCT_NAME']);
|
||||
|
||||
if (persistentSortState.key) {
|
||||
filtered = dynamicSort(filtered, persistentSortState.key, persistentSortState.direction);
|
||||
@@ -68,7 +50,7 @@ export function renderDomainList(container: HTMLElement) {
|
||||
|
||||
tbody.innerHTML = '';
|
||||
if (filtered.length === 0) {
|
||||
tbody.innerHTML = `<tr><td colspan="7" style="text-align:center; padding: 3rem; color: var(--text-muted);">등록된 도메인 정보가 없습니다.</td></tr>`;
|
||||
tbody.innerHTML = `<tr><td colspan="6" style="text-align:center; padding: 3rem; color: var(--text-muted);">등록된 도메인 정보가 없습니다.</td></tr>`;
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -78,13 +60,12 @@ export function renderDomainList(container: HTMLElement) {
|
||||
tr.style.cursor = 'pointer';
|
||||
|
||||
tr.innerHTML = `
|
||||
<td style="text-align:center;">${idx + 1}</td>
|
||||
<td>${item[ASSET_SCHEMA.DOMAIN_ADDR.key] || ''}</td>
|
||||
<td>${item[ASSET_SCHEMA.ASSET_PURPOSE.key] || ''}</td>
|
||||
<td style="text-align:center;"><span class="badge badge-${item[ASSET_SCHEMA.ASSET_TYPE.key] === '관리중' ? 'primary' : 'muted'}">${item[ASSET_SCHEMA.ASSET_TYPE.key] || '-'}</span></td>
|
||||
<td style="text-align:center;">${item[ASSET_SCHEMA.PURCHASE_CORP.key] || ''}</td>
|
||||
<td style="text-align:center;">${item[ASSET_SCHEMA.EXPIRY_DATE.key] || ''}</td>
|
||||
<td>${formatInline(item[ASSET_SCHEMA.MEMO.key]||'-')}</td>
|
||||
<td style="text-align:center;">${item[ASSET_SCHEMA.EXPIRED_DATE.key] || ''}</td>
|
||||
<td class="col-memo">${formatInline(item[ASSET_SCHEMA.MEMO.key]||'-')}</td>
|
||||
`;
|
||||
tr.addEventListener('click', (e) => {
|
||||
openDomainModal(item);
|
||||
@@ -97,14 +78,31 @@ export function renderDomainList(container: HTMLElement) {
|
||||
updateTable();
|
||||
});
|
||||
|
||||
createIcons({ icons: { Plus, Edit2, Trash2, RefreshCcw, Download, Upload, FileSpreadsheet } });
|
||||
createIcons({ icons: { Plus, Edit2, Trash2, RefreshCcw } });
|
||||
};
|
||||
|
||||
document.getElementById('filter-keyword')?.addEventListener('input', updateTable);
|
||||
document.getElementById('btn-reset-filters')?.addEventListener('click', () => {
|
||||
if (document.getElementById('filter-keyword')) (document.getElementById('filter-keyword') as HTMLInputElement).value = '';
|
||||
updateTable();
|
||||
renderFilterBar(filterBar, {
|
||||
keywordLabel: `통합 검색 (${ASSET_SCHEMA.DOMAIN_ADDR.ui}/${ASSET_SCHEMA.PRODUCT_NAME.ui})`,
|
||||
showCorp: true,
|
||||
showDept: true,
|
||||
onFilterChange: (filters) => {
|
||||
currentFilters = filters;
|
||||
updateTable();
|
||||
}
|
||||
});
|
||||
|
||||
// Populate Dept Options
|
||||
const deptSelect = container.querySelector('#filter-dept') as HTMLSelectElement;
|
||||
if (deptSelect) {
|
||||
const orgUnits = Array.from(new Set(fullList.map(a => a[ASSET_SCHEMA.CURRENT_DEPT.key]))).filter(Boolean).sort();
|
||||
orgUnits.forEach(dept => {
|
||||
const opt = document.createElement('option');
|
||||
opt.value = String(dept);
|
||||
opt.textContent = String(dept);
|
||||
deptSelect.appendChild(opt);
|
||||
});
|
||||
}
|
||||
|
||||
updateTable();
|
||||
}
|
||||
|
||||
|
||||
@@ -1,36 +1,23 @@
|
||||
import { state } from '../../core/state';
|
||||
import { openHwModal } from '../../components/Modal/HWModal';
|
||||
import { formatInline, createBadge, sortAssets, dynamicSort, getActionButtonsHTML } from '../../core/utils';
|
||||
import { formatInline, sortAssets, dynamicSort, renderPageHeader } from '../../core/utils';
|
||||
import { ASSET_SCHEMA, UI_TEXT } from '../../core/schema';
|
||||
import { setupTableSorting, SortState } from '../../core/tableHandler';
|
||||
import { createIcons, RefreshCcw, Download, Upload, FileSpreadsheet, Plus } from 'lucide';
|
||||
import { renderFilterBar, applyCommonFilters } from '../../core/filterHandler';
|
||||
import { createIcons, RefreshCcw, Plus } from 'lucide';
|
||||
|
||||
/**
|
||||
* 전산비품 자산 목록 뷰
|
||||
* 라인 정렬 보정 및 헤더 통일
|
||||
*/
|
||||
export function renderEquipmentList(container: HTMLElement) {
|
||||
renderPageHeader(container, '업무지원장비');
|
||||
|
||||
const fullList = sortAssets(state.masterData.equipment);
|
||||
let sortState: SortState = { key: '', direction: 'asc' };
|
||||
let currentFilters = { keyword: '', loc: '', dept: '', field: '' };
|
||||
|
||||
const filterBar = document.createElement('div');
|
||||
filterBar.className = 'search-bar';
|
||||
const corps = Array.from(new Set(fullList.map(a => a[ASSET_SCHEMA.PURCHASE_CORP.key]))).filter(Boolean).sort();
|
||||
|
||||
filterBar.innerHTML = `
|
||||
<div class="search-item flex-1">
|
||||
<label>통합 검색 (${ASSET_SCHEMA.MODEL_NAME.ui}/${ASSET_SCHEMA.MANAGER_MAIN.ui})</label>
|
||||
<input type="text" id="filter-keyword" placeholder="검색어를 입력하세요..." autocomplete="off">
|
||||
</div>
|
||||
<div class="search-item">
|
||||
<label>${ASSET_SCHEMA.PURCHASE_CORP.ui}</label>
|
||||
<select id="filter-corp"><option value="">전체 법인</option>${corps.map(c => `<option value="${c}">${c}</option>`).join('')}</select>
|
||||
</div>
|
||||
<button id="btn-reset-filters" class="btn btn-outline btn-reset">
|
||||
<i data-lucide="refresh-ccw"></i> ${UI_TEXT.ACTION.RESET_FILTER}
|
||||
</button>
|
||||
${getActionButtonsHTML()}
|
||||
`;
|
||||
container.appendChild(filterBar);
|
||||
|
||||
const tableWrapper = document.createElement('div');
|
||||
@@ -39,16 +26,14 @@ export function renderEquipmentList(container: HTMLElement) {
|
||||
table.innerHTML = `
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-center" style="width:50px;">No.</th>
|
||||
<th class="text-center" data-sort="${ASSET_SCHEMA.HW_STATUS.key}">${ASSET_SCHEMA.HW_STATUS.ui}</th>
|
||||
<th class="text-center" data-sort="${ASSET_SCHEMA.MANAGER_MAIN.key}">현 사용자</th>
|
||||
<th class="text-center" data-sort="${ASSET_SCHEMA.CURRENT_USER.key}">${ASSET_SCHEMA.CURRENT_USER.ui}</th>
|
||||
<th class="text-center" data-sort="${ASSET_SCHEMA.ASSET_TYPE.key}">${ASSET_SCHEMA.ASSET_TYPE.ui}</th>
|
||||
<th class="text-center" data-sort="${ASSET_SCHEMA.ASSET_MFR.key}">${ASSET_SCHEMA.ASSET_MFR.ui}</th>
|
||||
<th data-sort="${ASSET_SCHEMA.MODEL_NAME.key}">${ASSET_SCHEMA.MODEL_NAME.ui}</th>
|
||||
<th class="text-center" data-sort="${ASSET_SCHEMA.ASSET_COUNT.key}">${ASSET_SCHEMA.ASSET_COUNT.ui}</th>
|
||||
<th class="text-center" data-sort="${ASSET_SCHEMA.LOCATION.key}">${ASSET_SCHEMA.LOCATION.ui}(건물)</th>
|
||||
<th class="text-center" data-sort="${ASSET_SCHEMA.LOC_DETAIL.key}">${ASSET_SCHEMA.LOC_DETAIL.ui}</th>
|
||||
<th class="text-center" data-sort="${ASSET_SCHEMA.MEMO.key}">${ASSET_SCHEMA.MEMO.ui}</th>
|
||||
<th class="text-center" data-sort="${ASSET_SCHEMA.LOCATION.key}">${ASSET_SCHEMA.LOCATION.ui}</th>
|
||||
<th class="col-memo" data-sort="${ASSET_SCHEMA.MEMO.key}">${ASSET_SCHEMA.MEMO.ui}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="dynamic-tbody"></tbody>
|
||||
@@ -59,20 +44,7 @@ export function renderEquipmentList(container: HTMLElement) {
|
||||
const tbody = table.querySelector('tbody')!;
|
||||
|
||||
const updateTable = () => {
|
||||
const keywordInput = document.getElementById('filter-keyword') as HTMLInputElement;
|
||||
const corpSelect = document.getElementById('filter-corp') as HTMLSelectElement;
|
||||
|
||||
const keyword = keywordInput ? keywordInput.value.toLowerCase().trim() : '';
|
||||
const corp = corpSelect ? corpSelect.value : '';
|
||||
|
||||
let filtered = fullList.filter(asset => {
|
||||
const matchKeyword = !keyword ||
|
||||
String(asset[ASSET_SCHEMA.MODEL_NAME.key]||'').toLowerCase().includes(keyword) ||
|
||||
String(asset[ASSET_SCHEMA.MANAGER_MAIN.key]||'').toLowerCase().includes(keyword) ||
|
||||
String(asset[ASSET_SCHEMA.ASSET_MFR.key]||'').toLowerCase().includes(keyword);
|
||||
const matchCorp = !corp || asset[ASSET_SCHEMA.PURCHASE_CORP.key] === corp;
|
||||
return matchKeyword && matchCorp;
|
||||
});
|
||||
let filtered = applyCommonFilters(fullList, currentFilters, ['MODEL_NAME', 'CURRENT_USER', 'ASSET_MFR']);
|
||||
|
||||
if (sortState.key) {
|
||||
filtered = dynamicSort(filtered, sortState.key, sortState.direction);
|
||||
@@ -80,7 +52,7 @@ export function renderEquipmentList(container: HTMLElement) {
|
||||
|
||||
tbody.innerHTML = '';
|
||||
if (filtered.length === 0) {
|
||||
tbody.innerHTML = `<tr><td colspan="10" class="text-center" style="padding: 3rem; color: var(--text-muted);">${UI_TEXT.MESSAGES.NO_DATA}</td></tr>`;
|
||||
tbody.innerHTML = `<tr><td colspan="8" class="text-center" style="padding: 3rem; color: var(--text-muted);">${UI_TEXT.MESSAGES.NO_DATA}</td></tr>`;
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -88,17 +60,19 @@ export function renderEquipmentList(container: HTMLElement) {
|
||||
const tr = document.createElement('tr');
|
||||
tr.style.cursor = 'pointer';
|
||||
|
||||
const loc = asset[ASSET_SCHEMA.LOCATION.key] || '';
|
||||
const detail = asset[ASSET_SCHEMA.LOC_DETAIL.key] || '';
|
||||
const displayLoc = detail ? `${loc}(${detail})` : (loc || '-');
|
||||
|
||||
tr.innerHTML = `
|
||||
<td class="text-center">${idx + 1}</td>
|
||||
<td class="text-center"><span class="badge badge-${asset[ASSET_SCHEMA.HW_STATUS.key] === '대여중' ? 'primary' : 'success'}">${asset[ASSET_SCHEMA.HW_STATUS.key] || '보관중'}</span></td>
|
||||
<td class="text-center">${asset[ASSET_SCHEMA.MANAGER_MAIN.key] || '-'}</td>
|
||||
<td class="text-center">${asset[ASSET_SCHEMA.CURRENT_USER.key] || '-'}</td>
|
||||
<td class="text-center">${asset[ASSET_SCHEMA.ASSET_TYPE.key] || ''}</td>
|
||||
<td class="text-center">${asset[ASSET_SCHEMA.ASSET_MFR.key] || ''}</td>
|
||||
<td>${formatInline(asset[ASSET_SCHEMA.MODEL_NAME.key] || asset.명칭)}</td>
|
||||
<td class="text-center">${asset[ASSET_SCHEMA.ASSET_COUNT.key] || '1'}</td>
|
||||
<td class="text-center">${asset[ASSET_SCHEMA.LOCATION.key] || '-'}</td>
|
||||
<td class="text-center">${asset[ASSET_SCHEMA.LOC_DETAIL.key] || '-'}</td>
|
||||
<td class="text-center">${formatInline(asset[ASSET_SCHEMA.MEMO.key]||'-')}</td>
|
||||
<td class="text-center">${displayLoc}</td>
|
||||
<td class="col-memo">${formatInline(asset[ASSET_SCHEMA.MEMO.key]||'-')}</td>
|
||||
`;
|
||||
tr.addEventListener('click', () => openHwModal(asset, 'view'));
|
||||
tbody.appendChild(tr);
|
||||
@@ -109,16 +83,43 @@ export function renderEquipmentList(container: HTMLElement) {
|
||||
updateTable();
|
||||
});
|
||||
|
||||
createIcons({ icons: { RefreshCcw, Download, Upload, FileSpreadsheet, Plus } });
|
||||
createIcons({ icons: { RefreshCcw, Plus } });
|
||||
};
|
||||
|
||||
document.getElementById('filter-keyword')?.addEventListener('input', updateTable);
|
||||
document.getElementById('filter-corp')?.addEventListener('change', updateTable);
|
||||
document.getElementById('btn-reset-filters')?.addEventListener('click', () => {
|
||||
(document.getElementById('filter-keyword') as HTMLInputElement).value = '';
|
||||
(document.getElementById('filter-corp') as HTMLSelectElement).value = '';
|
||||
updateTable();
|
||||
renderFilterBar(filterBar, {
|
||||
keywordLabel: `통합 검색 (${ASSET_SCHEMA.MODEL_NAME.ui}/${ASSET_SCHEMA.ASSET_MFR.ui})`,
|
||||
showLoc: true,
|
||||
showDept: true,
|
||||
onFilterChange: (filters) => {
|
||||
currentFilters = filters;
|
||||
updateTable();
|
||||
}
|
||||
});
|
||||
|
||||
// Populate Location Options
|
||||
const locSelect = container.querySelector('#filter-loc') as HTMLSelectElement;
|
||||
if (locSelect) {
|
||||
const locations = Array.from(new Set(fullList.map(a => a[ASSET_SCHEMA.LOCATION.key]))).filter(Boolean).sort();
|
||||
locations.forEach(loc => {
|
||||
const opt = document.createElement('option');
|
||||
opt.value = String(loc);
|
||||
opt.textContent = String(loc);
|
||||
locSelect.appendChild(opt);
|
||||
});
|
||||
}
|
||||
|
||||
// Populate Dept Options
|
||||
const deptSelect = container.querySelector('#filter-dept') as HTMLSelectElement;
|
||||
if (deptSelect) {
|
||||
const orgUnits = Array.from(new Set(fullList.map(a => a[ASSET_SCHEMA.CURRENT_DEPT.key]))).filter(Boolean).sort();
|
||||
orgUnits.forEach(dept => {
|
||||
const opt = document.createElement('option');
|
||||
opt.value = String(dept);
|
||||
opt.textContent = String(dept);
|
||||
deptSelect.appendChild(opt);
|
||||
});
|
||||
}
|
||||
|
||||
updateTable();
|
||||
}
|
||||
|
||||
|
||||
@@ -1,30 +1,23 @@
|
||||
import { state } from '../../core/state';
|
||||
import { openHwModal } from '../../components/Modal/HWModal';
|
||||
import { formatInline, sortAssets, dynamicSort, getActionButtonsHTML } from '../../core/utils';
|
||||
import { formatInline, sortAssets, dynamicSort, renderPageHeader } from '../../core/utils';
|
||||
import { ASSET_SCHEMA, UI_TEXT } from '../../core/schema';
|
||||
import { setupTableSorting, SortState } from '../../core/tableHandler';
|
||||
import { createIcons, RefreshCcw, Download, Upload, FileSpreadsheet, Plus } from 'lucide';
|
||||
import { renderFilterBar, applyCommonFilters } from '../../core/filterHandler';
|
||||
import { createIcons, RefreshCcw, Plus } from 'lucide';
|
||||
|
||||
/**
|
||||
* 시설자산 자산 목록 뷰
|
||||
*/
|
||||
export function renderFacilityList(container: HTMLElement) {
|
||||
// 시설자산 데이터는 equipment 또는 별도 테이블에 있을 수 있음.
|
||||
renderPageHeader(container, '사무가구');
|
||||
|
||||
const fullList = sortAssets(state.masterData.equipment?.filter((a: any) => a.category === '시설자산') || []);
|
||||
let sortState: SortState = { key: '', direction: 'asc' };
|
||||
let currentFilters = { keyword: '', corp: '', dept: '', field: '' };
|
||||
|
||||
const filterBar = document.createElement('div');
|
||||
filterBar.className = 'search-bar';
|
||||
filterBar.innerHTML = `
|
||||
<div class="search-item flex-1">
|
||||
<label>통합 검색 (${ASSET_SCHEMA.MODEL_NAME.ui})</label>
|
||||
<input type="text" id="filter-keyword" placeholder="검색어를 입력하세요..." autocomplete="off">
|
||||
</div>
|
||||
<button id="btn-reset-filters" class="btn btn-outline btn-reset">
|
||||
<i data-lucide="refresh-ccw"></i> ${UI_TEXT.ACTION.RESET_FILTER}
|
||||
</button>
|
||||
${getActionButtonsHTML()}
|
||||
`;
|
||||
container.appendChild(filterBar);
|
||||
|
||||
const tableWrapper = document.createElement('div');
|
||||
@@ -33,15 +26,13 @@ export function renderFacilityList(container: HTMLElement) {
|
||||
table.innerHTML = `
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-center" style="width:50px;">No.</th>
|
||||
<th class="text-center" data-sort="${ASSET_SCHEMA.HW_STATUS.key}">${ASSET_SCHEMA.HW_STATUS.ui}</th>
|
||||
<th class="text-center" data-sort="${ASSET_SCHEMA.ASSET_TYPE.key}">${ASSET_SCHEMA.ASSET_TYPE.ui}</th>
|
||||
<th class="text-center" data-sort="${ASSET_SCHEMA.ASSET_MFR.key}">${ASSET_SCHEMA.ASSET_MFR.ui}</th>
|
||||
<th data-sort="${ASSET_SCHEMA.MODEL_NAME.key}">${ASSET_SCHEMA.MODEL_NAME.ui}</th>
|
||||
<th class="text-center" data-sort="${ASSET_SCHEMA.LOCATION.key}">${ASSET_SCHEMA.LOCATION.ui}(건물)</th>
|
||||
<th class="text-center" data-sort="${ASSET_SCHEMA.LOC_DETAIL.key}">${ASSET_SCHEMA.LOC_DETAIL.ui}</th>
|
||||
<th class="text-center" data-sort="${ASSET_SCHEMA.LOCATION.key}">${ASSET_SCHEMA.LOCATION.ui}</th>
|
||||
<th class="text-center" data-sort="${ASSET_SCHEMA.ASSET_COUNT.key}">${ASSET_SCHEMA.ASSET_COUNT.ui}</th>
|
||||
<th class="text-center" data-sort="${ASSET_SCHEMA.MEMO.key}">${ASSET_SCHEMA.MEMO.ui}</th>
|
||||
<th class="col-memo" data-sort="${ASSET_SCHEMA.MEMO.key}">${ASSET_SCHEMA.MEMO.ui}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="dynamic-tbody"></tbody>
|
||||
@@ -52,15 +43,7 @@ export function renderFacilityList(container: HTMLElement) {
|
||||
const tbody = table.querySelector('tbody')!;
|
||||
|
||||
const updateTable = () => {
|
||||
const keywordInput = document.getElementById('filter-keyword') as HTMLInputElement;
|
||||
const keyword = keywordInput ? keywordInput.value.toLowerCase().trim() : '';
|
||||
|
||||
let filtered = fullList.filter(asset => {
|
||||
const matchKeyword = !keyword ||
|
||||
String(asset[ASSET_SCHEMA.MODEL_NAME.key]||'').toLowerCase().includes(keyword) ||
|
||||
String(asset[ASSET_SCHEMA.ASSET_MFR.key]||'').toLowerCase().includes(keyword);
|
||||
return matchKeyword;
|
||||
});
|
||||
let filtered = applyCommonFilters(fullList, currentFilters, ['MODEL_NAME', 'ASSET_MFR']);
|
||||
|
||||
if (sortState.key) {
|
||||
filtered = dynamicSort(filtered, sortState.key, sortState.direction);
|
||||
@@ -68,23 +51,26 @@ export function renderFacilityList(container: HTMLElement) {
|
||||
|
||||
tbody.innerHTML = '';
|
||||
if (filtered.length === 0) {
|
||||
tbody.innerHTML = `<tr><td colspan="9" class="text-center" style="padding: 3rem; color: var(--text-muted);">${UI_TEXT.MESSAGES.NO_DATA}</td></tr>`;
|
||||
tbody.innerHTML = `<tr><td colspan="7" class="text-center" style="padding: 3rem; color: var(--text-muted);">${UI_TEXT.MESSAGES.NO_DATA}</td></tr>`;
|
||||
return;
|
||||
}
|
||||
|
||||
filtered.forEach((asset, idx) => {
|
||||
const tr = document.createElement('tr');
|
||||
tr.style.cursor = 'pointer';
|
||||
|
||||
const loc = asset[ASSET_SCHEMA.LOCATION.key] || '';
|
||||
const detail = asset[ASSET_SCHEMA.LOC_DETAIL.key] || '';
|
||||
const displayLoc = detail ? `${loc}(${detail})` : (loc || '-');
|
||||
|
||||
tr.innerHTML = `
|
||||
<td class="text-center">${idx + 1}</td>
|
||||
<td class="text-center"><span class="badge badge-success">${asset[ASSET_SCHEMA.HW_STATUS.key] || '보관중'}</span></td>
|
||||
<td class="text-center">${asset[ASSET_SCHEMA.ASSET_TYPE.key] || ''}</td>
|
||||
<td class="text-center">${asset[ASSET_SCHEMA.ASSET_MFR.key] || ''}</td>
|
||||
<td>${formatInline(asset[ASSET_SCHEMA.MODEL_NAME.key] || '-')}</td>
|
||||
<td class="text-center">${asset[ASSET_SCHEMA.LOCATION.key] || '-'}</td>
|
||||
<td class="text-center">${asset[ASSET_SCHEMA.LOC_DETAIL.key] || '-'}</td>
|
||||
<td class="text-center">${displayLoc}</td>
|
||||
<td class="text-center">${asset[ASSET_SCHEMA.ASSET_COUNT.key] || '1'}</td>
|
||||
<td class="text-center">${formatInline(asset[ASSET_SCHEMA.MEMO.key]||'-')}</td>
|
||||
<td class="col-memo">${formatInline(asset[ASSET_SCHEMA.MEMO.key]||'-')}</td>
|
||||
`;
|
||||
tr.addEventListener('click', () => openHwModal(asset, 'view'));
|
||||
tbody.appendChild(tr);
|
||||
@@ -95,14 +81,43 @@ export function renderFacilityList(container: HTMLElement) {
|
||||
updateTable();
|
||||
});
|
||||
|
||||
createIcons({ icons: { RefreshCcw, Download, Upload, FileSpreadsheet, Plus } });
|
||||
createIcons({ icons: { RefreshCcw, Plus } });
|
||||
};
|
||||
|
||||
document.getElementById('filter-keyword')?.addEventListener('input', updateTable);
|
||||
document.getElementById('btn-reset-filters')?.addEventListener('click', () => {
|
||||
(document.getElementById('filter-keyword') as HTMLInputElement).value = '';
|
||||
updateTable();
|
||||
renderFilterBar(filterBar, {
|
||||
keywordLabel: `통합 검색 (${ASSET_SCHEMA.MODEL_NAME.ui})`,
|
||||
showLoc: true,
|
||||
showDept: true,
|
||||
onFilterChange: (filters) => {
|
||||
currentFilters = filters;
|
||||
updateTable();
|
||||
}
|
||||
});
|
||||
|
||||
// Populate Loc Options
|
||||
const locSelect = container.querySelector('#filter-loc') as HTMLSelectElement;
|
||||
if (locSelect) {
|
||||
const locations = Array.from(new Set(fullList.map(a => a[ASSET_SCHEMA.LOCATION.key]))).filter(Boolean).sort();
|
||||
locations.forEach(loc => {
|
||||
const opt = document.createElement('option');
|
||||
opt.value = String(loc);
|
||||
opt.textContent = String(loc);
|
||||
locSelect.appendChild(opt);
|
||||
});
|
||||
}
|
||||
|
||||
// Populate Dept Options
|
||||
const deptSelect = container.querySelector('#filter-dept') as HTMLSelectElement;
|
||||
if (deptSelect) {
|
||||
const orgUnits = Array.from(new Set(fullList.map(a => a[ASSET_SCHEMA.CURRENT_DEPT.key]))).filter(Boolean).sort();
|
||||
orgUnits.forEach(dept => {
|
||||
const opt = document.createElement('option');
|
||||
opt.value = String(dept);
|
||||
opt.textContent = String(dept);
|
||||
deptSelect.appendChild(opt);
|
||||
});
|
||||
}
|
||||
|
||||
updateTable();
|
||||
}
|
||||
|
||||
|
||||
@@ -1,29 +1,22 @@
|
||||
import { state } from '../../core/state';
|
||||
import { formatInline, sortAssets, dynamicSort, getActionButtonsHTML } from '../../core/utils';
|
||||
import { formatInline, sortAssets, dynamicSort, renderPageHeader } from '../../core/utils';
|
||||
import { ASSET_SCHEMA, UI_TEXT } from '../../core/schema';
|
||||
import { setupTableSorting, SortState } from '../../core/tableHandler';
|
||||
import { createIcons, RefreshCcw, Download, Upload, FileSpreadsheet, Plus } from 'lucide';
|
||||
import { renderFilterBar, applyCommonFilters } from '../../core/filterHandler';
|
||||
import { createIcons, RefreshCcw, Plus } from 'lucide';
|
||||
|
||||
/**
|
||||
* 선물(내빈/외빈) 자산 목록 뷰
|
||||
*/
|
||||
export function renderGiftList(container: HTMLElement) {
|
||||
// 선물 데이터는 equipment 또는 별도 테이블에 있을 수 있음.
|
||||
renderPageHeader(container, '선물');
|
||||
|
||||
const fullList = sortAssets(state.masterData.equipment?.filter((a: any) => a.category === '선물') || []);
|
||||
let sortState: SortState = { key: '', direction: 'asc' };
|
||||
let currentFilters = { keyword: '', corp: '', dept: '', field: '' };
|
||||
|
||||
const filterBar = document.createElement('div');
|
||||
filterBar.className = 'search-bar';
|
||||
filterBar.innerHTML = `
|
||||
<div class="search-item flex-1">
|
||||
<label>통합 검색 (${ASSET_SCHEMA.PRODUCT_NAME.ui})</label>
|
||||
<input type="text" id="filter-keyword" placeholder="검색어를 입력하세요..." autocomplete="off">
|
||||
</div>
|
||||
<button id="btn-reset-filters" class="btn btn-outline btn-reset">
|
||||
<i data-lucide="refresh-ccw"></i> ${UI_TEXT.ACTION.RESET_FILTER}
|
||||
</button>
|
||||
${getActionButtonsHTML()}
|
||||
`;
|
||||
container.appendChild(filterBar);
|
||||
|
||||
const tableWrapper = document.createElement('div');
|
||||
@@ -32,12 +25,11 @@ export function renderGiftList(container: HTMLElement) {
|
||||
table.innerHTML = `
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-center" style="width:50px;">No.</th>
|
||||
<th data-sort="${ASSET_SCHEMA.PRODUCT_NAME.key}">자산명</th>
|
||||
<th class="text-center" data-sort="${ASSET_SCHEMA.PURCHASE_DATE.key}">구매연월</th>
|
||||
<th class="text-center" data-sort="${ASSET_SCHEMA.EXPIRY_DATE.key}">${ASSET_SCHEMA.EXPIRY_DATE.ui}</th>
|
||||
<th class="text-center" data-sort="${ASSET_SCHEMA.EXPIRED_DATE.key}">${ASSET_SCHEMA.EXPIRED_DATE.ui}</th>
|
||||
<th class="text-center" data-sort="${ASSET_SCHEMA.ASSET_COUNT.key}">${ASSET_SCHEMA.ASSET_COUNT.ui}</th>
|
||||
<th class="text-center" data-sort="${ASSET_SCHEMA.MEMO.key}">${ASSET_SCHEMA.MEMO.ui}</th>
|
||||
<th class="col-memo" data-sort="${ASSET_SCHEMA.MEMO.key}">${ASSET_SCHEMA.MEMO.ui}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="dynamic-tbody"></tbody>
|
||||
@@ -48,14 +40,7 @@ export function renderGiftList(container: HTMLElement) {
|
||||
const tbody = table.querySelector('tbody')!;
|
||||
|
||||
const updateTable = () => {
|
||||
const keywordInput = document.getElementById('filter-keyword') as HTMLInputElement;
|
||||
const keyword = keywordInput ? keywordInput.value.toLowerCase().trim() : '';
|
||||
|
||||
let filtered = fullList.filter(asset => {
|
||||
const matchKeyword = !keyword ||
|
||||
String(asset[ASSET_SCHEMA.PRODUCT_NAME.key]||asset[ASSET_SCHEMA.MODEL_NAME.key]||'').toLowerCase().includes(keyword);
|
||||
return matchKeyword;
|
||||
});
|
||||
let filtered = applyCommonFilters(fullList, currentFilters, ['PRODUCT_NAME', 'MODEL_NAME']);
|
||||
|
||||
if (sortState.key) {
|
||||
filtered = dynamicSort(filtered, sortState.key, sortState.direction);
|
||||
@@ -63,7 +48,7 @@ export function renderGiftList(container: HTMLElement) {
|
||||
|
||||
tbody.innerHTML = '';
|
||||
if (filtered.length === 0) {
|
||||
tbody.innerHTML = `<tr><td colspan="6" class="text-center" style="padding: 3rem; color: var(--text-muted);">${UI_TEXT.MESSAGES.NO_DATA}</td></tr>`;
|
||||
tbody.innerHTML = `<tr><td colspan="5" class="text-center" style="padding: 3rem; color: var(--text-muted);">${UI_TEXT.MESSAGES.NO_DATA}</td></tr>`;
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -71,12 +56,11 @@ export function renderGiftList(container: HTMLElement) {
|
||||
const tr = document.createElement('tr');
|
||||
tr.style.cursor = 'pointer';
|
||||
tr.innerHTML = `
|
||||
<td class="text-center">${idx + 1}</td>
|
||||
<td>${formatInline(asset[ASSET_SCHEMA.PRODUCT_NAME.key] || asset[ASSET_SCHEMA.MODEL_NAME.key] || '-')}</td>
|
||||
<td class="text-center">${asset[ASSET_SCHEMA.PURCHASE_DATE.key] || ''}</td>
|
||||
<td class="text-center">${asset[ASSET_SCHEMA.EXPIRY_DATE.key] || ''}</td>
|
||||
<td class="text-center">${asset[ASSET_SCHEMA.EXPIRED_DATE.key] || ''}</td>
|
||||
<td class="text-center">${asset[ASSET_SCHEMA.ASSET_COUNT.key] || '1'}</td>
|
||||
<td class="text-center">${formatInline(asset[ASSET_SCHEMA.MEMO.key]||'-')}</td>
|
||||
<td class="col-memo">${formatInline(asset[ASSET_SCHEMA.MEMO.key]||'-')}</td>
|
||||
`;
|
||||
tr.addEventListener('click', () => alert('상세 정보 준비 중입니다.'));
|
||||
tbody.appendChild(tr);
|
||||
@@ -87,14 +71,31 @@ export function renderGiftList(container: HTMLElement) {
|
||||
updateTable();
|
||||
});
|
||||
|
||||
createIcons({ icons: { RefreshCcw, Download, Upload, FileSpreadsheet, Plus } });
|
||||
createIcons({ icons: { RefreshCcw, Plus } });
|
||||
};
|
||||
|
||||
document.getElementById('filter-keyword')?.addEventListener('input', updateTable);
|
||||
document.getElementById('btn-reset-filters')?.addEventListener('click', () => {
|
||||
(document.getElementById('filter-keyword') as HTMLInputElement).value = '';
|
||||
updateTable();
|
||||
renderFilterBar(filterBar, {
|
||||
keywordLabel: `통합 검색 (${ASSET_SCHEMA.PRODUCT_NAME.ui})`,
|
||||
showCorp: true,
|
||||
showDept: true,
|
||||
onFilterChange: (filters) => {
|
||||
currentFilters = filters;
|
||||
updateTable();
|
||||
}
|
||||
});
|
||||
|
||||
// Populate Dept Options
|
||||
const deptSelect = container.querySelector('#filter-dept') as HTMLSelectElement;
|
||||
if (deptSelect) {
|
||||
const orgUnits = Array.from(new Set(fullList.map(a => a[ASSET_SCHEMA.CURRENT_DEPT.key]))).filter(Boolean).sort();
|
||||
orgUnits.forEach(dept => {
|
||||
const opt = document.createElement('option');
|
||||
opt.value = String(dept);
|
||||
opt.textContent = String(dept);
|
||||
deptSelect.appendChild(opt);
|
||||
});
|
||||
}
|
||||
|
||||
updateTable();
|
||||
}
|
||||
|
||||
|
||||
@@ -1,37 +1,23 @@
|
||||
import { state } from '../../core/state';
|
||||
import { openHwModal } from '../../components/Modal/HWModal';
|
||||
import { formatInline, createBadge, sortAssets, dynamicSort, getActionButtonsHTML } from '../../core/utils';
|
||||
import { formatInline, sortAssets, dynamicSort, renderPageHeader } from '../../core/utils';
|
||||
import { ASSET_SCHEMA, UI_TEXT } from '../../core/schema';
|
||||
import { setupTableSorting, SortState } from '../../core/tableHandler';
|
||||
import { createIcons, Paperclip, RefreshCcw, Download, Upload, FileSpreadsheet, Plus } from 'lucide';
|
||||
import { renderFilterBar, applyCommonFilters } from '../../core/filterHandler';
|
||||
import { createIcons, Paperclip, RefreshCcw, Plus } from 'lucide';
|
||||
|
||||
/**
|
||||
* 모바일 자산 목록 뷰 (레거시 지원용)
|
||||
*/
|
||||
export function renderMobileList(container: HTMLElement) {
|
||||
// 모바일 데이터가 별도 테이블에 없으므로 일단 빈 배열 또는 장비군에서 필터링 시도
|
||||
renderPageHeader(container, 'PC');
|
||||
|
||||
const fullList = sortAssets(state.masterData.mobile || []);
|
||||
let sortState: SortState = { key: '', direction: 'asc' };
|
||||
let currentFilters = { keyword: '', corp: '', dept: '', field: '' };
|
||||
|
||||
const filterBar = document.createElement('div');
|
||||
filterBar.className = 'search-bar';
|
||||
|
||||
const corps = Array.from(new Set(fullList.map((a: any) => a[ASSET_SCHEMA.PURCHASE_CORP.key]))).filter(Boolean).sort();
|
||||
|
||||
filterBar.innerHTML = `
|
||||
<div class="search-item flex-1">
|
||||
<label>통합 검색 (${ASSET_SCHEMA.MODEL_NAME.ui})</label>
|
||||
<input type="text" id="filter-keyword" placeholder="검색어를 입력하세요..." autocomplete="off">
|
||||
</div>
|
||||
<div class="search-item">
|
||||
<label>${ASSET_SCHEMA.PURCHASE_CORP.ui}</label>
|
||||
<select id="filter-corp"><option value="">전체 법인</option>${corps.map(c => `<option value="${c}">${c}</option>`).join('')}</select>
|
||||
</div>
|
||||
<button id="btn-reset-filters" class="btn btn-outline btn-reset">
|
||||
<i data-lucide="refresh-ccw"></i> ${UI_TEXT.ACTION.RESET_FILTER}
|
||||
</button>
|
||||
${getActionButtonsHTML()}
|
||||
`;
|
||||
container.appendChild(filterBar);
|
||||
|
||||
const tableWrapper = document.createElement('div');
|
||||
@@ -40,7 +26,6 @@ export function renderMobileList(container: HTMLElement) {
|
||||
table.innerHTML = `
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="text-align:center; width:50px;">No</th>
|
||||
<th style="text-align:center;" data-sort="${ASSET_SCHEMA.HW_STATUS.key}">${ASSET_SCHEMA.HW_STATUS.ui}</th>
|
||||
<th style="text-align:center;" data-sort="${ASSET_SCHEMA.PURCHASE_CORP.key}">${ASSET_SCHEMA.PURCHASE_CORP.ui}</th>
|
||||
<th style="text-align:center;" data-sort="${ASSET_SCHEMA.MODEL_NAME.key}">${ASSET_SCHEMA.MODEL_NAME.ui}</th>
|
||||
@@ -48,6 +33,7 @@ export function renderMobileList(container: HTMLElement) {
|
||||
<th style="text-align:center;" data-sort="${ASSET_SCHEMA.PURCHASE_DATE.key}">${ASSET_SCHEMA.PURCHASE_DATE.ui}</th>
|
||||
<th style="text-align:center;" data-sort="${ASSET_SCHEMA.PURCHASE_AMOUNT.key}">${ASSET_SCHEMA.PURCHASE_AMOUNT.ui}</th>
|
||||
<th style="text-align:center;">담당자</th>
|
||||
<th class="col-memo" data-sort="${ASSET_SCHEMA.MEMO.key}">${ASSET_SCHEMA.MEMO.ui}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="dynamic-tbody"></tbody>
|
||||
@@ -58,18 +44,7 @@ export function renderMobileList(container: HTMLElement) {
|
||||
const tbody = table.querySelector('tbody')!;
|
||||
|
||||
const updateTable = () => {
|
||||
const keywordInput = document.getElementById('filter-keyword') as HTMLInputElement;
|
||||
const corpSelect = document.getElementById('filter-corp') as HTMLSelectElement;
|
||||
|
||||
const keyword = keywordInput ? keywordInput.value.toLowerCase().trim() : '';
|
||||
const corp = corpSelect ? corpSelect.value : '';
|
||||
|
||||
let filtered = fullList.filter((asset: any) => {
|
||||
const matchKeyword = !keyword ||
|
||||
String(asset[ASSET_SCHEMA.MODEL_NAME.key]||'').toLowerCase().includes(keyword);
|
||||
const matchCorp = !corp || asset[ASSET_SCHEMA.PURCHASE_CORP.key] === corp;
|
||||
return matchKeyword && matchCorp;
|
||||
});
|
||||
let filtered = applyCommonFilters(fullList, currentFilters, ['MODEL_NAME']);
|
||||
|
||||
if (sortState.key) {
|
||||
filtered = dynamicSort(filtered, sortState.key, sortState.direction);
|
||||
@@ -88,14 +63,14 @@ export function renderMobileList(container: HTMLElement) {
|
||||
const mainManager = asset[ASSET_SCHEMA.MANAGER_MAIN.key] || '';
|
||||
|
||||
tr.innerHTML = `
|
||||
<td style="text-align:center;">${idx+1}</td>
|
||||
<td style="text-align:center;">${asset[ASSET_SCHEMA.HW_STATUS.key] || '운영중'}</td>
|
||||
<td style="text-align:center;">${asset[ASSET_SCHEMA.PURCHASE_CORP.key] || ''}</td>
|
||||
<td>${asset[ASSET_SCHEMA.MODEL_NAME.key] || ''}</td>
|
||||
<td style="text-align:center;">${asset[ASSET_SCHEMA.LOCATION.key] || '-'}</td>
|
||||
<td style="text-align:center;">${(asset[ASSET_SCHEMA.LOCATION.key] || '') + (asset[ASSET_SCHEMA.LOC_DETAIL.key] ? `(${asset[ASSET_SCHEMA.LOC_DETAIL.key]})` : (asset[ASSET_SCHEMA.LOCATION.key] ? '' : '-'))}</td>
|
||||
<td style="text-align:center;">${asset[ASSET_SCHEMA.PURCHASE_DATE.key] || ''}</td>
|
||||
<td style="text-align:right;">${Number(asset[ASSET_SCHEMA.PURCHASE_AMOUNT.key]||0).toLocaleString()}</td>
|
||||
<td style="text-align:center;">${mainManager}</td>
|
||||
<td class="col-memo">${formatInline(asset[ASSET_SCHEMA.MEMO.key]||'-')}</td>
|
||||
`;
|
||||
tr.addEventListener('click', () => openHwModal(asset, 'view'));
|
||||
tbody.appendChild(tr);
|
||||
@@ -106,16 +81,31 @@ export function renderMobileList(container: HTMLElement) {
|
||||
updateTable();
|
||||
});
|
||||
|
||||
createIcons({ icons: { Paperclip, RefreshCcw, Download, Upload, FileSpreadsheet, Plus } });
|
||||
createIcons({ icons: { Paperclip, RefreshCcw, Plus } });
|
||||
};
|
||||
|
||||
document.getElementById('filter-keyword')?.addEventListener('input', updateTable);
|
||||
document.getElementById('filter-corp')?.addEventListener('change', updateTable);
|
||||
document.getElementById('btn-reset-filters')?.addEventListener('click', () => {
|
||||
(document.getElementById('filter-keyword') as HTMLInputElement).value = '';
|
||||
(document.getElementById('filter-corp') as HTMLSelectElement).value = '';
|
||||
updateTable();
|
||||
renderFilterBar(filterBar, {
|
||||
keywordLabel: `통합 검색 (${ASSET_SCHEMA.MODEL_NAME.ui})`,
|
||||
showCorp: true,
|
||||
showDept: true,
|
||||
onFilterChange: (filters) => {
|
||||
currentFilters = filters;
|
||||
updateTable();
|
||||
}
|
||||
});
|
||||
|
||||
// Populate Dept Options
|
||||
const deptSelect = container.querySelector('#filter-dept') as HTMLSelectElement;
|
||||
if (deptSelect) {
|
||||
const orgUnits = Array.from(new Set(fullList.map(a => a[ASSET_SCHEMA.CURRENT_DEPT.key]))).filter(Boolean).sort();
|
||||
orgUnits.forEach(dept => {
|
||||
const opt = document.createElement('option');
|
||||
opt.value = String(dept);
|
||||
opt.textContent = String(dept);
|
||||
deptSelect.appendChild(opt);
|
||||
});
|
||||
}
|
||||
|
||||
updateTable();
|
||||
}
|
||||
|
||||
|
||||
@@ -1,29 +1,23 @@
|
||||
import { state } from '../../core/state';
|
||||
import { openHwModal } from '../../components/Modal/HWModal';
|
||||
import { formatInline, createBadge, sortAssets, dynamicSort, getActionButtonsHTML } from '../../core/utils';
|
||||
import { formatInline, sortAssets, dynamicSort, renderPageHeader } from '../../core/utils';
|
||||
import { ASSET_SCHEMA, UI_TEXT } from '../../core/schema';
|
||||
import { setupTableSorting, SortState } from '../../core/tableHandler';
|
||||
import { createIcons, RefreshCcw, Download, Upload, FileSpreadsheet, Plus } from 'lucide';
|
||||
import { renderFilterBar, applyCommonFilters } from '../../core/filterHandler';
|
||||
import { createIcons, RefreshCcw, Plus } from 'lucide';
|
||||
|
||||
/**
|
||||
* 네트워크 자산 목록 뷰
|
||||
*/
|
||||
export function renderNetworkList(container: HTMLElement) {
|
||||
renderPageHeader(container, '네트워크');
|
||||
|
||||
const fullList = sortAssets(state.masterData.network || []);
|
||||
let sortState: SortState = { key: '', direction: 'asc' };
|
||||
let currentFilters = { keyword: '', loc: '', dept: '', field: '' };
|
||||
|
||||
const filterBar = document.createElement('div');
|
||||
filterBar.className = 'search-bar';
|
||||
filterBar.innerHTML = `
|
||||
<div class="search-item flex-1">
|
||||
<label>통합 검색 (${ASSET_SCHEMA.MODEL_NAME.ui}/${ASSET_SCHEMA.MANAGER_MAIN.ui})</label>
|
||||
<input type="text" id="filter-keyword" placeholder="검색어를 입력하세요..." autocomplete="off">
|
||||
</div>
|
||||
<button id="btn-reset-filters" class="btn btn-outline btn-reset">
|
||||
<i data-lucide="refresh-ccw"></i> ${UI_TEXT.ACTION.RESET_FILTER}
|
||||
</button>
|
||||
${getActionButtonsHTML()}
|
||||
`;
|
||||
container.appendChild(filterBar);
|
||||
|
||||
const tableWrapper = document.createElement('div');
|
||||
@@ -32,16 +26,14 @@ export function renderNetworkList(container: HTMLElement) {
|
||||
table.innerHTML = `
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-center" style="width:50px;">No.</th>
|
||||
<th class="text-center" data-sort="${ASSET_SCHEMA.HW_STATUS.key}">${ASSET_SCHEMA.HW_STATUS.ui}</th>
|
||||
<th class="text-center" data-sort="${ASSET_SCHEMA.MANAGER_MAIN.key}">현 사용자</th>
|
||||
<th class="text-center" data-sort="${ASSET_SCHEMA.CURRENT_USER.key}">${ASSET_SCHEMA.CURRENT_USER.ui}</th>
|
||||
<th class="text-center" data-sort="${ASSET_SCHEMA.ASSET_TYPE.key}">${ASSET_SCHEMA.ASSET_TYPE.ui}</th>
|
||||
<th class="text-center" data-sort="${ASSET_SCHEMA.ASSET_MFR.key}">${ASSET_SCHEMA.ASSET_MFR.ui}</th>
|
||||
<th data-sort="${ASSET_SCHEMA.MODEL_NAME.key}">${ASSET_SCHEMA.MODEL_NAME.ui}</th>
|
||||
<th class="text-center" data-sort="${ASSET_SCHEMA.ASSET_COUNT.key}">${ASSET_SCHEMA.ASSET_COUNT.ui}</th>
|
||||
<th class="text-center" data-sort="${ASSET_SCHEMA.LOCATION.key}">${ASSET_SCHEMA.LOCATION.ui}(건물)</th>
|
||||
<th class="text-center" data-sort="${ASSET_SCHEMA.LOC_DETAIL.key}">${ASSET_SCHEMA.LOC_DETAIL.ui}</th>
|
||||
<th class="text-center" data-sort="${ASSET_SCHEMA.MEMO.key}">${ASSET_SCHEMA.MEMO.ui}</th>
|
||||
<th class="text-center" data-sort="${ASSET_SCHEMA.LOCATION.key}">${ASSET_SCHEMA.LOCATION.ui}</th>
|
||||
<th class="col-memo" data-sort="${ASSET_SCHEMA.MEMO.key}">${ASSET_SCHEMA.MEMO.ui}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="dynamic-tbody"></tbody>
|
||||
@@ -52,16 +44,7 @@ export function renderNetworkList(container: HTMLElement) {
|
||||
const tbody = table.querySelector('tbody')!;
|
||||
|
||||
const updateTable = () => {
|
||||
const keywordInput = document.getElementById('filter-keyword') as HTMLInputElement;
|
||||
const keyword = keywordInput ? keywordInput.value.toLowerCase().trim() : '';
|
||||
|
||||
let filtered = fullList.filter(asset => {
|
||||
const matchKeyword = !keyword ||
|
||||
String(asset[ASSET_SCHEMA.MODEL_NAME.key]||'').toLowerCase().includes(keyword) ||
|
||||
String(asset[ASSET_SCHEMA.MANAGER_MAIN.key]||'').toLowerCase().includes(keyword) ||
|
||||
String(asset[ASSET_SCHEMA.ASSET_MFR.key]||'').toLowerCase().includes(keyword);
|
||||
return matchKeyword;
|
||||
});
|
||||
let filtered = applyCommonFilters(fullList, currentFilters, ['MODEL_NAME', 'CURRENT_USER', 'ASSET_MFR']);
|
||||
|
||||
if (sortState.key) {
|
||||
filtered = dynamicSort(filtered, sortState.key, sortState.direction);
|
||||
@@ -69,24 +52,27 @@ export function renderNetworkList(container: HTMLElement) {
|
||||
|
||||
tbody.innerHTML = '';
|
||||
if (filtered.length === 0) {
|
||||
tbody.innerHTML = `<tr><td colspan="10" class="text-center" style="padding: 3rem; color: var(--text-muted);">${UI_TEXT.MESSAGES.NO_DATA}</td></tr>`;
|
||||
tbody.innerHTML = `<tr><td colspan="8" class="text-center" style="padding: 3rem; color: var(--text-muted);">${UI_TEXT.MESSAGES.NO_DATA}</td></tr>`;
|
||||
return;
|
||||
}
|
||||
|
||||
filtered.forEach((asset, idx) => {
|
||||
const tr = document.createElement('tr');
|
||||
tr.style.cursor = 'pointer';
|
||||
|
||||
const loc = asset[ASSET_SCHEMA.LOCATION.key] || '';
|
||||
const detail = asset[ASSET_SCHEMA.LOC_DETAIL.key] || '';
|
||||
const displayLoc = detail ? `${loc}(${detail})` : (loc || '-');
|
||||
|
||||
tr.innerHTML = `
|
||||
<td class="text-center">${idx + 1}</td>
|
||||
<td class="text-center"><span class="badge badge-success">${asset[ASSET_SCHEMA.HW_STATUS.key] || '운영중'}</span></td>
|
||||
<td class="text-center">${asset[ASSET_SCHEMA.MANAGER_MAIN.key] || '-'}</td>
|
||||
<td class="text-center">${asset[ASSET_SCHEMA.CURRENT_USER.key] || '-'}</td>
|
||||
<td class="text-center">${asset[ASSET_SCHEMA.ASSET_TYPE.key] || ''}</td>
|
||||
<td class="text-center">${asset[ASSET_SCHEMA.ASSET_MFR.key] || ''}</td>
|
||||
<td>${formatInline(asset[ASSET_SCHEMA.MODEL_NAME.key] || '-')}</td>
|
||||
<td class="text-center">${asset[ASSET_SCHEMA.ASSET_COUNT.key] || '1'}</td>
|
||||
<td class="text-center">${asset[ASSET_SCHEMA.LOCATION.key] || '-'}</td>
|
||||
<td class="text-center">${asset[ASSET_SCHEMA.LOC_DETAIL.key] || '-'}</td>
|
||||
<td class="text-center">${formatInline(asset[ASSET_SCHEMA.MEMO.key]||'-')}</td>
|
||||
<td class="text-center">${displayLoc}</td>
|
||||
<td class="col-memo">${formatInline(asset[ASSET_SCHEMA.MEMO.key]||'-')}</td>
|
||||
`;
|
||||
tr.addEventListener('click', () => openHwModal(asset, 'view'));
|
||||
tbody.appendChild(tr);
|
||||
@@ -97,14 +83,43 @@ export function renderNetworkList(container: HTMLElement) {
|
||||
updateTable();
|
||||
});
|
||||
|
||||
createIcons({ icons: { RefreshCcw, Download, Upload, FileSpreadsheet, Plus } });
|
||||
createIcons({ icons: { RefreshCcw, Plus } });
|
||||
};
|
||||
|
||||
document.getElementById('filter-keyword')?.addEventListener('input', updateTable);
|
||||
document.getElementById('btn-reset-filters')?.addEventListener('click', () => {
|
||||
(document.getElementById('filter-keyword') as HTMLInputElement).value = '';
|
||||
updateTable();
|
||||
renderFilterBar(filterBar, {
|
||||
keywordLabel: `통합 검색 (${ASSET_SCHEMA.MODEL_NAME.ui}/${ASSET_SCHEMA.ASSET_MFR.ui})`,
|
||||
showLoc: true,
|
||||
showDept: true,
|
||||
onFilterChange: (filters) => {
|
||||
currentFilters = filters;
|
||||
updateTable();
|
||||
}
|
||||
});
|
||||
|
||||
// Populate Location Options
|
||||
const locSelect = container.querySelector('#filter-loc') as HTMLSelectElement;
|
||||
if (locSelect) {
|
||||
const locations = Array.from(new Set(fullList.map(a => a[ASSET_SCHEMA.LOCATION.key]))).filter(Boolean).sort();
|
||||
locations.forEach(loc => {
|
||||
const opt = document.createElement('option');
|
||||
opt.value = String(loc);
|
||||
opt.textContent = String(loc);
|
||||
locSelect.appendChild(opt);
|
||||
});
|
||||
}
|
||||
|
||||
// Populate Dept Options
|
||||
const deptSelect = container.querySelector('#filter-dept') as HTMLSelectElement;
|
||||
if (deptSelect) {
|
||||
const orgUnits = Array.from(new Set(fullList.map(a => a[ASSET_SCHEMA.CURRENT_DEPT.key]))).filter(Boolean).sort();
|
||||
orgUnits.forEach(dept => {
|
||||
const opt = document.createElement('option');
|
||||
opt.value = String(dept);
|
||||
opt.textContent = String(dept);
|
||||
deptSelect.appendChild(opt);
|
||||
});
|
||||
}
|
||||
|
||||
updateTable();
|
||||
}
|
||||
|
||||
|
||||
@@ -1,37 +1,21 @@
|
||||
import { state } from '../../core/state';
|
||||
import { openHwModal } from '../../components/Modal/HWModal';
|
||||
import { formatInline, createBadge, sortAssets, dynamicSort, getActionButtonsHTML } from '../../core/utils';
|
||||
import { formatInline, sortAssets, dynamicSort, renderPageHeader } from '../../core/utils';
|
||||
import { ASSET_SCHEMA, UI_TEXT } from '../../core/schema';
|
||||
import { setupTableSorting, SortState } from '../../core/tableHandler';
|
||||
import { createIcons, Paperclip, RefreshCcw, Download, Upload, FileSpreadsheet, Plus } from 'lucide';
|
||||
import { renderFilterBar, applyCommonFilters } from '../../core/filterHandler';
|
||||
import { createIcons, Paperclip, RefreshCcw, Plus } from 'lucide';
|
||||
|
||||
/**
|
||||
* PC 자산 목록 뷰
|
||||
* 담당자(부) 추가 및 정렬 보정
|
||||
*/
|
||||
export function renderPcList(container: HTMLElement) {
|
||||
const fullList = sortAssets(state.masterData.pc);
|
||||
renderPageHeader(container, 'PC');
|
||||
|
||||
// asset_pc 데이터 중 '서버PC' 유형은 제외하고 렌더링 (서버 리스트에서 보여줌)
|
||||
const fullList = sortAssets((state.masterData.pc || []).filter((a: any) => a.asset_type !== '서버PC'));
|
||||
let sortState: SortState = { key: '', direction: 'asc' };
|
||||
let currentFilters = { keyword: '', corp: '', dept: '', field: '' };
|
||||
|
||||
const filterBar = document.createElement('div');
|
||||
filterBar.className = 'search-bar';
|
||||
|
||||
const corps = Array.from(new Set(fullList.map(a => a[ASSET_SCHEMA.PURCHASE_CORP.key]))).filter(Boolean).sort();
|
||||
|
||||
filterBar.innerHTML = `
|
||||
<div class="search-item flex-1">
|
||||
<label>통합 검색 (${ASSET_SCHEMA.MODEL_NAME.ui}/${ASSET_SCHEMA.MANAGER_MAIN.ui}/${ASSET_SCHEMA.CURRENT_USER.ui})</label>
|
||||
<input type="text" id="filter-keyword" placeholder="검색어를 입력하세요..." autocomplete="off">
|
||||
</div>
|
||||
<div class="search-item">
|
||||
<label>${ASSET_SCHEMA.PURCHASE_CORP.ui}</label>
|
||||
<select id="filter-corp"><option value="">전체 법인</option>${corps.map(c => `<option value="${c}">${c}</option>`).join('')}</select>
|
||||
</div>
|
||||
<button id="btn-reset-filters" class="btn btn-outline btn-reset">
|
||||
<i data-lucide="refresh-ccw"></i> ${UI_TEXT.ACTION.RESET_FILTER}
|
||||
</button>
|
||||
${getActionButtonsHTML()}
|
||||
`;
|
||||
container.appendChild(filterBar);
|
||||
|
||||
const tableWrapper = document.createElement('div');
|
||||
@@ -40,10 +24,7 @@ export function renderPcList(container: HTMLElement) {
|
||||
table.innerHTML = `
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="text-align:center; width:50px;">No</th>
|
||||
<th style="text-align:center;" data-sort="${ASSET_SCHEMA.CURRENT_DEPT.key}">${ASSET_SCHEMA.CURRENT_DEPT.ui}</th>
|
||||
<th style="text-align:center;" data-sort="${ASSET_SCHEMA.CURRENT_USER.key}">${ASSET_SCHEMA.CURRENT_USER.ui}</th>
|
||||
<th style="text-align:center;" data-sort="${ASSET_SCHEMA.MANAGER_MAIN.key}">${ASSET_SCHEMA.MANAGER_MAIN.ui}</th>
|
||||
<th style="text-align:center;" data-sort="${ASSET_SCHEMA.CPU.key}">${ASSET_SCHEMA.CPU.ui}</th>
|
||||
<th style="text-align:center;" data-sort="${ASSET_SCHEMA.MAINBOARD.key}">${ASSET_SCHEMA.MAINBOARD.ui}</th>
|
||||
<th style="text-align:center;" data-sort="${ASSET_SCHEMA.RAM.key}">${ASSET_SCHEMA.RAM.ui}</th>
|
||||
@@ -52,8 +33,10 @@ export function renderPcList(container: HTMLElement) {
|
||||
<th style="text-align:center;" data-sort="${ASSET_SCHEMA.SSD2.key}">SSD2</th>
|
||||
<th style="text-align:center;" data-sort="${ASSET_SCHEMA.HDD1.key}">HDD1</th>
|
||||
<th style="text-align:center;" data-sort="${ASSET_SCHEMA.HDD2.key}">HDD2</th>
|
||||
<th style="text-align:center;" data-sort="${ASSET_SCHEMA.HDD3.key}">HDD3</th>
|
||||
<th style="text-align:center;" data-sort="${ASSET_SCHEMA.HDD4.key}">HDD4</th>
|
||||
<th style="text-align:center;" data-sort="${ASSET_SCHEMA.MAC_ADDR.key}">${ASSET_SCHEMA.MAC_ADDR.ui}</th>
|
||||
<th style="text-align:center;" data-sort="${ASSET_SCHEMA.MEMO.key}">${ASSET_SCHEMA.MEMO.ui}</th>
|
||||
<th class="col-memo" data-sort="${ASSET_SCHEMA.MEMO.key}">${ASSET_SCHEMA.MEMO.ui}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="dynamic-tbody"></tbody>
|
||||
@@ -64,22 +47,7 @@ export function renderPcList(container: HTMLElement) {
|
||||
const tbody = table.querySelector('tbody')!;
|
||||
|
||||
const updateTable = () => {
|
||||
const keywordInput = document.getElementById('filter-keyword') as HTMLInputElement;
|
||||
const corpSelect = document.getElementById('filter-corp') as HTMLSelectElement;
|
||||
|
||||
const keyword = keywordInput ? keywordInput.value.toLowerCase().trim() : '';
|
||||
const corp = corpSelect ? corpSelect.value : '';
|
||||
|
||||
let filtered = fullList.filter(asset => {
|
||||
const matchKeyword = !keyword ||
|
||||
String(asset[ASSET_SCHEMA.MANAGER_MAIN.key]||'').toLowerCase().includes(keyword) ||
|
||||
String(asset[ASSET_SCHEMA.CURRENT_DEPT.key]||'').toLowerCase().includes(keyword) ||
|
||||
String(asset[ASSET_SCHEMA.MODEL_NAME.key]||'').toLowerCase().includes(keyword) ||
|
||||
String(asset[ASSET_SCHEMA.MAC_ADDR.key]||'').toLowerCase().includes(keyword) ||
|
||||
String(asset[ASSET_SCHEMA.CURRENT_USER.key]||'').toLowerCase().includes(keyword);
|
||||
const matchCorp = !corp || asset[ASSET_SCHEMA.PURCHASE_CORP.key] === corp;
|
||||
return matchKeyword && matchCorp;
|
||||
});
|
||||
let filtered = applyCommonFilters(fullList, currentFilters, ['CURRENT_DEPT', 'CURRENT_USER', 'MODEL_NAME', 'MAC_ADDR', 'MANAGER_MAIN']);
|
||||
|
||||
if (sortState.key) {
|
||||
filtered = dynamicSort(filtered, sortState.key, sortState.direction);
|
||||
@@ -87,7 +55,7 @@ export function renderPcList(container: HTMLElement) {
|
||||
|
||||
tbody.innerHTML = '';
|
||||
if (filtered.length === 0) {
|
||||
tbody.innerHTML = `<tr><td colspan="14" 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);">${UI_TEXT.MESSAGES.NO_DATA}</td></tr>`;
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -96,10 +64,7 @@ export function renderPcList(container: HTMLElement) {
|
||||
tr.style.cursor = 'pointer';
|
||||
|
||||
tr.innerHTML = `
|
||||
<td style="text-align:center;">${idx+1}</td>
|
||||
<td style="text-align:center;">${asset[ASSET_SCHEMA.CURRENT_DEPT.key]||'-'}</td>
|
||||
<td style="text-align:center;">${asset[ASSET_SCHEMA.CURRENT_USER.key]||'-'}</td>
|
||||
<td style="text-align:center;">${asset[ASSET_SCHEMA.MANAGER_MAIN.key]||'-'}</td>
|
||||
<td style="text-align:center;">${asset[ASSET_SCHEMA.CPU.key]||''}</td>
|
||||
<td style="text-align:center;">${asset[ASSET_SCHEMA.MAINBOARD.key]||'-'}</td>
|
||||
<td style="text-align:center;">${asset[ASSET_SCHEMA.RAM.key]||''}</td>
|
||||
@@ -108,8 +73,10 @@ export function renderPcList(container: HTMLElement) {
|
||||
<td style="text-align:center;">${asset[ASSET_SCHEMA.SSD2.key]||'-'}</td>
|
||||
<td style="text-align:center;">${asset[ASSET_SCHEMA.HDD1.key]||'-'}</td>
|
||||
<td style="text-align:center;">${asset[ASSET_SCHEMA.HDD2.key]||'-'}</td>
|
||||
<td style="text-align:center;">${asset[ASSET_SCHEMA.HDD3.key]||'-'}</td>
|
||||
<td style="text-align:center;">${asset[ASSET_SCHEMA.HDD4.key]||'-'}</td>
|
||||
<td style="text-align:center; font-family:monospace; font-size:11px;">${asset[ASSET_SCHEMA.MAC_ADDR.key]||'-'}</td>
|
||||
<td style="text-align:center;">${formatInline(asset[ASSET_SCHEMA.MEMO.key]||'-')}</td>
|
||||
<td class="col-memo">${formatInline(asset[ASSET_SCHEMA.MEMO.key]||'-')}</td>
|
||||
`;
|
||||
tr.addEventListener('click', () => openHwModal(asset, 'view'));
|
||||
tbody.appendChild(tr);
|
||||
@@ -119,17 +86,42 @@ export function renderPcList(container: HTMLElement) {
|
||||
sortState = { key, direction: dir };
|
||||
updateTable();
|
||||
});
|
||||
|
||||
createIcons({ icons: { Paperclip, RefreshCcw } });
|
||||
createIcons({ icons: { Paperclip, RefreshCcw, Plus } });
|
||||
};
|
||||
|
||||
document.getElementById('filter-keyword')?.addEventListener('input', updateTable);
|
||||
document.getElementById('filter-corp')?.addEventListener('change', updateTable);
|
||||
document.getElementById('btn-reset-filters')?.addEventListener('click', () => {
|
||||
(document.getElementById('filter-keyword') as HTMLInputElement).value = '';
|
||||
(document.getElementById('filter-corp') as HTMLSelectElement).value = '';
|
||||
updateTable();
|
||||
renderFilterBar(filterBar, {
|
||||
keywordLabel: `통합 검색 (${ASSET_SCHEMA.MODEL_NAME.ui}/${ASSET_SCHEMA.MANAGER_MAIN.ui}/${ASSET_SCHEMA.CURRENT_USER.ui})`,
|
||||
showLoc: true,
|
||||
showDept: true,
|
||||
onFilterChange: (filters) => {
|
||||
currentFilters = filters;
|
||||
updateTable();
|
||||
}
|
||||
});
|
||||
|
||||
// Populate Loc Options
|
||||
const locSelect = container.querySelector('#filter-loc') as HTMLSelectElement;
|
||||
if (locSelect) {
|
||||
const locations = Array.from(new Set(fullList.map(a => a[ASSET_SCHEMA.LOCATION.key]))).filter(Boolean).sort();
|
||||
locations.forEach(loc => {
|
||||
const opt = document.createElement('option');
|
||||
opt.value = String(loc);
|
||||
opt.textContent = String(loc);
|
||||
locSelect.appendChild(opt);
|
||||
});
|
||||
}
|
||||
|
||||
// Populate Dept Options
|
||||
const deptSelect = container.querySelector('#filter-dept') as HTMLSelectElement;
|
||||
if (deptSelect) {
|
||||
const orgUnits = Array.from(new Set(fullList.map(a => a[ASSET_SCHEMA.CURRENT_DEPT.key] || a['현사용부서'] || a['현사용조직']))).filter(Boolean).sort();
|
||||
orgUnits.forEach(dept => {
|
||||
const opt = document.createElement('option');
|
||||
opt.value = String(dept);
|
||||
opt.textContent = String(dept);
|
||||
deptSelect.appendChild(opt);
|
||||
});
|
||||
}
|
||||
|
||||
updateTable();
|
||||
}
|
||||
|
||||
@@ -1,30 +1,23 @@
|
||||
import { state } from '../../core/state';
|
||||
import { openHwModal } from '../../components/Modal/HWModal';
|
||||
import { formatInline, sortAssets, dynamicSort, getActionButtonsHTML } from '../../core/utils';
|
||||
import { formatInline, sortAssets, dynamicSort, renderPageHeader } from '../../core/utils';
|
||||
import { ASSET_SCHEMA, UI_TEXT } from '../../core/schema';
|
||||
import { setupTableSorting, SortState } from '../../core/tableHandler';
|
||||
import { createIcons, RefreshCcw, Download, Upload, FileSpreadsheet, Plus } from 'lucide';
|
||||
import { renderFilterBar, applyCommonFilters } from '../../core/filterHandler';
|
||||
import { createIcons, RefreshCcw, Plus } from 'lucide';
|
||||
|
||||
/**
|
||||
* PC부품 자산 목록 뷰
|
||||
*/
|
||||
export function renderPcPartList(container: HTMLElement) {
|
||||
// PC부품 데이터는 survey 또는 별도 테이블에 있을 수 있음. 여기선 equipment에서 필터링하거나 빈 배열 지원
|
||||
renderPageHeader(container, 'PC부품');
|
||||
|
||||
const fullList = sortAssets(state.masterData.equipment?.filter((a: any) => a.category === 'PC부품') || []);
|
||||
let sortState: SortState = { key: '', direction: 'asc' };
|
||||
let currentFilters = { keyword: '', loc: '', dept: '', field: '' };
|
||||
|
||||
const filterBar = document.createElement('div');
|
||||
filterBar.className = 'search-bar';
|
||||
filterBar.innerHTML = `
|
||||
<div class="search-item flex-1">
|
||||
<label>통합 검색 (${ASSET_SCHEMA.MODEL_NAME.ui})</label>
|
||||
<input type="text" id="filter-keyword" placeholder="검색어를 입력하세요..." autocomplete="off">
|
||||
</div>
|
||||
<button id="btn-reset-filters" class="btn btn-outline btn-reset">
|
||||
<i data-lucide="refresh-ccw"></i> ${UI_TEXT.ACTION.RESET_FILTER}
|
||||
</button>
|
||||
${getActionButtonsHTML()}
|
||||
`;
|
||||
container.appendChild(filterBar);
|
||||
|
||||
const tableWrapper = document.createElement('div');
|
||||
@@ -33,7 +26,6 @@ export function renderPcPartList(container: HTMLElement) {
|
||||
table.innerHTML = `
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-center" style="width:50px;">No.</th>
|
||||
<th class="text-center" data-sort="${ASSET_SCHEMA.HW_STATUS.key}">${ASSET_SCHEMA.HW_STATUS.ui}</th>
|
||||
<th class="text-center" data-sort="${ASSET_SCHEMA.ASSET_TYPE.key}">${ASSET_SCHEMA.ASSET_TYPE.ui}</th>
|
||||
<th class="text-center" data-sort="${ASSET_SCHEMA.ASSET_MFR.key}">${ASSET_SCHEMA.ASSET_MFR.ui}</th>
|
||||
@@ -41,9 +33,8 @@ export function renderPcPartList(container: HTMLElement) {
|
||||
<th class="text-center" data-sort="${ASSET_SCHEMA.VOLUME.key}">${ASSET_SCHEMA.VOLUME.ui}</th>
|
||||
<th class="text-center" data-sort="${ASSET_SCHEMA.MONITOR_INCH.key}">${ASSET_SCHEMA.MONITOR_INCH.ui}</th>
|
||||
<th class="text-center" data-sort="${ASSET_SCHEMA.ASSET_COUNT.key}">${ASSET_SCHEMA.ASSET_COUNT.ui}</th>
|
||||
<th class="text-center" data-sort="${ASSET_SCHEMA.LOCATION.key}">${ASSET_SCHEMA.LOCATION.ui}(건물)</th>
|
||||
<th class="text-center" data-sort="${ASSET_SCHEMA.LOC_DETAIL.key}">${ASSET_SCHEMA.LOC_DETAIL.ui}</th>
|
||||
<th class="text-center" data-sort="${ASSET_SCHEMA.MEMO.key}">${ASSET_SCHEMA.MEMO.ui}</th>
|
||||
<th class="text-center" data-sort="${ASSET_SCHEMA.LOCATION.key}">${ASSET_SCHEMA.LOCATION.ui}</th>
|
||||
<th class="col-memo" data-sort="${ASSET_SCHEMA.MEMO.key}">${ASSET_SCHEMA.MEMO.ui}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="dynamic-tbody"></tbody>
|
||||
@@ -54,15 +45,7 @@ export function renderPcPartList(container: HTMLElement) {
|
||||
const tbody = table.querySelector('tbody')!;
|
||||
|
||||
const updateTable = () => {
|
||||
const keywordInput = document.getElementById('filter-keyword') as HTMLInputElement;
|
||||
const keyword = keywordInput ? keywordInput.value.toLowerCase().trim() : '';
|
||||
|
||||
let filtered = fullList.filter(asset => {
|
||||
const matchKeyword = !keyword ||
|
||||
String(asset[ASSET_SCHEMA.MODEL_NAME.key]||'').toLowerCase().includes(keyword) ||
|
||||
String(asset[ASSET_SCHEMA.ASSET_TYPE.key]||'').toLowerCase().includes(keyword);
|
||||
return matchKeyword;
|
||||
});
|
||||
let filtered = applyCommonFilters(fullList, currentFilters, ['MODEL_NAME', 'ASSET_TYPE']);
|
||||
|
||||
if (sortState.key) {
|
||||
filtered = dynamicSort(filtered, sortState.key, sortState.direction);
|
||||
@@ -70,15 +53,19 @@ export function renderPcPartList(container: HTMLElement) {
|
||||
|
||||
tbody.innerHTML = '';
|
||||
if (filtered.length === 0) {
|
||||
tbody.innerHTML = `<tr><td colspan="11" class="text-center" style="padding: 3rem; color: var(--text-muted);">${UI_TEXT.MESSAGES.NO_DATA}</td></tr>`;
|
||||
tbody.innerHTML = `<tr><td colspan="9" class="text-center" style="padding: 3rem; color: var(--text-muted);">${UI_TEXT.MESSAGES.NO_DATA}</td></tr>`;
|
||||
return;
|
||||
}
|
||||
|
||||
filtered.forEach((asset, idx) => {
|
||||
const tr = document.createElement('tr');
|
||||
tr.style.cursor = 'pointer';
|
||||
|
||||
const loc = asset[ASSET_SCHEMA.LOCATION.key] || '';
|
||||
const detail = asset[ASSET_SCHEMA.LOC_DETAIL.key] || '';
|
||||
const displayLoc = detail ? `${loc}(${detail})` : (loc || '-');
|
||||
|
||||
tr.innerHTML = `
|
||||
<td class="text-center">${idx + 1}</td>
|
||||
<td class="text-center"><span class="badge badge-success">${asset[ASSET_SCHEMA.HW_STATUS.key] || '보관중'}</span></td>
|
||||
<td class="text-center">${asset[ASSET_SCHEMA.ASSET_TYPE.key] || ''}</td>
|
||||
<td class="text-center">${asset[ASSET_SCHEMA.ASSET_MFR.key] || ''}</td>
|
||||
@@ -86,9 +73,8 @@ export function renderPcPartList(container: HTMLElement) {
|
||||
<td class="text-center">${asset[ASSET_SCHEMA.VOLUME.key] || '-'}</td>
|
||||
<td class="text-center">${asset[ASSET_SCHEMA.MONITOR_INCH.key] || '-'}</td>
|
||||
<td class="text-center">${asset[ASSET_SCHEMA.ASSET_COUNT.key] || '1'}</td>
|
||||
<td class="text-center">${asset[ASSET_SCHEMA.LOCATION.key] || '-'}</td>
|
||||
<td class="text-center">${asset[ASSET_SCHEMA.LOC_DETAIL.key] || '-'}</td>
|
||||
<td class="text-center">${formatInline(asset[ASSET_SCHEMA.MEMO.key]||'-')}</td>
|
||||
<td class="text-center">${displayLoc}</td>
|
||||
<td class="col-memo">${formatInline(asset[ASSET_SCHEMA.MEMO.key]||'-')}</td>
|
||||
`;
|
||||
tr.addEventListener('click', () => openHwModal(asset, 'view'));
|
||||
tbody.appendChild(tr);
|
||||
@@ -99,14 +85,43 @@ export function renderPcPartList(container: HTMLElement) {
|
||||
updateTable();
|
||||
});
|
||||
|
||||
createIcons({ icons: { RefreshCcw, Download, Upload, FileSpreadsheet, Plus } });
|
||||
createIcons({ icons: { RefreshCcw, Plus } });
|
||||
};
|
||||
|
||||
document.getElementById('filter-keyword')?.addEventListener('input', updateTable);
|
||||
document.getElementById('btn-reset-filters')?.addEventListener('click', () => {
|
||||
(document.getElementById('filter-keyword') as HTMLInputElement).value = '';
|
||||
updateTable();
|
||||
renderFilterBar(filterBar, {
|
||||
keywordLabel: `통합 검색 (${ASSET_SCHEMA.MODEL_NAME.ui})`,
|
||||
showLoc: true,
|
||||
showDept: true,
|
||||
onFilterChange: (filters) => {
|
||||
currentFilters = filters;
|
||||
updateTable();
|
||||
}
|
||||
});
|
||||
|
||||
// Populate Location Options
|
||||
const locSelect = container.querySelector('#filter-loc') as HTMLSelectElement;
|
||||
if (locSelect) {
|
||||
const locations = Array.from(new Set(fullList.map(a => a[ASSET_SCHEMA.LOCATION.key]))).filter(Boolean).sort();
|
||||
locations.forEach(loc => {
|
||||
const opt = document.createElement('option');
|
||||
opt.value = String(loc);
|
||||
opt.textContent = String(loc);
|
||||
locSelect.appendChild(opt);
|
||||
});
|
||||
}
|
||||
|
||||
// Populate Dept Options
|
||||
const deptSelect = container.querySelector('#filter-dept') as HTMLSelectElement;
|
||||
if (deptSelect) {
|
||||
const orgUnits = Array.from(new Set(fullList.map(a => a[ASSET_SCHEMA.CURRENT_DEPT.key]))).filter(Boolean).sort();
|
||||
orgUnits.forEach(dept => {
|
||||
const opt = document.createElement('option');
|
||||
opt.value = String(dept);
|
||||
opt.textContent = String(dept);
|
||||
deptSelect.appendChild(opt);
|
||||
});
|
||||
}
|
||||
|
||||
updateTable();
|
||||
}
|
||||
|
||||
|
||||
@@ -1,42 +1,24 @@
|
||||
import { state } from '../../core/state';
|
||||
import { openHwModal } from '../../components/Modal/HWModal';
|
||||
import { formatInline, createBadge, sortAssets, dynamicSort, getActionButtonsHTML } from '../../core/utils';
|
||||
import { formatInline, sortAssets, dynamicSort, renderPageHeader } from '../../core/utils';
|
||||
import { ASSET_SCHEMA, UI_TEXT } from '../../core/schema';
|
||||
import { setupTableSorting, SortState } from '../../core/tableHandler';
|
||||
import { createIcons, RefreshCcw, Download, Upload, FileSpreadsheet, Plus } from 'lucide';
|
||||
import { renderFilterBar, applyCommonFilters } from '../../core/filterHandler';
|
||||
import { createIcons, RefreshCcw, Plus } from 'lucide';
|
||||
|
||||
/**
|
||||
* 서버 자산 목록 뷰
|
||||
* 라인 정렬 보정 및 헤더 통일
|
||||
*/
|
||||
export function renderServerList(container: HTMLElement) {
|
||||
const fullList = sortAssets(state.masterData.server);
|
||||
let sortState: SortState = { key: '', direction: 'asc' };
|
||||
renderPageHeader(container, '서버');
|
||||
|
||||
// asset_server 데이터와 asset_pc 데이터 중 '서버PC' 유형만 추출하여 병합
|
||||
const serverList = state.masterData.server || [];
|
||||
const serverPcList = (state.masterData.pc || []).filter((a: any) => a.asset_type === '서버PC');
|
||||
const fullList = sortAssets([...serverList, ...serverPcList]);
|
||||
|
||||
let sortState: SortState = { key: '', direction: 'asc' };
|
||||
let currentFilters = { keyword: '', loc: '', dept: '', field: '' };
|
||||
|
||||
const filterBar = document.createElement('div');
|
||||
filterBar.className = 'search-bar';
|
||||
|
||||
const corps = Array.from(new Set(fullList.map(a => a[ASSET_SCHEMA.PURCHASE_CORP.key]))).filter(Boolean).sort();
|
||||
const orgUnits = Array.from(new Set(fullList.map(a => a[ASSET_SCHEMA.CURRENT_DEPT.key]))).filter(Boolean).sort();
|
||||
|
||||
filterBar.innerHTML = `
|
||||
<div class="search-item flex-1">
|
||||
<label>통합 검색 (${ASSET_SCHEMA.CURRENT_DEPT.ui}/${ASSET_SCHEMA.MODEL_NAME.ui})</label>
|
||||
<input type="text" id="filter-keyword" placeholder="검색어를 입력하세요..." autocomplete="off">
|
||||
</div>
|
||||
<div class="search-item">
|
||||
<label>${ASSET_SCHEMA.PURCHASE_CORP.ui}</label>
|
||||
<select id="filter-corp"><option value="">전체 법인</option>${corps.map(c => `<option value="${c}">${c}</option>`).join('')}</select>
|
||||
</div>
|
||||
<div class="search-item">
|
||||
<label>${ASSET_SCHEMA.CURRENT_DEPT.ui}</label>
|
||||
<select id="filter-org-unit"><option value="">전체 조직</option>${orgUnits.map(o => `<option value="${o}">${o}</option>`).join('')}</select>
|
||||
</div>
|
||||
<button id="btn-reset-filters" class="btn btn-outline btn-reset">
|
||||
<i data-lucide="refresh-ccw"></i> ${UI_TEXT.ACTION.RESET_FILTER}
|
||||
</button>
|
||||
${getActionButtonsHTML()}
|
||||
`;
|
||||
container.appendChild(filterBar);
|
||||
|
||||
const tableWrapper = document.createElement('div');
|
||||
@@ -45,13 +27,11 @@ export function renderServerList(container: HTMLElement) {
|
||||
table.innerHTML = `
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-center" style="width:50px;">No</th>
|
||||
<th class="text-center" data-sort="${ASSET_SCHEMA.CURRENT_DEPT.key}">${ASSET_SCHEMA.CURRENT_DEPT.ui}</th>
|
||||
<th data-sort="${ASSET_SCHEMA.ASSET_PURPOSE.key}">${ASSET_SCHEMA.ASSET_PURPOSE.ui}</th>
|
||||
<th data-sort="${ASSET_SCHEMA.MODEL_NAME.key}">${ASSET_SCHEMA.MODEL_NAME.ui}</th>
|
||||
<th class="text-center" data-sort="${ASSET_SCHEMA.LOCATION.key}">${ASSET_SCHEMA.LOCATION.ui}(건물)</th>
|
||||
<th class="text-center" data-sort="${ASSET_SCHEMA.LOC_DETAIL.key}">${ASSET_SCHEMA.LOC_DETAIL.ui}</th>
|
||||
<th class="text-center" data-sort="${ASSET_SCHEMA.MEMO.key}">${ASSET_SCHEMA.MEMO.ui}</th>
|
||||
<th style="width: 15%;" data-sort="${ASSET_SCHEMA.MODEL_NAME.key}">${ASSET_SCHEMA.MODEL_NAME.ui}</th>
|
||||
<th class="text-center" data-sort="${ASSET_SCHEMA.LOCATION.key}">${ASSET_SCHEMA.LOCATION.ui}</th>
|
||||
<th class="col-memo" style="width: 40%;" data-sort="${ASSET_SCHEMA.MEMO.key}">${ASSET_SCHEMA.MEMO.ui}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="dynamic-tbody"></tbody>
|
||||
@@ -62,23 +42,7 @@ export function renderServerList(container: HTMLElement) {
|
||||
const tbody = table.querySelector('tbody')!;
|
||||
|
||||
const updateTable = () => {
|
||||
const keywordInput = document.getElementById('filter-keyword') as HTMLInputElement;
|
||||
const corpSelect = document.getElementById('filter-corp') as HTMLSelectElement;
|
||||
const orgSelect = document.getElementById('filter-org-unit') as HTMLSelectElement;
|
||||
|
||||
const keyword = keywordInput ? keywordInput.value.toLowerCase().trim() : '';
|
||||
const corp = corpSelect ? corpSelect.value : '';
|
||||
const orgUnit = orgSelect ? orgSelect.value : '';
|
||||
|
||||
let filtered = fullList.filter(asset => {
|
||||
const matchKeyword = !keyword ||
|
||||
String(asset[ASSET_SCHEMA.CURRENT_DEPT.key]||'').toLowerCase().includes(keyword) ||
|
||||
String(asset[ASSET_SCHEMA.MODEL_NAME.key]||'').toLowerCase().includes(keyword) ||
|
||||
String(asset[ASSET_SCHEMA.ASSET_PURPOSE.key]||'').toLowerCase().includes(keyword);
|
||||
const matchCorp = !corp || asset[ASSET_SCHEMA.PURCHASE_CORP.key] === corp;
|
||||
const matchOrg = !orgUnit || asset[ASSET_SCHEMA.CURRENT_DEPT.key] === orgUnit;
|
||||
return matchKeyword && matchCorp && matchOrg;
|
||||
});
|
||||
let filtered = applyCommonFilters(fullList, currentFilters, ['CURRENT_DEPT', 'MODEL_NAME', 'ASSET_PURPOSE']);
|
||||
|
||||
if (sortState.key) {
|
||||
filtered = dynamicSort(filtered, sortState.key, sortState.direction);
|
||||
@@ -86,7 +50,7 @@ export function renderServerList(container: HTMLElement) {
|
||||
|
||||
tbody.innerHTML = '';
|
||||
if (filtered.length === 0) {
|
||||
tbody.innerHTML = `<tr><td colspan="7" class="text-center" style="padding: 3rem; color: var(--text-muted);">${UI_TEXT.MESSAGES.NO_DATA}</td></tr>`;
|
||||
tbody.innerHTML = `<tr><td colspan="5" class="text-center" style="padding: 3rem; color: var(--text-muted);">${UI_TEXT.MESSAGES.NO_DATA}</td></tr>`;
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -94,14 +58,16 @@ export function renderServerList(container: HTMLElement) {
|
||||
const tr = document.createElement('tr');
|
||||
tr.style.cursor = 'pointer';
|
||||
|
||||
const loc = asset[ASSET_SCHEMA.LOCATION.key] || '';
|
||||
const detail = asset[ASSET_SCHEMA.LOC_DETAIL.key] || '';
|
||||
const displayLoc = detail ? `${loc}(${detail})` : (loc || '-');
|
||||
|
||||
tr.innerHTML = `
|
||||
<td class="text-center">${idx+1}</td>
|
||||
<td class="text-center">${asset[ASSET_SCHEMA.CURRENT_DEPT.key]||'-'}</td>
|
||||
<td>${formatInline(asset[ASSET_SCHEMA.ASSET_PURPOSE.key])}</td>
|
||||
<td>${formatInline(asset[ASSET_SCHEMA.ASSET_PURPOSE.key]||'-')}</td>
|
||||
<td>${formatInline(asset[ASSET_SCHEMA.MODEL_NAME.key]||asset[ASSET_SCHEMA.ASSET_NAME.key]||'-')}</td>
|
||||
<td class="text-center">${formatInline(asset[ASSET_SCHEMA.LOCATION.key])}</td>
|
||||
<td class="text-center">${formatInline(asset[ASSET_SCHEMA.LOC_DETAIL.key]||'-')}</td>
|
||||
<td class="text-center">${formatInline(asset[ASSET_SCHEMA.MEMO.key]||'-')}</td>
|
||||
<td class="text-center">${displayLoc}</td>
|
||||
<td class="col-memo">${formatInline(asset[ASSET_SCHEMA.MEMO.key]||'-')}</td>
|
||||
`;
|
||||
tr.addEventListener('click', () => openHwModal(asset, 'view'));
|
||||
tbody.appendChild(tr);
|
||||
@@ -111,18 +77,42 @@ export function renderServerList(container: HTMLElement) {
|
||||
sortState = { key, direction: dir };
|
||||
updateTable();
|
||||
});
|
||||
createIcons({ icons: { RefreshCcw, Plus } });
|
||||
};
|
||||
|
||||
document.getElementById('filter-keyword')?.addEventListener('input', updateTable);
|
||||
document.getElementById('filter-corp')?.addEventListener('change', updateTable);
|
||||
document.getElementById('filter-org-unit')?.addEventListener('change', updateTable);
|
||||
document.getElementById('btn-reset-filters')?.addEventListener('click', () => {
|
||||
(document.getElementById('filter-keyword') as HTMLInputElement).value = '';
|
||||
(document.getElementById('filter-corp') as HTMLSelectElement).value = '';
|
||||
(document.getElementById('filter-org-unit') as HTMLSelectElement).value = '';
|
||||
updateTable();
|
||||
renderFilterBar(filterBar, {
|
||||
keywordLabel: `통합 검색 (${ASSET_SCHEMA.CURRENT_DEPT.ui}/${ASSET_SCHEMA.MODEL_NAME.ui})`,
|
||||
showLoc: true,
|
||||
showDept: true,
|
||||
onFilterChange: (filters) => {
|
||||
currentFilters = filters;
|
||||
updateTable();
|
||||
}
|
||||
});
|
||||
|
||||
// Populate Location Options
|
||||
const locSelect = container.querySelector('#filter-loc') as HTMLSelectElement;
|
||||
if (locSelect) {
|
||||
const locations = Array.from(new Set(fullList.map(a => a[ASSET_SCHEMA.LOCATION.key]))).filter(Boolean).sort();
|
||||
locations.forEach(loc => {
|
||||
const opt = document.createElement('option');
|
||||
opt.value = String(loc);
|
||||
opt.textContent = String(loc);
|
||||
locSelect.appendChild(opt);
|
||||
});
|
||||
}
|
||||
|
||||
// Populate Dept Options
|
||||
const deptSelect = container.querySelector('#filter-dept') as HTMLSelectElement;
|
||||
if (deptSelect) {
|
||||
const orgUnits = Array.from(new Set(fullList.map(a => a[ASSET_SCHEMA.CURRENT_DEPT.key]))).filter(Boolean).sort();
|
||||
orgUnits.forEach(dept => {
|
||||
const opt = document.createElement('option');
|
||||
opt.value = dept;
|
||||
opt.textContent = dept;
|
||||
deptSelect.appendChild(opt);
|
||||
});
|
||||
}
|
||||
|
||||
updateTable();
|
||||
createIcons({ icons: { RefreshCcw, Download, Upload, FileSpreadsheet, Plus } });
|
||||
}
|
||||
|
||||
@@ -1,30 +1,23 @@
|
||||
import { state } from '../../core/state';
|
||||
import { openHwModal } from '../../components/Modal/HWModal';
|
||||
import { formatInline, sortAssets, dynamicSort, getActionButtonsHTML } from '../../core/utils';
|
||||
import { formatInline, sortAssets, dynamicSort, renderPageHeader } from '../../core/utils';
|
||||
import { ASSET_SCHEMA, UI_TEXT } from '../../core/schema';
|
||||
import { setupTableSorting, SortState } from '../../core/tableHandler';
|
||||
import { createIcons, RefreshCcw, Download, Upload, FileSpreadsheet, Plus } from 'lucide';
|
||||
import { renderFilterBar, applyCommonFilters } from '../../core/filterHandler';
|
||||
import { createIcons, RefreshCcw, Plus } from 'lucide';
|
||||
|
||||
/**
|
||||
* 공간정보장비 자산 목록 뷰
|
||||
*/
|
||||
export function renderSpaceInfoList(container: HTMLElement) {
|
||||
// 공간정보장비 데이터는 survey 또는 별도 테이블에 있을 수 있음.
|
||||
renderPageHeader(container, '공간정보장비');
|
||||
|
||||
const fullList = sortAssets(state.masterData.equipment?.filter((a: any) => a.category === '공간정보장비') || []);
|
||||
let sortState: SortState = { key: '', direction: 'asc' };
|
||||
let currentFilters = { keyword: '', loc: '', dept: '', field: '' };
|
||||
|
||||
const filterBar = document.createElement('div');
|
||||
filterBar.className = 'search-bar';
|
||||
filterBar.innerHTML = `
|
||||
<div class="search-item flex-1">
|
||||
<label>통합 검색 (${ASSET_SCHEMA.MODEL_NAME.ui}/${ASSET_SCHEMA.MANAGER_MAIN.ui})</label>
|
||||
<input type="text" id="filter-keyword" placeholder="검색어를 입력하세요..." autocomplete="off">
|
||||
</div>
|
||||
<button id="btn-reset-filters" class="btn btn-outline btn-reset">
|
||||
<i data-lucide="refresh-ccw"></i> ${UI_TEXT.ACTION.RESET_FILTER}
|
||||
</button>
|
||||
${getActionButtonsHTML()}
|
||||
`;
|
||||
container.appendChild(filterBar);
|
||||
|
||||
const tableWrapper = document.createElement('div');
|
||||
@@ -33,14 +26,12 @@ export function renderSpaceInfoList(container: HTMLElement) {
|
||||
table.innerHTML = `
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-center" style="width:50px;">No.</th>
|
||||
<th class="text-center" data-sort="${ASSET_SCHEMA.HW_STATUS.key}">${ASSET_SCHEMA.HW_STATUS.ui}</th>
|
||||
<th class="text-center" data-sort="${ASSET_SCHEMA.MANAGER_MAIN.key}">현 사용자</th>
|
||||
<th data-sort="${ASSET_SCHEMA.PRODUCT_NAME.key}">자산명</th>
|
||||
<th class="text-center" data-sort="${ASSET_SCHEMA.CURRENT_USER.key}">${ASSET_SCHEMA.CURRENT_USER.ui}</th>
|
||||
<th data-sort="${ASSET_SCHEMA.ASSET_NAME.key}">${ASSET_SCHEMA.ASSET_NAME.ui}</th>
|
||||
<th class="text-center" data-sort="${ASSET_SCHEMA.ASSET_TYPE.key}">${ASSET_SCHEMA.ASSET_TYPE.ui}</th>
|
||||
<th class="text-center" data-sort="${ASSET_SCHEMA.LOCATION.key}">${ASSET_SCHEMA.LOCATION.ui}(건물)</th>
|
||||
<th class="text-center" data-sort="${ASSET_SCHEMA.LOC_DETAIL.key}">${ASSET_SCHEMA.LOC_DETAIL.ui}</th>
|
||||
<th class="text-center" data-sort="${ASSET_SCHEMA.MEMO.key}">${ASSET_SCHEMA.MEMO.ui}</th>
|
||||
<th class="text-center" data-sort="${ASSET_SCHEMA.LOCATION.key}">${ASSET_SCHEMA.LOCATION.ui}</th>
|
||||
<th class="col-memo" data-sort="${ASSET_SCHEMA.MEMO.key}">${ASSET_SCHEMA.MEMO.ui}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="dynamic-tbody"></tbody>
|
||||
@@ -51,15 +42,7 @@ export function renderSpaceInfoList(container: HTMLElement) {
|
||||
const tbody = table.querySelector('tbody')!;
|
||||
|
||||
const updateTable = () => {
|
||||
const keywordInput = document.getElementById('filter-keyword') as HTMLInputElement;
|
||||
const keyword = keywordInput ? keywordInput.value.toLowerCase().trim() : '';
|
||||
|
||||
let filtered = fullList.filter(asset => {
|
||||
const matchKeyword = !keyword ||
|
||||
String(asset[ASSET_SCHEMA.MODEL_NAME.key]||asset[ASSET_SCHEMA.PRODUCT_NAME.key]||'').toLowerCase().includes(keyword) ||
|
||||
String(asset[ASSET_SCHEMA.MANAGER_MAIN.key]||'').toLowerCase().includes(keyword);
|
||||
return matchKeyword;
|
||||
});
|
||||
let filtered = applyCommonFilters(fullList, currentFilters, ['MODEL_NAME', 'PRODUCT_NAME', 'CURRENT_USER']);
|
||||
|
||||
if (sortState.key) {
|
||||
filtered = dynamicSort(filtered, sortState.key, sortState.direction);
|
||||
@@ -67,22 +50,25 @@ export function renderSpaceInfoList(container: HTMLElement) {
|
||||
|
||||
tbody.innerHTML = '';
|
||||
if (filtered.length === 0) {
|
||||
tbody.innerHTML = `<tr><td colspan="8" class="text-center" style="padding: 3rem; color: var(--text-muted);">${UI_TEXT.MESSAGES.NO_DATA}</td></tr>`;
|
||||
tbody.innerHTML = `<tr><td colspan="6" class="text-center" style="padding: 3rem; color: var(--text-muted);">${UI_TEXT.MESSAGES.NO_DATA}</td></tr>`;
|
||||
return;
|
||||
}
|
||||
|
||||
filtered.forEach((asset, idx) => {
|
||||
const tr = document.createElement('tr');
|
||||
tr.style.cursor = 'pointer';
|
||||
|
||||
const loc = asset[ASSET_SCHEMA.LOCATION.key] || '';
|
||||
const detail = asset[ASSET_SCHEMA.LOC_DETAIL.key] || '';
|
||||
const displayLoc = detail ? `${loc}(${detail})` : (loc || '-');
|
||||
|
||||
tr.innerHTML = `
|
||||
<td class="text-center">${idx + 1}</td>
|
||||
<td class="text-center"><span class="badge badge-success">${asset[ASSET_SCHEMA.HW_STATUS.key] || '운영중'}</span></td>
|
||||
<td class="text-center">${asset[ASSET_SCHEMA.MANAGER_MAIN.key] || '-'}</td>
|
||||
<td>${formatInline(asset[ASSET_SCHEMA.PRODUCT_NAME.key] || asset[ASSET_SCHEMA.MODEL_NAME.key] || '-')}</td>
|
||||
<td class="text-center">${asset[ASSET_SCHEMA.CURRENT_USER.key] || '-'}</td>
|
||||
<td>${formatInline(asset[ASSET_SCHEMA.PRODUCT_NAME.key] || asset[ASSET_SCHEMA.MODEL_NAME.key] || asset[ASSET_SCHEMA.ASSET_NAME.key] || '-')}</td>
|
||||
<td class="text-center">${asset[ASSET_SCHEMA.ASSET_TYPE.key] || ''}</td>
|
||||
<td class="text-center">${asset[ASSET_SCHEMA.LOCATION.key] || '-'}</td>
|
||||
<td class="text-center">${asset[ASSET_SCHEMA.LOC_DETAIL.key] || '-'}</td>
|
||||
<td class="text-center">${formatInline(asset[ASSET_SCHEMA.MEMO.key]||'-')}</td>
|
||||
<td class="text-center">${displayLoc}</td>
|
||||
<td class="col-memo">${formatInline(asset[ASSET_SCHEMA.MEMO.key]||'-')}</td>
|
||||
`;
|
||||
tr.addEventListener('click', () => openHwModal(asset, 'view'));
|
||||
tbody.appendChild(tr);
|
||||
@@ -93,14 +79,43 @@ export function renderSpaceInfoList(container: HTMLElement) {
|
||||
updateTable();
|
||||
});
|
||||
|
||||
createIcons({ icons: { RefreshCcw, Download, Upload, FileSpreadsheet, Plus } });
|
||||
createIcons({ icons: { RefreshCcw, Plus } });
|
||||
};
|
||||
|
||||
document.getElementById('filter-keyword')?.addEventListener('input', updateTable);
|
||||
document.getElementById('btn-reset-filters')?.addEventListener('click', () => {
|
||||
(document.getElementById('filter-keyword') as HTMLInputElement).value = '';
|
||||
updateTable();
|
||||
renderFilterBar(filterBar, {
|
||||
keywordLabel: `통합 검색 (${ASSET_SCHEMA.MODEL_NAME.ui}/${ASSET_SCHEMA.CURRENT_USER.ui})`,
|
||||
showLoc: true,
|
||||
showDept: true,
|
||||
onFilterChange: (filters) => {
|
||||
currentFilters = filters;
|
||||
updateTable();
|
||||
}
|
||||
});
|
||||
|
||||
// Populate Location Options
|
||||
const locSelect = container.querySelector('#filter-loc') as HTMLSelectElement;
|
||||
if (locSelect) {
|
||||
const locations = Array.from(new Set(fullList.map(a => a[ASSET_SCHEMA.LOCATION.key]))).filter(Boolean).sort();
|
||||
locations.forEach(loc => {
|
||||
const opt = document.createElement('option');
|
||||
opt.value = String(loc);
|
||||
opt.textContent = String(loc);
|
||||
locSelect.appendChild(opt);
|
||||
});
|
||||
}
|
||||
|
||||
// Populate Dept Options
|
||||
const deptSelect = container.querySelector('#filter-dept') as HTMLSelectElement;
|
||||
if (deptSelect) {
|
||||
const orgUnits = Array.from(new Set(fullList.map(a => a[ASSET_SCHEMA.CURRENT_DEPT.key]))).filter(Boolean).sort();
|
||||
orgUnits.forEach(dept => {
|
||||
const opt = document.createElement('option');
|
||||
opt.value = String(dept);
|
||||
opt.textContent = String(dept);
|
||||
deptSelect.appendChild(opt);
|
||||
});
|
||||
}
|
||||
|
||||
updateTable();
|
||||
}
|
||||
|
||||
|
||||
@@ -1,42 +1,23 @@
|
||||
import { state } from '../../core/state';
|
||||
import { openHwModal } from '../../components/Modal/HWModal';
|
||||
import { formatInline, createBadge, sortAssets, dynamicSort, getActionButtonsHTML } from '../../core/utils';
|
||||
import { formatInline, sortAssets, dynamicSort, renderPageHeader } from '../../core/utils';
|
||||
import { ASSET_SCHEMA, UI_TEXT } from '../../core/schema';
|
||||
import { setupTableSorting, SortState } from '../../core/tableHandler';
|
||||
import { createIcons, RefreshCcw, Download, Upload, FileSpreadsheet, Plus } from 'lucide';
|
||||
import { renderFilterBar, applyCommonFilters } from '../../core/filterHandler';
|
||||
import { createIcons, RefreshCcw, Plus } from 'lucide';
|
||||
|
||||
/**
|
||||
* 스토리지 자산 목록 뷰
|
||||
* 라인 정렬 보정 및 헤더 통일
|
||||
*/
|
||||
export function renderStorageList(container: HTMLElement) {
|
||||
renderPageHeader(container, '스토리지');
|
||||
|
||||
const fullList = sortAssets(state.masterData.storage);
|
||||
let sortState: SortState = { key: '', direction: 'asc' };
|
||||
|
||||
let currentFilters = { keyword: '', loc: '', dept: '', field: '' };
|
||||
|
||||
const filterBar = document.createElement('div');
|
||||
filterBar.className = 'search-bar';
|
||||
|
||||
const corps = Array.from(new Set(fullList.map(a => a[ASSET_SCHEMA.PURCHASE_CORP.key]))).filter(Boolean).sort();
|
||||
const orgUnits = Array.from(new Set(fullList.map(a => a[ASSET_SCHEMA.CURRENT_DEPT.key]))).filter(Boolean).sort();
|
||||
|
||||
filterBar.innerHTML = `
|
||||
<div class="search-item flex-1">
|
||||
<label>통합 검색 (${ASSET_SCHEMA.CURRENT_DEPT.ui})</label>
|
||||
<input type="text" id="filter-keyword" placeholder="검색어를 입력하세요..." autocomplete="off">
|
||||
</div>
|
||||
<div class="search-item">
|
||||
<label>${ASSET_SCHEMA.PURCHASE_CORP.ui}</label>
|
||||
<select id="filter-corp"><option value="">전체 법인</option>${corps.map(c => `<option value="${c}">${c}</option>`).join('')}</select>
|
||||
</div>
|
||||
<div class="search-item">
|
||||
<label>${ASSET_SCHEMA.CURRENT_DEPT.ui}</label>
|
||||
<select id="filter-org-unit"><option value="">전체 조직</option>${orgUnits.map(o => `<option value="${o}">${o}</option>`).join('')}</select>
|
||||
</div>
|
||||
<button id="btn-reset-filters" class="btn btn-outline btn-reset">
|
||||
<i data-lucide="refresh-ccw"></i> ${UI_TEXT.ACTION.RESET_FILTER}
|
||||
</button>
|
||||
${getActionButtonsHTML()}
|
||||
`;
|
||||
container.appendChild(filterBar);
|
||||
|
||||
const tableWrapper = document.createElement('div');
|
||||
@@ -45,43 +26,25 @@ export function renderStorageList(container: HTMLElement) {
|
||||
table.innerHTML = `
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-center" style="width:50px;">No</th>
|
||||
<th class="text-center" data-sort="${ASSET_SCHEMA.HW_STATUS.key}">${ASSET_SCHEMA.HW_STATUS.ui}</th>
|
||||
<th class="text-center" data-sort="${ASSET_SCHEMA.MANAGER_MAIN.key}">현 사용자</th>
|
||||
<th class="text-center" data-sort="${ASSET_SCHEMA.CURRENT_USER.key}">${ASSET_SCHEMA.CURRENT_USER.ui}</th>
|
||||
<th class="text-center" data-sort="${ASSET_SCHEMA.ASSET_TYPE.key}">${ASSET_SCHEMA.ASSET_TYPE.ui}</th>
|
||||
<th class="text-center" data-sort="${ASSET_SCHEMA.VOLUME.key}">${ASSET_SCHEMA.VOLUME.ui}</th>
|
||||
<th data-sort="${ASSET_SCHEMA.MODEL_NAME.key}">${ASSET_SCHEMA.MODEL_NAME.ui}</th>
|
||||
<th class="text-center" data-sort="${ASSET_SCHEMA.SERIAL_NUM.key}">${ASSET_SCHEMA.SERIAL_NUM.ui}</th>
|
||||
<th class="text-center" data-sort="${ASSET_SCHEMA.LOCATION.key}">${ASSET_SCHEMA.LOCATION.ui}(건물)</th>
|
||||
<th class="text-center" data-sort="${ASSET_SCHEMA.LOC_DETAIL.key}">${ASSET_SCHEMA.LOC_DETAIL.ui}</th>
|
||||
<th class="text-center" data-sort="${ASSET_SCHEMA.MEMO.key}">${ASSET_SCHEMA.MEMO.ui}</th>
|
||||
<th class="text-center" data-sort="${ASSET_SCHEMA.LOCATION.key}">${ASSET_SCHEMA.LOCATION.ui}</th>
|
||||
<th class="col-memo" data-sort="${ASSET_SCHEMA.MEMO.key}">${ASSET_SCHEMA.MEMO.ui}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="dynamic-tbody"></tbody>
|
||||
`;
|
||||
|
||||
|
||||
tableWrapper.appendChild(table);
|
||||
container.appendChild(tableWrapper);
|
||||
const tbody = table.querySelector('tbody')!;
|
||||
|
||||
const updateTable = () => {
|
||||
const keywordInput = document.getElementById('filter-keyword') as HTMLInputElement;
|
||||
const corpSelect = document.getElementById('filter-corp') as HTMLSelectElement;
|
||||
const orgSelect = document.getElementById('filter-org-unit') as HTMLSelectElement;
|
||||
|
||||
const keyword = keywordInput ? keywordInput.value.toLowerCase().trim() : '';
|
||||
const corp = corpSelect ? corpSelect.value : '';
|
||||
const orgUnit = orgSelect ? orgUnit.value : '';
|
||||
|
||||
let filtered = fullList.filter(asset => {
|
||||
const matchKeyword = !keyword ||
|
||||
String(asset[ASSET_SCHEMA.MODEL_NAME.key]||'').toLowerCase().includes(keyword) ||
|
||||
String(asset[ASSET_SCHEMA.MANAGER_MAIN.key]||'').toLowerCase().includes(keyword) ||
|
||||
String(asset[ASSET_SCHEMA.SERIAL_NUM.key]||'').toLowerCase().includes(keyword);
|
||||
const matchCorp = !corp || asset[ASSET_SCHEMA.PURCHASE_CORP.key] === corp;
|
||||
const matchOrg = !orgUnit || asset[ASSET_SCHEMA.CURRENT_DEPT.key] === orgUnit;
|
||||
return matchKeyword && matchCorp && matchOrg;
|
||||
});
|
||||
let filtered = applyCommonFilters(fullList, currentFilters, ['MODEL_NAME', 'CURRENT_USER', 'SERIAL_NUM']);
|
||||
|
||||
if (sortState.key) {
|
||||
filtered = dynamicSort(filtered, sortState.key, sortState.direction);
|
||||
@@ -89,25 +52,27 @@ export function renderStorageList(container: HTMLElement) {
|
||||
|
||||
tbody.innerHTML = '';
|
||||
if (filtered.length === 0) {
|
||||
tbody.innerHTML = `<tr><td colspan="10" class="text-center" style="padding: 3rem; color: var(--text-muted);">${UI_TEXT.MESSAGES.NO_DATA}</td></tr>`;
|
||||
tbody.innerHTML = `<tr><td colspan="8" class="text-center" style="padding: 3rem; color: var(--text-muted);">${UI_TEXT.MESSAGES.NO_DATA}</td></tr>`;
|
||||
return;
|
||||
}
|
||||
|
||||
filtered.forEach((asset, idx) => {
|
||||
const tr = document.createElement('tr');
|
||||
tr.style.cursor = 'pointer';
|
||||
|
||||
|
||||
const loc = asset[ASSET_SCHEMA.LOCATION.key] || '';
|
||||
const detail = asset[ASSET_SCHEMA.LOC_DETAIL.key] || '';
|
||||
const displayLoc = detail ? `${loc}(${detail})` : (loc || '-');
|
||||
|
||||
tr.innerHTML = `
|
||||
<td class="text-center">${idx+1}</td>
|
||||
<td class="text-center">${asset[ASSET_SCHEMA.HW_STATUS.key]||'-'}</td>
|
||||
<td class="text-center">${asset[ASSET_SCHEMA.MANAGER_MAIN.key]||'-'}</td>
|
||||
<td class="text-center">${asset[ASSET_SCHEMA.CURRENT_USER.key]||'-'}</td>
|
||||
<td class="text-center">${asset[ASSET_SCHEMA.ASSET_TYPE.key]||'-'}</td>
|
||||
<td class="text-center">${asset[ASSET_SCHEMA.VOLUME.key]||'-'}</td>
|
||||
<td>${formatInline(asset[ASSET_SCHEMA.MODEL_NAME.key]||asset[ASSET_SCHEMA.ASSET_NAME.key]||'-')}</td>
|
||||
<td class="text-center">${asset[ASSET_SCHEMA.SERIAL_NUM.key]||'-'}</td>
|
||||
<td class="text-center">${formatInline(asset[ASSET_SCHEMA.LOCATION.key])}</td>
|
||||
<td class="text-center">${formatInline(asset[ASSET_SCHEMA.LOC_DETAIL.key]||'-')}</td>
|
||||
<td class="text-center">${formatInline(asset[ASSET_SCHEMA.MEMO.key]||'-')}</td>
|
||||
<td class="text-center">${displayLoc}</td>
|
||||
<td class="col-memo">${formatInline(asset[ASSET_SCHEMA.MEMO.key]||'-')}</td>
|
||||
`;
|
||||
tr.addEventListener('click', () => openHwModal(asset, 'view'));
|
||||
tbody.appendChild(tr);
|
||||
@@ -117,18 +82,42 @@ export function renderStorageList(container: HTMLElement) {
|
||||
sortState = { key, direction: dir };
|
||||
updateTable();
|
||||
});
|
||||
createIcons({ icons: { RefreshCcw, Plus } });
|
||||
};
|
||||
|
||||
document.getElementById('filter-keyword')?.addEventListener('input', updateTable);
|
||||
document.getElementById('filter-corp')?.addEventListener('change', updateTable);
|
||||
document.getElementById('filter-org-unit')?.addEventListener('change', updateTable);
|
||||
document.getElementById('btn-reset-filters')?.addEventListener('click', () => {
|
||||
(document.getElementById('filter-keyword') as HTMLInputElement).value = '';
|
||||
(document.getElementById('filter-corp') as HTMLSelectElement).value = '';
|
||||
(document.getElementById('filter-org-unit') as HTMLSelectElement).value = '';
|
||||
updateTable();
|
||||
renderFilterBar(filterBar, {
|
||||
keywordLabel: `통합 검색 (${ASSET_SCHEMA.MODEL_NAME.ui}/${ASSET_SCHEMA.CURRENT_USER.ui})`,
|
||||
showLoc: true,
|
||||
showDept: true,
|
||||
onFilterChange: (filters) => {
|
||||
currentFilters = filters;
|
||||
updateTable();
|
||||
}
|
||||
});
|
||||
|
||||
// Populate Location Options
|
||||
const locSelect = container.querySelector('#filter-loc') as HTMLSelectElement;
|
||||
if (locSelect) {
|
||||
const locations = Array.from(new Set(fullList.map(a => a[ASSET_SCHEMA.LOCATION.key]))).filter(Boolean).sort();
|
||||
locations.forEach(loc => {
|
||||
const opt = document.createElement('option');
|
||||
opt.value = String(loc);
|
||||
opt.textContent = String(loc);
|
||||
locSelect.appendChild(opt);
|
||||
});
|
||||
}
|
||||
|
||||
// Populate Dept Options
|
||||
const deptSelect = container.querySelector('#filter-dept') as HTMLSelectElement;
|
||||
if (deptSelect) {
|
||||
const orgUnits = Array.from(new Set(fullList.map(a => a[ASSET_SCHEMA.CURRENT_DEPT.key]))).filter(Boolean).sort();
|
||||
orgUnits.forEach(dept => {
|
||||
const opt = document.createElement('option');
|
||||
opt.value = String(dept);
|
||||
opt.textContent = String(dept);
|
||||
deptSelect.appendChild(opt);
|
||||
});
|
||||
}
|
||||
|
||||
updateTable();
|
||||
createIcons({ icons: { RefreshCcw, Download, Upload, FileSpreadsheet, Plus } });
|
||||
}
|
||||
|
||||
@@ -1,45 +1,22 @@
|
||||
import { state } from '../../core/state';
|
||||
import { openSwModal } from '../../components/Modal/SWModal';
|
||||
import { openSwUserModal } from '../../components/Modal/SWUserModal';
|
||||
import { sortAssets, dynamicSort, formatPrice, getActionButtonsHTML } from '../../core/utils';
|
||||
import { sortAssets, dynamicSort, formatInline, getActionButtonsHTML, renderPageHeader } from '../../core/utils';
|
||||
import { setupTableSorting, SortState } from '../../core/tableHandler';
|
||||
import { ASSET_SCHEMA } from '../../core/schema';
|
||||
import { CORP_LIST } from '../../components/Modal/SharedData';
|
||||
import { generateOptionsHTML } from '../../components/Modal/ModalUtils';
|
||||
import { createIcons, Edit2, Users, RefreshCcw, Download, Upload, FileSpreadsheet, Plus } from 'lucide';
|
||||
import { renderFilterBar, applyCommonFilters } from '../../core/filterHandler';
|
||||
import { createIcons, Edit2, Users, RefreshCcw, Plus } from 'lucide';
|
||||
|
||||
export function renderSwList(container: HTMLElement) {
|
||||
const isInternal = state.activeSubTab === '내부';
|
||||
renderPageHeader(container, isInternal ? '내부' : '외부');
|
||||
|
||||
const fullList = sortAssets(isInternal ? state.masterData.swInternal : state.masterData.swExternal);
|
||||
|
||||
let sortState: SortState = { key: '', direction: 'asc' };
|
||||
let currentFilters = { keyword: '', corp: '', dept: '', field: '' };
|
||||
|
||||
const filterBar = document.createElement('div');
|
||||
filterBar.className = 'search-bar';
|
||||
filterBar.innerHTML = `
|
||||
<div class="search-item flex-1">
|
||||
<label>통합 검색 (${ASSET_SCHEMA.PRODUCT_NAME.ui}/${ASSET_SCHEMA.CURRENT_DEPT.ui})</label>
|
||||
<input type="text" id="filter-keyword" placeholder="검색어를 입력하세요..." autocomplete="off">
|
||||
</div>
|
||||
<div class="search-item">
|
||||
<label>${ASSET_SCHEMA.SW_FIELD.ui}</label>
|
||||
<select id="filter-field">
|
||||
<option value="">전체 분야</option>
|
||||
<option value="업무공통">업무공통</option>
|
||||
<option value="개발S/W">개발S/W</option>
|
||||
<option value="디자인">디자인</option>
|
||||
<option value="설계S/W">설계S/W</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="search-item">
|
||||
<label>${ASSET_SCHEMA.PURCHASE_CORP.ui}</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> 필터 초기화
|
||||
</button>
|
||||
${getActionButtonsHTML()}
|
||||
`;
|
||||
container.appendChild(filterBar);
|
||||
|
||||
const tableWrapper = document.createElement('div');
|
||||
@@ -50,12 +27,11 @@ export function renderSwList(container: HTMLElement) {
|
||||
table.innerHTML = `
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="text-align:center; width: 50px;">No.</th>
|
||||
<th style="text-align:center;" data-sort="${ASSET_SCHEMA.SW_FIELD.key}">${ASSET_SCHEMA.SW_FIELD.ui}</th>
|
||||
<th style="text-align:center;" data-sort="${ASSET_SCHEMA.DEV_OBJ.key}">${ASSET_SCHEMA.DEV_OBJ.ui}</th>
|
||||
<th style="text-align:center;" data-sort="${ASSET_SCHEMA.SW_STATUS.key}">${ASSET_SCHEMA.SW_STATUS.ui}</th>
|
||||
<th style="text-align:center;" data-sort="${ASSET_SCHEMA.SW_TYPE.key}">${ASSET_SCHEMA.SW_TYPE.ui}</th>
|
||||
<th style="text-align:center;" data-sort="${ASSET_SCHEMA.MEMO.key}">${ASSET_SCHEMA.MEMO.ui}</th>
|
||||
<th class="col-memo" data-sort="${ASSET_SCHEMA.MEMO.key}">${ASSET_SCHEMA.MEMO.ui}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="dynamic-tbody"></tbody>
|
||||
@@ -64,17 +40,17 @@ export function renderSwList(container: HTMLElement) {
|
||||
table.innerHTML = `
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="text-align:center; width: 50px;">No.</th>
|
||||
<th style="text-align:center;" data-sort="${ASSET_SCHEMA.PRODUCT_NAME.key}">자산명</th>
|
||||
<th style="text-align:center;" data-sort="${ASSET_SCHEMA.ASSET_TYPE.key}">유형</th>
|
||||
<th style="text-align:center;" data-sort="${ASSET_SCHEMA.SW_STATUS.key}">${ASSET_SCHEMA.SW_STATUS.ui}</th>
|
||||
<th style="text-align:center;" data-sort="${ASSET_SCHEMA.SW_FIELD.key}">${ASSET_SCHEMA.SW_FIELD.ui}</th>
|
||||
<th style="text-align:center;" data-sort="${ASSET_SCHEMA.CURRENT_DEPT.key}">${ASSET_SCHEMA.CURRENT_DEPT.ui}</th>
|
||||
<th style="text-align:center;">현 사용자</th>
|
||||
<th style="text-align:center;">${ASSET_SCHEMA.CURRENT_USER.ui}</th>
|
||||
<th style="text-align:center;">${ASSET_SCHEMA.PREV_USER.ui}</th>
|
||||
<th style="text-align:center;" data-sort="${ASSET_SCHEMA.PURCHASE_DATE.key}">구매연월</th>
|
||||
<th style="text-align:center;">시작일</th>
|
||||
<th style="text-align:center;" data-sort="${ASSET_SCHEMA.EXPIRY_DATE.key}">만료일</th>
|
||||
<th style="text-align:center;" data-sort="${ASSET_SCHEMA.MEMO.key}">${ASSET_SCHEMA.MEMO.ui}</th>
|
||||
<th style="text-align:center;" data-sort="${ASSET_SCHEMA.EXPIRED_DATE.key}">만료일</th>
|
||||
<th class="col-memo" data-sort="${ASSET_SCHEMA.MEMO.key}">${ASSET_SCHEMA.MEMO.ui}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="dynamic-tbody"></tbody>
|
||||
@@ -86,22 +62,7 @@ export function renderSwList(container: HTMLElement) {
|
||||
const tbody = table.querySelector('tbody')!;
|
||||
|
||||
const updateTable = () => {
|
||||
const keywordInput = document.getElementById('filter-keyword') as HTMLInputElement;
|
||||
const fieldSelect = document.getElementById('filter-field') as HTMLSelectElement;
|
||||
const corpSelect = document.getElementById('filter-corp') as HTMLSelectElement;
|
||||
|
||||
const keyword = keywordInput ? keywordInput.value.toLowerCase().trim() : '';
|
||||
const field = fieldSelect ? fieldSelect.value : '';
|
||||
const corp = corpSelect ? corpSelect.value : '';
|
||||
|
||||
let filtered = fullList.filter(asset => {
|
||||
const matchKeyword = !keyword ||
|
||||
(asset[ASSET_SCHEMA.PRODUCT_NAME.key] || '').toLowerCase().includes(keyword) ||
|
||||
(asset[ASSET_SCHEMA.CURRENT_DEPT.key] || '').toLowerCase().includes(keyword);
|
||||
const matchField = !field || asset[ASSET_SCHEMA.SW_FIELD.key] === field;
|
||||
const matchCorp = !corp || asset[ASSET_SCHEMA.PURCHASE_CORP.key] === corp;
|
||||
return matchKeyword && matchField && matchCorp;
|
||||
});
|
||||
let filtered = applyCommonFilters(fullList, currentFilters, ['PRODUCT_NAME', 'CURRENT_USER', 'CURRENT_DEPT']);
|
||||
|
||||
if (sortState.key) {
|
||||
filtered = dynamicSort(filtered, sortState.key, sortState.direction);
|
||||
@@ -109,7 +70,7 @@ export function renderSwList(container: HTMLElement) {
|
||||
|
||||
tbody.innerHTML = '';
|
||||
if (filtered.length === 0) {
|
||||
tbody.innerHTML = `<tr><td colspan="${isInternal ? 6 : 11}" style="text-align:center; padding: 3rem; color: var(--text-muted);">검색 결과가 없습니다.</td></tr>`;
|
||||
tbody.innerHTML = `<tr><td colspan="${isInternal ? 5 : 11}" style="text-align:center; padding: 3rem; color: var(--text-muted);">검색 결과가 없습니다.</td></tr>`;
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -118,33 +79,30 @@ export function renderSwList(container: HTMLElement) {
|
||||
const tr = document.createElement('tr');
|
||||
tr.style.cursor = 'pointer';
|
||||
tr.innerHTML = `
|
||||
<td style="text-align:center;">${idx+1}</td>
|
||||
<td style="text-align:center;">${asset[ASSET_SCHEMA.SW_FIELD.key]||''}</td>
|
||||
<td style="text-align:center;">${asset[ASSET_SCHEMA.DEV_OBJ.key]||''}</td>
|
||||
<td style="text-align:center;">${asset[ASSET_SCHEMA.SW_STATUS.key]||'보유중'}</td>
|
||||
<td style="text-align:center;">${asset[ASSET_SCHEMA.SW_TYPE.key]||'내부'}</td>
|
||||
<td>${formatInline(asset[ASSET_SCHEMA.MEMO.key]||'-')}</td>
|
||||
<td class="col-memo">${formatInline(asset[ASSET_SCHEMA.MEMO.key]||'-')}</td>
|
||||
`;
|
||||
tr.addEventListener('click', () => openSwModal(asset, 'view'));
|
||||
tbody.appendChild(tr);
|
||||
} else {
|
||||
const tr = document.createElement('tr');
|
||||
tr.style.cursor = 'pointer';
|
||||
const users = state.masterData.swUsers.filter(u => u.sw_id === asset.id);
|
||||
const userText = users.length > 0 ? `${users[0].user_name}${users.length > 1 ? ' 외 ' + (users.length - 1) : ''}` : '-';
|
||||
|
||||
|
||||
tr.innerHTML = `
|
||||
<td style="text-align:center;">${idx+1}</td>
|
||||
<td>${asset[ASSET_SCHEMA.PRODUCT_NAME.key]||''}</td>
|
||||
<td style="text-align:center;">${asset[ASSET_SCHEMA.ASSET_TYPE.key]||'외부'}</td>
|
||||
<td style="text-align:center;">${asset[ASSET_SCHEMA.SW_STATUS.key]||'사용중'}</td>
|
||||
<td style="text-align:center;">${asset[ASSET_SCHEMA.SW_FIELD.key]||''}</td>
|
||||
<td style="text-align:center;">${asset[ASSET_SCHEMA.CURRENT_DEPT.key]||''}</td>
|
||||
<td style="text-align:center;">${userText}</td>
|
||||
<td style="text-align:center;">${asset[ASSET_SCHEMA.CURRENT_USER.key]||'-'}</td>
|
||||
<td style="text-align:center;">${asset[ASSET_SCHEMA.PREV_USER.key]||'-'}</td>
|
||||
<td style="text-align:center;">${asset[ASSET_SCHEMA.PURCHASE_DATE.key]||''}</td>
|
||||
<td style="text-align:center;">${asset[ASSET_SCHEMA.PURCHASE_DATE.key]||''}</td>
|
||||
<td style="text-align:center;">${asset[ASSET_SCHEMA.EXPIRY_DATE.key]||''}</td>
|
||||
<td>${formatInline(asset[ASSET_SCHEMA.MEMO.key]||'-')}</td>
|
||||
<td style="text-align:center;">${asset[ASSET_SCHEMA.EXPIRED_DATE.key]||''}</td>
|
||||
<td class="col-memo">${formatInline(asset[ASSET_SCHEMA.MEMO.key]||'-')}</td>
|
||||
`;
|
||||
tr.addEventListener('click', () => openSwModal(asset, 'view'));
|
||||
tbody.appendChild(tr);
|
||||
@@ -156,18 +114,32 @@ export function renderSwList(container: HTMLElement) {
|
||||
updateTable();
|
||||
});
|
||||
|
||||
createIcons({ icons: { Edit2, Users, RefreshCcw, Download, Upload, FileSpreadsheet, Plus } });
|
||||
createIcons({ icons: { Edit2, Users, RefreshCcw, Plus } });
|
||||
};
|
||||
|
||||
document.getElementById('filter-keyword')?.addEventListener('input', updateTable);
|
||||
document.getElementById('filter-field')?.addEventListener('change', updateTable);
|
||||
document.getElementById('filter-corp')?.addEventListener('change', updateTable);
|
||||
document.getElementById('btn-reset-filters')?.addEventListener('click', () => {
|
||||
(document.getElementById('filter-keyword') as HTMLInputElement).value = '';
|
||||
(document.getElementById('filter-field') as HTMLSelectElement).value = '';
|
||||
(document.getElementById('filter-corp') as HTMLSelectElement).value = '';
|
||||
updateTable();
|
||||
renderFilterBar(filterBar, {
|
||||
keywordLabel: `통합 검색 (${ASSET_SCHEMA.PRODUCT_NAME.ui}/${ASSET_SCHEMA.CURRENT_DEPT.ui})`,
|
||||
showField: true,
|
||||
showCorp: true,
|
||||
showDept: true,
|
||||
onFilterChange: (filters) => {
|
||||
currentFilters = filters;
|
||||
updateTable();
|
||||
}
|
||||
});
|
||||
|
||||
// Populate Dept Options
|
||||
const deptSelect = container.querySelector('#filter-dept') as HTMLSelectElement;
|
||||
if (deptSelect) {
|
||||
const orgUnits = Array.from(new Set(fullList.map(a => a[ASSET_SCHEMA.CURRENT_DEPT.key]))).filter(Boolean).sort();
|
||||
orgUnits.forEach(dept => {
|
||||
const opt = document.createElement('option');
|
||||
opt.value = String(dept);
|
||||
opt.textContent = String(dept);
|
||||
deptSelect.appendChild(opt);
|
||||
});
|
||||
}
|
||||
|
||||
updateTable();
|
||||
}
|
||||
|
||||
|
||||
@@ -13,7 +13,8 @@ import { renderSpaceInfoList } from './List/SpaceInfoListView';
|
||||
import { renderGiftList } from './List/GiftListView';
|
||||
import { renderFacilityList } from './List/FacilityListView';
|
||||
import { renderCostList } from './List/CostListView';
|
||||
import { createIcons, Download, Upload, FileSpreadsheet, Plus, X, LayoutDashboard, Monitor, Server, Database, Laptop, CalendarClock, Key, Cpu, Layers, Users, Paperclip, Edit2, RefreshCcw } from 'lucide';
|
||||
import { renderUserList } from './List/UserListView';
|
||||
import { createIcons, Plus, X, LayoutDashboard, Monitor, Server, Database, Laptop, CalendarClock, Key, Cpu, Layers, Users, Paperclip, Edit2, RefreshCcw } from 'lucide';
|
||||
|
||||
/**
|
||||
* 자산 목록 테이블 렌더링 통합 허브
|
||||
@@ -69,7 +70,7 @@ export function renderSWTable(mainContent: HTMLElement) {
|
||||
|
||||
// 전역 아이콘 초기화 (한 번 더 실행하여 누락 방지)
|
||||
createIcons({
|
||||
icons: { Download, Upload, FileSpreadsheet, Plus, X, LayoutDashboard, Monitor, Server, Database, Laptop, CalendarClock, Key, Cpu, Layers, Users, Paperclip, Edit2, RefreshCcw }
|
||||
icons: { Plus, X, LayoutDashboard, Monitor, Server, Database, Laptop, CalendarClock, Key, Cpu, Layers, Users, Paperclip, Edit2, RefreshCcw }
|
||||
});
|
||||
} catch (err: any) {
|
||||
console.error('❌ Error rendering table view:', err);
|
||||
|
||||
Reference in New Issue
Block a user