feat: restructure navigation, customize list columns, and move action buttons to search bar
1. Restructured navigation hierarchy (Hardware, Software, Ops Support, etc.). 2. Customized table columns for all asset categories according to new specs. 3. Moved Template/Upload/Export/Add buttons to search bar with layout optimization. 4. Hidden Asset Code and Previous User from list views (Modal only). 5. Added Current/Previous User and detailed PC spec fields (GPU, HDD3/4).
This commit is contained in:
@@ -1,9 +1,9 @@
|
||||
import { state } from '../../core/state';
|
||||
import { openSwModal } from '../../components/Modal/SWModal';
|
||||
import { ASSET_SCHEMA, UI_TEXT } from '../../core/schema';
|
||||
import { dynamicSort } from '../../core/utils';
|
||||
import { dynamicSort, getActionButtonsHTML } from '../../core/utils';
|
||||
import { setupTableSorting, SortState } from '../../core/tableHandler';
|
||||
import { createIcons, Cloud, CreditCard, DollarSign, RefreshCcw } from 'lucide';
|
||||
import { createIcons, Cloud, CreditCard, DollarSign, RefreshCcw, Download, Upload, FileSpreadsheet, Plus } from 'lucide';
|
||||
|
||||
/**
|
||||
* 클라우드(운영 서비스) 자산 목록 뷰
|
||||
@@ -17,11 +17,11 @@ export function renderCloudList(container: HTMLElement) {
|
||||
filterBar.className = 'search-bar';
|
||||
filterBar.innerHTML = `
|
||||
<div class="search-item flex-1">
|
||||
<label>통합 검색 (${ASSET_SCHEMA.PRODUCT.ui}/부서/${ASSET_SCHEMA.ACCOUNT.ui})</label>
|
||||
<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.PAY_METHOD.ui}</label>
|
||||
<label>${ASSET_SCHEMA.PURCHASE_METHOD.ui}</label>
|
||||
<select id="filter-payment">
|
||||
<option value="">전체 결제수단</option>
|
||||
<option value="법인카드">법인카드</option>
|
||||
@@ -31,6 +31,7 @@ export function renderCloudList(container: HTMLElement) {
|
||||
<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);
|
||||
|
||||
@@ -41,15 +42,11 @@ export function renderCloudList(container: HTMLElement) {
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-center" style="width:50px;">No.</th>
|
||||
<th data-sort="${ASSET_SCHEMA.PLATFORM.key}">${ASSET_SCHEMA.PLATFORM.ui}</th>
|
||||
<th class="text-center" data-sort="${ASSET_SCHEMA.CORP.key}">${ASSET_SCHEMA.CORP.ui}</th>
|
||||
<th class="text-center" data-sort="부서">담당부서</th>
|
||||
<th data-sort="${ASSET_SCHEMA.PRODUCT.key}">용도(프로젝트)</th>
|
||||
<th data-sort="${ASSET_SCHEMA.ACCOUNT.key}">${ASSET_SCHEMA.ACCOUNT.ui}</th>
|
||||
<th class="text-center" data-sort="${ASSET_SCHEMA.PAY_METHOD.key}">${ASSET_SCHEMA.PAY_METHOD.ui}</th>
|
||||
<th class="text-center" data-sort="${ASSET_SCHEMA.PAY_DAY.key}">${ASSET_SCHEMA.PAY_DAY.ui}</th>
|
||||
<th class="text-center" data-sort="${ASSET_SCHEMA.BILLING.key}">${ASSET_SCHEMA.BILLING.ui}</th>
|
||||
<th>${ASSET_SCHEMA.REMARKS.ui}</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>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="cloud-tbody"></tbody>
|
||||
@@ -68,10 +65,10 @@ export function renderCloudList(container: HTMLElement) {
|
||||
|
||||
let filtered = getFullList().filter(asset => {
|
||||
const kwMatch = !keyword ||
|
||||
(asset[ASSET_SCHEMA.PRODUCT.key] || '').toLowerCase().includes(keyword) ||
|
||||
(asset.부서 || '').toLowerCase().includes(keyword) ||
|
||||
(asset[ASSET_SCHEMA.ACCOUNT.key] || '').toLowerCase().includes(keyword);
|
||||
const payMatch = !payment || asset[ASSET_SCHEMA.PAY_METHOD.key] === payment;
|
||||
(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;
|
||||
});
|
||||
|
||||
@@ -81,7 +78,7 @@ export function renderCloudList(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="6" class="text-center" style="padding: 3rem; color: var(--text-muted);">${UI_TEXT.MESSAGES.NO_DATA}</td></tr>`;
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -89,24 +86,13 @@ export function renderCloudList(container: HTMLElement) {
|
||||
const tr = document.createElement('tr');
|
||||
tr.style.cursor = 'pointer';
|
||||
|
||||
const payMethod = asset[ASSET_SCHEMA.PAY_METHOD.key];
|
||||
const paymentBadge = payMethod === '법인카드'
|
||||
? `<span style="color:#6366f1; font-weight:600;"><i data-lucide="credit-card" style="width:14px; height:14px; vertical-align:middle; margin-right:4px;"></i>법인카드</span>`
|
||||
: (payMethod === '인보이스'
|
||||
? '<span style="color:#10b981; font-weight:600;"><i data-lucide="dollar-sign" style="width:14px; height:14px; vertical-align:middle; margin-right:4px;"></i>인보이스</span>'
|
||||
: '<span style="color:var(--text-muted)">미설정</span>');
|
||||
|
||||
tr.innerHTML = `
|
||||
<td class="text-center">${idx+1}</td>
|
||||
<td style="font-weight:600; color:var(--primary-color)"><i data-lucide="cloud" style="width:14px; height:14px; vertical-align:middle; margin-right:4px;"></i> ${asset[ASSET_SCHEMA.PLATFORM.key]||'미지정'}</td>
|
||||
<td class="text-center">${asset[ASSET_SCHEMA.CORP.key]||''}</td>
|
||||
<td class="text-center">${asset.부서||''}</td>
|
||||
<td>${asset[ASSET_SCHEMA.PRODUCT.key]||''}</td>
|
||||
<td>${asset[ASSET_SCHEMA.ACCOUNT.key]||''}</td>
|
||||
<td class="text-center">${paymentBadge}</td>
|
||||
<td class="text-center">${asset[ASSET_SCHEMA.PAY_DAY.key] ? asset[ASSET_SCHEMA.PAY_DAY.key] + '일' : ''}</td>
|
||||
<td class="text-right" style="font-weight:600;">₩ ${asset[ASSET_SCHEMA.BILLING.key] ? Number(String(asset[ASSET_SCHEMA.BILLING.key]).replace(/,/g, '')).toLocaleString() : '0'}</td>
|
||||
<td>${asset[ASSET_SCHEMA.REMARKS.key]||''}</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>
|
||||
`;
|
||||
|
||||
tr.addEventListener('click', () => openSwModal(asset, 'view'));
|
||||
@@ -118,7 +104,7 @@ export function renderCloudList(container: HTMLElement) {
|
||||
updateTable();
|
||||
});
|
||||
|
||||
createIcons({ icons: { Cloud, CreditCard, DollarSign, RefreshCcw } });
|
||||
createIcons({ icons: { Cloud, CreditCard, DollarSign, RefreshCcw, Download, Upload, FileSpreadsheet, Plus } });
|
||||
};
|
||||
|
||||
document.getElementById('filter-keyword')?.addEventListener('input', updateTable);
|
||||
|
||||
Reference in New Issue
Block a user