Taehoon/ITAM
2
0
Fork 0
Code Issues 25 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: migrate ServerPC data to asset_pc, enhance filters with location, and standardize page headers

Browse Source 
- 서버PC 자산을 asset_pc 테이블로 통합 마이그레이션 및 스키마 확장 (위치, IP 정보 복구 완료)

- 하드웨어 자산 페이지의 구매법인 필터를 자산위치 필터로 교체 및 동적 데이터 바인딩 적용

- 모든 자산 리스트 페이지 상단에 설명(Description) 필드 추가 및 헤더 표준화

- 상세 모달 내 삭제 버튼 기능 구현 및 서버PC 용도 필드 노출 오류 수정

- 현 사용조직 필터 리스트가 비어있던 DOM 셀렉터 버그 수정
This commit is contained in:
이태훈
2026-05-26 17:33:03 +09:00
parent d34ebb8500
commit 82bbe85e23
43 changed files with 2055 additions and 1871 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
src/views/List/CloudListView.ts
View File

@@ -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();
}

77
src/views/List/CostListView.ts
View File

@@ -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();
}

70
src/views/List/DomainListView.ts
View File

@@ -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();
}

103
src/views/List/EquipmentListView.ts
View File

@@ -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();
}

87
src/views/List/FacilityListView.ts
View File

@@ -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();
}

67
src/views/List/GiftListView.ts
View File

@@ -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();
}

74
src/views/List/MobileListView.ts
View File

@@ -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();
}

91
src/views/List/NetworkListView.ts
View File

@@ -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();
}

106
src/views/List/PcListView.ts
View File

@@ -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();
}

87
src/views/List/PcPartListView.ts
View File

@@ -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();
}

124
src/views/List/ServerListView.ts
View File

@@ -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 } });
}

95
src/views/List/SpaceInfoListView.ts
View File

@@ -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();
}

119
src/views/List/StorageListView.ts
View File

@@ -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 } });
}

112
src/views/List/SwListView.ts
View File

@@ -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();
}