Skip to content

refactor: move collapsible logic into shared-filter for checkbox filters #2151

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
abdimo101 merged 5 commits into from
Jan 12, 2026
Merged

refactor: move collapsible logic into shared-filter for checkbox filters #2151

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
8f3dd41
moved collapsible logic into shared-filter
Dec 15, 2025
9af011c
updated e2e tests
Dec 15, 2025
d2ec69a
increasing timeout on getConfig
Dec 15, 2025
3ccf429
removed unused input
Jan 5, 2026
5dc3147
Merge branch 'master' into refactor-collapsible-logic
abdimo101 Jan 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
63 changes: 16 additions & 47 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

32 changes: 2 additions & 30 deletions src/app/datasets/datasets-filter/datasets-filter.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,37 +15,7 @@

<mat-card-content>
<ng-container *ngFor="let filter of filtersList">
<div
*ngIf="filter.type === 'checkbox' && filter.enabled"
class="collapsible-filter-wrapper"
[class.collapsed]="!expandedFilters[filter.key]"
>
<shared-filter
[key]="filter.key"
[label]="filter.label"
[clear]="clearSearchBar"
[tooltip]="filter.description"
[filterType]="filter.type"
[prefilled]="activeFilters[filter.key] || null"
[currentFilter$]="getFilterByKey$(filter.key)"
[facetCounts$]="getFilterFacetCounts$(filter.key)"
(textChange)="setFilter(filter.key, $event)"
(dateRangeChange)="setDateFilter(filter.key, $event)"
(selectionChange)="selectionChange($event)"
(checkBoxChange)="setFilter(filter.key, $event)"
(numericRangeChange)="numericRangeChange(filter.key, $event)"
[filterValue]="activeFilters[filter.key]"
[showBadge]="!expandedFilters[filter.key]"
></shared-filter>
<button class="collapse-toggle" (click)="toggleFilter(filter.key)">
<mat-icon>{{
expandedFilters[filter.key] ? "expand_less" : "expand_more"
}}</mat-icon>
</button>
</div>

<shared-filter
*ngIf="filter.type !== 'checkbox' && filter.enabled"
[key]="filter.key"
[label]="filter.label"
[clear]="clearSearchBar"
Expand All @@ -59,6 +29,8 @@
(selectionChange)="selectionChange($event)"
(checkBoxChange)="setFilter(filter.key, $event)"
(numericRangeChange)="numericRangeChange(filter.key, $event)"
[filterValue]="activeFilters[filter.key]"
[collapsible]="filter.type === 'checkbox'"
></shared-filter>
</ng-container>
<div
Expand Down
33 changes: 0 additions & 33 deletions src/app/datasets/datasets-filter/datasets-filter.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,39 +95,6 @@ mat-card {
}
}

.collapsible-filter-wrapper {
position: relative;

.collapse-toggle {
position: absolute;
right: 0;
top: 0;
background: none;
border: none;
cursor: pointer;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
color: #666;
height: 1.5em;

&:hover {
color: #333;
}
}

&.collapsed ::ng-deep shared-filter {
.facet-search,
.checkbox-list,
.show-more-btn,
.empty-text {
display: none !important;
}
}
}

.condition-title-section {
display: flex;
flex-direction: column;
Expand Down
11 changes: 0 additions & 11 deletions src/app/datasets/datasets-filter/datasets-filter.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,6 @@ export class DatasetsFilterComponent implements OnInit, OnDestroy {
activeFilters: Record<string, string | DateRange | string[] | INumericRange> =
{};
filtersList: FilterConfig[];
expandedFilters: { [key: string]: boolean } = {};

filterConfigs$ = this.store.select(selectFilters);

Expand Down Expand Up @@ -133,12 +132,6 @@ export class DatasetsFilterComponent implements OnInit, OnDestroy {
if (filterConfigs) {
this.filtersList = filterConfigs;

this.filtersList.forEach((filter) => {
if (filter.type === "checkbox" && filter.enabled) {
this.expandedFilters[filter.key] = true;
}
});

const { queryParams } = this.route.snapshot;

const searchQuery = JSON.parse(queryParams.searchQuery || "{}");
Expand Down Expand Up @@ -180,10 +173,6 @@ export class DatasetsFilterComponent implements OnInit, OnDestroy {
);
}

toggleFilter(key: string) {
this.expandedFilters[key] = !this.expandedFilters[key];
}

applyEnabledConditions() {
this.conditionConfigs$.pipe(take(1)).subscribe((conditionConfigs) => {
(conditionConfigs || []).forEach((config) => {
Expand Down
30 changes: 2 additions & 28 deletions src/app/proposals/proposal-filters/side-bar-filter/proposal-side-filter.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,35 +12,7 @@

<mat-card-content>
<ng-container *ngFor="let filter of filterLists">
<div
*ngIf="filter.type === 'checkbox' && filter.enabled"
class="collapsible-filter-wrapper"
[class.collapsed]="!expandedFilters[filter.key]"
>
<shared-filter
[key]="filter.key"
[label]="filter.label"
[clear]="clearFilters"
[tooltip]="filter.description"
[filterType]="filter.type"
[prefilled]="activeFilters[filter.key] || null"
(checkBoxChange)="setFilter(filter.key, $event)"
[currentFilter$]="getFilterByKey$(filter.key)"
[facetCounts$]="getFacetCounts$(filter.key)"
(selectionChange)="selectionChange($event)"
(dateRangeChange)="setDateFilter(filter.key, $event)"
[filterValue]="activeFilters[filter.key]"
[showBadge]="!expandedFilters[filter.key]"
></shared-filter>
<button class="collapse-toggle" (click)="toggleFilter(filter.key)">
<mat-icon>{{
expandedFilters[filter.key] ? "expand_less" : "expand_more"
}}</mat-icon>
</button>
</div>

<shared-filter
*ngIf="filter.type !== 'checkbox' && filter.enabled"
[key]="filter.key"
[label]="filter.label"
[clear]="clearFilters"
Expand All @@ -52,6 +24,8 @@
[facetCounts$]="getFacetCounts$(filter.key)"
(selectionChange)="selectionChange($event)"
(dateRangeChange)="setDateFilter(filter.key, $event)"
[filterValue]="activeFilters[filter.key]"
[collapsible]="filter.type === 'checkbox'"
></shared-filter>
</ng-container>
<div class="section-container">
Expand Down
33 changes: 0 additions & 33 deletions src/app/proposals/proposal-filters/side-bar-filter/proposal-side-filter.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,36 +41,3 @@ mat-card {
scale: 0.9;
background: rgba($color: #000000, $alpha: 0.05);
}

.collapsible-filter-wrapper {
position: relative;

.collapse-toggle {
position: absolute;
right: 0;
top: 0;
background: none;
border: none;
cursor: pointer;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
color: #666;
height: 1.5em;

&:hover {
color: #333;
}
}

&.collapsed ::ng-deep shared-filter {
.facet-search,
.checkbox-list,
.show-more-btn,
.empty-text {
display: none !important;
}
}
}
11 changes: 0 additions & 11 deletions src/app/proposals/proposal-filters/side-bar-filter/proposal-side-filter.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,6 @@ export class ProposalSideFilterComponent implements OnInit {
appConfig = this.appConfigService.getConfig();
activeFilters: Record<string, string[] | DateRange> = {};
collapsed = false;
expandedFilters: { [key: string]: boolean } = {};
@Output() collapsedChange = new EventEmitter<boolean>();

filterLists: FilterConfig[] = [];
Expand Down Expand Up @@ -71,12 +70,6 @@ export class ProposalSideFilterComponent implements OnInit {
this.filterLists =
this.appConfig.defaultProposalsListSettings?.filters;

this.filterLists.forEach((filter) => {
if (filter.type === "checkbox" && filter.enabled) {
this.expandedFilters[filter.key] = true;
}
});

const { queryParams } = this.route.snapshot;

const searchQuery = JSON.parse(queryParams.searchQuery || "{}");
Expand Down Expand Up @@ -117,10 +110,6 @@ export class ProposalSideFilterComponent implements OnInit {
this.activeFilters = { ...searchQuery };
}

toggleFilter(key: string) {
this.expandedFilters[key] = !this.expandedFilters[key];
}

setFilter(filterKey: string, value: string[]) {
// Text filter type is not supported for proposal side panel filters
// This is to seperate the logic of side filter panel and top text search box
Expand Down
13 changes: 12 additions & 1 deletion src/app/shared/modules/shared-filter/shared-filter.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,10 @@
</ng-container>

<ng-container *ngSwitchCase="'checkbox'">
<div class="filter-group">
<div
class="collapsible-filter-wrapper"
[class.collapsed]="collapsible && collapsed"
>
<mat-label class="filter-title"
>{{ label | translate: localization }}
<span *ngIf="shouldShowBadge" class="filter-badge">{{
Expand Down Expand Up @@ -86,6 +89,14 @@
<ng-template #noItems>
<div class="empty-text">No options found</div>
</ng-template>
<button
*ngIf="collapsible"
class="collapse-toggle"
type="button"
(click)="toggleCollapse()"
>
<mat-icon>{{ collapsed ? "expand_more" : "expand_less" }}</mat-icon>
</button>
</div>

<mat-divider />
Expand Down
35 changes: 34 additions & 1 deletion src/app/shared/modules/shared-filter/shared-filter.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,4 +73,37 @@ mat-divider {
font-size: 0.75rem;
display: inline-flex;
align-items: center;
}
}

.collapsible-filter-wrapper {
position: relative;

.collapse-toggle {
position: absolute;
right: 0;
top: 0;
background: none;
border: none;
cursor: pointer;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
color: #666;
height: 1.5em;

&:hover {
color: #333;
}
}

&.collapsed {
.facet-search,
.checkbox-list,
.show-more-btn,
.empty-text {
display: none !important;
}
}
}
10 changes: 9 additions & 1 deletion src/app/shared/modules/shared-filter/shared-filter.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,8 @@ export class SharedFilterComponent implements OnChanges {
| undefined
| null;
@Input() showBadge = false;
@Input() collapsible = false;
collapsed = false;

@Output() textChange = new EventEmitter<string>();
@Output() checkBoxChange = new EventEmitter<string[]>();
Expand Down Expand Up @@ -233,7 +235,13 @@ export class SharedFilterComponent implements OnChanges {
return Array.isArray(this.filterValue) ? this.filterValue.length : 0;
}
get shouldShowBadge(): boolean {
return this.showBadge && this.badgeCount > 0;
return this.collapsible && this.collapsed && this.badgeCount > 0;
}

toggleCollapse() {
if (this.collapsible && this.filterType === "checkbox") {
this.collapsed = !this.collapsed;
}
}

/** Checkbox filter helpers END*/
Expand Down
Loading