mirror/booklore
1
0
Fork 0
mirror of https://github.com/booklore-app/booklore.git synced 2025-12-23 22:28:11 -05:00
Code Issues Packages Projects Releases Wiki Activity

Hide empty filters from sidebar (#1759)

Browse Source
This commit is contained in:
Muppetteer
2025-12-06 03:45:10 +11:00
committed by GitHub
parent 16fe1b632b
commit 474e95c4f2
1 changed files with 22 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
booklore-ui/src/app/features/book/components/book-browser/book-filter/book-filter.component.html
View File

@@ -15,6 +15,8 @@
<div class="filter-content">
<p-accordion [value]="expandedPanels" [multiple]="true">
@for (filterType of filterTypes; track trackByFilterType(i, filterType); let i = $index) {
@if (filterStreams[filterType] | async; as filters) {
@if (filters.length > 0) {
<p-accordion-panel [value]="i">
<p-accordion-header>
<span class="filter-type-label">
@@ -28,28 +30,28 @@
</p-accordion-header>
<p-accordion-content>
@if (filterStreams[filterType] | async; as filters) {
<div class="filter-list">
@for (filter of filters; track trackByFilter(j, filter); let j = $index) {
<div
class="filter-row"
[ngClass]="{
'active': activeFilters[filterType]?.includes(filter.value?.id || filter.value)
}"
(click)="handleFilterClick(filterType, filter.value?.id || filter.value)">
{{ filter.value.name || filter.value }}
<p-badge class="filter-value-badge" [value]="filter.bookCount"></p-badge>
</div>
}
@if (truncatedFilters[filterType]) {
<div class="truncation-notice">
Showing first 250 items
</div>
}
</div>
}
<div class="filter-list">
@for (filter of filters; track trackByFilter(j, filter); let j = $index) {
<div
class="filter-row"
[ngClass]="{
'active': activeFilters[filterType]?.includes(filter.value?.id || filter.value)
}"
(click)="handleFilterClick(filterType, filter.value?.id || filter.value)">
{{ filter.value.name || filter.value }}
<p-badge class="filter-value-badge" [value]="filter.bookCount"></p-badge>
</div>
}
@if (truncatedFilters[filterType]) {
<div class="truncation-notice">
Showing first 500 items
</div>
}
</div>
</p-accordion-content>
</p-accordion-panel>
}
}
}
</p-accordion>