import { state } from '../../core/state';
import { openSwModal } from '../../components/Modal/SWModal';
import { ASSET_SCHEMA, UI_TEXT } from '../../core/schema';
import { createIcons, Cloud, CreditCard, DollarSign, RefreshCcw } from 'lucide';
/**
* 클라우드(운영 서비스) 자산 목록 뷰
* 라인 정렬 보정 및 헤더 통일
*/
export function renderCloudList(container: HTMLElement) {
const getFullList = () => state.masterData.cloud || [];
const filterBar = document.createElement('div');
filterBar.className = 'search-bar';
filterBar.innerHTML = `
`;
container.appendChild(filterBar);
const tableWrapper = document.createElement('div');
tableWrapper.className = 'table-container';
const table = document.createElement('table');
table.innerHTML = `
| No. |
${ASSET_SCHEMA.PLATFORM.ui} |
${ASSET_SCHEMA.CORP.ui} |
담당부서 |
용도(프로젝트) |
${ASSET_SCHEMA.ACCOUNT.ui} |
${ASSET_SCHEMA.PAY_METHOD.ui} |
${ASSET_SCHEMA.PAY_DAY.ui} |
${ASSET_SCHEMA.BILLING.ui} |
${ASSET_SCHEMA.REMARKS.ui} |
`;
tableWrapper.appendChild(table);
container.appendChild(tableWrapper);
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 : '';
const 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;
return kwMatch && payMatch;
});
tbody.innerHTML = '';
if (filtered.length === 0) {
tbody.innerHTML = `| ${UI_TEXT.MESSAGES.NO_DATA} |
`;
return;
}
filtered.forEach((asset, idx) => {
const tr = document.createElement('tr');
tr.style.cursor = 'pointer';
const payMethod = asset[ASSET_SCHEMA.PAY_METHOD.key];
const paymentBadge = payMethod === '법인카드'
? `법인카드`
: (payMethod === '인보이스'
? '인보이스'
: '미설정');
tr.innerHTML = `
${idx+1} |
${asset[ASSET_SCHEMA.PLATFORM.key]||'미지정'} |
${asset[ASSET_SCHEMA.CORP.key]||''} |
${asset.부서||''} |
${asset[ASSET_SCHEMA.PRODUCT.key]||''} |
${asset[ASSET_SCHEMA.ACCOUNT.key]||''} |
${paymentBadge} |
${asset[ASSET_SCHEMA.PAY_DAY.key] ? asset[ASSET_SCHEMA.PAY_DAY.key] + '일' : ''} |
₩ ${asset[ASSET_SCHEMA.BILLING.key] ? Number(asset[ASSET_SCHEMA.BILLING.key]).toLocaleString() : '0'} |
${asset[ASSET_SCHEMA.REMARKS.key]||''} |
`;
tr.addEventListener('click', () => openSwModal(asset, 'view'));
tbody.appendChild(tr);
});
createIcons({ icons: { Cloud, CreditCard, DollarSign, RefreshCcw } });
};
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();
});
updateTable();
}