feat: add QSO count display to filter section
- Shows count of QSOs matching current filters next to "Filters" heading - Displays "Showing X filtered QSOs" when filters are active - Displays "Showing X total QSOs" when no filters applied - Uses existing pagination.totalCount from backend API Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -278,6 +278,10 @@
|
||||
loadQSOs();
|
||||
}
|
||||
|
||||
function hasActiveFilters() {
|
||||
return !!(filters.band || filters.mode || filters.search || (filters.confirmationType && filters.confirmationType !== 'all'));
|
||||
}
|
||||
|
||||
function openQSODetailModal(qso) {
|
||||
selectedQSO = qso;
|
||||
showQSODetailModal = true;
|
||||
@@ -561,7 +565,18 @@
|
||||
{/if}
|
||||
|
||||
<div class="filters">
|
||||
<h3>Filters</h3>
|
||||
<div class="filters-header">
|
||||
<h3>Filters</h3>
|
||||
{#if pagination && !loading}
|
||||
<div class="filter-count">
|
||||
{#if hasActiveFilters()}
|
||||
Showing <strong>{pagination.totalCount}</strong> filtered QSOs
|
||||
{:else}
|
||||
Showing <strong>{pagination.totalCount}</strong> total QSOs
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="filter-row">
|
||||
<input
|
||||
type="text"
|
||||
@@ -982,11 +997,30 @@
|
||||
}
|
||||
|
||||
.filters h3 {
|
||||
margin: 0 0 1rem 0;
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.filters-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.filter-count {
|
||||
font-size: 0.875rem;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.filter-count strong {
|
||||
color: #4a90e2;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.filter-row {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
|
||||
Reference in New Issue
Block a user