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:
2026-01-19 13:47:36 +01:00
parent bee02d16ce
commit aeeb75c226

View File

@@ -278,6 +278,10 @@
loadQSOs(); loadQSOs();
} }
function hasActiveFilters() {
return !!(filters.band || filters.mode || filters.search || (filters.confirmationType && filters.confirmationType !== 'all'));
}
function openQSODetailModal(qso) { function openQSODetailModal(qso) {
selectedQSO = qso; selectedQSO = qso;
showQSODetailModal = true; showQSODetailModal = true;
@@ -561,7 +565,18 @@
{/if} {/if}
<div class="filters"> <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"> <div class="filter-row">
<input <input
type="text" type="text"
@@ -982,11 +997,30 @@
} }
.filters h3 { .filters h3 {
margin: 0 0 1rem 0; margin: 0;
font-size: 1rem; font-size: 1rem;
color: #333; 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 { .filter-row {
display: flex; display: flex;
gap: 1rem; gap: 1rem;