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();
|
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">
|
||||||
|
<div class="filters-header">
|
||||||
<h3>Filters</h3>
|
<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;
|
||||||
|
|||||||
Reference in New Issue
Block a user