feat: implement unified schema mapper, enhance UI/UX with responsive design, and optimize asset log logic
This commit is contained in:
@@ -1,20 +1,24 @@
|
||||
import { state } from '../../core/state';
|
||||
import { openSwModal } from '../../components/Modal/SWModal';
|
||||
import { createIcons, Cloud, CreditCard, DollarSign } from 'lucide';
|
||||
import { ASSET_SCHEMA, UI_TEXT } from '../../core/schema';
|
||||
import { createIcons, Cloud, CreditCard, DollarSign, RefreshCcw } from 'lucide';
|
||||
|
||||
/**
|
||||
* 클라우드(운영 서비스) 자산 목록 뷰
|
||||
* 라인 정렬 보정 및 헤더 통일
|
||||
*/
|
||||
export function renderCloudList(container: HTMLElement) {
|
||||
// DB에서 직접 로드된 전용 배열을 사용하여 데이터 소스를 일원화함
|
||||
const getFullList = () => state.masterData.cloud || [];
|
||||
|
||||
const filterBar = document.createElement('div');
|
||||
filterBar.className = 'search-bar';
|
||||
filterBar.innerHTML = `
|
||||
<div class="search-item flex-1">
|
||||
<label>통합 검색 (제품명/부서/계정명)</label>
|
||||
<label>통합 검색 (${ASSET_SCHEMA.PRODUCT.ui}/부서/${ASSET_SCHEMA.ACCOUNT.ui})</label>
|
||||
<input type="text" id="filter-keyword" placeholder="검색어를 입력하세요..." autocomplete="off">
|
||||
</div>
|
||||
<div class="search-item">
|
||||
<label>결제수단</label>
|
||||
<label>${ASSET_SCHEMA.PAY_METHOD.ui}</label>
|
||||
<select id="filter-payment">
|
||||
<option value="">전체 결제수단</option>
|
||||
<option value="법인카드">법인카드</option>
|
||||
@@ -22,7 +26,7 @@ export function renderCloudList(container: HTMLElement) {
|
||||
</select>
|
||||
</div>
|
||||
<button id="btn-reset-filters" class="btn btn-outline btn-reset">
|
||||
<i data-lucide="refresh-ccw"></i> 필터 초기화
|
||||
<i data-lucide="refresh-ccw"></i> ${UI_TEXT.ACTION.RESET_FILTER}
|
||||
</button>
|
||||
`;
|
||||
container.appendChild(filterBar);
|
||||
@@ -33,16 +37,16 @@ export function renderCloudList(container: HTMLElement) {
|
||||
table.innerHTML = `
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="text-align:center;">No.</th>
|
||||
<th style="text-align:center;">플랫폼명</th>
|
||||
<th style="text-align:center;">법인</th>
|
||||
<th style="text-align:center;">담당부서</th>
|
||||
<th style="text-align:center;">진행 프로젝트(사용용도)</th>
|
||||
<th style="text-align:center;">계정명(관리자)</th>
|
||||
<th style="text-align:center;">결제수단</th>
|
||||
<th style="text-align:center;">결제일</th>
|
||||
<th style="text-align:center;">당월 청구액</th>
|
||||
<th style="text-align:center;">비고</th>
|
||||
<th class="text-center">No.</th>
|
||||
<th>${ASSET_SCHEMA.PLATFORM.ui}</th>
|
||||
<th class="text-center">${ASSET_SCHEMA.CORP.ui}</th>
|
||||
<th class="text-center">담당부서</th>
|
||||
<th>용도(프로젝트)</th>
|
||||
<th>${ASSET_SCHEMA.ACCOUNT.ui}</th>
|
||||
<th class="text-center">${ASSET_SCHEMA.PAY_METHOD.ui}</th>
|
||||
<th class="text-center">${ASSET_SCHEMA.PAY_DAY.ui}</th>
|
||||
<th class="text-center">${ASSET_SCHEMA.BILLING.ui}</th>
|
||||
<th>${ASSET_SCHEMA.REMARKS.ui}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="cloud-tbody"></tbody>
|
||||
@@ -61,16 +65,16 @@ export function renderCloudList(container: HTMLElement) {
|
||||
|
||||
const filtered = getFullList().filter(asset => {
|
||||
const kwMatch = !keyword ||
|
||||
(asset.제품명 || '').toLowerCase().includes(keyword) ||
|
||||
(asset[ASSET_SCHEMA.PRODUCT.key] || '').toLowerCase().includes(keyword) ||
|
||||
(asset.부서 || '').toLowerCase().includes(keyword) ||
|
||||
(asset.계정명 || '').toLowerCase().includes(keyword);
|
||||
const payMatch = !payment || asset.결제수단 === payment;
|
||||
(asset[ASSET_SCHEMA.ACCOUNT.key] || '').toLowerCase().includes(keyword);
|
||||
const payMatch = !payment || asset[ASSET_SCHEMA.PAY_METHOD.key] === payment;
|
||||
return kwMatch && payMatch;
|
||||
});
|
||||
|
||||
tbody.innerHTML = '';
|
||||
if (filtered.length === 0) {
|
||||
tbody.innerHTML = '<tr><td colspan="10" style="text-align:center; padding: 3rem; color: var(--text-muted);">등록된 클라우드 서비스가 없습니다.</td></tr>';
|
||||
tbody.innerHTML = `<tr><td colspan="10" class="text-center" style="padding: 3rem; color: var(--text-muted);">${UI_TEXT.MESSAGES.NO_DATA}</td></tr>`;
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -78,29 +82,30 @@ export function renderCloudList(container: HTMLElement) {
|
||||
const tr = document.createElement('tr');
|
||||
tr.style.cursor = 'pointer';
|
||||
|
||||
const paymentBadge = asset.결제수단 === '법인카드'
|
||||
? '<span style="color:#6366f1; font-weight:600;"><i data-lucide="credit-card" style="width:14px; height:14px; vertical-align:middle; margin-right:4px;"></i>법인카드 (' + (asset.연결카드번호||'미상') + ')</span>'
|
||||
: (asset.결제수단 === '인보이스'
|
||||
const payMethod = asset[ASSET_SCHEMA.PAY_METHOD.key];
|
||||
const paymentBadge = payMethod === '법인카드'
|
||||
? `<span style="color:#6366f1; font-weight:600;"><i data-lucide="credit-card" style="width:14px; height:14px; vertical-align:middle; margin-right:4px;"></i>법인카드</span>`
|
||||
: (payMethod === '인보이스'
|
||||
? '<span style="color:#10b981; font-weight:600;"><i data-lucide="dollar-sign" style="width:14px; height:14px; vertical-align:middle; margin-right:4px;"></i>인보이스</span>'
|
||||
: '<span style="color:var(--text-muted)">미설정</span>');
|
||||
|
||||
tr.innerHTML = `
|
||||
<td style="text-align:center;">${idx+1}</td>
|
||||
<td style="font-weight:600; color:var(--primary-color)"><i data-lucide="cloud" style="width:14px; height:14px; vertical-align:middle; margin-right:4px;"></i> ${asset.플랫폼명||'미지정'}</td>
|
||||
<td style="text-align:center;">${asset.법인||''}</td>
|
||||
<td style="text-align:center;">${asset.부서||''}</td>
|
||||
<td>${asset.제품명||''}</td>
|
||||
<td>${asset.계정명||''}</td>
|
||||
<td style="text-align:center;">${paymentBadge}</td>
|
||||
<td style="text-align:center;">${asset.결제일 ? asset.결제일 + '일' : ''}</td>
|
||||
<td style="text-align:right; font-weight:600;">₩ ${asset.당월청구액 ? Number(asset.당월청구액).toLocaleString() : '0'}</td>
|
||||
<td>${asset.비고||''}</td>
|
||||
<td class="text-center">${idx+1}</td>
|
||||
<td style="font-weight:600; color:var(--primary-color)"><i data-lucide="cloud" style="width:14px; height:14px; vertical-align:middle; margin-right:4px;"></i> ${asset[ASSET_SCHEMA.PLATFORM.key]||'미지정'}</td>
|
||||
<td class="text-center">${asset[ASSET_SCHEMA.CORP.key]||''}</td>
|
||||
<td class="text-center">${asset.부서||''}</td>
|
||||
<td>${asset[ASSET_SCHEMA.PRODUCT.key]||''}</td>
|
||||
<td>${asset[ASSET_SCHEMA.ACCOUNT.key]||''}</td>
|
||||
<td class="text-center">${paymentBadge}</td>
|
||||
<td class="text-center">${asset[ASSET_SCHEMA.PAY_DAY.key] ? asset[ASSET_SCHEMA.PAY_DAY.key] + '일' : ''}</td>
|
||||
<td class="text-right" style="font-weight:600;">₩ ${asset[ASSET_SCHEMA.BILLING.key] ? Number(asset[ASSET_SCHEMA.BILLING.key]).toLocaleString() : '0'}</td>
|
||||
<td>${asset[ASSET_SCHEMA.REMARKS.key]||''}</td>
|
||||
`;
|
||||
|
||||
tr.addEventListener('click', () => openSwModal(asset, 'view'));
|
||||
tbody.appendChild(tr);
|
||||
});
|
||||
createIcons({ icons: { Cloud, CreditCard, DollarSign } });
|
||||
createIcons({ icons: { Cloud, CreditCard, DollarSign, RefreshCcw } });
|
||||
};
|
||||
|
||||
document.getElementById('filter-keyword')?.addEventListener('input', updateTable);
|
||||
|
||||
@@ -1,29 +1,31 @@
|
||||
import { state } from '../../core/state';
|
||||
import { openHwModal } from '../../components/Modal/HWModal';
|
||||
import { formatInline, sortAssets } from '../../core/utils';
|
||||
import { formatInline, createBadge, sortAssets } from '../../core/utils';
|
||||
import { ASSET_SCHEMA, UI_TEXT } from '../../core/schema';
|
||||
import { createIcons, RefreshCcw } from 'lucide';
|
||||
|
||||
/**
|
||||
* 전산비품 자산 목록 뷰
|
||||
* 라인 정렬 보정 및 헤더 통일
|
||||
*/
|
||||
export function renderEquipmentList(container: HTMLElement) {
|
||||
const fullList = sortAssets(state.masterData.equip);
|
||||
|
||||
const filterBar = document.createElement('div');
|
||||
filterBar.className = 'search-bar';
|
||||
const corps = Array.from(new Set(fullList.map(a => a.법인))).filter(Boolean).sort();
|
||||
const corps = Array.from(new Set(fullList.map(a => a[ASSET_SCHEMA.CORP.key]))).filter(Boolean).sort();
|
||||
|
||||
filterBar.innerHTML = `
|
||||
<div class="search-item flex-1">
|
||||
<label>통합 검색 (자산코드/명칭)</label>
|
||||
<label>통합 검색 (${ASSET_SCHEMA.ASSET_CODE.ui}/${ASSET_SCHEMA.MODEL.ui}/${ASSET_SCHEMA.MANAGER_MAIN.ui})</label>
|
||||
<input type="text" id="filter-keyword" placeholder="검색어를 입력하세요..." autocomplete="off">
|
||||
</div>
|
||||
<div class="search-item">
|
||||
<label>구매법인</label>
|
||||
<label>${ASSET_SCHEMA.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> 필터 초기화
|
||||
</button>
|
||||
<button id="btn-add-equip" class="btn btn-primary" style="margin-left: auto;">
|
||||
<i data-lucide="plus"></i> 자산 추가
|
||||
<i data-lucide="refresh-ccw"></i> ${UI_TEXT.ACTION.RESET_FILTER}
|
||||
</button>
|
||||
`;
|
||||
container.appendChild(filterBar);
|
||||
@@ -34,16 +36,16 @@ export function renderEquipmentList(container: HTMLElement) {
|
||||
table.innerHTML = `
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="text-align:center;">No.</th>
|
||||
<th style="text-align:center;">상태</th>
|
||||
<th style="text-align:center;">구매법인</th>
|
||||
<th style="text-align:center;">유형</th>
|
||||
<th style="text-align:center;">자산번호</th>
|
||||
<th style="text-align:center;">모델명</th>
|
||||
<th style="text-align:center;">보관위치</th>
|
||||
<th style="text-align:center;">관리자</th>
|
||||
<th style="text-align:center;">구매연월</th>
|
||||
<th style="text-align:center;">금액</th>
|
||||
<th class="text-center">No.</th>
|
||||
<th class="text-center">${ASSET_SCHEMA.STATUS.ui}</th>
|
||||
<th class="text-center">${ASSET_SCHEMA.CORP.ui}</th>
|
||||
<th class="text-center">유형</th>
|
||||
<th class="text-center">${ASSET_SCHEMA.ASSET_CODE.ui}</th>
|
||||
<th>${ASSET_SCHEMA.MODEL.ui}</th>
|
||||
<th class="text-center">${ASSET_SCHEMA.STORE_LOC.ui}</th>
|
||||
<th class="text-center">담당자(정/부)</th>
|
||||
<th class="text-center">${ASSET_SCHEMA.PURCHASE_YM.ui}</th>
|
||||
<th class="text-center">${ASSET_SCHEMA.PRICE.ui}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="dynamic-tbody"></tbody>
|
||||
@@ -61,14 +63,17 @@ export function renderEquipmentList(container: HTMLElement) {
|
||||
const corp = corpSelect ? corpSelect.value : '';
|
||||
|
||||
const filtered = fullList.filter(asset => {
|
||||
const matchKeyword = !keyword || String(asset.자산코드||'').toLowerCase().includes(keyword) || String(asset.모델명||'').toLowerCase().includes(keyword) || String(asset.현사용조직||'').toLowerCase().includes(keyword);
|
||||
const matchCorp = !corp || asset.법인 === corp;
|
||||
const matchKeyword = !keyword ||
|
||||
String(asset[ASSET_SCHEMA.ASSET_CODE.key]||'').toLowerCase().includes(keyword) ||
|
||||
String(asset[ASSET_SCHEMA.MODEL.key]||'').toLowerCase().includes(keyword) ||
|
||||
String(asset[ASSET_SCHEMA.MANAGER_MAIN.key]||'').toLowerCase().includes(keyword);
|
||||
const matchCorp = !corp || asset[ASSET_SCHEMA.CORP.key] === corp;
|
||||
return matchKeyword && matchCorp;
|
||||
});
|
||||
|
||||
tbody.innerHTML = '';
|
||||
if (filtered.length === 0) {
|
||||
tbody.innerHTML = `<tr><td colspan="10" style="text-align:center; padding: 3rem; color: var(--text-muted);">검색 결과가 없습니다.</td></tr>`;
|
||||
tbody.innerHTML = `<tr><td colspan="10" class="text-center" style="padding: 3rem; color: var(--text-muted);">${UI_TEXT.MESSAGES.NO_DATA}</td></tr>`;
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -76,32 +81,34 @@ export function renderEquipmentList(container: HTMLElement) {
|
||||
const tr = document.createElement('tr');
|
||||
tr.style.cursor = 'pointer';
|
||||
|
||||
const statusColors: Record<string, string> = {
|
||||
'대여중': '#3b82f6',
|
||||
'보관중': '#1E5149',
|
||||
'수리중': '#ef4444',
|
||||
'기타': '#6b7280'
|
||||
};
|
||||
const statusColor = statusColors[asset.현재상태 || '보관중'] || '#6b7280';
|
||||
const statusBadge = `<span style="background:${statusColor}; color:white; padding:2px 6px; border-radius:4px; font-size:0.75rem; font-weight:bold;">${asset.현재상태 || '보관중'}</span>`;
|
||||
const statusColors: Record<string, string> = { '대여중': 'primary', '보관중': 'success', '수리중': 'danger', '기타': 'muted' };
|
||||
const statusValue = asset[ASSET_SCHEMA.STATUS.key] || '보관중';
|
||||
const statusType = statusColors[statusValue] || 'muted';
|
||||
const statusBadge = `<span class="badge badge-${statusType}">${statusValue}</span>`;
|
||||
|
||||
const mainManager = asset[ASSET_SCHEMA.MANAGER_MAIN.key] || '';
|
||||
const subManager = asset[ASSET_SCHEMA.MANAGER_SUB.key] || '';
|
||||
const managerHtml = [
|
||||
mainManager ? `${createBadge('정', 'primary')} ${mainManager}` : '',
|
||||
subManager ? `${createBadge('부', 'muted')} ${subManager}` : ''
|
||||
].filter(v => v !== '').join(' / ');
|
||||
|
||||
tr.innerHTML = `
|
||||
<td style="text-align:center;">${idx + 1}</td>
|
||||
<td style="text-align:center;">${statusBadge}</td>
|
||||
<td style="text-align:center;">${asset.법인}</td>
|
||||
<td style="text-align:center;">${asset.type}</td>
|
||||
<td style="font-weight:600; color:var(--primary-color);">${asset.자산코드 || '-'}</td>
|
||||
<td>${formatInline(asset.모델명 || asset.명칭)}</td>
|
||||
<td style="text-align:center;">${asset.보관위치 || '-'}</td>
|
||||
<td style="text-align:center;">${formatInline(asset.담당자_정 || asset.관리자)}</td>
|
||||
<td style="text-align:center;">${asset.구매일 || ''}</td>
|
||||
<td style="text-align:right;">${asset.금액 || '0'}</td>
|
||||
<td class="text-center">${idx + 1}</td>
|
||||
<td class="text-center">${statusBadge}</td>
|
||||
<td class="text-center">${asset[ASSET_SCHEMA.CORP.key]}</td>
|
||||
<td class="text-center">${asset[ASSET_SCHEMA.TYPE.key]}</td>
|
||||
<td class="text-center" style="font-family: monospace;">${asset[ASSET_SCHEMA.ASSET_CODE.key] || '-'}</td>
|
||||
<td>${formatInline(asset[ASSET_SCHEMA.MODEL.key] || asset.명칭)}</td>
|
||||
<td class="text-center">${asset[ASSET_SCHEMA.STORE_LOC.key] || '-'}</td>
|
||||
<td class="text-center">${managerHtml || '-'}</td>
|
||||
<td class="text-center">${asset[ASSET_SCHEMA.PURCHASE_YM.key] || ''}</td>
|
||||
<td class="text-right">${Number(asset[ASSET_SCHEMA.PRICE.key]||0).toLocaleString()}</td>
|
||||
`;
|
||||
tr.addEventListener('click', (e) => {
|
||||
if (!(e.target as HTMLElement).closest('button')) openHwModal(asset, 'view');
|
||||
});
|
||||
tr.addEventListener('click', () => openHwModal(asset, 'view'));
|
||||
tbody.appendChild(tr);
|
||||
});
|
||||
createIcons({ icons: { RefreshCcw } });
|
||||
};
|
||||
|
||||
document.getElementById('filter-keyword')?.addEventListener('input', updateTable);
|
||||
|
||||
@@ -1,29 +1,31 @@
|
||||
import { state } from '../../core/state';
|
||||
import { openHwModal } from '../../components/Modal/HWModal';
|
||||
import { formatInline, sortAssets } from '../../core/utils';
|
||||
import { formatInline, createBadge, sortAssets } from '../../core/utils';
|
||||
import { ASSET_SCHEMA, UI_TEXT } from '../../core/schema';
|
||||
import { createIcons, RefreshCcw } from 'lucide';
|
||||
|
||||
/**
|
||||
* 모바일기기 자산 목록 뷰
|
||||
* 라인 정렬 보정 및 헤더 통일
|
||||
*/
|
||||
export function renderMobileList(container: HTMLElement) {
|
||||
const fullList = sortAssets(state.masterData.mobile);
|
||||
|
||||
const filterBar = document.createElement('div');
|
||||
filterBar.className = 'search-bar';
|
||||
const corps = Array.from(new Set(fullList.map(a => a.법인))).filter(Boolean).sort();
|
||||
const corps = Array.from(new Set(fullList.map(a => a[ASSET_SCHEMA.CORP.key]))).filter(Boolean).sort();
|
||||
|
||||
filterBar.innerHTML = `
|
||||
<div class="search-item flex-1">
|
||||
<label>통합 검색 (자산코드/명칭)</label>
|
||||
<label>통합 검색 (${ASSET_SCHEMA.ASSET_CODE.ui}/${ASSET_SCHEMA.MODEL.ui}/${ASSET_SCHEMA.MANAGER_MAIN.ui})</label>
|
||||
<input type="text" id="filter-keyword" placeholder="검색어를 입력하세요..." autocomplete="off">
|
||||
</div>
|
||||
<div class="search-item">
|
||||
<label>구매법인</label>
|
||||
<label>${ASSET_SCHEMA.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> 필터 초기화
|
||||
</button>
|
||||
<button id="btn-add-mobile" class="btn btn-primary" style="margin-left: auto;">
|
||||
<i data-lucide="plus"></i> 자산 추가
|
||||
<i data-lucide="refresh-ccw"></i> ${UI_TEXT.ACTION.RESET_FILTER}
|
||||
</button>
|
||||
`;
|
||||
container.appendChild(filterBar);
|
||||
@@ -34,21 +36,20 @@ export function renderMobileList(container: HTMLElement) {
|
||||
table.innerHTML = `
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="text-align:center;">No.</th>
|
||||
<th style="text-align:center;">상태</th>
|
||||
<th style="text-align:center;">구매법인</th>
|
||||
<th style="text-align:center;">자산코드</th>
|
||||
<th style="text-align:center;">명칭</th>
|
||||
<th style="text-align:center;">보관위치</th>
|
||||
<th style="text-align:center;">관리자</th>
|
||||
<th style="text-align:center;">구매연월</th>
|
||||
<th style="text-align:center;">금액</th>
|
||||
<th class="text-center">No.</th>
|
||||
<th class="text-center">${ASSET_SCHEMA.STATUS.ui}</th>
|
||||
<th class="text-center">${ASSET_SCHEMA.CORP.ui}</th>
|
||||
<th class="text-center">${ASSET_SCHEMA.ASSET_CODE.ui}</th>
|
||||
<th>${ASSET_SCHEMA.MODEL.ui}</th>
|
||||
<th class="text-center">${ASSET_SCHEMA.STORE_LOC.ui}</th>
|
||||
<th class="text-center">담당자(정/부)</th>
|
||||
<th class="text-center">${ASSET_SCHEMA.PURCHASE_YM.ui}</th>
|
||||
<th class="text-center">${ASSET_SCHEMA.PRICE.ui}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="dynamic-tbody"></tbody>
|
||||
`;
|
||||
|
||||
|
||||
tableWrapper.appendChild(table);
|
||||
container.appendChild(tableWrapper);
|
||||
const tbody = table.querySelector('tbody')!;
|
||||
@@ -61,14 +62,17 @@ export function renderMobileList(container: HTMLElement) {
|
||||
const corp = corpSelect ? corpSelect.value : '';
|
||||
|
||||
const filtered = fullList.filter(asset => {
|
||||
const matchKeyword = !keyword || String(asset.자산코드||'').toLowerCase().includes(keyword) || String(asset.모델명||'').toLowerCase().includes(keyword) || String(asset.현사용조직||'').toLowerCase().includes(keyword);
|
||||
const matchCorp = !corp || asset.법인 === corp;
|
||||
const matchKeyword = !keyword ||
|
||||
String(asset[ASSET_SCHEMA.ASSET_CODE.key]||'').toLowerCase().includes(keyword) ||
|
||||
String(asset[ASSET_SCHEMA.MODEL.key]||'').toLowerCase().includes(keyword) ||
|
||||
String(asset[ASSET_SCHEMA.MANAGER_MAIN.key]||'').toLowerCase().includes(keyword);
|
||||
const matchCorp = !corp || asset[ASSET_SCHEMA.CORP.key] === corp;
|
||||
return matchKeyword && matchCorp;
|
||||
});
|
||||
|
||||
tbody.innerHTML = '';
|
||||
if (filtered.length === 0) {
|
||||
tbody.innerHTML = `<tr><td colspan="10" style="text-align:center; padding: 3rem; color: var(--text-muted);">검색 결과가 없습니다.</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;
|
||||
}
|
||||
|
||||
@@ -76,31 +80,33 @@ export function renderMobileList(container: HTMLElement) {
|
||||
const tr = document.createElement('tr');
|
||||
tr.style.cursor = 'pointer';
|
||||
|
||||
const statusColors: Record<string, string> = {
|
||||
'대여중': '#3b82f6',
|
||||
'보관중': '#1E5149',
|
||||
'수리중': '#ef4444',
|
||||
'기타': '#6b7280'
|
||||
};
|
||||
const statusColor = statusColors[asset.현재상태 || '보관중'] || '#6b7280';
|
||||
const statusBadge = `<span style="background:${statusColor}; color:white; padding:2px 6px; border-radius:4px; font-size:0.75rem; font-weight:bold;">${asset.현재상태 || '보관중'}</span>`;
|
||||
const statusColors: Record<string, string> = { '대여중': 'primary', '보관중': 'success', '수리중': 'danger', '기타': 'muted' };
|
||||
const statusValue = asset[ASSET_SCHEMA.STATUS.key] || '보관중';
|
||||
const statusType = statusColors[statusValue] || 'muted';
|
||||
const statusBadge = `<span class="badge badge-${statusType}">${statusValue}</span>`;
|
||||
|
||||
const mainManager = asset[ASSET_SCHEMA.MANAGER_MAIN.key] || '';
|
||||
const subManager = asset[ASSET_SCHEMA.MANAGER_SUB.key] || '';
|
||||
const managerHtml = [
|
||||
mainManager ? `${createBadge('정', 'primary')} ${mainManager}` : '',
|
||||
subManager ? `${createBadge('부', 'muted')} ${subManager}` : ''
|
||||
].filter(v => v !== '').join(' / ');
|
||||
|
||||
tr.innerHTML = `
|
||||
<td style="text-align:center;">${idx + 1}</td>
|
||||
<td style="text-align:center;">${statusBadge}</td>
|
||||
<td style="text-align:center;">${asset.법인}</td>
|
||||
<td style="font-weight:600; color:var(--primary-color);">${asset.자산코드 || '-'}</td>
|
||||
<td>${formatInline(asset.명칭 || asset.모델명)}</td>
|
||||
<td style="text-align:center;">${asset.보관위치 || '-'}</td>
|
||||
<td style="text-align:center;">${formatInline(asset.관리자 || asset.담당자_정)}</td>
|
||||
<td style="text-align:center;">${asset.구매일 || ''}</td>
|
||||
<td style="text-align:right;">${asset.금액 || '0'}</td>
|
||||
<td class="text-center">${idx + 1}</td>
|
||||
<td class="text-center">${statusBadge}</td>
|
||||
<td class="text-center">${asset[ASSET_SCHEMA.CORP.key]}</td>
|
||||
<td class="text-center" style="font-family: monospace;">${asset[ASSET_SCHEMA.ASSET_CODE.key] || '-'}</td>
|
||||
<td>${formatInline(asset[ASSET_SCHEMA.MODEL.key] || asset.명칭)}</td>
|
||||
<td class="text-center">${asset[ASSET_SCHEMA.STORE_LOC.key] || '-'}</td>
|
||||
<td class="text-center">${managerHtml || '-'}</td>
|
||||
<td class="text-center">${asset[ASSET_SCHEMA.PURCHASE_YM.key] || ''}</td>
|
||||
<td class="text-right">${Number(asset[ASSET_SCHEMA.PRICE.key]||0).toLocaleString()}</td>
|
||||
`;
|
||||
tr.addEventListener('click', (e) => {
|
||||
if (!(e.target as HTMLElement).closest('button')) openHwModal(asset, 'view');
|
||||
});
|
||||
tr.addEventListener('click', () => openHwModal(asset, 'view'));
|
||||
tbody.appendChild(tr);
|
||||
});
|
||||
createIcons({ icons: { RefreshCcw } });
|
||||
};
|
||||
|
||||
document.getElementById('filter-keyword')?.addEventListener('input', updateTable);
|
||||
@@ -109,8 +115,7 @@ export function renderMobileList(container: HTMLElement) {
|
||||
(document.getElementById('filter-keyword') as HTMLInputElement).value = '';
|
||||
(document.getElementById('filter-corp') as HTMLSelectElement).value = '';
|
||||
updateTable();
|
||||
});
|
||||
|
||||
updateTable();
|
||||
}
|
||||
});
|
||||
|
||||
updateTable();
|
||||
}
|
||||
|
||||
@@ -1,26 +1,32 @@
|
||||
import { state } from '../../core/state';
|
||||
import { openHwModal } from '../../components/Modal/HWModal';
|
||||
import { formatInline, sortAssets } from '../../core/utils';
|
||||
import { formatInline, createBadge, sortAssets } from '../../core/utils';
|
||||
import { ASSET_SCHEMA, UI_TEXT } from '../../core/schema';
|
||||
import { createIcons, Paperclip, RefreshCcw } from 'lucide';
|
||||
|
||||
/**
|
||||
* PC 자산 목록 뷰
|
||||
* 담당자(부) 추가 및 정렬 보정
|
||||
*/
|
||||
export function renderPcList(container: HTMLElement) {
|
||||
const fullList = sortAssets(state.masterData.pc);
|
||||
|
||||
const filterBar = document.createElement('div');
|
||||
filterBar.className = 'search-bar';
|
||||
const corps = Array.from(new Set(fullList.map(a => a.법인))).filter(Boolean).sort();
|
||||
|
||||
const corps = Array.from(new Set(fullList.map(a => a[ASSET_SCHEMA.CORP.key]))).filter(Boolean).sort();
|
||||
|
||||
filterBar.innerHTML = `
|
||||
<div class="search-item flex-1">
|
||||
<label>통합 검색 (자산코드/사용자)</label>
|
||||
<label>통합 검색 (${ASSET_SCHEMA.ASSET_CODE.ui}/${ASSET_SCHEMA.USER.ui}/${ASSET_SCHEMA.MANAGER_MAIN.ui})</label>
|
||||
<input type="text" id="filter-keyword" placeholder="검색어를 입력하세요..." autocomplete="off">
|
||||
</div>
|
||||
<div class="search-item">
|
||||
<label>구매법인</label>
|
||||
<label>${ASSET_SCHEMA.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> 필터 초기화
|
||||
<i data-lucide="refresh-ccw"></i> ${UI_TEXT.ACTION.RESET_FILTER}
|
||||
</button>
|
||||
`;
|
||||
container.appendChild(filterBar);
|
||||
@@ -28,11 +34,30 @@ export function renderPcList(container: HTMLElement) {
|
||||
const tableWrapper = document.createElement('div');
|
||||
tableWrapper.className = 'table-container';
|
||||
const table = document.createElement('table');
|
||||
table.innerHTML = `<thead><tr><th>No</th><th>구매법인</th><th>현 사용조직</th><th>자산코드</th><th>사용자</th><th>위치</th><th>CPU</th><th>RAM</th><th>Storage</th><th>구매연월</th><th>금액</th><th>품의서</th><th>관리</th></tr></thead><tbody id="dynamic-tbody"></tbody>`;
|
||||
table.innerHTML = `
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="text-align:center;">No</th>
|
||||
<th style="text-align:center;">${ASSET_SCHEMA.CORP.ui}</th>
|
||||
<th style="text-align:center;">${ASSET_SCHEMA.ORG.ui}</th>
|
||||
<th style="text-align:center;">${ASSET_SCHEMA.ASSET_CODE.ui}</th>
|
||||
<th style="text-align:center;">${ASSET_SCHEMA.USER.ui}</th>
|
||||
<th style="text-align:center;">${ASSET_SCHEMA.LOCATION.ui}</th>
|
||||
<th style="text-align:center;">담당자(정/부)</th>
|
||||
<th style="text-align:center;">${ASSET_SCHEMA.MAINBOARD.ui}</th>
|
||||
<th style="text-align:center;">${ASSET_SCHEMA.CPU.ui}</th>
|
||||
<th style="text-align:center;">${ASSET_SCHEMA.RAM.ui}</th>
|
||||
<th style="text-align:center;">Storage</th>
|
||||
<th style="text-align:center;">${ASSET_SCHEMA.PURCHASE_YM.ui}</th>
|
||||
<th style="text-align:center;">${ASSET_SCHEMA.PRICE.ui}</th>
|
||||
<th style="text-align:center;">${ASSET_SCHEMA.DOC_NAME.ui}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="dynamic-tbody"></tbody>
|
||||
`;
|
||||
|
||||
tableWrapper.appendChild(table);
|
||||
container.appendChild(tableWrapper);
|
||||
|
||||
const tbody = table.querySelector('tbody')!;
|
||||
|
||||
const updateTable = () => {
|
||||
@@ -43,41 +68,54 @@ export function renderPcList(container: HTMLElement) {
|
||||
const corp = corpSelect ? corpSelect.value : '';
|
||||
|
||||
const filtered = fullList.filter(asset => {
|
||||
const matchKeyword = !keyword || String(asset.자산코드||'').toLowerCase().includes(keyword) || String(asset.사용자||'').toLowerCase().includes(keyword) || String(asset.현사용조직||'').toLowerCase().includes(keyword);
|
||||
const matchCorp = !corp || asset.법인 === corp;
|
||||
const matchKeyword = !keyword ||
|
||||
String(asset[ASSET_SCHEMA.ASSET_CODE.key]||'').toLowerCase().includes(keyword) ||
|
||||
String(asset[ASSET_SCHEMA.USER.key]||'').toLowerCase().includes(keyword) ||
|
||||
String(asset[ASSET_SCHEMA.ORG.key]||'').toLowerCase().includes(keyword) ||
|
||||
String(asset[ASSET_SCHEMA.MANAGER_MAIN.key]||'').toLowerCase().includes(keyword);
|
||||
const matchCorp = !corp || asset[ASSET_SCHEMA.CORP.key] === corp;
|
||||
return matchKeyword && matchCorp;
|
||||
});
|
||||
|
||||
tbody.innerHTML = '';
|
||||
if (filtered.length === 0) {
|
||||
tbody.innerHTML = `<tr><td colspan="13" style="text-align:center; padding: 3rem; color: var(--text-muted);">검색 결과가 없습니다.</td></tr>`;
|
||||
tbody.innerHTML = `<tr><td colspan="14" style="text-align:center; 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 storage = [asset.SSD1, asset.SSD2, asset.HDD1].filter(v => v).join(' / ');
|
||||
|
||||
const storage = [asset[ASSET_SCHEMA.STORAGE1.key], asset[ASSET_SCHEMA.STORAGE2.key]].filter(v => v).join(' / ');
|
||||
|
||||
const mainManager = asset[ASSET_SCHEMA.MANAGER_MAIN.key] || '';
|
||||
const subManager = asset[ASSET_SCHEMA.MANAGER_SUB.key] || '';
|
||||
const managerHtml = [
|
||||
mainManager ? `${createBadge('정', 'primary')} ${mainManager}` : '',
|
||||
subManager ? `${createBadge('부', 'muted')} ${subManager}` : ''
|
||||
].filter(v => v !== '').join(' / ');
|
||||
|
||||
tr.innerHTML = `
|
||||
<td>${idx+1}</td>
|
||||
<td>${asset.법인}</td>
|
||||
<td>${asset.현사용조직||''}</td>
|
||||
<td>${asset.자산코드}</td>
|
||||
<td>${asset.사용자||''}</td>
|
||||
<td>${asset.위치||''}</td>
|
||||
<td>${asset.CPU||''}</td>
|
||||
<td>${asset.RAM||''}</td>
|
||||
<td>${formatInline(storage)}</td>
|
||||
<td>${asset.구매연월 || asset.구매일 || ''}</td>
|
||||
<td>${asset.금액||''}</td>
|
||||
<td style="text-align:center;">${asset.품의서명 ? '<i data-lucide="paperclip" class="text-primary"></i>' : '-'}</td>
|
||||
<td><button class="btn btn-outline btn-sm">수정</button></td>
|
||||
<td style="text-align:center;">${idx+1}</td>
|
||||
<td style="text-align:center;">${asset[ASSET_SCHEMA.CORP.key]}</td>
|
||||
<td style="text-align:center;">${asset[ASSET_SCHEMA.ORG.key]||'-'}</td>
|
||||
<td style="text-align:center;">${asset[ASSET_SCHEMA.ASSET_CODE.key]}</td>
|
||||
<td style="text-align:center;">${asset[ASSET_SCHEMA.USER.key]||''}</td>
|
||||
<td style="text-align:center;">${asset[ASSET_SCHEMA.LOCATION.key]||''}</td>
|
||||
<td style="text-align:center;">${managerHtml || '-'}</td>
|
||||
<td style="text-align:center;">${asset[ASSET_SCHEMA.MAINBOARD.key]||'-'}</td>
|
||||
<td style="text-align:center;">${asset[ASSET_SCHEMA.CPU.key]||''}</td>
|
||||
<td style="text-align:center;">${asset[ASSET_SCHEMA.RAM.key]||''}</td>
|
||||
<td style="text-align:center;">${formatInline(storage)}</td>
|
||||
<td style="text-align:center;">${asset[ASSET_SCHEMA.PURCHASE_YM.key] || ''}</td>
|
||||
<td style="text-align:right;">${Number(asset[ASSET_SCHEMA.PRICE.key]||0).toLocaleString()}</td>
|
||||
<td style="text-align:center;">${asset[ASSET_SCHEMA.DOC_NAME.key] ? '<i data-lucide="paperclip" class="text-primary"></i>' : '-'}</td>
|
||||
`;
|
||||
tr.addEventListener('click', (e) => { if (!(e.target as HTMLElement).closest('button')) openHwModal(asset, 'view'); });
|
||||
tr.addEventListener('click', () => openHwModal(asset, 'view'));
|
||||
tbody.appendChild(tr);
|
||||
});
|
||||
createIcons({ icons: { Paperclip } });
|
||||
createIcons({ icons: { Paperclip, RefreshCcw } });
|
||||
};
|
||||
|
||||
document.getElementById('filter-keyword')?.addEventListener('input', updateTable);
|
||||
|
||||
@@ -1,31 +1,37 @@
|
||||
import { state } from '../../core/state';
|
||||
import { openHwModal } from '../../components/Modal/HWModal';
|
||||
import { formatInline, createBadge, sortAssets } from '../../core/utils';
|
||||
import { createIcons, RefreshCcw, Edit2 } from 'lucide';
|
||||
import { ASSET_SCHEMA, UI_TEXT } from '../../core/schema';
|
||||
import { createIcons, RefreshCcw } from 'lucide';
|
||||
|
||||
/**
|
||||
* 서버 자산 목록 뷰
|
||||
* 라인 정렬 보정 및 헤더 통일
|
||||
*/
|
||||
export function renderServerList(container: HTMLElement) {
|
||||
const fullList = sortAssets(state.masterData.server);
|
||||
|
||||
const filterBar = document.createElement('div');
|
||||
filterBar.className = 'search-bar';
|
||||
const corps = Array.from(new Set(fullList.map(a => a.법인))).filter(Boolean).sort();
|
||||
const orgUnits = Array.from(new Set(fullList.map(a => a.현사용조직))).filter(Boolean).sort();
|
||||
|
||||
const corps = Array.from(new Set(fullList.map(a => a[ASSET_SCHEMA.CORP.key]))).filter(Boolean).sort();
|
||||
const orgUnits = Array.from(new Set(fullList.map(a => a[ASSET_SCHEMA.ORG.key]))).filter(Boolean).sort();
|
||||
|
||||
filterBar.innerHTML = `
|
||||
<div class="search-item flex-1">
|
||||
<label>통합 검색 (자산번호/조직/모델명)</label>
|
||||
<label>통합 검색 (${ASSET_SCHEMA.ASSET_CODE.ui}/${ASSET_SCHEMA.ORG.ui}/${ASSET_SCHEMA.MODEL.ui})</label>
|
||||
<input type="text" id="filter-keyword" placeholder="검색어를 입력하세요..." autocomplete="off">
|
||||
</div>
|
||||
<div class="search-item">
|
||||
<label>구매법인</label>
|
||||
<label>${ASSET_SCHEMA.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>현 사용조직</label>
|
||||
<label>${ASSET_SCHEMA.ORG.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> 필터 초기화
|
||||
<i data-lucide="refresh-ccw"></i> ${UI_TEXT.ACTION.RESET_FILTER}
|
||||
</button>
|
||||
`;
|
||||
container.appendChild(filterBar);
|
||||
@@ -33,7 +39,21 @@ export function renderServerList(container: HTMLElement) {
|
||||
const tableWrapper = document.createElement('div');
|
||||
tableWrapper.className = 'table-container';
|
||||
const table = document.createElement('table');
|
||||
table.innerHTML = `<thead><tr><th>No</th><th>구매법인</th><th>현 사용조직</th><th>자산번호</th><th>용도</th><th>상세</th><th>설치위치</th><th>담당자</th><th>관리</th></tr></thead><tbody id="dynamic-tbody"></tbody>`;
|
||||
table.innerHTML = `
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-center">No</th>
|
||||
<th class="text-center">${ASSET_SCHEMA.CORP.ui}</th>
|
||||
<th class="text-center">${ASSET_SCHEMA.ORG.ui}</th>
|
||||
<th class="text-center">${ASSET_SCHEMA.ASSET_CODE.ui}</th>
|
||||
<th>용도</th>
|
||||
<th>상세</th>
|
||||
<th class="text-center">${ASSET_SCHEMA.LOCATION.ui}</th>
|
||||
<th class="text-center">담당자(정/부)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="dynamic-tbody"></tbody>
|
||||
`;
|
||||
|
||||
tableWrapper.appendChild(table);
|
||||
container.appendChild(tableWrapper);
|
||||
@@ -49,15 +69,18 @@ export function renderServerList(container: HTMLElement) {
|
||||
const orgUnit = orgSelect ? orgSelect.value : '';
|
||||
|
||||
const filtered = fullList.filter(asset => {
|
||||
const matchKeyword = !keyword || String(asset.자산코드||'').toLowerCase().includes(keyword) || String(asset.현사용조직||'').toLowerCase().includes(keyword) || String(asset.모델명||'').toLowerCase().includes(keyword);
|
||||
const matchCorp = !corp || asset.법인 === corp;
|
||||
const matchOrg = !orgUnit || asset.현사용조직 === orgUnit;
|
||||
const matchKeyword = !keyword ||
|
||||
String(asset[ASSET_SCHEMA.ASSET_CODE.key]||'').toLowerCase().includes(keyword) ||
|
||||
String(asset[ASSET_SCHEMA.ORG.key]||'').toLowerCase().includes(keyword) ||
|
||||
String(asset[ASSET_SCHEMA.MODEL.key]||'').toLowerCase().includes(keyword);
|
||||
const matchCorp = !corp || asset[ASSET_SCHEMA.CORP.key] === corp;
|
||||
const matchOrg = !orgUnit || asset[ASSET_SCHEMA.ORG.key] === orgUnit;
|
||||
return matchKeyword && matchCorp && matchOrg;
|
||||
});
|
||||
|
||||
tbody.innerHTML = '';
|
||||
if (filtered.length === 0) {
|
||||
tbody.innerHTML = `<tr><td colspan="9" style="text-align:center; padding: 3rem; color: var(--text-muted);">검색 결과가 없습니다.</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;
|
||||
}
|
||||
|
||||
@@ -65,27 +88,24 @@ export function renderServerList(container: HTMLElement) {
|
||||
const tr = document.createElement('tr');
|
||||
tr.style.cursor = 'pointer';
|
||||
|
||||
const mainManager = asset.담당자_정 || '';
|
||||
const subManager = asset.담당자_부 || '';
|
||||
const mainManager = asset[ASSET_SCHEMA.MANAGER_MAIN.key] || '';
|
||||
const subManager = asset[ASSET_SCHEMA.MANAGER_SUB.key] || '';
|
||||
const managerHtml = [
|
||||
mainManager ? `${createBadge('정', 'primary')} ${mainManager}` : '',
|
||||
subManager ? `${createBadge('부', 'muted')} ${subManager}` : ''
|
||||
].filter(v => v !== '').join(' / ');
|
||||
|
||||
tr.innerHTML = `
|
||||
<td style="text-align:center;">${idx+1}</td>
|
||||
<td style="text-align:center;">${asset.법인}</td>
|
||||
<td style="text-align:center;">${asset.현사용조직||'-'}</td>
|
||||
<td>${asset.자산코드}</td>
|
||||
<td class="text-center">${idx+1}</td>
|
||||
<td class="text-center">${asset[ASSET_SCHEMA.CORP.key]}</td>
|
||||
<td class="text-center">${asset[ASSET_SCHEMA.ORG.key]||'-'}</td>
|
||||
<td class="text-center">${asset[ASSET_SCHEMA.ASSET_CODE.key]}</td>
|
||||
<td>${formatInline(asset.용도)}</td>
|
||||
<td>${formatInline(asset.상세)}</td>
|
||||
<td>${formatInline(asset.위치)}</td>
|
||||
<td>${managerHtml}</td>
|
||||
<td style="text-align:center;">
|
||||
<button class="btn-icon" title="수정"><i data-lucide="edit-2"></i></button>
|
||||
</td>
|
||||
<td class="text-center">${formatInline(asset[ASSET_SCHEMA.LOCATION.key])}</td>
|
||||
<td class="text-center">${managerHtml || '-'}</td>
|
||||
`;
|
||||
tr.addEventListener('click', (e) => { if (!(e.target as HTMLElement).closest('button')) openHwModal(asset, 'view'); });
|
||||
tr.addEventListener('click', () => openHwModal(asset, 'view'));
|
||||
tbody.appendChild(tr);
|
||||
});
|
||||
};
|
||||
@@ -101,5 +121,5 @@ export function renderServerList(container: HTMLElement) {
|
||||
});
|
||||
|
||||
updateTable();
|
||||
createIcons({ icons: { RefreshCcw, Edit2 } });
|
||||
createIcons({ icons: { RefreshCcw } });
|
||||
}
|
||||
|
||||
@@ -1,31 +1,37 @@
|
||||
import { state } from '../../core/state';
|
||||
import { openHwModal } from '../../components/Modal/HWModal';
|
||||
import { formatInline, createBadge, sortAssets } from '../../core/utils';
|
||||
import { ASSET_SCHEMA, UI_TEXT } from '../../core/schema';
|
||||
import { createIcons, RefreshCcw } from 'lucide';
|
||||
|
||||
/**
|
||||
* 스토리지 자산 목록 뷰
|
||||
* 라인 정렬 보정 및 헤더 통일
|
||||
*/
|
||||
export function renderStorageList(container: HTMLElement) {
|
||||
const fullList = sortAssets(state.masterData.storage);
|
||||
|
||||
const filterBar = document.createElement('div');
|
||||
filterBar.className = 'search-bar';
|
||||
const corps = Array.from(new Set(fullList.map(a => a.법인))).filter(Boolean).sort();
|
||||
const orgUnits = Array.from(new Set(fullList.map(a => a.현사용조직))).filter(Boolean).sort();
|
||||
|
||||
const corps = Array.from(new Set(fullList.map(a => a[ASSET_SCHEMA.CORP.key]))).filter(Boolean).sort();
|
||||
const orgUnits = Array.from(new Set(fullList.map(a => a[ASSET_SCHEMA.ORG.key]))).filter(Boolean).sort();
|
||||
|
||||
filterBar.innerHTML = `
|
||||
<div class="search-item flex-1">
|
||||
<label>통합 검색 (자산번호/조직/모델명)</label>
|
||||
<label>통합 검색 (${ASSET_SCHEMA.ASSET_CODE.ui}/${ASSET_SCHEMA.ORG.ui})</label>
|
||||
<input type="text" id="filter-keyword" placeholder="검색어를 입력하세요..." autocomplete="off">
|
||||
</div>
|
||||
<div class="search-item">
|
||||
<label>구매법인</label>
|
||||
<label>${ASSET_SCHEMA.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>현 사용조직</label>
|
||||
<label>${ASSET_SCHEMA.ORG.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> 필터 초기화
|
||||
<i data-lucide="refresh-ccw"></i> ${UI_TEXT.ACTION.RESET_FILTER}
|
||||
</button>
|
||||
`;
|
||||
container.appendChild(filterBar);
|
||||
@@ -33,7 +39,21 @@ export function renderStorageList(container: HTMLElement) {
|
||||
const tableWrapper = document.createElement('div');
|
||||
tableWrapper.className = 'table-container';
|
||||
const table = document.createElement('table');
|
||||
table.innerHTML = `<thead><tr><th>No</th><th>구매법인</th><th>현 사용조직</th><th>자산번호</th><th>용도</th><th>상세</th><th>설치위치</th><th>담당자</th><th>모델명</th><th>Storage</th><th>관리</th></tr></thead><tbody id="dynamic-tbody"></tbody>`;
|
||||
table.innerHTML = `
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-center">No</th>
|
||||
<th class="text-center">${ASSET_SCHEMA.CORP.ui}</th>
|
||||
<th class="text-center">${ASSET_SCHEMA.ORG.ui}</th>
|
||||
<th class="text-center">${ASSET_SCHEMA.ASSET_CODE.ui}</th>
|
||||
<th>용도</th>
|
||||
<th>상세</th>
|
||||
<th class="text-center">${ASSET_SCHEMA.LOCATION.ui}</th>
|
||||
<th class="text-center">담당자(정/부)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="dynamic-tbody"></tbody>
|
||||
`;
|
||||
|
||||
tableWrapper.appendChild(table);
|
||||
container.appendChild(tableWrapper);
|
||||
@@ -49,15 +69,17 @@ export function renderStorageList(container: HTMLElement) {
|
||||
const orgUnit = orgSelect ? orgSelect.value : '';
|
||||
|
||||
const filtered = fullList.filter(asset => {
|
||||
const matchKeyword = !keyword || String(asset.자산코드||'').toLowerCase().includes(keyword) || String(asset.현사용조직||'').toLowerCase().includes(keyword) || String(asset.모델명||'').toLowerCase().includes(keyword);
|
||||
const matchCorp = !corp || asset.법인 === corp;
|
||||
const matchOrg = !orgUnit || asset.현사용조직 === orgUnit;
|
||||
const matchKeyword = !keyword ||
|
||||
String(asset[ASSET_SCHEMA.ASSET_CODE.key]||'').toLowerCase().includes(keyword) ||
|
||||
String(asset[ASSET_SCHEMA.ORG.key]||'').toLowerCase().includes(keyword);
|
||||
const matchCorp = !corp || asset[ASSET_SCHEMA.CORP.key] === corp;
|
||||
const matchOrg = !orgUnit || asset[ASSET_SCHEMA.ORG.key] === orgUnit;
|
||||
return matchKeyword && matchCorp && matchOrg;
|
||||
});
|
||||
|
||||
tbody.innerHTML = '';
|
||||
if (filtered.length === 0) {
|
||||
tbody.innerHTML = `<tr><td colspan="11" style="text-align:center; padding: 3rem; color: var(--text-muted);">검색 결과가 없습니다.</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;
|
||||
}
|
||||
|
||||
@@ -65,26 +87,24 @@ export function renderStorageList(container: HTMLElement) {
|
||||
const tr = document.createElement('tr');
|
||||
tr.style.cursor = 'pointer';
|
||||
|
||||
const mainManager = asset.담당자_정 || asset.관리자 || '';
|
||||
const subManager = asset.담당자_부 || '';
|
||||
const managerHtml = [mainManager ? `${createBadge('정', '#1E5149')} ${mainManager}` : '', subManager ? `${createBadge('부', '#9CA3AF')} ${subManager}` : ''].filter(v => v !== '').join(' / ');
|
||||
const mainManager = asset[ASSET_SCHEMA.MANAGER_MAIN.key] || '';
|
||||
const subManager = asset[ASSET_SCHEMA.MANAGER_SUB.key] || '';
|
||||
const managerHtml = [
|
||||
mainManager ? `${createBadge('정', 'primary')} ${mainManager}` : '',
|
||||
subManager ? `${createBadge('부', 'muted')} ${subManager}` : ''
|
||||
].filter(v => v !== '').join(' / ');
|
||||
|
||||
const storage = [asset.SSD1, asset.SSD2, asset.용량].filter(v => v).join(' / ');
|
||||
|
||||
tr.innerHTML = `
|
||||
<td>${idx+1}</td>
|
||||
<td>${asset.법인}</td>
|
||||
<td>${asset.현사용조직||''}</td>
|
||||
<td>${asset.자산코드}</td>
|
||||
<td class="text-center">${idx+1}</td>
|
||||
<td class="text-center">${asset[ASSET_SCHEMA.CORP.key]}</td>
|
||||
<td class="text-center">${asset[ASSET_SCHEMA.ORG.key]||'-'}</td>
|
||||
<td class="text-center">${asset[ASSET_SCHEMA.ASSET_CODE.key]}</td>
|
||||
<td>${formatInline(asset.용도)}</td>
|
||||
<td>${formatInline(asset.상세)}</td>
|
||||
<td>${formatInline(asset.위치)}</td>
|
||||
<td>${managerHtml}</td>
|
||||
<td>${asset.모델명||''}</td>
|
||||
<td>${formatInline(storage)}</td>
|
||||
<td><button class="btn btn-outline btn-sm">수정</button></td>
|
||||
<td class="text-center">${formatInline(asset[ASSET_SCHEMA.LOCATION.key])}</td>
|
||||
<td class="text-center">${managerHtml || '-'}</td>
|
||||
`;
|
||||
tr.addEventListener('click', (e) => { if (!(e.target as HTMLElement).closest('button')) openHwModal(asset, 'view'); });
|
||||
tr.addEventListener('click', () => openHwModal(asset, 'view'));
|
||||
tbody.appendChild(tr);
|
||||
});
|
||||
};
|
||||
@@ -100,4 +120,5 @@ export function renderStorageList(container: HTMLElement) {
|
||||
});
|
||||
|
||||
updateTable();
|
||||
createIcons({ icons: { RefreshCcw } });
|
||||
}
|
||||
|
||||
@@ -1,11 +1,14 @@
|
||||
import { state } from '../../core/state';
|
||||
import { openSwModal } from '../../components/Modal/SWModal';
|
||||
import { openSwUserModal } from '../../components/Modal/SWUserModal';
|
||||
import { sortAssets } from '../../core/utils';
|
||||
import { CORP_LIST } from '../../components/Modal/SharedData';
|
||||
import { generateOptionsHTML } from '../../components/Modal/ModalUtils';
|
||||
import { createIcons, Edit2, Users, RefreshCcw } from 'lucide';
|
||||
import { ASSET_SCHEMA, UI_TEXT } from '../../core/schema';
|
||||
import { createIcons, RefreshCcw } from 'lucide';
|
||||
|
||||
/**
|
||||
* 소프트웨어(구독/영구) 자산 목록 뷰
|
||||
*/
|
||||
export function renderSwList(container: HTMLElement) {
|
||||
const isSub = state.activeSubTab === '구독SW';
|
||||
const fullList = sortAssets(isSub ? state.masterData.subSw : state.masterData.permSw);
|
||||
@@ -14,7 +17,7 @@ export function renderSwList(container: HTMLElement) {
|
||||
filterBar.className = 'search-bar';
|
||||
filterBar.innerHTML = `
|
||||
<div class="search-item flex-1">
|
||||
<label>통합 검색 (제품명/부서)</label>
|
||||
<label>통합 검색 (${ASSET_SCHEMA.PRODUCT.ui}/부서)</label>
|
||||
<input type="text" id="filter-keyword" placeholder="검색어를 입력하세요..." autocomplete="off">
|
||||
</div>
|
||||
<div class="search-item">
|
||||
@@ -28,11 +31,11 @@ export function renderSwList(container: HTMLElement) {
|
||||
</select>
|
||||
</div>
|
||||
<div class="search-item">
|
||||
<label>구매법인</label>
|
||||
<label>${ASSET_SCHEMA.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> 필터 초기화
|
||||
<i data-lucide="refresh-ccw"></i> ${UI_TEXT.ACTION.RESET_FILTER}
|
||||
</button>
|
||||
`;
|
||||
container.appendChild(filterBar);
|
||||
@@ -46,15 +49,14 @@ export function renderSwList(container: HTMLElement) {
|
||||
<th style="text-align:center;">No.</th>
|
||||
<th style="text-align:center;">상태</th>
|
||||
<th style="text-align:center;">분야</th>
|
||||
<th style="text-align:center;">구매법인</th>
|
||||
<th style="text-align:center;">${ASSET_SCHEMA.CORP.ui}</th>
|
||||
<th style="text-align:center;">부서</th>
|
||||
<th style="text-align:center;">제품명</th>
|
||||
<th style="text-align:center;">구매연월</th>
|
||||
${isSub ? '<th style="text-align:center;">구독일</th>' : ''}
|
||||
<th style="text-align:center;">금액</th>
|
||||
<th style="text-align:center;">수량</th>
|
||||
<th style="text-align:center;">${ASSET_SCHEMA.PRODUCT.ui}</th>
|
||||
<th style="text-align:center;">${ASSET_SCHEMA.PURCHASE_YM.ui}</th>
|
||||
${isSub ? `<th style="text-align:center;">${ASSET_SCHEMA.EXPIRY.ui}</th>` : ''}
|
||||
<th style="text-align:center;">${ASSET_SCHEMA.PRICE.ui}</th>
|
||||
<th style="text-align:center;">${ASSET_SCHEMA.QTY.ui}</th>
|
||||
<th style="text-align:center;">사용가능</th>
|
||||
<th style="text-align:center;">관리</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="dynamic-tbody"></tbody>
|
||||
@@ -74,28 +76,28 @@ export function renderSwList(container: HTMLElement) {
|
||||
const corp = corpSelect ? corpSelect.value : '';
|
||||
|
||||
const filtered = fullList.filter(asset => {
|
||||
const matchKeyword = !keyword || (asset.제품명 || '').toLowerCase().includes(keyword) || (asset.부서 || '').toLowerCase().includes(keyword);
|
||||
const matchKeyword = !keyword || (asset[ASSET_SCHEMA.PRODUCT.key] || '').toLowerCase().includes(keyword) || (asset.부서 || '').toLowerCase().includes(keyword);
|
||||
const matchField = !field || asset.분야 === field;
|
||||
const matchCorp = !corp || asset.법인 === corp;
|
||||
const matchCorp = !corp || asset[ASSET_SCHEMA.CORP.key] === corp;
|
||||
return matchKeyword && matchField && matchCorp;
|
||||
});
|
||||
|
||||
tbody.innerHTML = '';
|
||||
if (filtered.length === 0) {
|
||||
tbody.innerHTML = `<tr><td colspan="${isSub ? 12 : 11}" style="text-align:center; padding: 3rem; color: var(--text-muted);">검색 결과가 없습니다.</td></tr>`;
|
||||
tbody.innerHTML = `<tr><td colspan="${isSub ? 11 : 10}" style="text-align:center; padding: 3rem; color: var(--text-muted);">${UI_TEXT.MESSAGES.NO_DATA}</td></tr>`;
|
||||
return;
|
||||
}
|
||||
|
||||
filtered.forEach((asset, idx) => {
|
||||
const assigned = state.masterData.swUsers.filter(u => u.sw_id === asset.id).length;
|
||||
const qty = typeof asset.수량 === 'number' ? asset.수량 : parseInt(asset.수량||'0', 10);
|
||||
const qty = typeof asset[ASSET_SCHEMA.QTY.key] === 'number' ? asset[ASSET_SCHEMA.QTY.key] : parseInt(asset[ASSET_SCHEMA.QTY.key]||'0', 10);
|
||||
const avail = qty - assigned;
|
||||
|
||||
let statusHtml = '';
|
||||
let statusBadge = '';
|
||||
if (isSub) {
|
||||
let isExpired = false;
|
||||
if (asset.구독일) {
|
||||
const parts = asset.구독일.split('~');
|
||||
if (asset[ASSET_SCHEMA.EXPIRY.key]) {
|
||||
const parts = asset[ASSET_SCHEMA.EXPIRY.key].split('~');
|
||||
const endDateStr = parts[parts.length - 1].trim().replace(/\./g, '-');
|
||||
const endDate = new Date(endDateStr);
|
||||
if (!isNaN(endDate.getTime())) {
|
||||
@@ -103,11 +105,9 @@ export function renderSwList(container: HTMLElement) {
|
||||
if (endDate < new Date()) isExpired = true;
|
||||
}
|
||||
}
|
||||
if (isExpired) statusHtml = `<span style="background: var(--danger, #ef4444); color: white; padding: 2px 6px; border-radius: 4px; font-size: 0.75rem; font-weight: bold; white-space: nowrap;">만료</span>`;
|
||||
else statusHtml = `<span style="background: var(--primary-color, #1E5149); color: white; padding: 2px 6px; border-radius: 4px; font-size: 0.75rem; font-weight: bold; white-space: nowrap;">사용중</span>`;
|
||||
statusBadge = isExpired ? `<span class="badge badge-danger">만료</span>` : `<span class="badge badge-primary">사용중</span>`;
|
||||
} else {
|
||||
if (asset.유지보수여부) statusHtml = `<span style="background: #3b82f6; color: white; padding: 2px 6px; border-radius: 4px; font-size: 0.75rem; font-weight: bold; white-space: nowrap;">유효</span>`;
|
||||
else statusHtml = `<span style="background: #6b7280; color: white; padding: 2px 6px; border-radius: 4px; font-size: 0.75rem; font-weight: bold; white-space: nowrap;">없음</span>`;
|
||||
statusBadge = asset.유지보수여부 ? `<span class="badge badge-success">유효</span>` : `<span class="badge badge-muted">없음</span>`;
|
||||
}
|
||||
|
||||
const tr = document.createElement('tr');
|
||||
@@ -115,35 +115,22 @@ export function renderSwList(container: HTMLElement) {
|
||||
|
||||
tr.innerHTML = `
|
||||
<td style="text-align:center;">${idx+1}</td>
|
||||
<td style="text-align:center;">${statusHtml}</td>
|
||||
<td>${asset.분야||''}</td>
|
||||
<td>${asset.법인}</td>
|
||||
<td>${asset.부서||''}</td>
|
||||
<td>${asset.제품명}</td>
|
||||
<td style="text-align:center;">${asset.구매일||''}</td>
|
||||
${isSub ? `<td style="text-align:center;">${asset.구독일||''}</td>` : ''}
|
||||
<td style="text-align:right;">${asset.금액||'0'}</td>
|
||||
<td style="text-align:center;">${statusBadge}</td>
|
||||
<td style="text-align:center;">${asset.분야||''}</td>
|
||||
<td style="text-align:center;">${asset[ASSET_SCHEMA.CORP.key]}</td>
|
||||
<td style="text-align:center;">${asset.부서||''}</td>
|
||||
<td>${asset[ASSET_SCHEMA.PRODUCT.key]}</td>
|
||||
<td style="text-align:center;">${asset[ASSET_SCHEMA.PURCHASE_YM.key]||''}</td>
|
||||
${isSub ? `<td style="text-align:center;">${asset[ASSET_SCHEMA.EXPIRY.key]||''}</td>` : ''}
|
||||
<td style="text-align:right;">${Number(asset[ASSET_SCHEMA.PRICE.key]||0).toLocaleString()}</td>
|
||||
<td style="text-align:center;">${qty}</td>
|
||||
<td style="text-align:center;"><strong style="color: ${avail > 0 ? 'var(--primary-color)' : 'var(--danger)'}">${avail}</strong></td>
|
||||
<td style="display:flex; justify-content:center; align-items:center; gap:0.5rem;">
|
||||
<button type="button" class="btn-icon btn-edit" title="수정" style="color: var(--text-muted);"><i data-lucide="edit-2"></i></button>
|
||||
<button type="button" class="btn-icon btn-users" title="사용자 관리" style="color: var(--primary-color);"><i data-lucide="users"></i></button>
|
||||
</td>
|
||||
`;
|
||||
|
||||
tr.addEventListener('click', (e) => {
|
||||
if (!(e.target as HTMLElement).closest('button')) {
|
||||
openSwModal(asset, 'view');
|
||||
}
|
||||
});
|
||||
tr.querySelector('.btn-edit')?.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
openSwModal(asset, 'edit');
|
||||
});
|
||||
tr.querySelector('.btn-users')?.addEventListener('click', (e) => { e.stopPropagation(); openSwUserModal(asset); });
|
||||
tr.addEventListener('click', () => openSwModal(asset, 'view'));
|
||||
tbody.appendChild(tr);
|
||||
});
|
||||
createIcons({ icons: { Edit2, Users, RefreshCcw } });
|
||||
createIcons({ icons: { RefreshCcw } });
|
||||
};
|
||||
|
||||
document.getElementById('filter-keyword')?.addEventListener('input', updateTable);
|
||||
|
||||
@@ -34,11 +34,16 @@ export function renderSWTable(mainContent: HTMLElement) {
|
||||
} else if (state.activeCategory === 'sw') {
|
||||
if (tab === '구독SW' || tab === '영구SW') {
|
||||
renderSwList(container);
|
||||
} else if (tab === '클라우드') {
|
||||
renderCloudList(container);
|
||||
} else {
|
||||
container.innerHTML = `<div style="padding:2rem; color:var(--text-muted);">"${tab}" 탭에 대한 소프트웨어 리스트 뷰가 정의되지 않았습니다.</div>`;
|
||||
}
|
||||
} else if (state.activeCategory === 'ops') {
|
||||
// 운영 서비스 관련 탭 처리
|
||||
if (['도메인', '메일', '메신저', '청구비용'].includes(tab)) {
|
||||
renderCloudList(container); // 일단 클라우드 리스트로 공통 처리
|
||||
} else {
|
||||
container.innerHTML = `<div style="padding:2rem; color:var(--text-muted);">"${tab}" 탭에 대한 운영 서비스 뷰가 정의되지 않았습니다.</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
mainContent.appendChild(container);
|
||||
|
||||
Reference in New Issue
Block a user