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

Implement global table sorting, dashboard UI enhancements, and secret cloud access

Browse Source
This commit is contained in:
주완기
2026-04-27 09:30:47 +09:00
parent 171bcc772b
commit 8f0508a7d0
16 changed files with 385 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,8 @@
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 { setupTableSorting, SortState } from '../../core/tableHandler';
import { createIcons, Cloud, CreditCard, DollarSign, RefreshCcw } from 'lucide';
/**
@@ -9,6 +11,7 @@ import { createIcons, Cloud, CreditCard, DollarSign, RefreshCcw } from 'lucide';
*/
export function renderCloudList(container: HTMLElement) {
const getFullList = () => state.masterData.cloud || [];
let sortState: SortState = { key: '', direction: 'asc' };
const filterBar = document.createElement('div');
filterBar.className = 'search-bar';
@@ -37,15 +40,15 @@ export function renderCloudList(container: HTMLElement) {
table.innerHTML = `
<thead>
<tr>
<th class="text-center">No.</th>
<th>${ASSET_SCHEMA.PLATFORM.ui}</th>
<th class="text-center">${ASSET_SCHEMA.CORP.ui}</th>
<th class="text-center">담당부서</th>
<th>용도(프로젝트)</th>
<th>${ASSET_SCHEMA.ACCOUNT.ui}</th>
<th class="text-center">${ASSET_SCHEMA.PAY_METHOD.ui}</th>
<th class="text-center">${ASSET_SCHEMA.PAY_DAY.ui}</th>
<th class="text-center">${ASSET_SCHEMA.BILLING.ui}</th>
<th 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>
</tr>
</thead>
@@ -63,7 +66,7 @@ export function renderCloudList(container: HTMLElement) {
const keyword = keywordInput ? keywordInput.value.toLowerCase().trim() : '';
const payment = paymentSelect ? paymentSelect.value : '';
const filtered = getFullList().filter(asset => {
let filtered = getFullList().filter(asset => {
const kwMatch = !keyword ||
(asset[ASSET_SCHEMA.PRODUCT.key] || '').toLowerCase().includes(keyword) ||
(asset.부서 || '').toLowerCase().includes(keyword) ||
@@ -72,6 +75,10 @@ export function renderCloudList(container: HTMLElement) {
return kwMatch && payMatch;
});
if (sortState.key) {
filtered = dynamicSort(filtered, sortState.key, sortState.direction);
}
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>`;
@@ -105,6 +112,12 @@ export function renderCloudList(container: HTMLElement) {
tr.addEventListener('click', () => openSwModal(asset, 'view'));
tbody.appendChild(tr);
});
setupTableSorting(table, sortState, (key, dir) => {
sortState = { key, direction: dir };
updateTable();
});
createIcons({ icons: { Cloud, CreditCard, DollarSign, RefreshCcw } });
};