[DSC-2302] fix filters visibility computation

Author: FrancescoMolinaro

src/app/shared/search/search-filters/search-filter/search-filter.component.ts

@@ -1,7 +1,7 @@
-import { Component, EventEmitter, Inject, Input, OnInit, Output } from '@angular/core';
+import { Component, Inject, Input, OnInit } from '@angular/core';
 
-import { BehaviorSubject, Observable, of as observableOf } from 'rxjs';
-import { filter, map, startWith, switchMap, take } from 'rxjs/operators';
+import { BehaviorSubject, distinctUntilChanged, Observable, of as observableOf } from 'rxjs';
+import { filter, map, switchMap, take } from 'rxjs/operators';
 
 import { SearchFilterConfig } from '../../models/search-filter-config.model';
 import { SearchFilterService } from '../../../../core/shared/search/search-filter.service';
@@ -43,8 +43,6 @@ export class SearchFilterComponent implements OnInit {
    */
   @Input() scope: string;
 
-  @Output() isVisibilityComputed = new EventEmitter<boolean>();
-
   /**
    * True when the filter is 100% collapsed in the UI
    */
@@ -93,19 +91,14 @@ export class SearchFilterComponent implements OnInit {
    */
   ngOnInit() {
     this.selectedValues$ = this.getSelectedValues();
-    this.active$ = this.isActive().pipe(
-      startWith(true)
-    );
+    this.active$ = this.isActive();
     this.collapsed$ = this.isCollapsed();
     this.initializeFilter();
     this.selectedValues$.pipe(take(1)).subscribe((selectedValues) => {
       if (isNotEmpty(selectedValues)) {
         this.filterService.expand(this.filter.name);
       }
     });
-    this.isActive().pipe(take(1)).subscribe(() => {
-      this.isVisibilityComputed.emit(true);
-    });
   }
 
   /**
@@ -177,6 +170,7 @@ export class SearchFilterComponent implements OnInit {
    */
   private isActive(): Observable<boolean> {
     return this.selectedValues$.pipe(
+      distinctUntilChanged(),
       switchMap((isActive) => {
         if (isNotEmpty(isActive)) {
           return observableOf(true);

src/app/shared/search/search-filters/search-filters.component.html

@@ -2,7 +2,7 @@ <h3>{{"search.filters.head" | translate}}</h3>
 <div *ngIf="(filters | async)?.hasSucceeded">
     <div [class.visually-hidden]="filtersWithComputedVisibility !== (filters | async)?.payload?.length"
          *ngFor="let filter of (filters | async)?.payload; trackBy: trackUpdate">
-        <ds-search-filter (isVisibilityComputed)="countFiltersWithComputedVisibility($event)" [scope]="currentScope" [filter]="filter" [inPlaceSearch]="inPlaceSearch" [refreshFilters]="refreshFilters"></ds-search-filter>
+      <ds-search-filter [scope]="currentScope" [filter]="filter" [inPlaceSearch]="inPlaceSearch" [refreshFilters]="refreshFilters"></ds-search-filter>
     </div>
 </div>
 

src/app/shared/search/search-filters/search-filters.component.ts

@@ -1,7 +1,7 @@
-import { Component, Inject, Input, OnDestroy, OnInit } from '@angular/core';
+import { AfterViewChecked, Component, Inject, Input, OnDestroy, OnInit, QueryList, ViewChildren } from '@angular/core';
 import { Router } from '@angular/router';
 
-import { BehaviorSubject, Observable } from 'rxjs';
+import { BehaviorSubject, combineLatest, distinctUntilChanged, Observable } from 'rxjs';
 import { map, tap } from 'rxjs/operators';
 
 import { SearchService } from '../../../core/shared/search/search.service';
@@ -13,6 +13,7 @@ import { SEARCH_CONFIG_SERVICE } from '../../../my-dspace-page/my-dspace-page.co
 import { currentPath } from '../../utils/route.utils';
 import { hasValue } from '../../empty.util';
 import { APP_CONFIG, AppConfig } from '../../../../config/app-config.interface';
+import { SearchFilterComponent } from './search-filter/search-filter.component';
 
 @Component({
   selector: 'ds-search-filters',
@@ -24,7 +25,7 @@ import { APP_CONFIG, AppConfig } from '../../../../config/app-config.interface';
 /**
  * This component represents the part of the search sidebar that contains filters.
  */
-export class SearchFiltersComponent implements OnInit, OnDestroy {
+export class SearchFiltersComponent implements OnInit, AfterViewChecked, OnDestroy {
   /**
    * An observable containing configuration about which filters are shown and how they are shown
    */
@@ -56,6 +57,11 @@ export class SearchFiltersComponent implements OnInit, OnDestroy {
    */
   @Input() refreshFilters: BehaviorSubject<boolean>;
 
+  /**
+   * List of children filters
+   */
+  @ViewChildren(SearchFilterComponent) childrenFilters!: QueryList<SearchFilterComponent>;
+
   /**
    * Link to the search page
    */
@@ -88,16 +94,14 @@ export class SearchFiltersComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit(): void {
-    this.router.events.subscribe(() => {
-      this.clearParams = this.searchConfigService.getCurrentFrontendFilters().pipe(
-        tap(() => this.filtersWithComputedVisibility = 0),
-        map((filters) => {
-          Object.keys(filters).forEach((f) => filters[f] = null);
-          return filters;
-        })
-      );
-      this.searchLink = this.getSearchLink();
-    });
+    this.clearParams = this.searchConfigService.getCurrentFrontendFilters().pipe(
+      tap(() => this.filtersWithComputedVisibility = 0),
+      map((filters) => {
+        Object.keys(filters).forEach((f) => filters[f] = null);
+        return filters;
+      })
+    );
+    this.searchLink = this.getSearchLink();
   }
 
   /**
@@ -117,17 +121,19 @@ export class SearchFiltersComponent implements OnInit, OnDestroy {
     return config ? config.name : undefined;
   }
 
+  ngAfterViewChecked() {
+    this.subs.push(
+      combineLatest(this.childrenFilters.map(child => child.active$)).pipe(distinctUntilChanged()).subscribe((visibilityValues) => {
+        this.filtersWithComputedVisibility = visibilityValues.filter(visible => !!visible).length;
+      })
+    );
+  }
+
   ngOnDestroy() {
     this.subs.forEach((sub) => {
       if (hasValue(sub)) {
         sub.unsubscribe();
       }
     });
   }
-
-  countFiltersWithComputedVisibility(computed: boolean) {
-    if (computed) {
-      this.filtersWithComputedVisibility += 1;
-    }
-  }
 }