[DSC-648] fix charts filter after merge

Author: atarix83

src/app/shared/search/search-charts/search-chart/search-chart-wrapper/search-chart-wrapper.component.ts

@@ -8,7 +8,9 @@ import {
 } from '../../../../../core/shared/search/search-filter.service';
 import { FilterType } from '../../../models/filter-type.model';
 import { SearchFilterConfig } from '../../../models/search-filter-config.model';
-import { SearchFacetFilterComponent } from '../../../search-filters/search-filter/search-facet-filter/search-facet-filter.component';
+import {
+  SearchFacetFilterComponent
+} from '../../../search-filters/search-filter/search-facet-filter/search-facet-filter.component';
 import { renderChartFilterType } from '../../chart-search-result-element-decorator';
 
 @Component({
@@ -34,10 +36,12 @@ export class SearchChartFilterWrapperComponent implements OnInit {
    * Emits when the search filters values may be stale, and so they must be refreshed.
    */
   @Input() refreshFilters: BehaviorSubject<boolean>;
+
   /**
    * The constructor of the search facet filter that should be rendered, based on the filter config's type
    */
   searchFilter: GenericConstructor<SearchFacetFilterComponent>;
+
   /**
    * Injector to inject a child component with the @Input parameters
    */

src/app/shared/search/search-charts/search-chart/search-chart.component.html

@@ -1,5 +1,6 @@
 <div class="facet-filter mb-3 p-3">
-  <ds-search-chart-wrapper [filterConfig]="filter" [inPlaceSearch]="inPlaceSearch">
-  </ds-search-chart-wrapper>
+  <ds-search-chart-wrapper [filterConfig]="filter"
+                           [inPlaceSearch]="inPlaceSearch"
+                           [refreshFilters]="refreshFilters"></ds-search-chart-wrapper>
   <p class="mt-3 mb-0" *ngIf="showCaption">{{caption}}</p>
 </div>

src/app/shared/search/search-charts/search-chart/search-chart.component.ts

@@ -1,13 +1,15 @@
 import { Component, Inject, Input, OnInit, SimpleChanges } from '@angular/core';
-import { Observable, of as observableOf } from 'rxjs';
+
+import { BehaviorSubject, Observable, of as observableOf } from 'rxjs';
 import { filter, map, startWith, switchMap, take } from 'rxjs/operators';
+import { TranslateService } from '@ngx-translate/core';
+
 import { SEARCH_CONFIG_SERVICE } from '../../../../my-dspace-page/my-dspace-page.component';
 import { SearchConfigurationService } from '../../../../core/shared/search/search-configuration.service';
 import { SearchFilterService } from '../../../../core/shared/search/search-filter.service';
 import { SearchService } from '../../../../core/shared/search/search.service';
 import { isNotEmpty } from '../../../empty.util';
 import { SearchFilterConfig } from '../../models/search-filter-config.model';
-import { TranslateService } from '@ngx-translate/core';
 
 @Component({
   selector: 'ds-search-chart',
@@ -29,6 +31,11 @@ export class SearchChartComponent implements OnInit {
    */
   @Input() inPlaceSearch;
 
+  /**
+   * Emits when the search filters values may be stale, and so they must be refreshed.
+   */
+  @Input() refreshFilters: BehaviorSubject<boolean>;
+
   /**
    * Emits all currently selected values for this filter
    */

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

@@ -10,7 +10,7 @@ <h2 class="m-0">{{'search.filters.applied.charts.' + ((configuration | async) ?
                 (click)="toggleChart()" *ngIf="showChartsToggle">
           <i class="fa fa-chart-line mr-2"></i> {{"search.filters.applied.charts.show.hide" | translate}}</button>
       </div>
-      <div *ngIf="!collapseChart" @shrinkInOut data-test="search-charts">
+      <div *ngIf="!collapseChart && selectedFilter" @shrinkInOut data-test="search-charts">
         <ul class="nav nav-pills mb-2">
           <li class="nav-item mr-3" *ngFor="let filter of (filters | async)?.payload; trackBy: trackUpdate; let i = index"
               (click)="changeChartType(filter)">
@@ -20,7 +20,9 @@ <h2 class="m-0">{{'search.filters.applied.charts.' + ((configuration | async) ?
           </li>
         </ul>
         <div>
-          <ds-search-chart [filter]="selectedFilter" [inPlaceSearch]="inPlaceSearch"> </ds-search-chart>
+          <ds-search-chart [filter]="selectedFilter"
+                           [inPlaceSearch]="inPlaceSearch"
+                           [refreshFilters]="refreshFilters"></ds-search-chart>
         </div>
       </div>
     </div>

src/app/shared/search/search-charts/search-charts.component.spec.ts

@@ -7,8 +7,6 @@ import { TranslateModule } from '@ngx-translate/core';
 
 import { SearchChartsComponent } from './search-charts.component';
 import { SearchService } from '../../../core/shared/search/search.service';
-import { SEARCH_CONFIG_SERVICE } from '../../../my-dspace-page/my-dspace-page.component';
-import { SearchConfigurationServiceStub } from '../../testing/search-configuration-service.stub';
 import { createSuccessfulRemoteDataObject$ } from '../../remote-data.utils';
 import { SearchFilterConfig } from '../models/search-filter-config.model';
 import { FilterType } from '../models/filter-type.model';
@@ -28,6 +26,8 @@ describe('SearchChartsComponent', () => {
     filterType: FilterType['chart.bar']
   });
 
+  const mockChartFilters$ = createSuccessfulRemoteDataObject$([mockGraphPieChartFilterConfig, mockGraphBarChartFilterConfig]);
+
   const searchServiceStub = jasmine.createSpyObj('SearchService', {
     getConfig: jasmine.createSpy('getConfig')
   });
@@ -36,19 +36,14 @@ describe('SearchChartsComponent', () => {
     TestBed.configureTestingModule({
       imports: [TranslateModule.forRoot(), NoopAnimationsModule],
       declarations: [SearchChartsComponent],
-      providers: [
-        { provide: SearchService, useValue: searchServiceStub },
-        { provide: SEARCH_CONFIG_SERVICE, useValue: new SearchConfigurationServiceStub() }
-      ],
       schemas: [NO_ERRORS_SCHEMA]
     }).compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(SearchChartsComponent);
     comp = fixture.componentInstance; // SearchChartsComponent test instance
-    searchService = (comp as any).searchService;
-    searchServiceStub.getConfig.and.returnValue(createSuccessfulRemoteDataObject$([mockGraphPieChartFilterConfig, mockGraphBarChartFilterConfig]));
+    comp.filters = mockChartFilters$;
     fixture.detectChanges();
   });
 

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

@@ -1,15 +1,11 @@
-import { Component, Inject, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 
-import { Observable } from 'rxjs';
-import { map, switchMap, tap } from 'rxjs/operators';
-
-import { SEARCH_CONFIG_SERVICE } from '../../../my-dspace-page/my-dspace-page.component';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { filter, take, tap } from 'rxjs/operators';
 import { RemoteData } from '../../../core/data/remote-data';
-import { SearchConfigurationService } from '../../../core/shared/search/search-configuration.service';
-import { SearchService } from '../../../core/shared/search/search.service';
 import { SearchFilterConfig } from '../models/search-filter-config.model';
-import { getFirstCompletedRemoteData } from '../../../core/shared/operators';
 import { shrinkInOut } from '../../animations/shrink';
+import { isNotEmpty } from '../../empty.util';
 
 @Component({
   selector: 'ds-search-charts',
@@ -22,6 +18,11 @@ import { shrinkInOut } from '../../animations/shrink';
  * This component represents the part of the search sidebar that contains filters.
  */
 export class SearchChartsComponent implements OnInit {
+  /**
+   * An observable containing configuration about which filters are shown and how they are shown
+   */
+  @Input() filters: Observable<RemoteData<SearchFilterConfig[]>>;
+
   /**
    * The currently applied configuration (determines title of search)
    */
@@ -38,56 +39,30 @@ export class SearchChartsComponent implements OnInit {
   @Input() inPlaceSearch;
 
   /**
-   * Toggle button to Show/Hide chart
-   */
-  @Input() showChartsToggle = false;
-
-  /**
-   * An observable containing configuration about which filters are shown and how they are shown
+   * Emits when the search filters values may be stale, and so they must be refreshed.
    */
-  filters: Observable<RemoteData<SearchFilterConfig[]>>;
-
-  selectedTypeIndex = 0;
-
-  selectedFilter: any;
+  @Input() refreshFilters: BehaviorSubject<boolean>;
 
   /**
-   * For chart regular expression
+   * Toggle button to Show/Hide chart
    */
-  chartReg = new RegExp(/^chart./, 'i');
+  @Input() showChartsToggle = false;
 
   /**
-   * Initialize instance variables
-   * @param {SearchService} searchService
-   * @param {SearchConfigurationService} searchConfigService
+   * The selected chart to show
    */
-  constructor(
-    @Inject(SEARCH_CONFIG_SERVICE) private searchConfigService: SearchConfigurationService,
-    private searchService: SearchService,
-  ) {
-  }
+  selectedFilter: SearchFilterConfig;
 
   ngOnInit(): void {
-    this.filters = this.searchConfigService.searchOptions.pipe(
-      switchMap((options) => this.searchService.getConfig(options?.scope, options?.configuration)),
-      getFirstCompletedRemoteData(),
-      map((rd: RemoteData<SearchFilterConfig[]>) => {
-        if (rd.hasSucceeded) {
-          return Object.assign(rd, {
-            payload: rd.payload.filter((filter: SearchFilterConfig) =>
-              this.chartReg.test(filter.filterType)
-            )
-          });
-        } else {
-          return rd;
-        }
-      }),
+    this.filters.pipe(
+      filter((rd: RemoteData<SearchFilterConfig[]>) => isNotEmpty(rd)),
+      take(1),
       tap((rd: RemoteData<SearchFilterConfig[]>) => {
         this.selectedFilter = this.selectedFilter
           ? this.selectedFilter
           : rd.hasSucceeded ? rd.payload[0] : null;
       })
-    );
+    ).subscribe();
   }
 
   /**
@@ -100,10 +75,10 @@ export class SearchChartsComponent implements OnInit {
   /**
    * Change the current chart filter selected
    *
-   * @param filter
+   * @param searchfilter
    */
-  changeChartType(filter) {
-    this.selectedFilter = filter;
+  changeChartType(searchfilter: SearchFilterConfig) {
+    this.selectedFilter = searchfilter;
   }
 
   /**

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

@@ -9,7 +9,9 @@
 <ds-search-charts *ngIf="showCharts"
                   [configuration]="currentConfiguration$"
                   [collapseChart]="collapseCharts"
+                  [filters]="chartFiltersRD$.asObservable()"
                   [inPlaceSearch]="inPlaceSearch"
+                  [refreshFilters]="refreshFilters"
                   [showChartsToggle]="showChartsToggle"></ds-search-charts>
 
 <div *ngIf="!showSidebar && (initialized$ | async)">

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

@@ -221,6 +221,11 @@ export class SearchComponent implements OnInit, OnDestroy {
    */
   currentSortOptions$: BehaviorSubject<SortOptions> = new BehaviorSubject<SortOptions>(null);
 
+  /**
+   * An observable containing configuration about which chart filters are shown and how they are shown
+   */
+  chartFiltersRD$: BehaviorSubject<RemoteData<SearchFilterConfig[]>> = new BehaviorSubject<RemoteData<SearchFilterConfig[]>>(null);
+
   /**
    * An observable containing configuration about which filters are shown and how they are shown
    */
@@ -445,15 +450,38 @@ export class SearchComponent implements OnInit, OnDestroy {
    */
   private retrieveFilters(searchOptions: PaginatedSearchOptions) {
     this.filtersRD$.next(null);
+    this.chartFiltersRD$.next(null);
     this.service.getConfig(searchOptions.scope, searchOptions.configuration).pipe(
       getFirstCompletedRemoteData(),
-      map((rd: RemoteData<SearchFilterConfig[]>) => Object.assign(rd, {
-        payload: rd.payload.filter((entry: SearchFilterConfig) =>
-          !this.chartReg.test(entry.filterType)
-        )})
-      )
     ).subscribe((filtersRD: RemoteData<SearchFilterConfig[]>) => {
-      this.filtersRD$.next(filtersRD);
+      const filtersPayload = filtersRD.payload.filter((entry: SearchFilterConfig) =>
+        !this.chartReg.test(entry.filterType)
+      );
+      const chartFiltersPayload = filtersRD.payload.filter((entry: SearchFilterConfig) =>
+        this.chartReg.test(entry.filterType)
+      );
+      const filters = new RemoteData(
+        filtersRD.timeCompleted,
+        filtersRD.msToLive,
+        filtersRD.lastUpdated,
+        filtersRD.state,
+        filtersRD.errorMessage,
+        filtersPayload,
+        filtersRD.statusCode,
+        filtersRD.errors
+      );
+      this.filtersRD$.next(filters);
+      const chartFilters  = new RemoteData(
+        filtersRD.timeCompleted,
+        filtersRD.msToLive,
+        filtersRD.lastUpdated,
+        filtersRD.state,
+        filtersRD.errorMessage,
+        chartFiltersPayload,
+        filtersRD.statusCode,
+        filtersRD.errors
+      );
+      this.chartFiltersRD$.next(chartFilters);
     });
   }