feat: add collapsible checkbox filters

cypress/e2e/datasets/datasets-general.cy.js

@@ -566,7 +566,9 @@ describe("Datasets general", () => {
 
       cy.get('[data-cy="filter-search-button"]').click();
 
-      cy.get(".dataset-table mat-row").contains("Cypress Dataset").should("exist");
+      cy.get(".dataset-table mat-row")
+        .contains("Cypress Dataset")
+        .should("exist");
     });
   });
 
@@ -616,4 +618,54 @@ describe("Datasets general", () => {
       cy.get('[data-cy="remove-condition-button"]').click();
     });
   });
+
+  describe("Datasets collapsible filters", () => {
+    beforeEach(() => {
+      cy.createDataset({ type: "raw" });
+      cy.readFile("CI/e2e/frontend.config.e2e.json").then((baseConfig) => {
+        const testConfig = {
+          ...baseConfig,
+          defaultDatasetsListSettings: {
+            ...baseConfig.defaultDatasetsListSettings,
+            filters: [
+              {
+                key: "type",
+                label: "Type",
+                type: "checkbox",
+                description: "Filter by dataset type",
+                enabled: true,
+              },
+              {
+                key: "keywords",
+                label: "Keyword",
+                type: "checkbox",
+                description: "Filter by keywords in the dataset",
+                enabled: false,
+              },
+            ],
+          },
+        };
+
+        cy.intercept("GET", "**/admin/config", testConfig).as("getConfig");
+        cy.visit("/datasets");
+        cy.wait("@getConfig");
+        cy.finishedLoading();
+      });
+    });
+
+    it("should collapse and expand checkbox filters", () => {
+
+      cy.get(".collapsible-filter-wrapper .collapse-toggle").first().click();
+
+      cy.get(".collapsible-filter-wrapper .checkbox-list")
+        .first()
+        .should("not.be.visible");
+
+      cy.get(".collapsible-filter-wrapper .collapse-toggle").first().click();
+
+      cy.get(".collapsible-filter-wrapper .checkbox-list")
+        .first()
+        .should("be.visible");
+    });
+  });
 });

cypress/e2e/proposals/proposals-general.cy.js

@@ -598,4 +598,53 @@ describe("Proposals general", () => {
 
     });
   });
+
+  describe("Proposals collapsible filters", () => {
+    beforeEach(() => {
+      cy.createProposal({ ...testData.proposal, proposalId: Math.floor(100000 + Math.random() * 900000).toString() });
+      cy.readFile("CI/e2e/frontend.config.e2e.json").then((baseConfig) => {
+        const testConfig = {
+          ...baseConfig,
+          defaultProposalsListSettings: {
+            ...baseConfig.defaultProposalsListSettings,
+            filters: [
+              {
+                key: "type",
+                label: "Type",
+                type: "checkbox",
+                description: "Filter by proposal type",
+                enabled: true,
+              },
+              {
+                key: "keywords",
+                label: "Keyword",
+                type: "checkbox",
+                description: "Filter by keywords in the proposal",
+                enabled: false,
+              },
+            ],
+          },
+        };
+
+        cy.intercept("GET", "**/admin/config", testConfig).as("getConfig");
+        cy.visit("/proposals");
+        cy.wait("@getConfig");
+        cy.finishedLoading();
+      });
+    });
+
+    it("should collapse and expand checkbox filters", () => {
+      cy.get(".collapsible-filter-wrapper .collapse-toggle").first().click();
+
+      cy.get(".collapsible-filter-wrapper .checkbox-list")
+        .first()
+        .should("not.be.visible");
+
+      cy.get(".collapsible-filter-wrapper .collapse-toggle").first().click();
+
+      cy.get(".collapsible-filter-wrapper .checkbox-list")
+        .first()
+        .should("be.visible");
+    });
+  });
 });

src/app/datasets/datasets-filter/datasets-filter.component.html

@@ -15,8 +15,37 @@
 
   <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.enabled"
+        *ngIf="filter.type !== 'checkbox' && filter.enabled"
         [key]="filter.key"
         [label]="filter.label"
         [clear]="clearSearchBar"

src/app/datasets/datasets-filter/datasets-filter.component.scss

@@ -94,6 +94,39 @@ 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;

src/app/datasets/datasets-filter/datasets-filter.component.ts

@@ -70,6 +70,7 @@ export class DatasetsFilterComponent implements OnInit, OnDestroy {
   activeFilters: Record<string, string | DateRange | string[] | INumericRange> =
     {};
   filtersList: FilterConfig[];
+  expandedFilters: { [key: string]: boolean } = {};
 
   filterConfigs$ = this.store.select(selectFilters);
 
@@ -132,6 +133,12 @@ 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 || "{}");
@@ -173,6 +180,10 @@ 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) => {
@@ -838,6 +849,7 @@ export class DatasetsFilterComponent implements OnInit, OnDestroy {
   }
 
   ngOnDestroy() {
+    this.store.dispatch(clearFacetsAction());
     this.subscriptions.forEach((subscription) => subscription.unsubscribe());
   }
 }

src/app/proposals/proposal-filters/side-bar-filter/proposal-side-filter.component.html

@@ -12,8 +12,35 @@
 
   <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.enabled"
+        *ngIf="filter.type !== 'checkbox' && filter.enabled"
         [key]="filter.key"
         [label]="filter.label"
         [clear]="clearFilters"

src/app/proposals/proposal-filters/side-bar-filter/proposal-side-filter.component.scss

@@ -39,3 +39,36 @@ 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;
+    }
+  }
+}

src/app/proposals/proposal-filters/side-bar-filter/proposal-side-filter.component.ts

@@ -32,6 +32,7 @@ export class ProposalSideFilterComponent implements OnInit {
   appConfig = this.appConfigService.getConfig();
   activeFilters: Record<string, string[] | DateRange> = {};
   collapsed = false;
+  expandedFilters: { [key: string]: boolean } = {};
 
   filterLists: FilterConfig[] = [];
 
@@ -69,6 +70,12 @@ 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 || "{}");
@@ -109,6 +116,10 @@ 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

src/app/shared/modules/breadcrumb/breadcrumb.component.ts

@@ -9,6 +9,7 @@ import {
 import { take, filter } from "rxjs/operators";
 import { TitleCasePipe } from "shared/pipes/title-case.pipe";
 import { ArchViewMode } from "state-management/models";
+import { Location } from "@angular/common";
 
 interface Breadcrumb {
   label: string;
@@ -39,6 +40,7 @@ export class BreadcrumbComponent implements OnInit {
     private store: Store,
     private route: ActivatedRoute,
     private router: Router,
+    private location: Location,
   ) {}
 
   ngOnInit() {
@@ -76,7 +78,7 @@ export class BreadcrumbComponent implements OnInit {
           path: url.path,
           params: url.parameters,
           url: "/" + encodeURIComponent(url.path),
-          fallback: "/" + encodeURIComponent(url.path + "s"),
+          fallback: "/" + encodeURIComponent(url.path),
         };
         this.breadcrumbs.push(crumb);
       });
@@ -122,9 +124,7 @@ export class BreadcrumbComponent implements OnInit {
             .pipe(take(1))
             .subscribe((currentMode) => {
               filters["mode"] = setMode(currentMode);
-              this.router.navigate(["/datasets"], {
-                queryParams: { args: JSON.stringify(filters) },
-              });
+              this.location.back();
             });
         });
     } else {

src/app/shared/modules/shared-filter/shared-filter.component.html

@@ -47,9 +47,12 @@
 
     <ng-container *ngSwitchCase="'checkbox'">
       <div class="filter-group">
-        <mat-label class="filter-title">{{
-          label | translate: localization
-        }}</mat-label>
+        <mat-label class="filter-title"
+          >{{ label | translate: localization }}
+          <span *ngIf="shouldShowBadge" class="filter-badge">{{
+            badgeCount
+          }}</span></mat-label
+        >
         <mat-form-field
           *ngIf="showCheckboxSearch"
           appearance="outline"