Merge branch 'use-applied-filter-to-display-label-on-search_contribute-7.6' into use-applied-filter-to-display-label-on-search_contribute-main

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

@@ -9,6 +9,8 @@ import { RouteService } from './route.service';
 import { RouterMock } from '../../shared/mocks/router.mock';
 import { TestScheduler } from 'rxjs/testing';
 import { AddUrlToHistoryAction } from '../history/history.actions';
+import { ActivatedRouteStub } from 'src/app/shared/testing/active-router.stub';
+import { take } from 'rxjs/operators';
 
 describe('RouteService', () => {
   let scheduler: TestScheduler;
@@ -29,6 +31,7 @@ describe('RouteService', () => {
     select: jasmine.createSpy('select')
   });
 
+  let route: ActivatedRouteStub;
   const router = new RouterMock();
   router.setParams(convertToParamMap(paramObject));
 
@@ -36,16 +39,11 @@ describe('RouteService', () => {
   paramObject[paramName2] = [paramValue2a, paramValue2b];
 
   beforeEach(waitForAsync(() => {
+    route = new ActivatedRouteStub(paramObject);
+
     return TestBed.configureTestingModule({
       providers: [
-        {
+        { provide: ActivatedRoute, useValue: route },
-          provide: ActivatedRoute,
-          useValue: {
-            queryParams: observableOf(paramObject),
-            params: observableOf(paramObject),
-            queryParamMap: observableOf(convertToParamMap(paramObject))
-          },
-        },
         { provide: Router, useValue: router },
         { provide: Store, useValue: store },
       ]
@@ -181,4 +179,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

@@ -225,4 +225,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

@@ -13,6 +13,7 @@ import { createSuccessfulRemoteDataObject$ } from '../../../shared/remote-data.u
 import { getMockRequestService } from '../../../shared/mocks/request.service.mock';
 import { RequestEntry } from '../../data/request-entry.model';
 import { SearchObjects } from '../../../shared/search/models/search-objects.model';
+import { AppliedFilter } from '../../../shared/search/models/applied-filter.model';
 
 describe('SearchConfigurationService', () => {
   let service: SearchConfigurationService;
@@ -38,13 +39,14 @@ describe('SearchConfigurationService', () => {
   const routeService = jasmine.createSpyObj('RouteService', {
     getQueryParameterValue: observableOf(value1),
     getQueryParamsWithPrefix: observableOf(prefixFilter),
-    getRouteParameterValue: observableOf('')
+    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 = {
@@ -70,7 +72,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', () => {
@@ -279,4 +281,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

@@ -28,6 +28,7 @@ import { FacetConfigResponseParsingService } from '../../data/facet-config-respo
 import { ViewMode } from '../view-mode.model';
 import { SearchFilterConfig } from '../../../shared/search/models/search-filter-config.model';
 import { FacetConfigResponse } from '../../../shared/search/models/facet-config-response.model';
+import { addOperatorToFilterValue } from '../../../shared/search/search.utils';
 
 /**
  * Service that performs all actions that have to do with the current search configuration
@@ -525,6 +526,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,6 +1,6 @@
 import { BehaviorSubject, combineLatest as observableCombineLatest, Observable } from 'rxjs';
 import { distinctUntilChanged, map } from 'rxjs/operators';
-import { Injectable, InjectionToken } from '@angular/core';
+import { Injectable, InjectionToken, EventEmitter } from '@angular/core';
 import {
   SearchFiltersState,
   SearchFilterState
@@ -21,12 +21,14 @@ import { SortDirection, SortOptions } from '../../cache/models/sort-options.mode
 import { RouteService } from '../../services/route.service';
 import { PaginationComponentOptions } from '../../../shared/pagination/pagination-component-options.model';
 import { Params } from '@angular/router';
+import { AppliedFilter } from '../../../shared/search/models/applied-filter.model';
 
 const filterStateSelector = (state: SearchFiltersState) => state.searchFilter;
 
 export const FILTER_CONFIG: InjectionToken<SearchFilterConfig> = new InjectionToken<SearchFilterConfig>('filterConfig');
 export const IN_PLACE_SEARCH: InjectionToken<boolean> = new InjectionToken<boolean>('inPlaceSearch');
 export const REFRESH_FILTER: InjectionToken<BehaviorSubject<any>> = new InjectionToken<boolean>('refreshFilters');
+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
@@ -61,7 +63,7 @@ export class SearchFilterService {
    * Fetch the current active scope from the query parameters
    * @returns {Observable<string>}
    */
-  getCurrentScope() {
+  getCurrentScope(): Observable<string> {
     return this.routeService.getQueryParameterValue('scope');
   }
 
@@ -69,7 +71,7 @@ export class SearchFilterService {
    * Fetch the current query from the query parameters
    * @returns {Observable<string>}
    */
-  getCurrentQuery() {
+  getCurrentQuery(): Observable<string> {
     return this.routeService.getQueryParameterValue('query');
   }
 
@@ -111,7 +113,7 @@ export class SearchFilterService {
    * Fetch the current active filters from the query parameters
    * @returns {Observable<Params>}
    */
-  getCurrentFilters() {
+  getCurrentFilters(): Observable<Params> {
     return this.routeService.getQueryParamsWithPrefix('f.');
   }
 
@@ -119,7 +121,7 @@ export class SearchFilterService {
    * Fetch the current view from the query parameters
    * @returns {Observable<string>}
    */
-  getCurrentView() {
+  getCurrentView(): Observable<string> {
     return this.routeService.getQueryParameterValue('view');
   }
 

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,6 +1,8 @@
-import { autoserialize } from 'cerialize';
+import { autoserialize, autoserializeAs } from 'cerialize';
 import { PageInfo } from '../../../core/shared/page-info.model';
 import { PaginatedList } from '../../../core/data/paginated-list.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
@@ -21,14 +23,14 @@ export abstract class SearchQueryResponse<T> extends PaginatedList<T> {
   /**
    * The currently active filters used in the search request
    */
-  @autoserialize
+  @autoserializeAs(AppliedFilter)
-  appliedFilters: any[]; // TODO
+  appliedFilters: AppliedFilter[];
 
   /**
    * The sort parameters used in the search request
    */
-  @autoserialize
+  @autoserializeAs(SearchResultSorting)
-  sort: any; // TODO
+  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>
+        <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 (filterValues$ | async)?.payload">
+        <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">

src/app/shared/search/search-filters/search-filter/search-boolean-filter/search-boolean-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>
+        <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 (filterValues$ | async)?.payload">
+      <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">

src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-option/search-facet-option.component.html

@@ -1,7 +1,7 @@
 <a *ngIf="isVisible | async" class="d-flex flex-row"
    [tabIndex]="-1"
    [routerLink]="[searchLink]"
-   [queryParams]="addQueryParams" queryParamsHandling="merge">
+   [queryParams]="addQueryParams$ | async">
   <label class="mb-0 d-flex w-100">
     <input type="checkbox" [checked]="false" class="my-1 align-self-stretch filter-checkbox"/>
     <span class="w-100 pl-1 break-facet">

src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-option/search-facet-option.component.spec.ts

@@ -3,9 +3,9 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { FormsModule } from '@angular/forms';
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { Router } from '@angular/router';
+import { Router, Params } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
-import { of as observableOf } from 'rxjs';
+import { of as observableOf, take } from 'rxjs';
 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';
@@ -18,16 +18,15 @@ import { SearchFacetOptionComponent } from './search-facet-option.component';
 import { PaginationComponentOptions } from '../../../../../pagination/pagination-component-options.model';
 import { PaginationService } from '../../../../../../core/pagination/pagination.service';
 import { PaginationServiceStub } from '../../../../../testing/pagination-service.stub';
+import { SearchConfigurationServiceStub } from '../../../../../testing/search-configuration-service.stub';
+import { SearchFilterServiceStub } from '../../../../../testing/search-filter-service.stub';
 import { ShortNumberPipe } from '../../../../../utils/short-number.pipe';
 
 describe('SearchFacetOptionComponent', () => {
   let comp: SearchFacetOptionComponent;
   let fixture: ComponentFixture<SearchFacetOptionComponent>;
   const filterName1 = 'testname';
-  const filterName2 = 'testAuthorityname';
-  const value1 = 'testvalue1';
   const value2 = 'test2';
-  const operator = 'authority';
 
   const mockFilterConfig = Object.assign(new SearchFilterConfig(), {
     name: filterName1,
@@ -39,15 +38,7 @@ describe('SearchFacetOptionComponent', () => {
     maxValue: 3000,
   });
 
-  const mockAuthorityFilterConfig = Object.assign(new SearchFilterConfig(), {
+  const facetValue: FacetValue = {
-    name: filterName2,
-    filterType: FilterType.authority,
-    hasFacets: false,
-    isOpenByDefault: false,
-    pageSize: 2
-  });
-
-  const value: FacetValue = {
     label: value2,
     value: value2,
     count: 20,
@@ -57,63 +48,30 @@ describe('SearchFacetOptionComponent', () => {
     }
   };
 
-  const selectedValue: FacetValue = {
-    label: value1,
-    value: value1,
-    count: 20,
-    _links: {
-      self: { href: 'selectedValue-self-link1' },
-      search: { href: `http://test.org/api/discover/search/objects?f.${filterName1}=${value1},${operator}` }
-    }
-  };
-
-  const authorityValue: FacetValue = {
-    label: value2,
-    value: value2,
-    count: 20,
-    _links: {
-      self: { href: 'authorityValue-self-link2' },
-      search: { href: `http://test.org/api/discover/search/objects?f.${filterName2}=${value2},${operator}` }
-    }
-  };
-
   const searchLink = '/search';
-  const selectedValues = [selectedValue];
+  let searchConfigurationService: SearchConfigurationServiceStub;
-  const selectedValues$ = observableOf(selectedValues);
+  let searchFilterService: SearchFilterServiceStub;
-  let filterService;
+  let searchService: SearchServiceStub;
-  let searchService;
+  let router: RouterStub;
-  let router;
-  const page = observableOf(0);
 
-  const pagination = Object.assign(new PaginationComponentOptions(), { id: 'page-id', currentPage: 1, pageSize: 20 });
+  const pagination = Object.assign(new PaginationComponentOptions(), { id: 'test-id', currentPage: 1, pageSize: 20 });
   const paginationService = new PaginationServiceStub(pagination);
+
   beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
+    searchConfigurationService = new SearchConfigurationServiceStub();
+    searchFilterService = new SearchFilterServiceStub();
+    searchService = new SearchServiceStub(searchLink);
+    router = new RouterStub();
+
+    void TestBed.configureTestingModule({
       imports: [TranslateModule.forRoot(), NoopAnimationsModule, FormsModule],
       declarations: [SearchFacetOptionComponent, ShortNumberPipe],
       providers: [
-        { provide: SearchService, useValue: new SearchServiceStub(searchLink) },
+        { provide: SearchService, useValue: searchService },
-        { provide: Router, useValue: new RouterStub() },
+        { provide: Router, useValue: router },
         { provide: PaginationService, useValue: paginationService },
-        {
+        { provide: SearchConfigurationService, useValue: searchConfigurationService },
-          provide: SearchConfigurationService, useValue: {
+        { provide: SearchFilterService, useValue: searchFilterService },
-            paginationID: 'page-id',
-            searchOptions: observableOf({})
-          }
-        },
-        {
-          provide: SearchFilterService, useValue: {
-            getSelectedValuesForFilter: () => selectedValues,
-            isFilterActiveWithValue: (paramName: string, filterValue: string) => observableOf(true),
-            getPage: (paramName: string) => page,
-            /* eslint-disable no-empty,@typescript-eslint/no-empty-function */
-            incrementPage: (filterName: string) => {
-            },
-            resetPage: (filterName: string) => {
-            }
-            /* eslint-enable no-empty, @typescript-eslint/no-empty-function */
-          }
-        }
       ],
       schemas: [NO_ERRORS_SCHEMA]
     }).overrideComponent(SearchFacetOptionComponent, {
@@ -124,37 +82,24 @@ describe('SearchFacetOptionComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(SearchFacetOptionComponent);
     comp = fixture.componentInstance; // SearchPageComponent test instance
-    filterService = (comp as any).filterService;
+    comp.filterValue = facetValue;
-    searchService = (comp as any).searchService;
-    router = (comp as any).router;
-    comp.filterValue = value;
-    comp.selectedValues$ = selectedValues$;
     comp.filterConfig = mockFilterConfig;
     fixture.detectChanges();
   });
 
-  describe('when the updateAddParams method is called with a value', () => {
+  describe('updateAddParams', () => {
-    it('should update the addQueryParams with the new parameter values', () => {
+    it('should always reset the page to 1', (done: DoneFn) => {
-      comp.addQueryParams = {};
+      spyOn(searchConfigurationService, 'selectNewAppliedFilterParams').and.returnValue(observableOf({
-      (comp as any).updateAddParams(selectedValues);
+        [mockFilterConfig.paramName]: [`${facetValue.value},equals`],
-      expect(comp.addQueryParams).toEqual({
+        ['test-id.page']: 5,
-        [mockFilterConfig.paramName]: [`${value1},${operator}`, value.value + ',equals'],
+      }));
-        ['page-id.page']: 1
-      });
-    });
-  });
 
-  describe('when filter type is authority and the updateAddParams method is called with a value', () => {
+      comp.updateAddParams().pipe(take(1)).subscribe((params: Params) => {
-    it('should update the addQueryParams with the new parameter values', () => {
+        expect(params).toEqual({
-      comp.filterValue = authorityValue;
+          [mockFilterConfig.paramName]: [`${facetValue.value},equals`],
-      comp.filterConfig = mockAuthorityFilterConfig;
+          ['test-id.page']: 1,
-      fixture.detectChanges();
+        });
-
+        done();
-      comp.addQueryParams = {};
-      (comp as any).updateAddParams(selectedValues);
-      expect(comp.addQueryParams).toEqual({
-        [mockAuthorityFilterConfig.paramName]: [value1 + ',equals', `${value2},${operator}`],
-        ['page-id.page']: 1
       });
     });
   });

src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-option/search-facet-option.component.ts

@@ -1,13 +1,12 @@
-import { combineLatest as observableCombineLatest, Observable, Subscription } from 'rxjs';
+import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
+import { Params, Router } from '@angular/router';
 import { FacetValue } from '../../../../models/facet-value.model';
 import { SearchFilterConfig } from '../../../../models/search-filter-config.model';
 import { SearchService } from '../../../../../../core/shared/search/search.service';
 import { SearchFilterService } from '../../../../../../core/shared/search/search-filter.service';
 import { SearchConfigurationService } from '../../../../../../core/shared/search/search-configuration.service';
-import { hasValue } from '../../../../../empty.util';
 import { currentPath } from '../../../../../utils/route.utils';
 import { getFacetValueForType } from '../../../../search.utils';
 import { PaginationService } from '../../../../../../core/pagination/pagination.service';
@@ -21,7 +20,7 @@ import { PaginationService } from '../../../../../../core/pagination/pagination.
 /**
  * Represents a single option in a filter facet
  */
-export class SearchFacetOptionComponent implements OnInit, OnDestroy {
+export class SearchFacetOptionComponent implements OnInit {
   /**
    * A single value for this component
    */
@@ -32,15 +31,10 @@ export class SearchFacetOptionComponent implements OnInit, OnDestroy {
    */
   @Input() filterConfig: SearchFilterConfig;
 
-  /**
-   * Emits the active values for this filter
-   */
-  @Input() selectedValues$: Observable<FacetValue[]>;
-
   /**
    * True when the search component should show results on the current page
    */
-  @Input() inPlaceSearch;
+  @Input() inPlaceSearch: boolean;
 
   /**
    * Emits true when this option should be visible and false when it should be invisible
@@ -50,16 +44,12 @@ export class SearchFacetOptionComponent implements OnInit, OnDestroy {
   /**
    * UI parameters when this filter is added
    */
-  addQueryParams;
+  addQueryParams$: Observable<Params>;
 
   /**
    * Link to the search page
    */
   searchLink: string;
-  /**
-   * Subscription to unsubscribe from on destroy
-   */
-  sub: Subscription;
 
   paginationId: string;
 
@@ -78,23 +68,20 @@ export class SearchFacetOptionComponent implements OnInit, OnDestroy {
     this.paginationId = this.searchConfigService.paginationID;
     this.searchLink = this.getSearchLink();
     this.isVisible = this.isChecked().pipe(map((checked: boolean) => !checked));
-    this.sub = observableCombineLatest(this.selectedValues$, this.searchConfigService.searchOptions)
+    this.addQueryParams$ = this.updateAddParams();
-      .subscribe(([selectedValues, searchOptions]) => {
-        this.updateAddParams(selectedValues);
-      });
   }
 
   /**
    * Checks if a value for this filter is currently active
    */
-  private isChecked(): Observable<boolean> {
+  isChecked(): Observable<boolean> {
     return this.filterService.isFilterActiveWithValue(this.filterConfig.paramName, this.getFacetValue());
   }
 
   /**
    * @returns {string} The base path to the search page, or the current page when inPlaceSearch is true
    */
-  private getSearchLink(): string {
+  getSearchLink(): string {
     if (this.inPlaceSearch) {
       return currentPath(this.router);
     }
@@ -102,31 +89,23 @@ export class SearchFacetOptionComponent implements OnInit, OnDestroy {
   }
 
   /**
-   * Calculates the parameters that should change if a given value for this filter would be added to the active filters
+   * Calculates the parameters that should change if this {@link filterValue} would be added to the active filters
-   * @param {string[]} selectedValues The values that are currently selected for this filter
    */
-  private updateAddParams(selectedValues: FacetValue[]): void {
+  updateAddParams(): Observable<Params> {
-    const page = this.paginationService.getPageParam(this.searchConfigService.paginationID);
+    const page: string = this.paginationService.getPageParam(this.searchConfigService.paginationID);
-    this.addQueryParams = {
+    return this.searchConfigService.selectNewAppliedFilterParams(this.filterConfig.name, this.getFacetValue()).pipe(
-      [this.filterConfig.paramName]: [...selectedValues.map((facetValue: FacetValue) => getFacetValueForType(facetValue, this.filterConfig)), this.getFacetValue()],
+      map((params: Params) => ({
-      [page]: 1
+        ...params,
-    };
+        [page]: 1,
+      })),
+    );
   }
 
   /**
-   * TODO to review after https://github.com/DSpace/dspace-angular/issues/368 is resolved
    * Retrieve facet value related to facet type
    */
-  private getFacetValue(): string {
+  getFacetValue(): string {
     return getFacetValueForType(this.filterValue, this.filterConfig);
   }
 
-  /**
-   * Make sure the subscription is unsubscribed from when this component is destroyed
-   */
-  ngOnDestroy(): void {
-    if (hasValue(this.sub)) {
-      this.sub.unsubscribe();
-    }
-  }
 }

src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-range-option/search-facet-range-option.component.spec.ts

@@ -123,8 +123,8 @@ describe('SearchFacetRangeOptionComponent', () => {
       };
       (comp as any).updateChangeParams();
       expect(comp.changeQueryParams).toEqual({
-        [mockFilterConfig.paramName + RANGE_FILTER_MIN_SUFFIX]: ['50'],
+        [mockFilterConfig.paramName + RANGE_FILTER_MIN_SUFFIX]: [50],
-        [mockFilterConfig.paramName + RANGE_FILTER_MAX_SUFFIX]: ['60'],
+        [mockFilterConfig.paramName + RANGE_FILTER_MAX_SUFFIX]: [60],
         ['page-id.page']: 1
       });
     });

src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-range-option/search-facet-range-option.component.ts

@@ -1,7 +1,7 @@
 import { Observable, Subscription } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
+import { Params, Router } from '@angular/router';
 import { FacetValue } from '../../../../models/facet-value.model';
 import { SearchFilterConfig } from '../../../../models/search-filter-config.model';
 import { SearchService } from '../../../../../../core/shared/search/search.service';
@@ -41,7 +41,7 @@ export class SearchFacetRangeOptionComponent implements OnInit, OnDestroy {
   /**
    * True when the search component should show results on the current page
    */
-  @Input() inPlaceSearch;
+  @Input() inPlaceSearch: boolean;
 
   /**
    * Emits true when this option should be visible and false when it should be invisible
@@ -51,7 +51,7 @@ export class SearchFacetRangeOptionComponent implements OnInit, OnDestroy {
   /**
    * UI parameters when this filter is changed
    */
-  changeQueryParams;
+  changeQueryParams: Params;
 
   /**
    * Subscription to unsubscribe from on destroy
@@ -104,12 +104,12 @@ export class SearchFacetRangeOptionComponent implements OnInit, OnDestroy {
    */
   private updateChangeParams(): void {
     const parts = this.filterValue.value.split(rangeDelimiter);
-    const min = parts.length > 1 ? parts[0].trim() : this.filterValue.value;
+    const min = parts.length > 1 ? Number(parts[0].trim()) : this.filterValue.value;
-    const max = parts.length > 1 ? parts[1].trim() : this.filterValue.value;
+    const max = parts.length > 1 ? Number(parts[1].trim()) : this.filterValue.value;
     const page = this.paginationService.getPageParam(this.searchConfigService.paginationID);
     this.changeQueryParams = {
       [this.filterConfig.paramName + RANGE_FILTER_MIN_SUFFIX]: [min],
-      [this.filterConfig.paramName + RANGE_FILTER_MAX_SUFFIX]: [max],
+      [this.filterConfig.paramName + RANGE_FILTER_MAX_SUFFIX]: max === new Date().getUTCFullYear() ? null : [max],
       [page]: 1
     };
   }

src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-selected-option/search-facet-selected-option.component.html

@@ -1,7 +1,7 @@
 <a class="d-flex flex-row"
    [tabIndex]="-1"
    [routerLink]="[searchLink]"
-   [queryParams]="removeQueryParams" queryParamsHandling="merge">
+   [queryParams]="removeQueryParams | async">
   <label class="mb-0 d-flex w-100">
     <input type="checkbox" [checked]="true" class="my-1 align-self-stretch filter-checkbox"/>
     <span class="filter-value pl-1 break-facet">

src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-selected-option/search-facet-selected-option.component.spec.ts

@@ -1,31 +1,31 @@
-import { ChangeDetectionStrategy, NO_ERRORS_SCHEMA } from '@angular/core';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { FormsModule } from '@angular/forms';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { Router } from '@angular/router';
+import { Params, Router } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
-import { of as observableOf } from 'rxjs';
+import { of as observableOf, take } from 'rxjs';
 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 { RouterStub } from '../../../../../testing/router.stub';
 import { SearchServiceStub } from '../../../../../testing/search-service.stub';
-import { FacetValue } from '../../../../models/facet-value.model';
 import { FilterType } from '../../../../models/filter-type.model';
 import { SearchFilterConfig } from '../../../../models/search-filter-config.model';
 import { SearchFacetSelectedOptionComponent } from './search-facet-selected-option.component';
 import { PaginationComponentOptions } from '../../../../../pagination/pagination-component-options.model';
 import { PaginationService } from '../../../../../../core/pagination/pagination.service';
 import { PaginationServiceStub } from '../../../../../testing/pagination-service.stub';
+import { AppliedFilter } from '../../../../models/applied-filter.model';
+import { SearchConfigurationServiceStub } from '../../../../../testing/search-configuration-service.stub';
+import { SearchFilterServiceStub } from '../../../../../testing/search-filter-service.stub';
 
 describe('SearchFacetSelectedOptionComponent', () => {
   let comp: SearchFacetSelectedOptionComponent;
   let fixture: ComponentFixture<SearchFacetSelectedOptionComponent>;
   const filterName1 = 'test name';
   const filterName2 = 'testAuthorityname';
-  const label1 = 'test value 1';
   const value1 = 'testvalue1';
-  const label2 = 'test 2';
   const value2 = 'test2';
   const operator = 'authority';
   const mockFilterConfig = Object.assign(new SearchFilterConfig(), {
@@ -37,149 +37,63 @@ describe('SearchFacetSelectedOptionComponent', () => {
     minValue: 200,
     maxValue: 3000,
   });
-  const mockAuthorityFilterConfig = Object.assign(new SearchFilterConfig(), {
-    name: filterName2,
-    filterType: FilterType.authority,
-    hasFacets: false,
-    isOpenByDefault: false,
-    pageSize: 2
-  });
 
   const searchLink = '/search';
-  const selectedValue: FacetValue = {
+  const appliedFilter: AppliedFilter = Object.assign(new AppliedFilter(), {
-    label: value1,
+    filter: filterName2,
-    value: value1,
+    operator: operator,
-    count: 20,
-    _links: {
-      self: { href: 'selectedValue-self-link1' },
-      search: { href: `http://test.org/api/discover/search/objects?f.${filterName1}=${value1}` }
-    }
-  };
-  const selectedValue2: FacetValue = {
     label: value2,
     value: value2,
-    count: 20,
+  });
-    _links: {
+  let searchService: SearchServiceStub;
-      self: { href: 'selectedValue-self-link2' },
+  let searchConfigurationService: SearchConfigurationServiceStub;
-      search: { href: `http://test.org/api/discover/search/objects?f.${filterName1}=${value2}` }
+  let searchFilterService: SearchFilterServiceStub;
-    }
+  let router: RouterStub;
-  };
-  const selectedAuthorityValue: FacetValue = {
-    label: label1,
-    value: value1,
-    count: 20,
-    _links: {
-      self: { href: 'selectedAuthorityValue-self-link1' },
-      search: { href: `http://test.org/api/discover/search/objects?f.${filterName2}=${value1},${operator}` }
-    }
-  };
-  const selectedAuthorityValue2: FacetValue = {
-    label: label2,
-    value: value2,
-    count: 20,
-    _links: {
-      self: { href: 'selectedAuthorityValue-self-link2' },
-      search: { href: `http://test.org/api/discover/search/objects?f.${filterName2}=${value2},${operator}` }
-    }
-  };
-  const selectedValues = [selectedValue, selectedValue2];
-  const selectedAuthorityValues = [selectedAuthorityValue, selectedAuthorityValue2];
-  const facetValue = {
-    label: value2,
-    value: value2,
-    count: 1,
-    _links: {
-      self: { href: 'facetValue-self-link2' },
-      search: { href: `` }
-    }
-  };
-  const authorityValue: FacetValue = {
-    label: label2,
-    value: value2,
-    count: 20,
-    _links: {
-      self: { href: 'authorityValue-self-link2' },
-      search: { href: `http://test.org/api/discover/search/objects?f.${filterName2}=${value2},${operator}` }
-    }
-  };
-  const selectedValues$ = observableOf(selectedValues);
-  const selectedAuthorityValues$ = observableOf(selectedAuthorityValues);
-  let filterService;
-  let searchService;
-  let router;
-  const page = observableOf(0);
 
   const pagination = Object.assign(new PaginationComponentOptions(), { id: 'page-id', currentPage: 1, pageSize: 20 });
   const paginationService = new PaginationServiceStub(pagination);
 
   beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
+    searchConfigurationService = new SearchConfigurationServiceStub();
+    searchFilterService = new SearchFilterServiceStub();
+    searchService = new SearchServiceStub(searchLink);
+    router = new RouterStub();
+
+    void TestBed.configureTestingModule({
       imports: [TranslateModule.forRoot(), NoopAnimationsModule, FormsModule],
       declarations: [SearchFacetSelectedOptionComponent],
       providers: [
-        { provide: SearchService, useValue: new SearchServiceStub(searchLink) },
+        { provide: SearchService, useValue:searchService },
-        { provide: Router, useValue: new RouterStub() },
+        { provide: Router, useValue: router },
         { provide: PaginationService, useValue: paginationService },
-        {
+        { provide: SearchConfigurationService, useValue: searchConfigurationService },
-          provide: SearchConfigurationService, useValue: {
+        { provide: SearchFilterService, useValue: searchFilterService },
-            searchOptions: observableOf({})
-          }
-        },
-        {
-          provide: SearchFilterService, useValue: {
-            getSelectedValuesForFilter: () => selectedValues,
-            isFilterActiveWithValue: (paramName: string, filterValue: string) => observableOf(true),
-            getPage: (paramName: string) => page,
-            /* eslint-disable no-empty,@typescript-eslint/no-empty-function */
-            incrementPage: (filterName: string) => {
-            },
-            resetPage: (filterName: string) => {
-            }
-            /* eslint-enable no-empty, @typescript-eslint/no-empty-function */
-          }
-        }
       ],
       schemas: [NO_ERRORS_SCHEMA]
-    }).overrideComponent(SearchFacetSelectedOptionComponent, {
-      set: { changeDetection: ChangeDetectionStrategy.Default }
     }).compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(SearchFacetSelectedOptionComponent);
     comp = fixture.componentInstance; // SearchFacetSelectedOptionComponent test instance
-    filterService = (comp as any).filterService;
+    comp.selectedValue = appliedFilter;
-    searchService = (comp as any).searchService;
-    router = (comp as any).router;
-    comp.selectedValue = facetValue;
-    comp.selectedValues$ = selectedValues$;
     comp.filterConfig = mockFilterConfig;
     fixture.detectChanges();
   });
 
-  describe('when the updateRemoveParams method is called wih a value', () => {
+  describe('updateRemoveParams', () => {
-    it('should update the removeQueryParams with the new parameter values', () => {
+    it('should always reset the page to 1', (done: DoneFn) => {
-      comp.removeQueryParams = {};
+      spyOn(searchConfigurationService, 'unselectAppliedFilterParams').and.returnValue(observableOf({
-      (comp as any).updateRemoveParams(selectedValues);
+        [mockFilterConfig.paramName]: [`${value1},equals`],
-      expect(comp.removeQueryParams).toEqual({
+        ['page-id.page']: 5,
+      }));
+
+      comp.updateRemoveParams().pipe(take(1)).subscribe((params: Params) => {
+        expect(params).toEqual({
           [mockFilterConfig.paramName]: [`${value1},equals`],
           ['page-id.page']: 1
         });
-    });
+        done();
-  });
-
-  describe('when filter type is authority and the updateRemoveParams method is called with a value', () => {
-    it('should update the removeQueryParams with the new parameter values', () => {
-      spyOn(filterService, 'getSelectedValuesForFilter').and.returnValue(selectedAuthorityValues);
-      comp.selectedValue = authorityValue;
-      comp.selectedValues$ = selectedAuthorityValues$;
-      comp.filterConfig = mockAuthorityFilterConfig;
-      comp.removeQueryParams = {};
-      fixture.detectChanges();
-      (comp as any).updateRemoveParams(selectedAuthorityValues);
-      expect(comp.removeQueryParams).toEqual({
-        [mockAuthorityFilterConfig.paramName]: [`${value1},${operator}`],
-        ['page-id.page']: 1
       });
     });
   });

src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-selected-option/search-facet-selected-option.component.ts

@@ -1,14 +1,12 @@
-import { combineLatest as observableCombineLatest, Observable, Subscription } from 'rxjs';
+import { Observable } from 'rxjs';
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
+import { Params, Router } from '@angular/router';
 import { SearchFilterConfig } from '../../../../models/search-filter-config.model';
 import { SearchService } from '../../../../../../core/shared/search/search.service';
-import { SearchFilterService } from '../../../../../../core/shared/search/search-filter.service';
-import { hasValue } from '../../../../../empty.util';
 import { SearchConfigurationService } from '../../../../../../core/shared/search/search-configuration.service';
-import { FacetValue } from '../../../../models/facet-value.model';
 import { currentPath } from '../../../../../utils/route.utils';
-import { getFacetValueForType } from '../../../../search.utils';
+import { AppliedFilter } from '../../../../models/applied-filter.model';
+import { map } from 'rxjs/operators';
 import { PaginationService } from '../../../../../../core/pagination/pagination.service';
 
 @Component({
@@ -20,47 +18,37 @@ import { PaginationService } from '../../../../../../core/pagination/pagination.
 /**
  * Represents a single selected option in a filter facet
  */
-export class SearchFacetSelectedOptionComponent implements OnInit, OnDestroy {
+export class SearchFacetSelectedOptionComponent implements OnInit {
   /**
    * The value for this component
    */
-  @Input() selectedValue: FacetValue;
+  @Input() selectedValue: AppliedFilter;
 
   /**
    * The filter configuration for this facet option
    */
   @Input() filterConfig: SearchFilterConfig;
 
-  /**
-   * Emits the active values for this filter
-   */
-  @Input() selectedValues$: Observable<FacetValue[]>;
-
   /**
    * True when the search component should show results on the current page
    */
-  @Input() inPlaceSearch;
+  @Input() inPlaceSearch: boolean;
 
   /**
    * UI parameters when this filter is removed
    */
-  removeQueryParams;
+  removeQueryParams: Observable<Params>;
-
-  /**
-   * Subscription to unsubscribe from on destroy
-   */
-  sub: Subscription;
 
   /**
    * Link to the search page
    */
   searchLink: string;
 
-  constructor(protected searchService: SearchService,
+  constructor(
-              protected filterService: SearchFilterService,
+    protected paginationService: PaginationService,
-              protected searchConfigService: SearchConfigurationService,
     protected router: Router,
-              protected paginationService: PaginationService
+    protected searchService: SearchService,
+    protected searchConfigService: SearchConfigurationService,
   ) {
   }
 
@@ -68,50 +56,31 @@ export class SearchFacetSelectedOptionComponent implements OnInit, OnDestroy {
    * Initializes all observable instance variables and starts listening to them
    */
   ngOnInit(): void {
-    this.sub = observableCombineLatest(this.selectedValues$, this.searchConfigService.searchOptions)
-      .subscribe(([selectedValues, searchOptions]) => {
-        this.updateRemoveParams(selectedValues);
-      });
     this.searchLink = this.getSearchLink();
+    this.removeQueryParams = this.updateRemoveParams();
+  }
+
+  /**
+   * Calculates the parameters that should change if this {@link selectedValue} would be removed from the active filters
+   */
+  updateRemoveParams(): Observable<Params> {
+    const page: string = this.paginationService.getPageParam(this.searchConfigService.paginationID);
+    return this.searchConfigService.unselectAppliedFilterParams(this.selectedValue.filter, this.selectedValue.value, this.selectedValue.operator).pipe(
+      map((params: Params) => ({
+        ...params,
+        [page]: 1,
+      })),
+    );
   }
 
   /**
    * @returns {string} The base path to the search page, or the current page when inPlaceSearch is true
    */
-  private getSearchLink(): string {
+  getSearchLink(): string {
     if (this.inPlaceSearch) {
       return currentPath(this.router);
     }
     return this.searchService.getSearchLink();
   }
 
-  /**
-   * Calculates the parameters that should change if a given value for this filter would be removed from the active filters
-   * @param {string[]} selectedValues The values that are currently selected for this filter
-   */
-  private updateRemoveParams(selectedValues: FacetValue[]): void {
-    const page = this.paginationService.getPageParam(this.searchConfigService.paginationID);
-    this.removeQueryParams = {
-      [this.filterConfig.paramName]: selectedValues
-        .filter((facetValue: FacetValue) => facetValue.label !== this.selectedValue.label)
-        .map((facetValue: FacetValue) => this.getFacetValue(facetValue)),
-      [page]: 1
-    };
-  }
-  /**
-   * TODO to review after https://github.com/DSpace/dspace-angular/issues/368 is resolved
-   * Retrieve facet value related to facet type
-   */
-  private getFacetValue(facetValue: FacetValue): string {
-    return getFacetValueForType(facetValue, this.filterConfig);
-  }
-
-  /**
-   * Make sure the subscription is unsubscribed from when this component is destroyed
-   */
-  ngOnDestroy(): void {
-    if (hasValue(this.sub)) {
-      this.sub.unsubscribe();
-    }
-  }
 }

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

@@ -1,15 +1,16 @@
-import { Component, Injector, Input, OnInit } from '@angular/core';
+import { Component, Injector, Input, OnInit, Output, EventEmitter } from '@angular/core';
 import { renderFilterType } from '../search-filter-type-decorator';
 import { FilterType } from '../../../models/filter-type.model';
 import { SearchFilterConfig } from '../../../models/search-filter-config.model';
 import {
   FILTER_CONFIG,
   IN_PLACE_SEARCH,
-  REFRESH_FILTER
+  REFRESH_FILTER, CHANGE_APPLIED_FILTERS
 } from '../../../../../core/shared/search/search-filter.service';
 import { GenericConstructor } from '../../../../../core/shared/generic-constructor';
 import { SearchFacetFilterComponent } from '../search-facet-filter/search-facet-filter.component';
 import { BehaviorSubject } from 'rxjs';
+import { AppliedFilter } from '../../../models/applied-filter.model';
 
 @Component({
   selector: 'ds-search-facet-filter-wrapper',
@@ -35,6 +36,11 @@ export class SearchFacetFilterWrapperComponent implements OnInit {
    */
   @Input() refreshFilters: BehaviorSubject<boolean>;
 
+  /**
+   * Emits the {@link AppliedFilter}s of this search filter
+   */
+  @Output() changeAppliedFilters: EventEmitter<AppliedFilter[]> = new EventEmitter();
+
   /**
    * The constructor of the search facet filter that should be rendered, based on the filter config's type
    */
@@ -56,7 +62,8 @@ export class SearchFacetFilterWrapperComponent implements OnInit {
       providers: [
         { provide: FILTER_CONFIG, useFactory: () => (this.filterConfig), deps: [] },
         { provide: IN_PLACE_SEARCH, useFactory: () => (this.inPlaceSearch), deps: [] },
-        { provide: REFRESH_FILTER, useFactory: () => (this.refreshFilters), deps: [] }
+        { provide: REFRESH_FILTER, useFactory: () => (this.refreshFilters), deps: [] },
+        { provide: CHANGE_APPLIED_FILTERS, useFactory: () => this.changeAppliedFilters },
       ],
       parent: this.injector
     });

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

@@ -1,8 +1,9 @@
-import { ChangeDetectionStrategy, NO_ERRORS_SCHEMA } from '@angular/core';
+import { ChangeDetectionStrategy, EventEmitter, NO_ERRORS_SCHEMA } from '@angular/core';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { TranslateModule } from '@ngx-translate/core';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import {
+  CHANGE_APPLIED_FILTERS,
   FILTER_CONFIG,
   IN_PLACE_SEARCH,
   REFRESH_FILTER,
@@ -10,20 +11,19 @@ import {
 } from '../../../../../core/shared/search/search-filter.service';
 import { SearchFilterConfig } from '../../../models/search-filter-config.model';
 import { FilterType } from '../../../models/filter-type.model';
-import { FacetValue } from '../../../models/facet-value.model';
 import { FormsModule } from '@angular/forms';
 import { BehaviorSubject, of as observableOf } from 'rxjs';
 import { SearchService } from '../../../../../core/shared/search/search.service';
 import { SearchServiceStub } from '../../../../testing/search-service.stub';
-import { buildPaginatedList } from '../../../../../core/data/paginated-list.model';
 import { RouterStub } from '../../../../testing/router.stub';
 import { Router } from '@angular/router';
-import { PageInfo } from '../../../../../core/shared/page-info.model';
 import { SearchFacetFilterComponent } from './search-facet-filter.component';
 import { RemoteDataBuildService } from '../../../../../core/cache/builders/remote-data-build.service';
 import { SearchConfigurationServiceStub } from '../../../../testing/search-configuration-service.stub';
 import { SEARCH_CONFIG_SERVICE } from '../../../../../my-dspace-page/my-dspace-page.component';
 import { createSuccessfulRemoteDataObject$ } from '../../../../remote-data.utils';
+import { AppliedFilter } from '../../../models/applied-filter.model';
+import { FacetValues } from '../../../models/facet-values.model';
 
 describe('SearchFacetFilterComponent', () => {
   let comp: SearchFacetFilterComponent;
@@ -39,45 +39,28 @@ describe('SearchFacetFilterComponent', () => {
     isOpenByDefault: false,
     pageSize: 2
   });
-  const values: FacetValue[] = [
+  const values: Partial<FacetValues> = {
+    appliedFilters: [
       {
+        filter: filterName1,
+        operator: 'equals',
         label: value1,
         value: value1,
-      count: 52,
-      _links: {
-        self: {
-          href: ''
       },
-        search: {
+      {
-          href: ''
+        filter: filterName1,
-        }
+        operator: 'equals',
-      }
-    }, {
         label: value2,
         value: value2,
-      count: 20,
-      _links: {
-        self: {
-          href: ''
       },
-        search: {
+      {
-          href: ''
+        filter: filterName1,
-        }
+        operator: 'equals',
-      }
-    }, {
         label: value3,
         value: value3,
-      count: 5,
-      _links: {
-        self: {
-          href: ''
-        },
-        search: {
-          href: ''
       }
-      }
+    ]
-    }
+  };
-  ];
 
   const searchLink = '/search';
   const selectedValues = [value1, value2];
@@ -86,7 +69,6 @@ describe('SearchFacetFilterComponent', () => {
   let router;
   const page = observableOf(0);
 
-  const mockValues = createSuccessfulRemoteDataObject$(buildPaginatedList(new PageInfo(), values));
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [TranslateModule.forRoot(), NoopAnimationsModule, FormsModule],
@@ -99,6 +81,7 @@ describe('SearchFacetFilterComponent', () => {
         { provide: SEARCH_CONFIG_SERVICE, useValue: new SearchConfigurationServiceStub() },
         { provide: IN_PLACE_SEARCH, useValue: false },
         { provide: REFRESH_FILTER, useValue: new BehaviorSubject<boolean>(false) },
+        { provide: CHANGE_APPLIED_FILTERS, useValue: new EventEmitter() },
         {
           provide: SearchFilterService, useValue: {
             getSelectedValuesForFilter: () => observableOf(selectedValues),
@@ -125,22 +108,11 @@ describe('SearchFacetFilterComponent', () => {
     comp.filterConfig = mockFilterConfig;
     filterService = (comp as any).filterService;
     searchService = (comp as any).searchService;
-    spyOn(searchService, 'getFacetValuesFor').and.returnValue(mockValues);
+    spyOn(searchService, 'getFacetValuesFor').and.returnValue(createSuccessfulRemoteDataObject$(values));
     router = (comp as any).router;
     fixture.detectChanges();
   });
 
-  describe('when the isChecked method is called with a value', () => {
-    beforeEach(() => {
-      spyOn(filterService, 'isFilterActiveWithValue');
-      comp.isChecked(values[1]);
-    });
-
-    it('should call isFilterActiveWithValue on the filterService with the correct filter parameter name and the passed value', () => {
-      expect(filterService.isFilterActiveWithValue).toHaveBeenCalledWith(mockFilterConfig.paramName, values[1].value);
-    });
-  });
-
   describe('when the getSearchLink method is triggered', () => {
     let link: string;
     beforeEach(() => {
@@ -201,8 +173,10 @@ describe('SearchFacetFilterComponent', () => {
     const testValue = 'test';
 
     beforeEach(() => {
-      comp.selectedValues$ = observableOf(selectedValues.map((value) =>
+      comp.selectedAppliedFilters$ = observableOf(selectedValues.map((value) =>
-        Object.assign(new FacetValue(), {
+        Object.assign(new AppliedFilter(), {
+          filter: filterName1,
+          operator: 'equals',
           label: value,
           value: value
         })));

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

@@ -1,15 +1,8 @@
 import { animate, state, style, transition, trigger } from '@angular/animations';
-import { Component, Inject, OnDestroy, OnInit } from '@angular/core';
+import { Component, Inject, OnDestroy, OnInit, EventEmitter } from '@angular/core';
 import { Router } from '@angular/router';
 
-import {
+import { BehaviorSubject, combineLatest as observableCombineLatest, Observable, of as observableOf, Subscription } from 'rxjs';
-  BehaviorSubject,
-  combineLatest as observableCombineLatest,
-  Observable,
-  of as observableOf,
-  Subject,
-  Subscription
-} from 'rxjs';
 import { debounceTime, distinctUntilChanged, filter, map, mergeMap, switchMap, take, tap } from 'rxjs/operators';
 
 import { RemoteDataBuildService } from '../../../../../core/cache/builders/remote-data-build.service';
@@ -20,21 +13,16 @@ import { EmphasizePipe } from '../../../../utils/emphasize.pipe';
 import { FacetValue } from '../../../models/facet-value.model';
 import { SearchFilterConfig } from '../../../models/search-filter-config.model';
 import { SearchService } from '../../../../../core/shared/search/search.service';
-import {
+import { FILTER_CONFIG, IN_PLACE_SEARCH, REFRESH_FILTER, SearchFilterService, CHANGE_APPLIED_FILTERS } from '../../../../../core/shared/search/search-filter.service';
-  FILTER_CONFIG,
-  IN_PLACE_SEARCH,
-  REFRESH_FILTER,
-  SearchFilterService
-} from '../../../../../core/shared/search/search-filter.service';
 import { SearchConfigurationService } from '../../../../../core/shared/search/search-configuration.service';
-import { getFirstSucceededRemoteData } from '../../../../../core/shared/operators';
+import { getFirstSucceededRemoteData, getFirstSucceededRemoteDataPayload } from '../../../../../core/shared/operators';
 import { InputSuggestion } from '../../../../input-suggestions/input-suggestions.model';
 import { SearchOptions } from '../../../models/search-options.model';
 import { SEARCH_CONFIG_SERVICE } from '../../../../../my-dspace-page/my-dspace-page.component';
 import { currentPath } from '../../../../utils/route.utils';
-import { getFacetValueForType, stripOperatorFromFilterValue } from '../../../search.utils';
+import { getFacetValueForType, stripOperatorFromFilterValue, addOperatorToFilterValue } from '../../../search.utils';
-import { createPendingRemoteDataObject } from '../../../../remote-data.utils';
 import { FacetValues } from '../../../models/facet-values.model';
+import { AppliedFilter } from '../../../models/applied-filter.model';
 
 @Component({
   selector: 'ds-search-facet-filter',
@@ -48,7 +36,7 @@ export class SearchFacetFilterComponent implements OnInit, OnDestroy {
   /**
    * Emits an array of pages with values found for this facet
    */
-  filterValues$: Subject<RemoteData<PaginatedList<FacetValue>[]>>;
+  facetValues$: BehaviorSubject<FacetValues[]> = new BehaviorSubject([]);
 
   /**
    * Emits the current last shown page of this facet's values
@@ -78,7 +66,7 @@ export class SearchFacetFilterComponent implements OnInit, OnDestroy {
   /**
    * Emits the active values for this filter
    */
-  selectedValues$: Observable<FacetValue[]>;
+  selectedAppliedFilters$: Observable<AppliedFilter[]>;
 
   protected collapseNextUpdate = true;
 
@@ -90,7 +78,7 @@ export class SearchFacetFilterComponent implements OnInit, OnDestroy {
   /**
    * Emits all current search options available in the search URL
    */
-  searchOptions$: Observable<SearchOptions>;
+  searchOptions$: BehaviorSubject<SearchOptions>;
 
   /**
    * The current URL
@@ -104,7 +92,9 @@ export class SearchFacetFilterComponent implements OnInit, OnDestroy {
               @Inject(SEARCH_CONFIG_SERVICE) public searchConfigService: SearchConfigurationService,
               @Inject(IN_PLACE_SEARCH) public inPlaceSearch: boolean,
               @Inject(FILTER_CONFIG) public filterConfig: SearchFilterConfig,
-              @Inject(REFRESH_FILTER) public refreshFilters: BehaviorSubject<boolean>) {
+              @Inject(REFRESH_FILTER) public refreshFilters: BehaviorSubject<boolean>,
+              @Inject(CHANGE_APPLIED_FILTERS) public changeAppliedFilters: EventEmitter<AppliedFilter[]>,
+  ) {
   }
 
   /**
@@ -112,7 +102,6 @@ export class SearchFacetFilterComponent implements OnInit, OnDestroy {
    */
   ngOnInit(): void {
     this.currentUrl = this.router.url;
-    this.filterValues$ = new BehaviorSubject(createPendingRemoteDataObject());
     this.currentPage = this.getCurrentPage().pipe(distinctUntilChanged());
 
     this.searchOptions$ = this.searchConfigService.searchOptions;
@@ -137,13 +126,6 @@ export class SearchFacetFilterComponent implements OnInit, OnDestroy {
     this.filter = '';
   }
 
-  /**
-   * Checks if a value for this filter is currently active
-   */
-  isChecked(value: FacetValue): Observable<boolean> {
-    return this.filterService.isFilterActiveWithValue(this.filterConfig.paramName, value.value);
-  }
-
   /**
    * @returns {string} The base path to the search page, or the current page when inPlaceSearch is true
    */
@@ -254,13 +236,13 @@ export class SearchFacetFilterComponent implements OnInit, OnDestroy {
    */
   protected applyFilterValue(data) {
     if (data.match(new RegExp(`^.+,(equals|query|authority)$`))) {
-      this.selectedValues$.pipe(take(1)).subscribe((selectedValues) => {
+      this.selectedAppliedFilters$.pipe(take(1)).subscribe((selectedValues: AppliedFilter[]) => {
         if (isNotEmpty(data)) {
-          this.router.navigate(this.getSearchLinkParts(), {
+          void this.router.navigate(this.getSearchLinkParts(), {
             queryParams:
               {
                 [this.filterConfig.paramName]: [
-                  ...selectedValues.map((facet) => this.getFacetValue(facet)),
+                  ...selectedValues.map((appliedFilter: AppliedFilter) => addOperatorToFilterValue(appliedFilter.value, appliedFilter.operator)),
                   data
                 ]
               },
@@ -280,64 +262,50 @@ export class SearchFacetFilterComponent implements OnInit, OnDestroy {
     return getFacetValueForType(facet, this.filterConfig);
   }
 
-  protected retrieveFilterValues(useCachedVersionIfAvailable = true): Observable<RemoteData<PaginatedList<FacetValue>[]>> {
+  protected retrieveFilterValues(useCachedVersionIfAvailable = true): Observable<FacetValues[]> {
-    const facetValues$ = observableCombineLatest([this.searchOptions$, this.currentPage]).pipe(
+    return observableCombineLatest([this.searchOptions$, this.currentPage]).pipe(
-      map(([options, page]) => {
+      switchMap(([options, page]: [SearchOptions, number]) => this.searchService.getFacetValuesFor(this.filterConfig, page, options, null, useCachedVersionIfAvailable).pipe(
-        return { options, page };
+        getFirstSucceededRemoteDataPayload(),
+        tap((facetValues: FacetValues) => {
+          this.isLastPage$.next(hasNoValue(facetValues?.next));
         }),
-      switchMap(({ options, page }) => {
+      )),
-        return this.searchService.getFacetValuesFor(this.filterConfig, page, options, null, useCachedVersionIfAvailable)
+      map((newFacetValues: FacetValues) => {
-          .pipe(
+        let filterValues: FacetValues[] = this.facetValues$.value;
-            getFirstSucceededRemoteData(),
-            tap((rd: RemoteData<FacetValues>) => {
-              this.isLastPage$.next(hasNoValue(rd?.payload?.next));
-            }),
-            map((rd: RemoteData<FacetValues>) => ({
-                values: observableOf(rd),
-                page: page
-              })
-            )
-          );
-      })
-    );
-
-    let filterValues = [];
-    return facetValues$.pipe(
-      mergeMap((facetOutcome) => {
-        const newValues$ = facetOutcome.values;
 
         if (this.collapseNextUpdate) {
           this.showFirstPageOnly();
-          facetOutcome.page = 1;
+          filterValues = [];
           this.collapseNextUpdate = false;
         }
-        if (facetOutcome.page === 1) {
+        if (newFacetValues.pageInfo.currentPage === 1) {
           filterValues = [];
         }
 
-        filterValues = [...filterValues, newValues$];
+        filterValues = [...filterValues, newFacetValues];
 
-        return this.rdbs.aggregate(filterValues);
+        return filterValues;
       }),
-      tap((rd: RemoteData<PaginatedList<FacetValue>[]>) => {
+      tap((allFacetValues: FacetValues[]) => {
-        this.selectedValues$ = this.filterService.getSelectedValuesForFilter(this.filterConfig).pipe(
+        this.setAppliedFilter(allFacetValues);
-          map((selectedValues) => {
+        this.animationState = 'ready';
-            return selectedValues.map((value: string) => {
+        this.facetValues$.next(allFacetValues);
-              const fValue = [].concat(...rd.payload.map((page) => page.page))
-                               .find((facetValue: FacetValue) => this.getFacetValue(facetValue) === value);
-              if (hasValue(fValue)) {
-                return fValue;
-              }
-              const filterValue = stripOperatorFromFilterValue(value);
-              return Object.assign(new FacetValue(), { label: filterValue, value: filterValue });
-            });
       })
     );
+  }
+
+  setAppliedFilter(allFacetValues: FacetValues[]): void {
+    const allAppliedFilters: AppliedFilter[] = [].concat(...allFacetValues.map((facetValues: FacetValues) => facetValues.appliedFilters))
+      .filter((appliedFilter: AppliedFilter) => hasValue(appliedFilter));
+
+    this.selectedAppliedFilters$ = this.filterService.getSelectedValuesForFilter(this.filterConfig).pipe(
+      map((selectedValues: string[]) => {
+        const appliedFilters: AppliedFilter[] = selectedValues.map((value: string) => {
+          return allAppliedFilters.find((appliedFilter: AppliedFilter) => appliedFilter.value === stripOperatorFromFilterValue(value));
+        }).filter((appliedFilter: AppliedFilter) => hasValue(appliedFilter));
+        this.changeAppliedFilters.emit(appliedFilters);
+        return appliedFilters;
       }),
-      tap((rd: RemoteData<PaginatedList<FacetValue>[]>) => {
-        this.animationState = 'ready';
-        this.filterValues$.next(rd);
-      })
     );
   }
 

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

@@ -21,7 +21,8 @@
     <ds-search-facet-filter-wrapper
       [filterConfig]="filter"
       [inPlaceSearch]="inPlaceSearch"
-      [refreshFilters]="refreshFilters" >
+      [refreshFilters]="refreshFilters"
+      (changeAppliedFilters)="changeAppliedFilters.emit($event)">
     </ds-search-facet-filter-wrapper>
   </div>
 </div>

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

@@ -1,4 +1,4 @@
-import { Component, Inject, Input, OnInit } from '@angular/core';
+import { Component, Inject, Input, OnInit, Output, EventEmitter } from '@angular/core';
 
 import { BehaviorSubject, Observable, of as observableOf } from 'rxjs';
 import { filter, map, startWith, switchMap, take } from 'rxjs/operators';
@@ -11,6 +11,7 @@ import { SearchService } from '../../../../core/shared/search/search.service';
 import { SearchConfigurationService } from '../../../../core/shared/search/search-configuration.service';
 import { SEARCH_CONFIG_SERVICE } from '../../../../my-dspace-page/my-dspace-page.component';
 import { SequenceService } from '../../../../core/shared/sequence.service';
+import { AppliedFilter } from '../../models/applied-filter.model';
 
 @Component({
   selector: 'ds-search-filter',
@@ -38,6 +39,11 @@ export class SearchFilterComponent implements OnInit {
    */
   @Input() refreshFilters: BehaviorSubject<boolean>;
 
+  /**
+   * Emits the {@link AppliedFilter}s of this search filter
+   */
+  @Output() changeAppliedFilters: EventEmitter<AppliedFilter[]> = new EventEmitter();
+
   /**
    * True when the filter is 100% collapsed in the UI
    */

src/app/shared/search/search-filters/search-filter/search-hierarchy-filter/search-hierarchy-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>
+        <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 (filterValues$ | async)?.payload">
+        <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">

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

@@ -13,6 +13,7 @@ import { PageInfo } from '../../../../../core/shared/page-info.model';
 import { CommonModule } from '@angular/common';
 import { SearchService } from '../../../../../core/shared/search/search.service';
 import {
+  CHANGE_APPLIED_FILTERS,
   FILTER_CONFIG,
   IN_PLACE_SEARCH,
   SearchFilterService,
@@ -24,7 +25,7 @@ import { NgbModal, NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { SEARCH_CONFIG_SERVICE } from '../../../../../my-dspace-page/my-dspace-page.component';
 import { SearchConfigurationServiceStub } from '../../../../testing/search-configuration-service.stub';
 import { VocabularyEntryDetail } from '../../../../../core/submission/vocabularies/models/vocabulary-entry-detail.model';
-import { FacetValue} from '../../../models/facet-value.model';
+import { AppliedFilter } from '../../../models/applied-filter.model';
 import { SearchFilterConfig } from '../../../models/search-filter-config.model';
 
 describe('SearchHierarchyFilterComponent', () => {
@@ -75,7 +76,8 @@ describe('SearchHierarchyFilterComponent', () => {
         { provide: SEARCH_CONFIG_SERVICE, useValue: new SearchConfigurationServiceStub() },
         { provide: IN_PLACE_SEARCH, useValue: false },
         { provide: FILTER_CONFIG, useValue: Object.assign(new SearchFilterConfig(), { name: testSearchFilter }) },
-        { provide: REFRESH_FILTER, useValue: new BehaviorSubject<boolean>(false)}
+        { provide: REFRESH_FILTER, useValue: new BehaviorSubject<boolean>(false) },
+        { provide: CHANGE_APPLIED_FILTERS, useValue: new EventEmitter() },
       ],
       schemas: [NO_ERRORS_SCHEMA],
     }).compileComponents();
@@ -124,8 +126,8 @@ describe('SearchHierarchyFilterComponent', () => {
 
       beforeEach(async () => {
         showVocabularyTreeLink.nativeElement.click();
-        fixture.componentInstance.selectedValues$ = observableOf(
+        fixture.componentInstance.selectedAppliedFilters$ = observableOf(
-          alreadySelectedValues.map(value => Object.assign(new FacetValue(), { value }))
+          alreadySelectedValues.map(value => Object.assign(new AppliedFilter(), { value }))
         );
         VocabularyTreeViewComponent.select.emit(Object.assign(new VocabularyEntryDetail(), {
           value: newSelectedValue,

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

@@ -1,4 +1,4 @@
-import { Component, Inject, OnInit } from '@angular/core';
+import { Component, Inject, OnInit, EventEmitter } from '@angular/core';
 import { renderFacetFor } from '../search-filter-type-decorator';
 import { FilterType } from '../../../models/filter-type.model';
 import { facetLoad, SearchFacetFilterComponent } from '../search-facet-filter/search-facet-filter.component';
@@ -10,15 +10,13 @@ import { SearchService } from '../../../../../core/shared/search/search.service'
 import {
   FILTER_CONFIG,
   IN_PLACE_SEARCH,
-  SearchFilterService, REFRESH_FILTER
+  SearchFilterService, REFRESH_FILTER, CHANGE_APPLIED_FILTERS
 } from '../../../../../core/shared/search/search-filter.service';
-import { Router } from '@angular/router';
+import { Params, Router } from '@angular/router';
 import { RemoteDataBuildService } from '../../../../../core/cache/builders/remote-data-build.service';
 import { SEARCH_CONFIG_SERVICE } from '../../../../../my-dspace-page/my-dspace-page.component';
 import { SearchConfigurationService } from '../../../../../core/shared/search/search-configuration.service';
 import { SearchFilterConfig } from '../../../models/search-filter-config.model';
-import { FacetValue } from '../../../models/facet-value.model';
-import { getFacetValueForType } from '../../../search.utils';
 import { filter, map, take } from 'rxjs/operators';
 import { VocabularyService } from '../../../../../core/submission/vocabularies/vocabulary.service';
 import { Observable, BehaviorSubject } from 'rxjs';
@@ -26,6 +24,7 @@ import { PageInfo } from '../../../../../core/shared/page-info.model';
 import { environment } from '../../../../../../environments/environment';
 import { addOperatorToFilterValue } from '../../../search.utils';
 import { VocabularyTreeviewModalComponent } from '../../../../form/vocabulary-treeview-modal/vocabulary-treeview-modal.component';
+import { AppliedFilter } from '../../../models/applied-filter.model';
 
 @Component({
   selector: 'ds-search-hierarchy-filter',
@@ -49,9 +48,10 @@ export class SearchHierarchyFilterComponent extends SearchFacetFilterComponent i
               @Inject(SEARCH_CONFIG_SERVICE) public searchConfigService: SearchConfigurationService,
               @Inject(IN_PLACE_SEARCH) public inPlaceSearch: boolean,
               @Inject(FILTER_CONFIG) public filterConfig: SearchFilterConfig,
-              @Inject(REFRESH_FILTER) public refreshFilters: BehaviorSubject<boolean>
+              @Inject(REFRESH_FILTER) public refreshFilters: BehaviorSubject<boolean>,
+              @Inject(CHANGE_APPLIED_FILTERS) public changeAppliedFilters: EventEmitter<AppliedFilter[]>,
   ) {
-    super(searchService, filterService, rdbs, router, searchConfigService, inPlaceSearch, filterConfig, refreshFilters);
+    super(searchService, filterService, rdbs, router, searchConfigService, inPlaceSearch, filterConfig, refreshFilters, changeAppliedFilters);
   }
 
   vocabularyExists$: Observable<boolean>;
@@ -92,20 +92,14 @@ export class SearchHierarchyFilterComponent extends SearchFacetFilterComponent i
       closed: true
     };
     modalRef.result.then((detail: VocabularyEntryDetail) => {
-      this.selectedValues$
+      this.subs.push(this.searchConfigService.selectNewAppliedFilterParams(this.filterConfig.name, detail.value, 'equals').pipe(take(1)).subscribe((params: Params) => {
-        .pipe(take(1))
+        void this.router.navigate(
-        .subscribe((selectedValues) => {
-          this.router.navigate(
           [this.searchService.getSearchLink()],
           {
-              queryParams: {
+            queryParams: params,
-                [this.filterConfig.paramName]: [...selectedValues, {value: detail.value}]
-                  .map((facetValue: FacetValue) => getFacetValueForType(facetValue, this.filterConfig)),
-              },
-              queryParamsHandling: 'merge',
           },
         );
-        });
+      }));
     }).catch();
   }
 

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

@@ -38,7 +38,7 @@
                         [(ngModel)]="range" ngDefaultControl>
             </nouislider>
         </ng-container>
-      <ng-container *ngFor="let page of (filterValues$ | async)?.payload">
+      <ng-container *ngFor="let page of (facetValues$ | async)">
         <div [@facetLoad]="animationState">
           <ds-search-facet-range-option *ngFor="let value of page.page; trackBy: trackUpdate" [filterConfig]="filterConfig" [filterValue]="value" [inPlaceSearch]="inPlaceSearch"></ds-search-facet-range-option>
           </div>

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

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, NO_ERRORS_SCHEMA } from '@angular/core';
+import { ChangeDetectionStrategy, EventEmitter, NO_ERRORS_SCHEMA } from '@angular/core';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { TranslateModule } from '@ngx-translate/core';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
@@ -6,7 +6,7 @@ import {
   FILTER_CONFIG,
   IN_PLACE_SEARCH,
   REFRESH_FILTER,
-  SearchFilterService
+  SearchFilterService, CHANGE_APPLIED_FILTERS
 } from '../../../../../core/shared/search/search-filter.service';
 import { SearchFilterConfig } from '../../../models/search-filter-config.model';
 import { FilterType } from '../../../models/filter-type.model';
@@ -105,6 +105,7 @@ describe('SearchRangeFilterComponent', () => {
         { provide: SEARCH_CONFIG_SERVICE, useValue: new SearchConfigurationServiceStub() },
         { provide: IN_PLACE_SEARCH, useValue: false },
         { provide: REFRESH_FILTER, useValue: new BehaviorSubject<boolean>(false) },
+        { provide: CHANGE_APPLIED_FILTERS, useValue: new EventEmitter() },
         {
           provide: SearchFilterService, useValue: {
             getSelectedValuesForFilter: () => selectedValues,

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

@@ -1,7 +1,7 @@
-import { BehaviorSubject, combineLatest as observableCombineLatest, Subscription } from 'rxjs';
+import { BehaviorSubject, combineLatest as observableCombineLatest, of as observableOf , Subscription } from 'rxjs';
 import { map, startWith } from 'rxjs/operators';
 import { isPlatformBrowser } from '@angular/common';
-import { Component, Inject, OnDestroy, OnInit, PLATFORM_ID } from '@angular/core';
+import { Component, Inject, OnDestroy, OnInit, PLATFORM_ID, EventEmitter } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 import { RemoteDataBuildService } from '../../../../../core/cache/builders/remote-data-build.service';
 import { FilterType } from '../../../models/filter-type.model';
@@ -9,6 +9,7 @@ import { renderFacetFor } from '../search-filter-type-decorator';
 import { facetLoad, SearchFacetFilterComponent } from '../search-facet-filter/search-facet-filter.component';
 import { SearchFilterConfig } from '../../../models/search-filter-config.model';
 import {
+  CHANGE_APPLIED_FILTERS,
   FILTER_CONFIG,
   IN_PLACE_SEARCH,
   REFRESH_FILTER,
@@ -20,6 +21,8 @@ import { SEARCH_CONFIG_SERVICE } from '../../../../../my-dspace-page/my-dspace-p
 import { SearchConfigurationService } from '../../../../../core/shared/search/search-configuration.service';
 import { RouteService } from '../../../../../core/services/route.service';
 import { hasValue } from '../../../../empty.util';
+import { AppliedFilter } from '../../../models/applied-filter.model';
+import { FacetValues } from '../../../models/facet-values.model';
 import { yearFromString } from 'src/app/shared/date.util';
 
 /**
@@ -78,7 +81,7 @@ export class SearchRangeFilterComponent extends SearchFacetFilterComponent imple
   /**
    * The current range of the filter
    */
-  range;
+  range: [number | undefined, number | undefined];
 
   /**
    * Subscription to unsubscribe from
@@ -101,8 +104,9 @@ export class SearchRangeFilterComponent extends SearchFacetFilterComponent imple
               @Inject(FILTER_CONFIG) public filterConfig: SearchFilterConfig,
               @Inject(PLATFORM_ID) private platformId: any,
               @Inject(REFRESH_FILTER) public refreshFilters: BehaviorSubject<boolean>,
+              @Inject(CHANGE_APPLIED_FILTERS) public changeAppliedFilters: EventEmitter<AppliedFilter[]>,
               private route: RouteService) {
-    super(searchService, filterService, rdbs, router, searchConfigService, inPlaceSearch, filterConfig, refreshFilters);
+    super(searchService, filterService, rdbs, router, searchConfigService, inPlaceSearch, filterConfig, refreshFilters, changeAppliedFilters);
 
   }
 
@@ -118,13 +122,13 @@ export class SearchRangeFilterComponent extends SearchFacetFilterComponent imple
     this.maxLabel = this.translateService.instant('search.filters.filter.' + this.filterConfig.name + '.max.placeholder');
     const iniMin = this.route.getQueryParameterValue(this.filterConfig.paramName + RANGE_FILTER_MIN_SUFFIX).pipe(startWith(undefined));
     const iniMax = this.route.getQueryParameterValue(this.filterConfig.paramName + RANGE_FILTER_MAX_SUFFIX).pipe(startWith(undefined));
-    this.sub = observableCombineLatest(iniMin, iniMax).pipe(
+    this.sub = observableCombineLatest([iniMin, iniMax]).pipe(
-      map(([min, max]) => {
+      map(([min, max]: [string, string]) => {
-        const minimum = hasValue(min) ? min : this.min;
+        const minimum = hasValue(min) ? Number(min) : this.min;
-        const maximum = hasValue(max) ? max : this.max;
+        const maximum = hasValue(max) ? Number(max) : this.max;
         return [minimum, maximum];
       })
-    ).subscribe((minmax) => this.range = minmax);
+    ).subscribe((minmax: [number, number]) => this.range = minmax);
 
     // Default/base config for nouislider
     this.config = {
@@ -136,6 +140,19 @@ export class SearchRangeFilterComponent extends SearchFacetFilterComponent imple
     };
   }
 
+  setAppliedFilter(allFacetValues: FacetValues[]): void {
+    const appliedFilters: AppliedFilter[] = [].concat(...allFacetValues.map((facetValues: FacetValues) => facetValues.appliedFilters))
+      .filter((appliedFilter: AppliedFilter) => hasValue(appliedFilter))
+      .filter((appliedFilter: AppliedFilter) => appliedFilter.filter === this.filterConfig.name)
+      // TODO this should ideally be fixed in the backend
+      .map((appliedFilter: AppliedFilter) => Object.assign({}, appliedFilter, {
+        operator: 'range',
+      }));
+
+    this.selectedAppliedFilters$ = observableOf(appliedFilters);
+    this.changeAppliedFilters.emit(appliedFilters);
+  }
+
   /**
    * Submits new custom range values to the range filter from the widget
    */
@@ -146,7 +163,7 @@ export class SearchRangeFilterComponent extends SearchFacetFilterComponent imple
 
     const newMin = this.range[0] !== this.min ? [this.range[0]] : null;
     const newMax = this.range[1] !== this.max ? [this.range[1]] : null;
-    this.router.navigate(this.getSearchLinkParts(), {
+    void this.router.navigate(this.getSearchLinkParts(), {
       queryParams:
         {
           [this.filterConfig.paramName + RANGE_FILTER_MIN_SUFFIX]: newMin,

src/app/shared/search/search-filters/search-filter/search-text-filter/search-text-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>
+        <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 (filterValues$ | async)?.payload">
+        <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">

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

@@ -1,7 +1,7 @@
 <h3>{{"search.filters.head" | translate}}</h3>
 <div *ngIf="(filters | async)?.hasSucceeded">
     <div *ngFor="let filter of (filters | async)?.payload; trackBy: trackUpdate">
-        <ds-search-filter [filter]="filter" [inPlaceSearch]="inPlaceSearch" [refreshFilters]="refreshFilters"></ds-search-filter>
+        <ds-search-filter [filter]="filter" [inPlaceSearch]="inPlaceSearch" [refreshFilters]="refreshFilters" (changeAppliedFilters)="updateAppliedFilters(filter.name, $event)"></ds-search-filter>
     </div>
 </div>
 <a class="btn btn-primary" [routerLink]="[searchLink]" [queryParams]="clearParams | async" queryParamsHandling="merge" role="button"><i class="fas fa-undo"></i> {{"search.filters.reset" | translate}}</a>

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

@@ -1,4 +1,4 @@
-import { Component, Inject, Input, OnDestroy, OnInit } from '@angular/core';
+import { Component, Inject, Input, OnDestroy, OnInit, Output, EventEmitter } from '@angular/core';
 import { Router } from '@angular/router';
 
 import { BehaviorSubject, Observable } from 'rxjs';
@@ -8,10 +8,10 @@ import { SearchService } from '../../../core/shared/search/search.service';
 import { RemoteData } from '../../../core/data/remote-data';
 import { SearchFilterConfig } from '../models/search-filter-config.model';
 import { SearchConfigurationService } from '../../../core/shared/search/search-configuration.service';
-import { SearchFilterService } from '../../../core/shared/search/search-filter.service';
 import { SEARCH_CONFIG_SERVICE } from '../../../my-dspace-page/my-dspace-page.component';
 import { currentPath } from '../../utils/route.utils';
 import { hasValue } from '../../empty.util';
+import { AppliedFilter } from '../models/applied-filter.model';
 
 @Component({
   selector: 'ds-search-filters',
@@ -55,6 +55,13 @@ export class SearchFiltersComponent implements OnInit, OnDestroy {
    */
   @Input() refreshFilters: BehaviorSubject<boolean>;
 
+  /**
+   * Emits the {@link AppliedFilter}s by search filter name
+   */
+  @Output() changeAppliedFilters: EventEmitter<Map<string, AppliedFilter[]>> = new EventEmitter();
+
+  appliedFilters: Map<string, AppliedFilter[]> = new Map();
+
   /**
    * Link to the search page
    */
@@ -71,7 +78,6 @@ export class SearchFiltersComponent implements OnInit, OnDestroy {
    */
   constructor(
     private searchService: SearchService,
-    private filterService: SearchFilterService,
     private router: Router,
     @Inject(SEARCH_CONFIG_SERVICE) private searchConfigService: SearchConfigurationService) {
   }
@@ -101,6 +107,17 @@ export class SearchFiltersComponent implements OnInit, OnDestroy {
     return config ? config.name : undefined;
   }
 
+  /**
+   * Updates the map of {@link AppliedFilter}s and emits it to it's parent component
+   *
+   * @param filterName
+   * @param appliedFilters
+   */
+  updateAppliedFilters(filterName: string, appliedFilters: AppliedFilter[]): void {
+    this.appliedFilters.set(filterName, appliedFilters);
+    this.changeAppliedFilters.emit(this.appliedFilters);
+  }
+
   ngOnDestroy() {
     this.subs.forEach((sub) => {
       if (hasValue(sub)) {

src/app/shared/search/search-labels/search-label-loader/search-label-loader-directive.directive.ts

@@ -0,0 +1,16 @@
+import { Directive, ViewContainerRef } from '@angular/core';
+
+/**
+ * Directive used as a hook to know where to inject the dynamic loaded component
+ */
+@Directive({
+  selector: '[dsSearchLabelLoader]'
+})
+export class SearchLabelLoaderDirective {
+
+  constructor(
+    public viewContainerRef: ViewContainerRef,
+  ) {
+  }
+
+}

src/app/shared/search/search-labels/search-label-loader/search-label-loader.component.html

@@ -0,0 +1 @@
+<ng-template dsSearchLabelLoader></ng-template>

src/app/shared/search/search-labels/search-label-loader/search-label-loader.component.ts

@@ -0,0 +1,132 @@
+import { Component, ComponentRef, OnChanges, OnDestroy, OnInit, ViewChild, ViewContainerRef, SimpleChanges, Input } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { GenericConstructor } from 'src/app/core/shared/generic-constructor';
+import { hasValue, isNotEmpty } from 'src/app/shared/empty.util';
+import { ThemeService } from '../../../theme-support/theme.service';
+import { SearchLabelLoaderDirective } from './search-label-loader-directive.directive';
+import { getSearchLabelByOperator } from './search-label-loader.decorator';
+import { AppliedFilter } from '../../models/applied-filter.model';
+
+@Component({
+  selector: 'ds-search-label-loader',
+  templateUrl: './search-label-loader.component.html',
+})
+export class SearchLabelLoaderComponent implements OnInit, OnChanges, OnDestroy {
+
+  @Input() inPlaceSearch: boolean;
+
+  @Input() appliedFilter: AppliedFilter;
+
+  /**
+   * Directive to determine where the dynamic child component is located
+   */
+  @ViewChild(SearchLabelLoaderDirective, { static: true }) componentDirective: SearchLabelLoaderDirective;
+
+  /**
+   * The reference to the dynamic component
+   */
+  protected compRef: ComponentRef<Component>;
+
+  /**
+   * Array to track all subscriptions and unsubscribe them onDestroy
+   */
+  protected subs: Subscription[] = [];
+
+  /**
+   * The @Input() that are used to find the matching component using {@link getComponent}. When the value of
+   * one of these @Input() change this loader needs to retrieve the best matching component again using the
+   * {@link getComponent} method.
+   */
+  protected inputNamesDependentForComponent: (keyof this & string)[] = [];
+
+  /**
+   * The list of the @Input() names that should be passed down to the dynamically created components.
+   */
+  protected inputNames: (keyof this & string)[] = [
+    'inPlaceSearch',
+    'appliedFilter',
+  ];
+
+  constructor(
+    protected themeService: ThemeService,
+  ) {
+  }
+
+  /**
+   * Set up the dynamic child component
+   */
+  ngOnInit(): void {
+    this.instantiateComponent();
+  }
+
+  /**
+   * Whenever the inputs change, update the inputs of the dynamic component
+   */
+  ngOnChanges(changes: SimpleChanges): void {
+    if (hasValue(this.compRef)) {
+      if (this.inputNamesDependentForComponent.some((name: keyof this & string) => hasValue(changes[name]) && changes[name].previousValue !== changes[name].currentValue)) {
+        // Recreate the component when the @Input()s used by getComponent() aren't up-to-date anymore
+        this.destroyComponentInstance();
+        this.instantiateComponent();
+      } else {
+        this.connectInputsAndOutputs();
+      }
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.subs
+      .filter((subscription: Subscription) => hasValue(subscription))
+      .forEach((subscription: Subscription) => subscription.unsubscribe());
+    this.destroyComponentInstance();
+  }
+
+  /**
+   * Creates the component and connects the @Input() & @Output() from the ThemedComponent to its child Component.
+   */
+  public instantiateComponent(): void {
+    const component: GenericConstructor<Component> = this.getComponent();
+
+    const viewContainerRef: ViewContainerRef = this.componentDirective.viewContainerRef;
+    viewContainerRef.clear();
+
+    this.compRef = viewContainerRef.createComponent(
+      component, {
+        index: 0,
+        injector: undefined,
+      },
+    );
+
+    this.connectInputsAndOutputs();
+  }
+
+  /**
+   * Destroys the themed component and calls it's `ngOnDestroy`
+   */
+  public destroyComponentInstance(): void {
+    if (hasValue(this.compRef)) {
+      this.compRef.destroy();
+      this.compRef = null;
+    }
+  }
+
+  /**
+   * Fetch the component depending on the item's entity type, metadata representation type and context
+   */
+  public getComponent(): GenericConstructor<Component> {
+    return getSearchLabelByOperator(this.appliedFilter.operator);
+  }
+
+  /**
+   * Connect the inputs and outputs of this component to the dynamic component,
+   * to ensure they're in sync
+   */
+  public connectInputsAndOutputs(): void {
+    if (isNotEmpty(this.inputNames) && hasValue(this.compRef) && hasValue(this.compRef.instance)) {
+      this.inputNames.filter((name: string) => this[name] !== undefined).filter((name: string) => this[name] !== this.compRef.instance[name]).forEach((name: string) => {
+        this.compRef.instance[name] = this[name];
+      });
+    }
+  }
+
+}

src/app/shared/search/search-labels/search-label-loader/search-label-loader.decorator.ts

@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+import { GenericConstructor } from '../../../../core/shared/generic-constructor';
+
+export const map: Map<string, GenericConstructor<Component>> = new Map();
+
+export function renderSearchLabelFor(operator: string) {
+  return function decorator(objectElement: any) {
+    if (!objectElement) {
+      return;
+    }
+    map.set(operator, objectElement);
+  };
+}
+
+export function getSearchLabelByOperator(operator: string): GenericConstructor<Component> {
+  return map.get(operator);
+}

src/app/shared/search/search-labels/search-label-range/search-label-range.component.html

@@ -0,0 +1,14 @@
+<a *ngIf="min !== '*'"
+   [routerLink]="searchLink"
+   [queryParams]="(removeParametersMin$ | async)"
+   class="badge badge-primary mr-1 mb-1 text-capitalize">
+  {{('search.filters.applied.f.' + appliedFilter.filter + '.min') | translate}}: {{ min }}
+  <span> ×</span>
+</a>
+<a *ngIf="max !== '*'"
+   [routerLink]="searchLink"
+   [queryParams]="(removeParametersMax$ | async)"
+   class="badge badge-primary mr-1 mb-1 text-capitalize">
+  {{('search.filters.applied.f.' + appliedFilter.filter + '.max') | translate}}: {{ max }}
+  <span> ×</span>
+</a>

src/app/shared/search/search-labels/search-label-range/search-label-range.component.spec.ts

@@ -0,0 +1,94 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { TranslateModule } from '@ngx-translate/core';
+import { Params, ActivatedRoute } from '@angular/router';
+import { SearchLabelRangeComponent } from './search-label-range.component';
+import { SearchServiceStub } from '../../../testing/search-service.stub';
+import { SearchService } from '../../../../core/shared/search/search.service';
+import { ActivatedRouteStub } from '../../../testing/active-router.stub';
+import { AppliedFilter } from '../../models/applied-filter.model';
+import { addOperatorToFilterValue } from '../../search.utils';
+import { RouterTestingModule } from '@angular/router/testing';
+import { SearchConfigurationService } from '../../../../core/shared/search/search-configuration.service';
+import { SearchConfigurationServiceStub } from '../../../testing/search-configuration-service.stub';
+import { PaginationService } from '../../../../core/pagination/pagination.service';
+import { PaginationServiceStub } from '../../../testing/pagination-service.stub';
+import { take } from 'rxjs/operators';
+import { of as observableOf } from 'rxjs';
+import { PaginationComponentOptions } from '../../../pagination/pagination-component-options.model';
+
+describe('SearchLabelRangeComponent', () => {
+  let comp: SearchLabelRangeComponent;
+  let fixture: ComponentFixture<SearchLabelRangeComponent>;
+
+  let route: ActivatedRouteStub;
+  let searchConfigurationService: SearchConfigurationServiceStub;
+  let paginationService: PaginationServiceStub;
+
+  const searchLink = '/search';
+  let appliedFilter: AppliedFilter;
+  let initialRouteParams: Params;
+  let pagination: PaginationComponentOptions;
+
+  function init(): void {
+    appliedFilter = Object.assign(new AppliedFilter(), {
+      filter: 'author',
+      operator: 'authority',
+      value: '1282121b-5394-4689-ab93-78d537764052',
+      label: 'Odinson, Thor',
+    });
+    initialRouteParams = {
+      'query': '',
+      'page-id.page': '5',
+      'f.author': addOperatorToFilterValue(appliedFilter.value, appliedFilter.operator),
+      'f.has_content_in_original_bundle': addOperatorToFilterValue('true', 'equals'),
+    };
+    pagination = Object.assign(new PaginationComponentOptions(), {
+      id: 'page-id',
+      currentPage: 1,
+      pageSize: 20,
+    });
+  }
+
+  beforeEach(waitForAsync(async () => {
+    init();
+    route = new ActivatedRouteStub(initialRouteParams);
+    searchConfigurationService = new SearchConfigurationServiceStub();
+    paginationService = new PaginationServiceStub(pagination);
+
+    await TestBed.configureTestingModule({
+      imports: [
+        RouterTestingModule,
+        TranslateModule.forRoot(),
+      ],
+      declarations: [
+        SearchLabelRangeComponent,
+      ],
+      providers: [
+        { provide: PaginationService, useValue: paginationService },
+        { provide: SearchConfigurationService, useValue: searchConfigurationService },
+        { provide: SearchService, useValue: new SearchServiceStub(searchLink) },
+        { provide: ActivatedRoute, useValue: route },
+      ],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SearchLabelRangeComponent);
+    comp = fixture.componentInstance;
+    comp.appliedFilter = appliedFilter;
+    fixture.detectChanges();
+  });
+
+  describe('updateRemoveParams', () => {
+    it('should always reset the page to 1', (done: DoneFn) => {
+      spyOn(searchConfigurationService, 'unselectAppliedFilterParams').and.returnValue(observableOf(initialRouteParams));
+
+      comp.updateRemoveParams('f.dateIssued.max', '2000').pipe(take(1)).subscribe((params: Params) => {
+        expect(params).toEqual(Object.assign({}, initialRouteParams, {
+          'page-id.page': 1,
+        }));
+        done();
+      });
+    });
+  });
+});

src/app/shared/search/search-labels/search-label-range/search-label-range.component.ts

@@ -0,0 +1,79 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { Observable } from 'rxjs';
+import { Params, Router } from '@angular/router';
+import { SearchService } from '../../../../core/shared/search/search.service';
+import { currentPath } from '../../../utils/route.utils';
+import { AppliedFilter } from '../../models/applied-filter.model';
+import { renderSearchLabelFor } from '../search-label-loader/search-label-loader.decorator';
+import { SearchConfigurationService } from '../../../../core/shared/search/search-configuration.service';
+import { map } from 'rxjs/operators';
+import { PaginationService } from '../../../../core/pagination/pagination.service';
+
+/**
+ * Component that represents the label containing the currently active filters
+ */
+@Component({
+  selector: 'ds-search-label-range',
+  templateUrl: './search-label-range.component.html',
+})
+@renderSearchLabelFor('range')
+export class SearchLabelRangeComponent implements OnInit {
+
+  @Input() inPlaceSearch: boolean;
+
+  @Input() appliedFilter: AppliedFilter;
+
+  searchLink: string;
+
+  removeParametersMin$: Observable<Params>;
+
+  removeParametersMax$: Observable<Params>;
+
+  min: string;
+
+  max: string;
+
+  constructor(
+    protected paginationService: PaginationService,
+    protected router: Router,
+    protected searchConfigurationService: SearchConfigurationService,
+    protected searchService: SearchService,
+  ) {
+  }
+
+  ngOnInit(): void {
+    this.searchLink = this.getSearchLink();
+    this.min = this.appliedFilter.value.substring(1, this.appliedFilter.value.indexOf('TO') - 1);
+    this.max = this.appliedFilter.value.substring(this.appliedFilter.value.indexOf('TO') + 3, this.appliedFilter.value.length - 1);
+    this.removeParametersMin$ = this.updateRemoveParams(`${this.appliedFilter.filter}.min`, this.min);
+    this.removeParametersMax$ = this.updateRemoveParams(`${this.appliedFilter.filter}.max`, this.max);
+  }
+
+  /**
+   * Calculates the parameters that should change if this {@link appliedFilter} would be removed from the active filters
+   *
+   *  @param filterName The {@link AppliedFilter}'s name
+   * @param value The {@link AppliedFilter}'s value
+   * @param operator The {@link AppliedFilter}'s optional operator
+   */
+  updateRemoveParams(filterName: string, value: string, operator?: string): Observable<Params> {
+    const page: string = this.paginationService.getPageParam(this.searchConfigurationService.paginationID);
+    return this.searchConfigurationService.unselectAppliedFilterParams(filterName, value, operator).pipe(
+      map((params: Params) => ({
+        ...params,
+        [page]: 1,
+      })),
+    );
+  }
+
+  /**
+   * @returns {string} The base path to the search page, or the current page when inPlaceSearch is true
+   */
+  getSearchLink(): string {
+    if (this.inPlaceSearch) {
+      return currentPath(this.router);
+    }
+    return this.searchService.getSearchLink();
+  }
+
+}

src/app/shared/search/search-labels/search-label/search-label.component.html

@@ -1,7 +1,7 @@
 <a class="badge badge-primary mr-1 mb-1"
-   [attr.aria-label]="'search.filters.remove' | translate:{ type: ('search.filters.applied.' + key) | translate, value: normalizeFilterValue(value) }"
+   [attr.aria-label]="'search.filters.remove' | translate:{ type: ('search.filters.applied.' + appliedFilter.filter) | translate, value: appliedFilter.label }"
    [routerLink]="searchLink"
-   [queryParams]="(removeParameters | async)" queryParamsHandling="merge">
+   [queryParams]="(removeParameters$ | async)">
-    {{('search.filters.applied.' + key) | translate}}: {{'search.filters.' + filterName + '.' + value | translate: {default: normalizeFilterValue(value)} }}
+    {{('search.filters.applied.f.' + appliedFilter.filter) | translate}}: {{'search.filters.' + appliedFilter.filter + '.' + appliedFilter.label | translate: {default: appliedFilter.label} }}
     <span aria-hidden="true"> ×</span>
 </a>

src/app/shared/search/search-labels/search-label/search-label.component.spec.ts

@@ -1,97 +1,94 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { TranslateModule } from '@ngx-translate/core';
-import { ChangeDetectionStrategy, NO_ERRORS_SCHEMA } from '@angular/core';
+import { Params, ActivatedRoute } from '@angular/router';
-import { FormsModule } from '@angular/forms';
-import { Observable, of as observableOf } from 'rxjs';
-import { Params, Router } from '@angular/router';
 import { SearchLabelComponent } from './search-label.component';
-import { ObjectKeysPipe } from '../../../utils/object-keys-pipe';
-import { SEARCH_CONFIG_SERVICE } from '../../../../my-dspace-page/my-dspace-page.component';
 import { SearchServiceStub } from '../../../testing/search-service.stub';
-import { SearchConfigurationServiceStub } from '../../../testing/search-configuration-service.stub';
 import { SearchService } from '../../../../core/shared/search/search.service';
-import { PaginationComponentOptions } from '../../../pagination/pagination-component-options.model';
+import { ActivatedRouteStub } from '../../../testing/active-router.stub';
-import { PaginationService } from '../../../../core/pagination/pagination.service';
+import { AppliedFilter } from '../../models/applied-filter.model';
+import { addOperatorToFilterValue } from '../../search.utils';
+import { RouterTestingModule } from '@angular/router/testing';
 import { SearchConfigurationService } from '../../../../core/shared/search/search-configuration.service';
+import { SearchConfigurationServiceStub } from '../../../testing/search-configuration-service.stub';
+import { PaginationService } from '../../../../core/pagination/pagination.service';
 import { PaginationServiceStub } from '../../../testing/pagination-service.stub';
+import { PaginationComponentOptions } from '../../../pagination/pagination-component-options.model';
+import { of as observableOf } from 'rxjs';
+import { take } from 'rxjs/operators';
 
 describe('SearchLabelComponent', () => {
   let comp: SearchLabelComponent;
   let fixture: ComponentFixture<SearchLabelComponent>;
 
+  let route: ActivatedRouteStub;
+  let searchConfigurationService: SearchConfigurationServiceStub;
+  let paginationService: PaginationServiceStub;
+
   const searchLink = '/search';
-  let searchService;
+  let appliedFilter: AppliedFilter;
+  let initialRouteParams: Params;
+  let pagination: PaginationComponentOptions;
 
-  const key1 = 'author';
+  function init(): void {
-  const key2 = 'subject';
+    appliedFilter = Object.assign(new AppliedFilter(), {
-  const value1 = 'Test, Author';
+      filter: 'author',
-  const normValue1 = 'Test, Author';
+      operator: 'authority',
-  const value2 = 'TestSubject';
+      value: '1282121b-5394-4689-ab93-78d537764052',
-  const value3 = 'Test, Authority,authority';
+      label: 'Odinson, Thor',
-  const normValue3 = 'Test, Authority';
+    });
-  const filter1 = [key1, value1];
+    initialRouteParams = {
-  const filter2 = [key2, value2];
+      'query': '',
-  const mockFilters = [
+      'spc.page': '1',
-    filter1,
+      'f.author': addOperatorToFilterValue(appliedFilter.value, appliedFilter.operator),
-    filter2
+      'f.has_content_in_original_bundle': addOperatorToFilterValue('true', 'equals'),
-  ];
+    };
+    pagination = Object.assign(new PaginationComponentOptions(), {
+      id: 'page-id',
+      currentPage: 1,
+      pageSize: 20,
+    });
+  }
 
-  const pagination = Object.assign(new PaginationComponentOptions(), { id: 'page-id', currentPage: 1, pageSize: 20 });
+  beforeEach(waitForAsync(async () => {
-  const paginationService = new PaginationServiceStub(pagination);
+    init();
+    route = new ActivatedRouteStub(initialRouteParams);
+    searchConfigurationService = new SearchConfigurationServiceStub();
+    paginationService = new PaginationServiceStub(pagination);
 
-  beforeEach(waitForAsync(() => {
+    await TestBed.configureTestingModule({
-    TestBed.configureTestingModule({
+      imports: [
-      imports: [TranslateModule.forRoot(), NoopAnimationsModule, FormsModule],
+        RouterTestingModule,
-      declarations: [SearchLabelComponent, ObjectKeysPipe],
+        TranslateModule.forRoot(),
-      providers: [
+      ],
-        { provide: SearchService, useValue: new SearchServiceStub(searchLink) },
+      declarations: [
-        { provide: SEARCH_CONFIG_SERVICE, useValue: new SearchConfigurationServiceStub() },
+        SearchLabelComponent,
-        { provide: SearchConfigurationService, useValue: new SearchConfigurationServiceStub() },
+      ],
-        { provide: PaginationService, useValue: paginationService },
+      providers: [
-        { provide: Router, useValue: {} }
+        { provide: PaginationService, useValue: paginationService },
-        // { provide: SearchConfigurationService, useValue: {getCurrentFrontendFilters : () =>  observableOf({})} }
+        { provide: SearchConfigurationService, useValue: searchConfigurationService },
+        { provide: SearchService, useValue: new SearchServiceStub(searchLink) },
+        { provide: ActivatedRoute, useValue: route },
       ],
-      schemas: [NO_ERRORS_SCHEMA]
-    }).overrideComponent(SearchLabelComponent, {
-      set: { changeDetection: ChangeDetectionStrategy.Default }
     }).compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(SearchLabelComponent);
     comp = fixture.componentInstance;
-    searchService = (comp as any).searchService;
+    comp.appliedFilter = appliedFilter;
-    comp.key = key1;
-    comp.value = value1;
-    (comp as any).appliedFilters = observableOf(mockFilters);
     fixture.detectChanges();
   });
 
-  describe('when getRemoveParams is called', () => {
+  describe('updateRemoveParams', () => {
-    let obs: Observable<Params>;
+    it('should always reset the page to 1', (done: DoneFn) => {
+      spyOn(searchConfigurationService, 'unselectAppliedFilterParams').and.returnValue(observableOf(initialRouteParams));
 
-    beforeEach(() => {
+      comp.updateRemoveParams().pipe(take(1)).subscribe((params: Params) => {
-      obs = comp.getRemoveParams();
+        expect(params).toEqual(Object.assign({}, initialRouteParams, {
+          'page-id.page': 1,
+        }));
+        done();
       });
-
-    it('should return all params but the provided filter', () => {
-      obs.subscribe((params) => {
-        // Should contain only filter2 and page: length == 2
-        expect(Object.keys(params).length).toBe(2);
-      });
-    });
-  });
-
-  describe('when normalizeFilterValue is called', () => {
-    it('should return properly filter value', () => {
-      let result: string;
-
-      result = comp.normalizeFilterValue(value1);
-      expect(result).toBe(normValue1);
-
-      result = comp.normalizeFilterValue(value3);
-      expect(result).toBe(normValue3);
     });
   });
 });

src/app/shared/search/search-labels/search-label/search-label.component.ts

@@ -1,94 +1,71 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { Observable } from 'rxjs';
 import { Params, Router } from '@angular/router';
-import { map } from 'rxjs/operators';
-import { hasValue, isNotEmpty } from '../../../empty.util';
 import { SearchService } from '../../../../core/shared/search/search.service';
 import { currentPath } from '../../../utils/route.utils';
-import { PaginationService } from '../../../../core/pagination/pagination.service';
+import { AppliedFilter } from '../../models/applied-filter.model';
 import { SearchConfigurationService } from '../../../../core/shared/search/search-configuration.service';
-import { stripOperatorFromFilterValue } from '../../search.utils';
+import { renderSearchLabelFor } from '../search-label-loader/search-label-loader.decorator';
-
+import { map } from 'rxjs/operators';
-@Component({
+import { PaginationService } from '../../../../core/pagination/pagination.service';
-  selector: 'ds-search-label',
-  templateUrl: './search-label.component.html',
-})
 
 /**
  * Component that represents the label containing the currently active filters
  */
+@Component({
+  selector: 'ds-search-label',
+  templateUrl: './search-label.component.html',
+})
+@renderSearchLabelFor('equals')
+@renderSearchLabelFor('notequals')
+@renderSearchLabelFor('authority')
+@renderSearchLabelFor('notauthority')
+@renderSearchLabelFor('contains')
+@renderSearchLabelFor('notcontains')
+@renderSearchLabelFor('query')
 export class SearchLabelComponent implements OnInit {
-  @Input() key: string;
-  @Input() value: string;
   @Input() inPlaceSearch: boolean;
-  @Input() appliedFilters: Observable<Params>;
+  @Input() appliedFilter: AppliedFilter;
   searchLink: string;
-  removeParameters: Observable<Params>;
+  removeParameters$: Observable<Params>;
-
-  /**
-   * The name of the filter without the f. prefix
-   */
-  filterName: string;
 
   /**
    * Initialize the instance variable
    */
   constructor(
-    private searchService: SearchService,
+    protected paginationService: PaginationService,
-    private paginationService: PaginationService,
+    protected router: Router,
-    private searchConfigurationService: SearchConfigurationService,
+    protected searchConfigurationService: SearchConfigurationService,
-    private router: Router) {
+    protected searchService: SearchService,
+  ) {
   }
 
   ngOnInit(): void {
     this.searchLink = this.getSearchLink();
-    this.removeParameters = this.getRemoveParams();
+    this.removeParameters$ = this.updateRemoveParams();
-    this.filterName = this.getFilterName();
   }
 
   /**
-   * Calculates the parameters that should change if a given value for the given filter would be removed from the active filters
+   * Calculates the parameters that should change if this {@link appliedFilter} would be removed from the active filters
-   * @returns {Observable<Params>} The changed filter parameters
    */
-  getRemoveParams(): Observable<Params> {
+  updateRemoveParams(): Observable<Params> {
-    return this.appliedFilters.pipe(
+    const page: string = this.paginationService.getPageParam(this.searchConfigurationService.paginationID);
-      map((filters) => {
+    return this.searchConfigurationService.unselectAppliedFilterParams(this.appliedFilter.filter, this.appliedFilter.value, this.appliedFilter.operator).pipe(
-        const field: string = Object.keys(filters).find((f) => f === this.key);
+      map((params: Params) => ({
-        const newValues = hasValue(filters[field]) ? filters[field].filter((v) => v !== this.value) : null;
+        ...params,
-        const page = this.paginationService.getPageParam(this.searchConfigurationService.paginationID);
+        [page]: 1,
-        return {
+      })),
-          [field]: isNotEmpty(newValues) ? newValues : null,
-          [page]: 1
-        };
-      })
     );
   }
 
   /**
    * @returns {string} The base path to the search page, or the current page when inPlaceSearch is true
    */
-  private getSearchLink(): string {
+  getSearchLink(): string {
     if (this.inPlaceSearch) {
       return currentPath(this.router);
     }
     return this.searchService.getSearchLink();
   }
 
-  /**
-   * TODO to review after https://github.com/DSpace/dspace-angular/issues/368 is resolved
-   * Strips authority operator from filter value
-   * e.g. 'test ,authority' => 'test'
-   *
-   * @param value
-   */
-  normalizeFilterValue(value: string) {
-    // const pattern = /,[^,]*$/g;
-    const pattern = /,authority*$/g;
-    value = value.replace(pattern, '');
-    return stripOperatorFromFilterValue(value);
-  }
-
-  private getFilterName(): string {
-    return this.key.startsWith('f.') ? this.key.substring(2) : this.key;
-  }
 }

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

@@ -1,5 +1,8 @@
 <div class="labels">
-    <ng-container *ngFor="let key of ((appliedFilters | async) | dsObjectKeys)">
+  <ng-container *ngFor="let appliedFilters of (appliedFilters | keyvalue)">
-        <ds-search-label *ngFor="let value of (appliedFilters | async)[key]" [inPlaceSearch]="inPlaceSearch" [key]="key" [value]="value" [appliedFilters]="appliedFilters"></ds-search-label>
+    <ds-search-label-loader *ngFor="let appliedFilter of appliedFilters.value"
+                            [appliedFilter]="appliedFilter"
+                            [inPlaceSearch]="inPlaceSearch">
+    </ds-search-label-loader>
   </ng-container>
 </div>

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

@@ -16,7 +16,6 @@ describe('SearchLabelsComponent', () => {
   let fixture: ComponentFixture<SearchLabelsComponent>;
 
   const searchLink = '/search';
-  let searchService;
 
   const field1 = 'author';
   const field2 = 'subject';
@@ -46,16 +45,10 @@ describe('SearchLabelsComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(SearchLabelsComponent);
     comp = fixture.componentInstance;
-    searchService = (comp as any).searchService;
-    (comp as any).appliedFilters = observableOf(mockFilters);
     fixture.detectChanges();
   });
 
-  describe('when the component has been initialized', () => {
+  it('should create', () => {
-    it('should return all params but the provided filter', () => {
+    expect(comp).toBeTruthy();
-      comp.appliedFilters.subscribe((filters) => {
-        expect(filters).toBe(mockFilters);
-      });
-    });
   });
 });

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

@@ -1,9 +1,5 @@
-import { Component, Inject, Input } from '@angular/core';
+import { Component, Input } from '@angular/core';
-import { SEARCH_CONFIG_SERVICE } from '../../../my-dspace-page/my-dspace-page.component';
+import { AppliedFilter } from '../models/applied-filter.model';
-import { Observable } from 'rxjs';
-import { Params, Router } from '@angular/router';
-import { SearchConfigurationService } from '../../../core/shared/search/search-configuration.service';
-import { map } from 'rxjs/operators';
 
 @Component({
   selector: 'ds-search-labels',
@@ -15,31 +11,15 @@ import { map } from 'rxjs/operators';
  * Component that represents the labels containing the currently active filters
  */
 export class SearchLabelsComponent {
-  /**
-   * Emits the currently active filters
-   */
-  appliedFilters: Observable<Params>;
 
   /**
    * True when the search component should show results on the current page
    */
-  @Input() inPlaceSearch;
+  @Input() inPlaceSearch: boolean;
 
   /**
-   * Initialize the instance variable
+   * The {@link AppliedFilter}s by filter name
    */
-  constructor(
+  @Input() appliedFilters: Map<string, AppliedFilter[]>;
-    protected router: Router,
+
-    @Inject(SEARCH_CONFIG_SERVICE) public searchConfigService: SearchConfigurationService) {
-    this.appliedFilters = this.searchConfigService.getCurrentFrontendFilters().pipe(
-      map((params) => {
-        const labels = {};
-        Object.keys(params)
-          .forEach((key) => {
-            labels[key] = [...params[key].map((value) => value)];
-          });
-        return labels;
-      })
-    );
-  }
 }

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

@@ -22,7 +22,9 @@
                                [currentConfiguration]="configuration"
                                [filters]="filters"
                                [refreshFilters]="refreshFilters"
-                               [inPlaceSearch]="inPlaceSearch"></ds-themed-search-filters>
+                               [inPlaceSearch]="inPlaceSearch"
+                               (changeAppliedFilters)="changeAppliedFilters.emit($event)">
+            </ds-themed-search-filters>
             <ds-themed-search-settings [currentSortOption]="currentSortOption"
                                        [sortOptionsList]="sortOptionsList"></ds-themed-search-settings>
         </div>

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

@@ -7,6 +7,7 @@ import { SortOptions } from '../../../core/cache/models/sort-options.model';
 import { ViewMode } from '../../../core/shared/view-mode.model';
 import { RemoteData } from '../../../core/data/remote-data';
 import { SearchFilterConfig } from '../models/search-filter-config.model';
+import { AppliedFilter } from '../models/applied-filter.model';
 
 /**
  * This component renders a simple item page.
@@ -95,6 +96,11 @@ export class SearchSidebarComponent {
    */
   @Output() changeConfiguration: EventEmitter<SearchConfigurationOption> = new EventEmitter<SearchConfigurationOption>();
 
+  /**
+   * Emits the {@link AppliedFilter}s by search filter name
+   */
+  @Output() changeAppliedFilters: EventEmitter<Map<string, AppliedFilter[]>> = new EventEmitter();
+
   /**
    * Emits event when the user select a new view mode
    */

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

@@ -62,6 +62,7 @@
                        [viewModeList]="viewModeList"
                        [showViewModes]="showViewModes"
                        (changeConfiguration)="changeContext($event.context)"
+                       (changeAppliedFilters)="appliedFilters = $event"
                        (changeViewMode)="changeViewMode()"></ds-themed-search-sidebar>
     <ds-themed-search-sidebar id="search-sidebar-sm" *ngIf="(isXsOrSm$ | async)"
                        [configurationList]="configurationList"
@@ -77,6 +78,7 @@
                        [showViewModes]="showViewModes"
                        (toggleSidebar)="closeSidebar()"
                        (changeConfiguration)="changeContext($event.context)"
+                       (changeAppliedFilters)="appliedFilters = $event"
                        (changeViewMode)="changeViewMode()">
     </ds-themed-search-sidebar>
 </ng-template>
@@ -92,7 +94,8 @@
     </ds-themed-search-form>
     <div class="row mb-3 mb-md-1">
         <div class="labels col-sm-9">
-            <ds-search-labels *ngIf="searchEnabled" [inPlaceSearch]="inPlaceSearch"></ds-search-labels>
+            <ds-search-labels *ngIf="searchEnabled" [appliedFilters]="appliedFilters" [inPlaceSearch]="inPlaceSearch">
+            </ds-search-labels>
         </div>
     </div>
 </ng-template>

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

@@ -34,10 +34,11 @@ import { CollectionElementLinkType } from '../object-collection/collection-eleme
 import { environment } from 'src/environments/environment';
 import { SubmissionObject } from '../../core/submission/models/submission-object.model';
 import { SearchFilterConfig } from './models/search-filter-config.model';
-import { WorkspaceItem } from '../..//core/submission/models/workspaceitem.model';
+import { WorkspaceItem } from '../../core/submission/models/workspaceitem.model';
 import { ITEM_MODULE_PATH } from '../../item-page/item-page-routing-paths';
 import { COLLECTION_MODULE_PATH } from '../../collection-page/collection-page-routing-paths';
 import { COMMUNITY_MODULE_PATH } from '../../community-page/community-page-routing-paths';
+import { AppliedFilter } from './models/applied-filter.model';
 
 @Component({
   selector: 'ds-search',
@@ -268,6 +269,11 @@ export class SearchComponent implements OnInit {
    */
   @Output() selectObject: EventEmitter<ListableObject> = new EventEmitter<ListableObject>();
 
+  /**
+   * The {@link AppliedFilter}s by filter name
+   */
+  appliedFilters: Map<string, AppliedFilter[]> = new Map();
+
   constructor(protected service: SearchService,
               protected sidebarService: SidebarService,
               protected windowService: HostWindowService,

src/app/shared/search/search.module.ts

@@ -5,7 +5,10 @@ import { SearchFiltersComponent } from './search-filters/search-filters.componen
 import { SearchFilterComponent } from './search-filters/search-filter/search-filter.component';
 import { SearchFacetFilterComponent } from './search-filters/search-filter/search-facet-filter/search-facet-filter.component';
 import { SearchLabelsComponent } from './search-labels/search-labels.component';
+import { SearchLabelLoaderComponent } from './search-labels/search-label-loader/search-label-loader.component';
+import { SearchLabelLoaderDirective } from './search-labels/search-label-loader/search-label-loader-directive.directive';
 import { SearchLabelComponent } from './search-labels/search-label/search-label.component';
+import { SearchLabelRangeComponent } from './search-labels/search-label-range/search-label-range.component';
 import { SearchFacetFilterWrapperComponent } from './search-filters/search-filter/search-facet-filter-wrapper/search-facet-filter-wrapper.component';
 import { SearchRangeFilterComponent } from './search-filters/search-filter/search-range-filter/search-range-filter.component';
 import { SearchTextFilterComponent } from './search-filters/search-filter/search-text-filter/search-text-filter.component';
@@ -35,35 +38,6 @@ import { NouisliderModule } from 'ng2-nouislider';
 import { ThemedSearchFiltersComponent } from './search-filters/themed-search-filters.component';
 import { ThemedSearchSidebarComponent } from './search-sidebar/themed-search-sidebar.component';
 
-const COMPONENTS = [
-  SearchComponent,
-  ThemedSearchComponent,
-  SearchResultsComponent,
-  SearchSidebarComponent,
-  SearchSettingsComponent,
-  SearchFiltersComponent,
-  SearchFilterComponent,
-  SearchFacetFilterComponent,
-  SearchLabelsComponent,
-  SearchLabelComponent,
-  SearchFacetFilterWrapperComponent,
-  SearchRangeFilterComponent,
-  SearchTextFilterComponent,
-  SearchHierarchyFilterComponent,
-  SearchBooleanFilterComponent,
-  SearchFacetOptionComponent,
-  SearchFacetSelectedOptionComponent,
-  SearchFacetRangeOptionComponent,
-  SearchAuthorityFilterComponent,
-  SearchSwitchConfigurationComponent,
-  ConfigurationSearchPageComponent,
-  ThemedConfigurationSearchPageComponent,
-  ThemedSearchResultsComponent,
-  ThemedSearchSettingsComponent,
-  ThemedSearchFiltersComponent,
-  ThemedSearchSidebarComponent,
-];
-
 const ENTRY_COMPONENTS = [
   SearchFacetFilterComponent,
   SearchRangeFilterComponent,
@@ -74,6 +48,29 @@ const ENTRY_COMPONENTS = [
   SearchFacetSelectedOptionComponent,
   SearchFacetRangeOptionComponent,
   SearchAuthorityFilterComponent,
+  SearchLabelComponent,
+  SearchLabelRangeComponent,
+];
+
+const COMPONENTS = [
+  ...ENTRY_COMPONENTS,
+  SearchComponent,
+  ThemedSearchComponent,
+  SearchResultsComponent,
+  SearchSidebarComponent,
+  SearchSettingsComponent,
+  SearchFiltersComponent,
+  SearchFilterComponent,
+  SearchLabelsComponent,
+  SearchLabelLoaderComponent,
+  SearchFacetFilterWrapperComponent,
+  SearchSwitchConfigurationComponent,
+  ConfigurationSearchPageComponent,
+  ThemedConfigurationSearchPageComponent,
+  ThemedSearchResultsComponent,
+  ThemedSearchSettingsComponent,
+  ThemedSearchFiltersComponent,
+  ThemedSearchSidebarComponent,
 ];
 
 /**
@@ -88,7 +85,8 @@ export const MODELS = [
 
 @NgModule({
   declarations: [
-    ...COMPONENTS
+    ...COMPONENTS,
+    SearchLabelLoaderDirective,
   ],
   imports: [
     CommonModule,
@@ -100,7 +98,8 @@ export const MODELS = [
     NouisliderModule,
   ],
   exports: [
-    ...COMPONENTS
+    ...COMPONENTS,
+    SearchLabelLoaderDirective,
   ]
 })
 export class SearchModule {

src/app/shared/testing/search-configuration-service.stub.ts

@@ -1,6 +1,5 @@
-import { BehaviorSubject, of as observableOf } from 'rxjs';
+import { BehaviorSubject, of as observableOf, Observable } from 'rxjs';
-import { SearchConfig } from '../../core/shared/search/search-filters/search-config.model';
+import { Params } from '@angular/router';
-import { SortDirection, SortOptions } from '../../core/cache/models/sort-options.model';
 
 export class SearchConfigurationServiceStub {
 
@@ -33,15 +32,12 @@ export class SearchConfigurationServiceStub {
     return observableOf([{value: 'test', label: 'test'}]);
   }
 
-  getConfigurationSearchConfigObservable() {
+  unselectAppliedFilterParams(_filterName: string, _value: string, _operator?: string): Observable<Params> {
-    return observableOf(new SearchConfig());
+    return observableOf({});
   }
 
-  getConfigurationSortOptionsObservable() {
+  selectNewAppliedFilterParams(_filterName: string, _value: string, _operator?: string): Observable<Params> {
-    return observableOf([new SortOptions('score', SortDirection.ASC), new SortOptions('score', SortDirection.DESC)]);
+    return observableOf({});
   }
 
-  initializeSortOptionsFromConfiguration() {
-   /* empty */
-  }
 }

src/app/shared/testing/search-filter-service.stub.ts

@@ -0,0 +1,75 @@
+import { Observable, of as observableOf } from 'rxjs';
+import { PaginationComponentOptions } from '../pagination/pagination-component-options.model';
+import { SortOptions, SortDirection } from '../../core/cache/models/sort-options.model';
+import { SearchFilterConfig } from '../search/models/search-filter-config.model';
+import { Params } from '@angular/router';
+
+/* eslint-disable no-empty,@typescript-eslint/no-empty-function */
+export class SearchFilterServiceStub {
+
+  isFilterActiveWithValue(_paramName: string, _filterValue: string): Observable<boolean> {
+    return observableOf(true);
+  }
+
+  isFilterActive(_paramName: string): Observable<boolean> {
+    return observableOf(true);
+  }
+
+  getCurrentScope(): Observable<string> {
+    return observableOf(undefined);
+  }
+
+  getCurrentQuery(): Observable<string> {
+    return observableOf(undefined);
+  }
+
+  getCurrentPagination(_pagination: any = {}): Observable<PaginationComponentOptions> {
+    return Object.assign(new PaginationComponentOptions());
+  }
+
+  getCurrentSort(_defaultSort: SortOptions): Observable<SortOptions> {
+    return observableOf(new SortOptions('', SortDirection.ASC));
+  }
+
+  getCurrentFilters(): Observable<Params> {
+    return observableOf({});
+  }
+
+  getCurrentView(): Observable<string> {
+    return observableOf(undefined);
+  }
+
+  getSelectedValuesForFilter(_filterConfig: SearchFilterConfig): Observable<string[]> {
+    return observableOf([]);
+  }
+
+  isCollapsed(_filterName: string): Observable<boolean> {
+    return observableOf(true);
+  }
+
+  getPage(_filterName: string): Observable<number> {
+    return observableOf(1);
+  }
+
+  collapse(_filterName: string): void {
+  }
+
+  expand(_filterName: string): void {
+  }
+
+  toggle(_filterName: string): void {
+  }
+
+  initializeFilter(_filter: SearchFilterConfig): void {
+  }
+
+  decrementPage(_filterName: string): void {
+  }
+
+  incrementPage(_filterName: string): void {
+  }
+
+  resetPage(_filterName: string): void {
+  }
+
+}

src/app/shared/testing/search-service.stub.ts

@@ -1,5 +1,7 @@
 import {of as observableOf,  Observable ,  BehaviorSubject } from 'rxjs';
 import { ViewMode } from '../../core/shared/view-mode.model';
+import { SearchFilterConfig } from '../search/models/search-filter-config.model';
+import { PaginatedSearchOptions } from '../search/models/paginated-search-options.model';
 
 export class SearchServiceStub {
 
@@ -20,7 +22,7 @@ export class SearchServiceStub {
     this.testViewMode = viewMode;
   }
 
-  getFacetValuesFor() {
+  getFacetValuesFor(_filterConfig: SearchFilterConfig, _valuePage: number, _searchOptions?: PaginatedSearchOptions, _filterQuery?: string, _useCachedVersionIfAvailable = true) {
     return null;
   }