feat: 테이블 가로 스크롤 및 컬럼 리사이징 개선, 검색 결과 개수 필터 우측 배치, PC부품 제조사 컬럼 삭제
This commit is contained in:
@@ -52,7 +52,7 @@ export function renderFilterBar(container: HTMLElement, options: FilterOptions)
|
|||||||
};
|
};
|
||||||
|
|
||||||
container.innerHTML = `
|
container.innerHTML = `
|
||||||
<div class="search-item flex-1">
|
<div class="search-item keyword-search">
|
||||||
<label>${keywordLabel}</label>
|
<label>${keywordLabel}</label>
|
||||||
<input type="text" id="filter-keyword" placeholder="검색어를 입력하세요..." autocomplete="off" value="${initialFilters.keyword || ''}">
|
<input type="text" id="filter-keyword" placeholder="검색어를 입력하세요..." autocomplete="off" value="${initialFilters.keyword || ''}">
|
||||||
</div>
|
</div>
|
||||||
@@ -108,6 +108,12 @@ export function renderFilterBar(container: HTMLElement, options: FilterOptions)
|
|||||||
<button id="btn-reset-filters" class="btn btn-outline btn-reset">
|
<button id="btn-reset-filters" class="btn btn-outline btn-reset">
|
||||||
<i data-lucide="refresh-ccw" class="icon-sm"></i> ${UI_TEXT.ACTION.RESET_FILTER}
|
<i data-lucide="refresh-ccw" class="icon-sm"></i> ${UI_TEXT.ACTION.RESET_FILTER}
|
||||||
</button>
|
</button>
|
||||||
|
<div class="search-item result-count-item">
|
||||||
|
<label>검색 결과</label>
|
||||||
|
<div class="result-count-box">
|
||||||
|
<span id="filter-total-count" class="filter-total-count result-count-text">0개</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
${getActionButtonsHTML()}
|
${getActionButtonsHTML()}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
|||||||
@@ -640,3 +640,28 @@ input:checked + .role-slider:before {
|
|||||||
letter-spacing: -0.02em;
|
letter-spacing: -0.02em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* --- Filter Bar Unified Layout Refactoring --- */
|
||||||
|
.search-item.keyword-search {
|
||||||
|
flex: 0 0 320px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-item.result-count-item {
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-count-box {
|
||||||
|
height: clamp(34px, 4.5vmin, 44px);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
min-width: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-count-text {
|
||||||
|
white-space: nowrap;
|
||||||
|
color: var(--color-blue);
|
||||||
|
font-size: var(--fs-sm);
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -667,6 +667,11 @@ export function createListView(container: HTMLElement, config: ListViewConfig) {
|
|||||||
let filtered = applyCommonFilters(fullList, currentFilters, config.searchKeys as any[]);
|
let filtered = applyCommonFilters(fullList, currentFilters, config.searchKeys as any[]);
|
||||||
if (sortState.key) filtered = dynamicSort(filtered, sortState.key, sortState.direction);
|
if (sortState.key) filtered = dynamicSort(filtered, sortState.key, sortState.direction);
|
||||||
|
|
||||||
|
const totalCountEl = filterBar.querySelector('#filter-total-count');
|
||||||
|
if (totalCountEl) {
|
||||||
|
totalCountEl.textContent = `${filtered.length}개`;
|
||||||
|
}
|
||||||
|
|
||||||
thead.innerHTML = `<tr>${config.columns.map(col => {
|
thead.innerHTML = `<tr>${config.columns.map(col => {
|
||||||
const isDateCol = col.header.includes('일') || col.header.includes('날짜') || col.header.includes('연월');
|
const isDateCol = col.header.includes('일') || col.header.includes('날짜') || col.header.includes('연월');
|
||||||
const alignmentClass = col.align ? `text-${col.align}` : (isDateCol ? 'text-center' : '');
|
const alignmentClass = col.align ? `text-${col.align}` : (isDateCol ? 'text-center' : '');
|
||||||
@@ -693,7 +698,7 @@ export function createListView(container: HTMLElement, config: ListViewConfig) {
|
|||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
return `<td class="${alignmentClass} ${customClass}" style="${col.width ? `width:${col.width};` : ''}" ${titleAttr}>${displayContent}</td>`;
|
return `<td class="${alignmentClass} ${customClass}" ${titleAttr}>${displayContent}</td>`;
|
||||||
}).join('')}</tr>`).join('');
|
}).join('')}</tr>`).join('');
|
||||||
|
|
||||||
tbody.querySelectorAll('.asset-row').forEach((tr, idx) => { tr.addEventListener('click', () => config.onRowClick && config.onRowClick(filtered[idx])); });
|
tbody.querySelectorAll('.asset-row').forEach((tr, idx) => { tr.addEventListener('click', () => config.onRowClick && config.onRowClick(filtered[idx])); });
|
||||||
@@ -735,6 +740,11 @@ export function createListView(container: HTMLElement, config: ListViewConfig) {
|
|||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|
||||||
|
// Freeze all columns at their current pixel width before dragging
|
||||||
|
headers.forEach(header => {
|
||||||
|
header.style.width = `${header.offsetWidth}px`;
|
||||||
|
});
|
||||||
|
|
||||||
startX = e.clientX;
|
startX = e.clientX;
|
||||||
startWidth = th.offsetWidth;
|
startWidth = th.offsetWidth;
|
||||||
|
|
||||||
|
|||||||
@@ -24,7 +24,6 @@ export function renderPcPartList(container: HTMLElement) {
|
|||||||
render: a => `<span class="badge badge-success">${a[ASSET_SCHEMA.HW_STATUS.key] || '보관중'}</span>`
|
render: a => `<span class="badge badge-success">${a[ASSET_SCHEMA.HW_STATUS.key] || '보관중'}</span>`
|
||||||
},
|
},
|
||||||
{ header: ASSET_SCHEMA.ASSET_TYPE.ui, sortKey: ASSET_SCHEMA.ASSET_TYPE.key, align: 'center', width: '10%', render: a => a[ASSET_SCHEMA.ASSET_TYPE.key] || '-' },
|
{ header: ASSET_SCHEMA.ASSET_TYPE.ui, sortKey: ASSET_SCHEMA.ASSET_TYPE.key, align: 'center', width: '10%', render: a => a[ASSET_SCHEMA.ASSET_TYPE.key] || '-' },
|
||||||
{ header: ASSET_SCHEMA.ASSET_MFR.ui, sortKey: ASSET_SCHEMA.ASSET_MFR.key, align: 'center', render: a => a[ASSET_SCHEMA.ASSET_MFR.key] || '' },
|
|
||||||
{ header: ASSET_SCHEMA.MODEL_NAME.ui, sortKey: ASSET_SCHEMA.MODEL_NAME.key, render: a => formatInline(a[ASSET_SCHEMA.MODEL_NAME.key] || '-') },
|
{ header: ASSET_SCHEMA.MODEL_NAME.ui, sortKey: ASSET_SCHEMA.MODEL_NAME.key, render: a => formatInline(a[ASSET_SCHEMA.MODEL_NAME.key] || '-') },
|
||||||
{ header: ASSET_SCHEMA.VOLUME.ui, sortKey: ASSET_SCHEMA.VOLUME.key, align: 'center', render: a => a[ASSET_SCHEMA.VOLUME.key] || '-' },
|
{ header: ASSET_SCHEMA.VOLUME.ui, sortKey: ASSET_SCHEMA.VOLUME.key, align: 'center', render: a => a[ASSET_SCHEMA.VOLUME.key] || '-' },
|
||||||
{ header: ASSET_SCHEMA.MONITOR_INCH.ui, sortKey: ASSET_SCHEMA.MONITOR_INCH.key, align: 'center', render: a => a[ASSET_SCHEMA.MONITOR_INCH.key] || '-' },
|
{ header: ASSET_SCHEMA.MONITOR_INCH.ui, sortKey: ASSET_SCHEMA.MONITOR_INCH.key, align: 'center', render: a => a[ASSET_SCHEMA.MONITOR_INCH.key] || '-' },
|
||||||
|
|||||||
@@ -39,9 +39,11 @@
|
|||||||
|
|
||||||
table {
|
table {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
min-width: 100%;
|
||||||
|
max-width: none;
|
||||||
border-collapse: separate;
|
border-collapse: separate;
|
||||||
border-spacing: 0;
|
border-spacing: 0;
|
||||||
table-layout: fixed; /* Force fixed layout to prevent horizontal scroll */
|
table-layout: fixed;
|
||||||
}
|
}
|
||||||
|
|
||||||
th, td {
|
th, td {
|
||||||
|
|||||||
Reference in New Issue
Block a user