import { state } from '../../core/state';
import { openSwModal } from '../../components/Modal/SWModal';
import { openSwUserModal } from '../../components/Modal/SWUserModal';
import { createIcons, Edit2, Users, RefreshCcw } from 'lucide';
export function renderSwList(container: HTMLElement) {
const fullList = state.masterData.sw.filter(a => a.type === state.activeSubTab);
const isSub = state.activeSubTab === '구독SW';
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. |
상태 |
분야 |
법인 |
부서 |
제품명 |
구매일 |
${isSub ? '구독일 | ' : ''}
금액 |
수량 |
사용가능 |
관리 |
`;
tableWrapper.appendChild(table);
container.appendChild(tableWrapper);
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 : '';
const filtered = fullList.filter(asset => {
const matchKeyword = !keyword || (asset.제품명 || '').toLowerCase().includes(keyword) || (asset.부서 || '').toLowerCase().includes(keyword);
const matchField = !field || asset.분야 === field;
const matchCorp = !corp || asset.법인 === corp;
return matchKeyword && matchField && matchCorp;
});
tbody.innerHTML = '';
if (filtered.length === 0) {
tbody.innerHTML = `| 검색 결과가 없습니다. |
`;
return;
}
filtered.forEach((asset, idx) => {
const assigned = state.masterData.swUsers.filter(u => u.swId === asset.id).length;
const qty = typeof asset.수량 === 'number' ? asset.수량 : parseInt(asset.수량||'0', 10);
const avail = qty - assigned;
let statusHtml = '';
if (isSub) {
let isExpired = false;
if (asset.구독일) {
const parts = asset.구독일.split('~');
const endDateStr = parts[parts.length - 1].trim().replace(/\./g, '-');
const endDate = new Date(endDateStr);
if (!isNaN(endDate.getTime())) {
endDate.setHours(23, 59, 59, 999);
if (endDate < new Date()) {
isExpired = true;
}
}
}
if (isExpired) {
statusHtml = `만료`;
} else {
statusHtml = `사용중`;
}
} else {
if (asset.유지보수여부) {
statusHtml = `유효`;
} else {
statusHtml = `없음`;
}
}
const tr = document.createElement('tr');
tr.style.cursor = 'pointer';
tr.innerHTML = `
${idx+1} |
${statusHtml} |
${asset.분야||''} |
${asset.법인} |
${asset.부서||''} |
${asset.제품명} |
${asset.구매일||''} |
${isSub ? `${asset.구독일||''} | ` : ''}
${asset.금액||'0'} |
${qty} |
${avail} |
|
`;
tr.addEventListener('click', (e) => { if (!(e.target as HTMLElement).closest('button')) openSwModal(asset); });
tr.querySelector('.btn-edit')?.addEventListener('click', (e) => { e.stopPropagation(); openSwModal(asset); });
tr.querySelector('.btn-users')?.addEventListener('click', (e) => { e.stopPropagation(); openSwUserModal(asset); });
tbody.appendChild(tr);
});
createIcons({ icons: { Edit2, Users } });
};
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();
});
updateTable();
}