Merge pull request DSpace#2814 from alexandrevryghem/use-applied-filter-to-display-label-on-search_contribute-main

Fixed authority ids being displayed on search page instead of their display value

Author: tdonohue

src/app/core/services/route.service.spec.ts

@@ -15,9 +15,11 @@ import {
   hot,
 } from 'jasmine-marbles';
 import { of as observableOf } from 'rxjs';
+import { take } from 'rxjs/operators';
 import { TestScheduler } from 'rxjs/testing';
 
 import { RouterMock } from '../../shared/mocks/router.mock';
+import { ActivatedRouteStub } from '../../shared/testing/active-router.stub';
 import { AddUrlToHistoryAction } from '../history/history.actions';
 import { RouteService } from './route.service';
 
@@ -40,23 +42,19 @@ describe('RouteService', () => {
     select: jasmine.createSpy('select'),
   });
 
+  let route: ActivatedRouteStub;
   const router = new RouterMock();
   router.setParams(convertToParamMap(paramObject));
 
   paramObject[paramName1] = paramValue1;
   paramObject[paramName2] = [paramValue2a, paramValue2b];
 
   beforeEach(waitForAsync(() => {
+    route = new ActivatedRouteStub(paramObject);
+
     return TestBed.configureTestingModule({
       providers: [
-        {
-          provide: ActivatedRoute,
-          useValue: {
-            queryParams: observableOf(paramObject),
-            params: observableOf(paramObject),
-            queryParamMap: observableOf(convertToParamMap(paramObject)),
-          },
-        },
+        { provide: ActivatedRoute, useValue: route },
         { provide: Router, useValue: router },
         { provide: Store, useValue: store },
       ],
@@ -192,4 +190,51 @@ describe('RouteService', () => {
       });
     });
   });
+
+  describe('getParamsWithoutAppliedFilter', () => {
+    beforeEach(() => {
+      route.testParams = {
+        'query': '',
+        'spc.page': '1',
+        'f.author': '1282121b-5394-4689-ab93-78d537764052,authority',
+        'f.has_content_in_original_bundle': 'true,equals',
+      };
+    });
+
+    it('should remove the parameter completely if only one value is defined', (done: DoneFn) => {
+      service.getParamsExceptValue('f.author', '1282121b-5394-4689-ab93-78d537764052,authority').pipe(take(1)).subscribe((params: Params) => {
+        expect(params).toEqual({
+          'query': '',
+          'spc.page': '1',
+          'f.has_content_in_original_bundle': 'true,equals',
+        });
+        done();
+      });
+    });
+
+    it('should remove the parameter completely if only one value is defined in an array', (done: DoneFn) => {
+      route.testParams['f.author'] = ['1282121b-5394-4689-ab93-78d537764052,authority'];
+      service.getParamsExceptValue('f.author', '1282121b-5394-4689-ab93-78d537764052,authority').pipe(take(1)).subscribe((params: Params) => {
+        expect(params).toEqual({
+          'query': '',
+          'spc.page': '1',
+          'f.has_content_in_original_bundle': 'true,equals',
+        });
+        done();
+      });
+    });
+
+    it('should return all params except the applied filter even when multiple filters of the same type are selected', (done: DoneFn) => {
+      route.testParams['f.author'] = ['1282121b-5394-4689-ab93-78d537764052,authority', '71b91a28-c280-4352-a199-bd7fc3312501,authority'];
+      service.getParamsExceptValue('f.author', '1282121b-5394-4689-ab93-78d537764052,authority').pipe(take(1)).subscribe((params: Params) => {
+        expect(params).toEqual({
+          'query': '',
+          'spc.page': '1',
+          'f.author': ['71b91a28-c280-4352-a199-bd7fc3312501,authority'],
+          'f.has_content_in_original_bundle': 'true,equals',
+        });
+        done();
+      });
+    });
+  });
 });

src/app/core/services/route.service.ts

@@ -249,4 +249,56 @@ export class RouteService {
         },
       );
   }
+
+  /**
+   * Returns all the query parameters except for the one with the given name & value.
+   *
+   * @param name The name of the query param to exclude
+   * @param value The optional value that the query param needs to have to be excluded
+   */
+  getParamsExceptValue(name: string, value?: string): Observable<Params> {
+    return this.route.queryParams.pipe(
+      map((params: Params) => {
+        const newParams: Params = Object.assign({}, params);
+        const queryParamValues: string | string[] = newParams[name];
+
+        if (queryParamValues === value || value === undefined) {
+          delete newParams[name];
+        } else if (Array.isArray(queryParamValues) && queryParamValues.includes(value)) {
+          newParams[name] = (queryParamValues as string[]).filter((paramValue: string) => paramValue !== value);
+          if (newParams[name].length === 0) {
+            delete newParams[name];
+          }
+        }
+        return newParams;
+      }),
+    );
+  }
+
+  /**
+   * Returns all the existing query parameters and the new value pair with the given name & value.
+   *
+   * @param name The name of the query param for which you need to add the value
+   * @param value The optional value that the query param needs to have in addition to the current ones
+   */
+  getParamsWithAdditionalValue(name: string, value: string): Observable<Params> {
+    return this.route.queryParams.pipe(
+      map((params: Params) => {
+        const newParams: Params = Object.assign({}, params);
+        const queryParamValues: string | string[] = newParams[name];
+
+        if (queryParamValues === undefined) {
+          newParams[name] = value;
+        } else {
+          if (Array.isArray(queryParamValues)) {
+            newParams[name] = [...queryParamValues, value];
+          } else {
+            newParams[name] = [queryParamValues, value];
+          }
+        }
+        return newParams;
+      }),
+    );
+  }
+
 }

src/app/core/shared/search/search-configuration.service.spec.ts

@@ -9,6 +9,7 @@ import { map } from 'rxjs/operators';
 import { getMockRequestService } from '../../../shared/mocks/request.service.mock';
 import { PaginationComponentOptions } from '../../../shared/pagination/pagination-component-options.model';
 import { createSuccessfulRemoteDataObject$ } from '../../../shared/remote-data.utils';
+import { AppliedFilter } from '../../../shared/search/models/applied-filter.model';
 import { PaginatedSearchOptions } from '../../../shared/search/models/paginated-search-options.model';
 import { SearchFilter } from '../../../shared/search/models/search-filter.model';
 import { SearchObjects } from '../../../shared/search/models/search-objects.model';
@@ -47,12 +48,13 @@ describe('SearchConfigurationService', () => {
     getQueryParameterValue: observableOf(value1),
     getQueryParamsWithPrefix: observableOf(prefixFilter),
     getRouteParameterValue: observableOf(''),
+    getParamsExceptValue: observableOf({}),
   });
 
   const paginationService = new PaginationServiceStub();
 
 
-  const activatedRoute: any = new ActivatedRouteStub();
+  const activatedRoute: ActivatedRouteStub = new ActivatedRouteStub();
   const linkService: any = {};
   const requestService: any = getMockRequestService();
   const halService: any = {
@@ -78,7 +80,7 @@ describe('SearchConfigurationService', () => {
     },
   };
   beforeEach(() => {
-    service = new SearchConfigurationService(routeService, paginationService as any, activatedRoute, linkService, halService, requestService, rdb);
+    service = new SearchConfigurationService(routeService, paginationService as any, activatedRoute as any, linkService, halService, requestService, rdb);
   });
 
   describe('when the scope is called', () => {
@@ -287,4 +289,29 @@ describe('SearchConfigurationService', () => {
       expect((service as any).requestService.send).toHaveBeenCalledWith(jasmine.objectContaining({ href: requestUrl }), true);
     });
   });
+
+  describe('unselectAppliedFilterParams', () => {
+    let appliedFilter: AppliedFilter;
+
+    beforeEach(() => {
+      appliedFilter = Object.assign(new AppliedFilter(), {
+        filter: 'author',
+        operator: 'authority',
+        value: '1282121b-5394-4689-ab93-78d537764052',
+        label: 'Odinson, Thor',
+      });
+    });
+
+    it('should return all params except the applied filter', () => {
+      service.unselectAppliedFilterParams(appliedFilter.filter, appliedFilter.value, appliedFilter.operator);
+
+      expect(routeService.getParamsExceptValue).toHaveBeenCalledWith('f.author', '1282121b-5394-4689-ab93-78d537764052,authority');
+    });
+
+    it('should be able to remove AppliedFilter without operator', () => {
+      service.unselectAppliedFilterParams('dateIssued.max', '2000');
+
+      expect(routeService.getParamsExceptValue).toHaveBeenCalledWith('f.dateIssued.max', '2000');
+    });
+  });
 });

src/app/core/shared/search/search-configuration.service.ts

@@ -33,6 +33,7 @@ import { PaginatedSearchOptions } from '../../../shared/search/models/paginated-
 import { SearchFilter } from '../../../shared/search/models/search-filter.model';
 import { SearchFilterConfig } from '../../../shared/search/models/search-filter-config.model';
 import { SearchOptions } from '../../../shared/search/models/search-options.model';
+import { addOperatorToFilterValue } from '../../../shared/search/search.utils';
 import { LinkService } from '../../cache/builders/link.service';
 import { RemoteDataBuildService } from '../../cache/builders/remote-data-build.service';
 import {
@@ -556,6 +557,27 @@ export class SearchConfigurationService implements OnDestroy {
     );
   }
 
+  /**
+   * Calculates the {@link Params} of the search after removing a filter with a certain value
+   *
+   * @param filterName The {@link AppliedFilter}'s name
+   * @param value The {@link AppliedFilter}'s value
+   * @param operator The {@link AppliedFilter}'s optional operator
+   */
+  unselectAppliedFilterParams(filterName: string, value: string, operator?: string): Observable<Params> {
+    return this.routeService.getParamsExceptValue(`f.${filterName}`, hasValue(operator) ? addOperatorToFilterValue(value, operator) : value);
+  }
+
+  /**
+   * Calculates the {@link Params} of the search after removing a filter with a certain value
+   *
+   * @param filterName The {@link AppliedFilter}'s name
+   * @param value The {@link AppliedFilter}'s value
+   * @param operator The {@link AppliedFilter}'s optional operator
+   */
+  selectNewAppliedFilterParams(filterName: string, value: string, operator?: string): Observable<Params> {
+    return this.routeService.getParamsWithAdditionalValue(`f.${filterName}`, hasValue(operator) ? addOperatorToFilterValue(value, operator) : value);
+  }
 
   /**
    * @returns {Observable<Params>} Emits the current view mode as a partial SearchOptions object

src/app/core/shared/search/search-filter.service.ts

@@ -1,4 +1,5 @@
 import {
+  EventEmitter,
   Injectable,
   InjectionToken,
 } from '@angular/core';
@@ -24,6 +25,7 @@ import {
   isNotEmpty,
 } from '../../../shared/empty.util';
 import { PaginationComponentOptions } from '../../../shared/pagination/pagination-component-options.model';
+import { AppliedFilter } from '../../../shared/search/models/applied-filter.model';
 import { SearchFilterConfig } from '../../../shared/search/models/search-filter-config.model';
 import {
   SearchFilterCollapseAction,
@@ -50,6 +52,7 @@ export const FILTER_CONFIG: InjectionToken<SearchFilterConfig> = new InjectionTo
 export const IN_PLACE_SEARCH: InjectionToken<boolean> = new InjectionToken<boolean>('inPlaceSearch');
 export const REFRESH_FILTER: InjectionToken<BehaviorSubject<any>> = new InjectionToken<boolean>('refreshFilters');
 export const SCOPE: InjectionToken<string> = new InjectionToken<string>('scope');
+export const CHANGE_APPLIED_FILTERS: InjectionToken<EventEmitter<AppliedFilter[]>> = new InjectionToken('changeAppliedFilters');
 
 /**
  * Service that performs all actions that have to do with search filters and facets
@@ -84,15 +87,15 @@ export class SearchFilterService {
    * Fetch the current active scope from the query parameters
    * @returns {Observable<string>}
    */
-  getCurrentScope() {
+  getCurrentScope(): Observable<string> {
     return this.routeService.getQueryParameterValue('scope');
   }
 
   /**
    * Fetch the current query from the query parameters
    * @returns {Observable<string>}
    */
-  getCurrentQuery() {
+  getCurrentQuery(): Observable<string> {
     return this.routeService.getQueryParameterValue('query');
   }
 
@@ -134,15 +137,15 @@ export class SearchFilterService {
    * Fetch the current active filters from the query parameters
    * @returns {Observable<Params>}
    */
-  getCurrentFilters() {
+  getCurrentFilters(): Observable<Params> {
     return this.routeService.getQueryParamsWithPrefix('f.');
   }
 
   /**
    * Fetch the current view from the query parameters
    * @returns {Observable<string>}
    */
-  getCurrentView() {
+  getCurrentView(): Observable<string> {
     return this.routeService.getQueryParameterValue('view');
   }
 

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

@@ -9,7 +9,7 @@
                 </button>
             </div>
             <input type="text" [(ngModel)]="query" name="query" class="form-control"
-                   attr.aria-label="{{ searchPlaceholder }}" [attr.data-test]="'search-box' | dsBrowserOnly"
+                   [attr.aria-label]="searchPlaceholder" [attr.data-test]="'search-box' | dsBrowserOnly"
                    [placeholder]="searchPlaceholder">
             <span class="input-group-append">
             <button type="submit" class="search-button btn btn-{{brandColor}}" [attr.data-test]="'search-button' | dsBrowserOnly"><i class="fas fa-search"></i> {{ ('search.form.search' | translate) }}</button>

src/app/shared/search/models/applied-filter.model.ts

@@ -0,0 +1,17 @@
+import { autoserialize } from 'cerialize';
+
+export class AppliedFilter {
+
+  @autoserialize
+    filter: string;
+
+  @autoserialize
+    operator: string;
+
+  @autoserialize
+    value: string;
+
+  @autoserialize
+    label: string;
+
+}

src/app/shared/search/models/search-query-response.model.ts

@@ -1,7 +1,12 @@
-import { autoserialize } from 'cerialize';
+import {
+  autoserialize,
+  autoserializeAs,
+} from 'cerialize';
 
 import { PaginatedList } from '../../../core/data/paginated-list.model';
 import { PageInfo } from '../../../core/shared/page-info.model';
+import { AppliedFilter } from './applied-filter.model';
+import { SearchResultSorting } from './search-result-sorting.model';
 
 /**
  * Class representing the response returned by the server when performing a search request
@@ -22,14 +27,14 @@ export abstract class SearchQueryResponse<T> extends PaginatedList<T> {
   /**
    * The currently active filters used in the search request
    */
-  @autoserialize
-  appliedFilters: any[]; // TODO
+  @autoserializeAs(AppliedFilter)
+  appliedFilters: AppliedFilter[];
 
   /**
    * The sort parameters used in the search request
    */
-  @autoserialize
-  sort: any; // TODO
+  @autoserializeAs(SearchResultSorting)
+  sort: SearchResultSorting;
 
   /**
    * The sort parameters used in the search request

src/app/shared/search/models/search-result-sorting.model.ts

@@ -0,0 +1,11 @@
+import { autoserialize } from 'cerialize';
+
+export class SearchResultSorting {
+
+  @autoserialize
+    by: string;
+
+  @autoserialize
+    order: string;
+
+}

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

@@ -1,9 +1,9 @@
 <div>
     <div class="filters py-2">
-        <ds-search-facet-selected-option *ngFor="let value of (selectedValues$ | async)" [selectedValue]="value" [filterConfig]="filterConfig" [selectedValues$]="selectedValues$" [inPlaceSearch]="inPlaceSearch"></ds-search-facet-selected-option>
-        <ng-container *ngFor="let page of (filterValues$ | async)?.payload">
+        <ds-search-facet-selected-option *ngFor="let value of (selectedAppliedFilters$ | async)" [selectedValue]="value" [filterConfig]="filterConfig" [inPlaceSearch]="inPlaceSearch"></ds-search-facet-selected-option>
+        <ng-container *ngFor="let page of (facetValues$ | async)">
           <div [@facetLoad]="animationState">
-                  <ds-search-facet-option *ngFor="let value of page.page; trackBy: trackUpdate" [filterConfig]="filterConfig" [filterValue]="value" [selectedValues$]="selectedValues$" [inPlaceSearch]="inPlaceSearch"></ds-search-facet-option>
+            <ds-search-facet-option *ngFor="let value of page.page; trackBy: trackUpdate" [filterConfig]="filterConfig" [filterValue]="value" [inPlaceSearch]="inPlaceSearch"></ds-search-facet-option>
           </div>
         </ng-container>
         <div class="clearfix toggle-more-filters">