Merge branch 'master' into w2p-50632_Replace-mock-registry-service-with-implementation

nodemon.json

@@ -4,5 +4,6 @@
     "config",
     "src/index.html"
   ],
-  "ext": "js ts json html"
+  "ext": "js ts json html",
+  "delay": "50"
 }

resources/i18n/en.json

@@ -56,6 +56,10 @@
       "detail": "{{ range }} of {{ total }}"
     }
   },
+  "sorting": {
+    "ASC": "Ascending",
+    "DESC": "Descending"
+  },
   "title": "DSpace",
   "404": {
     "help": "We can't find the page you're looking for. The page may have been moved or deleted. You can use the button below to get back to the home page. ",

src/app/+collection-page/collection-page.component.ts

@@ -3,7 +3,7 @@ import { ActivatedRoute } from '@angular/router';
 import { Observable } from 'rxjs/Observable';
 
 import { Subscription } from 'rxjs/Subscription';
-import { SortOptions } from '../core/cache/models/sort-options.model';
+import { SortDirection, SortOptions } from '../core/cache/models/sort-options.model';
 import { CollectionDataService } from '../core/data/collection-data.service';
 import { ItemDataService } from '../core/data/item-data.service';
 import { PaginatedList } from '../core/data/paginated-list';
@@ -48,7 +48,7 @@ export class CollectionPageComponent implements OnInit, OnDestroy {
     this.paginationConfig.id = 'collection-page-pagination';
     this.paginationConfig.pageSize = 5;
     this.paginationConfig.currentPage = 1;
-    this.sortConfig = new SortOptions();
+    this.sortConfig = new SortOptions('dc.title', SortDirection.ASC);
   }
 
   ngOnInit(): void {

src/app/+home-page/top-level-community-list/top-level-community-list.component.ts

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { Observable } from 'rxjs/Observable';
-import { SortOptions } from '../../core/cache/models/sort-options.model';
+import { SortDirection, SortOptions } from '../../core/cache/models/sort-options.model';
 import { CommunityDataService } from '../../core/data/community-data.service';
 import { PaginatedList } from '../../core/data/paginated-list';
 
@@ -27,7 +27,7 @@ export class TopLevelCommunityListComponent {
     this.config.id = 'top-level-pagination';
     this.config.pageSize = 5;
     this.config.currentPage = 1;
-    this.sortConfig = new SortOptions();
+    this.sortConfig = new SortOptions('dc.title', SortDirection.ASC);
 
     this.updatePage({
       page: this.config.currentPage,

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

@@ -124,14 +124,14 @@ describe('SearchFacetFilterComponent', () => {
   describe('when the getAddParams method is called wih a value', () => {
     it('should return the selectedValue list with the new parameter value', () => {
       const result = comp.getAddParams(value3);
-      expect(result).toEqual({ [mockFilterConfig.paramName]: [value1, value2, value3] });
+      expect(result[mockFilterConfig.paramName]).toEqual([value1, value2, value3]);
     });
   });
 
   describe('when the getRemoveParams method is called wih a value', () => {
     it('should return the selectedValue list with the parameter value left out', () => {
       const result = comp.getRemoveParams(value1);
-      expect(result).toEqual({ [mockFilterConfig.paramName]: [value2] });
+      expect(result[mockFilterConfig.paramName]).toEqual([value2]);
     });
   });
 

src/app/+search-page/search-filters/search-filter/search-facet-filter/search-facet-filter.component.ts

@@ -100,11 +100,17 @@ export class SearchFacetFilterComponent implements OnInit, OnDestroy {
     return hasValue(o);
   }
   getRemoveParams(value: string) {
-    return { [this.filterConfig.paramName]: this.selectedValues.filter((v) => v !== value) };
+    return {
+      [this.filterConfig.paramName]: this.selectedValues.filter((v) => v !== value),
+      page: 1
+    };
   }
 
   getAddParams(value: string) {
-    return { [this.filterConfig.paramName]: [...this.selectedValues, value] };
+    return {
+      [this.filterConfig.paramName]: [...this.selectedValues, value],
+      page: 1
+    };
   }
 
   ngOnDestroy(): void {

src/app/+search-page/search-filters/search-filter/search-filter.component.ts

@@ -28,14 +28,13 @@ export class SearchFilterComponent implements OnInit {
   }
 
   ngOnInit() {
-    const sub = this.filterService.isFilterActive(this.filter.paramName).first().subscribe((isActive) => {
+    this.filterService.isFilterActive(this.filter.paramName).first().subscribe((isActive) => {
       if (this.filter.isOpenByDefault || isActive) {
         this.initialExpand();
       } else {
         this.initialCollapse();
       }
     });
-    sub.unsubscribe();
   }
 
   toggle() {

src/app/+search-page/search-filters/search-filter/search-filter.service.ts

@@ -1,4 +1,5 @@
 import { Injectable } from '@angular/core';
+import { debounceTime, distinctUntilChanged, map } from 'rxjs/operators';
 import { SearchFiltersState, SearchFilterState } from './search-filter.reducer';
 import { createSelector, MemoizedSelector, Store } from '@ngrx/store';
 import { Observable } from 'rxjs/Observable';
@@ -10,7 +11,7 @@ import {
   SearchFilterInitialExpandAction, SearchFilterResetPageAction,
   SearchFilterToggleAction
 } from './search-filter.actions';
-import { hasValue, } from '../../../shared/empty.util';
+import { hasValue, isEmpty, isNotEmpty, } from '../../../shared/empty.util';
 import { SearchFilterConfig } from '../../search-service/search-filter-config.model';
 import { SearchService } from '../../search-service/search.service';
 import { RouteService } from '../../../shared/route.service';
@@ -56,10 +57,15 @@ export class SearchFilterService {
     });
   }
 
-  getCurrentSort(): Observable<SortOptions> {
+  getCurrentSort(defaultSort: SortOptions): Observable<SortOptions> {
     const sortDirection$ = this.routeService.getQueryParameterValue('sortDirection');
     const sortField$ = this.routeService.getQueryParameterValue('sortField');
-    return Observable.combineLatest(sortDirection$, sortField$, (sortDirection, sortField) => new SortOptions(sortField || undefined, SortDirection[sortDirection]));
+    return Observable.combineLatest(sortDirection$, sortField$, (sortDirection, sortField) => {
+        const field = sortField || defaultSort.field;
+        const direction = SortDirection[sortDirection] || defaultSort.direction;
+        return new SortOptions(field, direction)
+      }
+    );
   }
 
   getCurrentFilters() {
@@ -73,12 +79,13 @@ export class SearchFilterService {
   getPaginatedSearchOptions(defaults: any = {}): Observable<PaginatedSearchOptions> {
     return Observable.combineLatest(
       this.getCurrentPagination(defaults.pagination),
-      this.getCurrentSort(),
+      this.getCurrentSort(defaults.sort),
       this.getCurrentView(),
       this.getCurrentScope(),
       this.getCurrentQuery(),
-      this.getCurrentFilters(),
-      (pagination, sort, view, scope, query, filters) => {
+      this.getCurrentFilters()).pipe(
+      distinctUntilChanged((a, b) => JSON.stringify(a) === JSON.stringify(b)),
+      map(([pagination, sort, view, scope, query, filters]) => {
         return Object.assign(new PaginatedSearchOptions(),
           defaults,
           {
@@ -89,11 +96,11 @@ export class SearchFilterService {
             query: query,
             filters: filters
           })
-      }
+      })
     )
   }
 
- getSearchOptions(defaults: any = {}): Observable<SearchOptions> {
+  getSearchOptions(defaults: any = {}): Observable<SearchOptions> {
     return Observable.combineLatest(
       this.getCurrentView(),
       this.getCurrentScope(),
@@ -104,7 +111,7 @@ export class SearchFilterService {
           defaults,
           {
             view: view,
-            scope: scope,
+            scope: scope || defaults.scope,
             query: query,
             filters: filters
           })

src/app/+search-page/search-options.model.ts

@@ -1,5 +1,6 @@
 import { isNotEmpty } from '../shared/empty.util';
 import { URLCombiner } from '../core/url-combiner/url-combiner';
+import 'core-js/fn/object/entries';
 
 export enum ViewMode {
   List = 'list',

src/app/+search-page/search-page.component.html

@@ -7,7 +7,7 @@
         <ds-search-form id="search-form"
                         [query]="(searchOptions$ | async)?.query"
                         [scope]="(searchOptions$ | async)?.scope"
-                        [currentParams]="currentParams"
+                        [currentUrl]="getSearchLink()"
                         [scopes]="(scopeListRD$ | async)?.payload?.page">
         </ds-search-form>
       <div class="row">
@@ -36,4 +36,4 @@
       </div>
     </div>
   </div>
-</div>
+</div>

src/app/+search-page/search-page.component.spec.ts

@@ -8,10 +8,8 @@ import { cold, hot } from 'jasmine-marbles';
 import { Observable } from 'rxjs/Observable';
 import { SortDirection, SortOptions } from '../core/cache/models/sort-options.model';
 import { CommunityDataService } from '../core/data/community-data.service';
-import { Community } from '../core/shared/community.model';
 import { HostWindowService } from '../shared/host-window.service';
 import { PaginationComponentOptions } from '../shared/pagination/pagination-component-options.model';
-import { PaginatedSearchOptions } from './paginated-search-options.model';
 import { SearchPageComponent } from './search-page.component';
 import { SearchService } from './search-service/search.service';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
@@ -35,10 +33,11 @@ describe('SearchPageComponent', () => {
   pagination.id = 'search-results-pagination';
   pagination.currentPage = 1;
   pagination.pageSize = 10;
-  const sort: SortOptions = new SortOptions();
+  const sort: SortOptions = new SortOptions('score', SortDirection.DESC);
   const mockResults = Observable.of(['test', 'data']);
   const searchServiceStub = jasmine.createSpyObj('SearchService', {
-    search: mockResults
+    search: mockResults,
+    getSearchLink: '/search'
   });
   const queryParam = 'test query';
   const scopeParam = '7669c72a-3f2a-451f-a3b9-9210e7a4c02f';

src/app/+search-page/search-page.component.ts

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, OnDestroy, OnInit } from '@angular/core';
 import { Observable } from 'rxjs/Observable';
 import { flatMap, } from 'rxjs/operators';
-import { SortOptions } from '../core/cache/models/sort-options.model';
+import { SortDirection, SortOptions } from '../core/cache/models/sort-options.model';
 import { CommunityDataService } from '../core/data/community-data.service';
 import { PaginatedList } from '../core/data/paginated-list';
 import { RemoteData } from '../core/data/remote-data';
@@ -31,7 +31,6 @@ import { SearchSidebarService } from './search-sidebar/search-sidebar.service';
 export class SearchPageComponent implements OnInit {
 
   resultsRD$: Observable<RemoteData<PaginatedList<SearchResult<DSpaceObject>>>>;
-  currentParams = {};
   searchOptions$: Observable<PaginatedSearchOptions>;
   sortConfig: SortOptions;
   scopeListRD$: Observable<RemoteData<PaginatedList<Community>>>;
@@ -43,6 +42,7 @@ export class SearchPageComponent implements OnInit {
       id: 'search-results-pagination',
       pageSize: 10
     },
+    sort: new SortOptions('score', SortDirection.DESC),
     query: '',
     scope: ''
   };
@@ -78,4 +78,8 @@ export class SearchPageComponent implements OnInit {
   public isSidebarCollapsed(): Observable<boolean> {
     return this.sidebarService.isCollapsed;
   }
+
+  public getSearchLink(): string {
+    return this.service.getSearchLink();
+  }
 }

src/app/+search-page/search-page.module.ts

@@ -1,5 +1,6 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { CoreModule } from '../core/core.module';
 import { SharedModule } from '../shared/shared.module';
 import { SearchPageRoutingModule } from './search-page-routing.module';
 import { SearchPageComponent } from './search-page.component';
@@ -31,6 +32,7 @@ const effects = [
     CommonModule,
     SharedModule,
     EffectsModule.forFeature(effects),
+    CoreModule.forRoot()
   ],
   declarations: [
     SearchPageComponent,

src/app/+search-page/search-results/search-results.component.html

@@ -1,5 +1,5 @@
 <h2>{{ 'search.results.head' | translate }}</h2>
-<div *ngIf="searchResults?.hasSucceeded && !searchResults?.isLoading" @fadeIn>
+<div *ngIf="searchResults?.hasSucceeded && !searchResults?.isLoading && searchResults?.payload?.page.length > 0" @fadeIn>
 <ds-viewable-collection
   [config]="searchConfig.pagination"
   [sortConfig]="searchConfig.sort"
@@ -8,4 +8,4 @@
 </ds-viewable-collection></div>
 <ds-loading *ngIf="!searchResults || searchResults?.isLoading" message="{{'loading.search-results' | translate}}"></ds-loading>
 <ds-error *ngIf="searchResults?.hasFailed" message="{{'error.search-results' | translate}}"></ds-error>
-<ds-error *ngIf="searchResults?.payload?.page.length == 0" message="{{'search.results.no-results' | translate}}"></ds-error>
+<ds-error *ngIf="searchResults?.payload?.page.length == 0" message="{{'search.results.no-results' | translate}}"></ds-error>

src/app/+search-page/search-service/search.service.ts

@@ -7,7 +7,7 @@ import { Observable } from 'rxjs/Observable';
 import { flatMap, map, tap } from 'rxjs/operators';
 import { ViewMode } from '../../+search-page/search-options.model';
 import { RemoteDataBuildService } from '../../core/cache/builders/remote-data-build.service';
-import { SortOptions } from '../../core/cache/models/sort-options.model';
+import { SortDirection, SortOptions } from '../../core/cache/models/sort-options.model';
 import {
   FacetConfigSuccessResponse,
   FacetValueSuccessResponse,
@@ -61,7 +61,7 @@ export class SearchService implements OnDestroy {
     pagination.id = 'search-results-pagination';
     pagination.currentPage = 1;
     pagination.pageSize = 10;
-    const sort: SortOptions = new SortOptions();
+    const sort: SortOptions = new SortOptions('score', SortDirection.DESC);
     this.searchOptions = Object.assign(new SearchOptions(), { pagination: pagination, sort: sort });
   }
 
@@ -167,7 +167,8 @@ export class SearchService implements OnDestroy {
     // get search results from response cache
     const facetConfigObs: Observable<SearchFilterConfig[]> = responseCacheObs.pipe(
       map((entry: ResponseCacheEntry) => entry.response),
-      map((response: FacetConfigSuccessResponse) => response.results)
+      map((response: FacetConfigSuccessResponse) =>
+        response.results.map((result: any) => Object.assign(new SearchFilterConfig(), result)))
     );
 
     return this.rdb.toRemoteDataObservable(requestEntryObs, responseCacheObs, facetConfigObs);
@@ -235,7 +236,7 @@ export class SearchService implements OnDestroy {
     this.router.navigate([this.getSearchLink()], navigationExtras);
   }
 
-  getSearchLink() {
+  getSearchLink(): string {
     const urlTree = this.router.parseUrl(this.router.url);
     const g: UrlSegmentGroup = urlTree.root.children[PRIMARY_OUTLET];
     return '/' + g.toString();

src/app/+search-page/search-settings/search-settings.component.html

@@ -5,7 +5,7 @@
         <option *ngFor="let sortDirection of (sortDirections | dsKeys)"
                 [value]="sortDirection.value"
                 [selected]="sortDirection.value === direction? 'selected': null">
-            {{sortDirection.key}}
+            {{'sorting.' + sortDirection.key | translate}}
         </option>
     </select>
 </div>

src/app/+search-page/search-settings/search-settings.component.spec.ts

@@ -3,7 +3,7 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { SearchSettingsComponent } from './search-settings.component';
 import { Observable } from 'rxjs/Observable';
 import { PaginationComponentOptions } from '../../shared/pagination/pagination-component-options.model';
-import { SortOptions } from '../../core/cache/models/sort-options.model';
+import { SortDirection, SortOptions } from '../../core/cache/models/sort-options.model';
 import { TranslateModule } from '@ngx-translate/core';
 import { RouterTestingModule } from '@angular/router/testing';
 import { ActivatedRoute } from '@angular/router';
@@ -22,7 +22,7 @@ describe('SearchSettingsComponent', () => {
   pagination.id = 'search-results-pagination';
   pagination.currentPage = 1;
   pagination.pageSize = 10;
-  const sort: SortOptions = new SortOptions();
+  const sort: SortOptions = new SortOptions('score', SortDirection.DESC);
   const mockResults = [ 'test', 'data' ];
   const searchServiceStub = {
     searchOptions: { pagination: pagination, sort: sort },

src/app/+search-page/search-settings/search-settings.component.ts

@@ -22,8 +22,6 @@ export class SearchSettingsComponent implements OnInit {
    */
   public pageSize;
   @Input() public pageSizeOptions;
-  public listPageSizeOptions: number[] = [5, 10, 20, 40, 60, 80, 100];
-  public gridPageSizeOptions: number[] = [12, 24, 36, 48 , 50, 62, 74, 84];
 
   private sub;
   private scope: string;
@@ -51,9 +49,9 @@ export class SearchSettingsComponent implements OnInit {
         this.pageSize = +params.pageSize || this.searchOptions.pagination.pageSize;
         this.direction = params.sortDirection || this.searchOptions.sort.direction;
         if (params.view === ViewMode.Grid) {
-          this.pageSizeOptions = this.gridPageSizeOptions;
+          this.pageSizeOptions = this.pageSizeOptions;
         } else {
-          this.pageSizeOptions = this.listPageSizeOptions;
+          this.pageSizeOptions = this.pageSizeOptions;
         }
       });
   }

src/app/core/browse/browse.service.ts

@@ -36,7 +36,7 @@ export class BrowseService {
 
   getBrowseURLFor(metadatumKey: string, linkPath: string): Observable<string> {
     const searchKeyArray = BrowseService.toSearchKeyArray(metadatumKey);
-    return this.halService.getEndpoint(linkPath)
+    return this.halService.getEndpoint(this.linkPath)
       .filter((href: string) => isNotEmpty(href))
       .distinctUntilChanged()
       .map((endpointURL: string) => new BrowseEndpointRequest(this.requestService.generateRequestId(), endpointURL))

src/app/core/cache/models/sort-options.model.ts

@@ -1,10 +1,10 @@
 export enum SortDirection {
-  Ascending = 'ASC',
-  Descending = 'DESC'
+  ASC = 'ASC',
+  DESC = 'DESC'
 }
 
 export class SortOptions {
-  constructor(public field: string = 'dc.title', public direction: SortDirection = SortDirection.Ascending) {
+  constructor(public field: string, public direction: SortDirection) {
 
   }
 }

src/app/core/data/search-response-parsing.service.ts

@@ -26,7 +26,7 @@ export class SearchResponseParsingService implements ResponseParsingService {
             value: hhObject[key].join('...')
           }))
         } else {
-          return undefined;
+          return [];
         }
       });
 

src/app/shared/host-window.service.spec.ts

@@ -1,9 +1,10 @@
 import { Store } from '@ngrx/store';
+import { cold, hot } from 'jasmine-marbles';
 import { Observable } from 'rxjs/Observable';
 import { AppState } from '../app.reducer';
 import { HostWindowState } from './host-window.reducer';
 
-import { HostWindowService } from './host-window.service';
+import { GridBreakpoint, HostWindowService, WidthCategory } from './host-window.service';
 
 describe('HostWindowService', () => {
   let service: HostWindowService;
@@ -189,4 +190,76 @@ describe('HostWindowService', () => {
     });
   });
 
+  describe('widthCategory', () => {
+    beforeEach(() => {
+      service = new HostWindowService({} as Store<AppState>);
+    });
+
+    it('should call getWithObs to get the current width', () => {
+      spyOn(service as any, 'getWidthObs').and
+        .returnValue(hot('a-', { a: GridBreakpoint.SM_MIN - 1 }));
+
+      const result = service.widthCategory;
+
+      expect((service as any).getWidthObs).toHaveBeenCalled();
+    });
+
+    it('should return XS if width < SM_MIN', () => {
+      spyOn(service as any, 'getWidthObs').and
+        .returnValue(hot('a-', { a: GridBreakpoint.SM_MIN - 1 }));
+
+      const result = service.widthCategory;
+
+      const expected = cold('b-', { b: WidthCategory.XS });
+      expect(result).toBeObservable(expected);
+    });
+
+    it('should return SM if SM_MIN <= width < MD_MIN', () => {
+      spyOn(service as any, 'getWidthObs').and
+        .returnValue(hot('a-', {
+          a: GridBreakpoint.SM_MIN + Math.floor((GridBreakpoint.MD_MIN - GridBreakpoint.SM_MIN) / 2)
+        }));
+
+      const result = service.widthCategory;
+
+      const expected = cold('b-', { b: WidthCategory.SM });
+      expect(result).toBeObservable(expected);
+    });
+
+    it('should return MD if MD_MIN <= width < LG_MIN', () => {
+      spyOn(service as any, 'getWidthObs').and
+        .returnValue(hot('a-', {
+          a: GridBreakpoint.MD_MIN + Math.floor((GridBreakpoint.LG_MIN - GridBreakpoint.MD_MIN) / 2)
+        }));
+
+      const result = service.widthCategory;
+
+      const expected = cold('b-', { b: WidthCategory.MD });
+      expect(result).toBeObservable(expected);
+    });
+
+    it('should return LG if LG_MIN <= width < XL_MIN', () => {
+      spyOn(service as any, 'getWidthObs').and
+        .returnValue(hot('a-', {
+          a: GridBreakpoint.LG_MIN + Math.floor((GridBreakpoint.XL_MIN - GridBreakpoint.LG_MIN) / 2)
+        }));
+
+      const result = service.widthCategory;
+
+      const expected = cold('b-', { b: WidthCategory.LG });
+      expect(result).toBeObservable(expected);
+    });
+
+    it('should return XL if width >= XL_MIN', () => {
+      spyOn(service as any, 'getWidthObs').and
+        .returnValue(hot('a-', { a: GridBreakpoint.XL_MIN + 1 }));
+
+      const result = service.widthCategory;
+
+      const expected = cold('b-', { b: WidthCategory.XL });
+      expect(result).toBeObservable(expected);
+    });
+
+  });
+
 });

src/app/shared/host-window.service.ts

@@ -1,3 +1,4 @@
+import { distinctUntilChanged, map } from 'rxjs/operators';
 import { HostWindowState } from './host-window.reducer';
 import { Injectable } from '@angular/core';
 import { createSelector, Store } from '@ngrx/store';
@@ -8,11 +9,18 @@ import { AppState } from '../app.reducer';
 
 // TODO: ideally we should get these from sass somehow
 export enum GridBreakpoint {
-  XS = 0,
-  SM = 576,
-  MD = 768,
-  LG = 992,
-  XL = 1200
+  SM_MIN = 576,
+  MD_MIN = 768,
+  LG_MIN = 992,
+  XL_MIN = 1200
+}
+
+export enum WidthCategory {
+  XS,
+  SM,
+  MD,
+  LG,
+  XL
 }
 
 const hostWindowStateSelector = (state: AppState) => state.hostWindow;
@@ -31,33 +39,57 @@ export class HostWindowService {
       .filter((width) => hasValue(width));
   }
 
+  get widthCategory(): Observable<WidthCategory> {
+    return this.getWidthObs().pipe(
+      map((width: number) => {
+        if (width < GridBreakpoint.SM_MIN) {
+          return WidthCategory.XS
+        } else if (width >= GridBreakpoint.SM_MIN && width < GridBreakpoint.MD_MIN) {
+          return WidthCategory.SM
+        } else if (width >= GridBreakpoint.MD_MIN && width < GridBreakpoint.LG_MIN) {
+          return WidthCategory.MD
+        } else if (width >= GridBreakpoint.LG_MIN && width < GridBreakpoint.XL_MIN) {
+          return WidthCategory.LG
+        } else {
+          return WidthCategory.XL
+        }
+      }),
+      distinctUntilChanged()
+    );
+  }
+
   isXs(): Observable<boolean> {
-    return this.getWidthObs()
-      .map((width) => width < GridBreakpoint.SM)
-      .distinctUntilChanged();
+    return this.widthCategory.pipe(
+      map((widthCat: WidthCategory) => widthCat === WidthCategory.XS),
+      distinctUntilChanged()
+    );
   }
 
   isSm(): Observable<boolean> {
-    return this.getWidthObs()
-      .map((width) => width >= GridBreakpoint.SM && width < GridBreakpoint.MD)
-      .distinctUntilChanged();
+    return this.widthCategory.pipe(
+      map((widthCat: WidthCategory) => widthCat === WidthCategory.SM),
+      distinctUntilChanged()
+    );
   }
 
   isMd(): Observable<boolean> {
-    return this.getWidthObs()
-      .map((width) => width >= GridBreakpoint.MD && width < GridBreakpoint.LG)
-      .distinctUntilChanged();
+    return this.widthCategory.pipe(
+      map((widthCat: WidthCategory) => widthCat === WidthCategory.MD),
+      distinctUntilChanged()
+    );
   }
 
   isLg(): Observable<boolean> {
-    return this.getWidthObs()
-      .map((width) => width >= GridBreakpoint.LG && width < GridBreakpoint.XL)
-      .distinctUntilChanged();
+    return this.widthCategory.pipe(
+      map((widthCat: WidthCategory) => widthCat === WidthCategory.LG),
+      distinctUntilChanged()
+    );
   }
 
   isXl(): Observable<boolean> {
-    return this.getWidthObs()
-      .map((width) => width >= GridBreakpoint.XL)
-      .distinctUntilChanged();
+    return this.widthCategory.pipe(
+      map((widthCat: WidthCategory) => widthCat === WidthCategory.XL),
+      distinctUntilChanged()
+    );
   }
 }

src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.html

@@ -1,13 +1,13 @@
 <div class="card">
-  <a [routerLink]="['/collections/' + object.id]"class="card-img-top">
-    <ds-comcol-page-logo [logo]="object.logo">
-    </ds-comcol-page-logo>
+  <a [routerLink]="['/collections/', object.id]" class="card-img-top">
+    <ds-grid-thumbnail [thumbnail]="object.logo">
+    </ds-grid-thumbnail>
   </a>
   <div class="card-body">
     <h4 class="card-title">{{object.name}}</h4>
     <p *ngIf="object.shortDescription" class="card-text">{{object.shortDescription}}</p>
     <div class="text-center">
-      <a [routerLink]="['/collections/' + object.id]" class="lead btn btn-primary viewButton">View</a>
+      <a [routerLink]="['/collections/', object.id]" class="lead btn btn-primary viewButton">View</a>
     </div>
 
   </div>

src/app/shared/object-grid/community-grid-element/community-grid-element.component.html

@@ -1,14 +1,14 @@
 <div class="card">
 
-  <a [routerLink]="['/communities/' + object.id]"class="card-img-top">
-    <ds-comcol-page-logo [logo]="object.logo">
-    </ds-comcol-page-logo>
+  <a [routerLink]="['/communities/', object.id]" class="card-img-top">
+    <ds-grid-thumbnail [thumbnail]="object.logo">
+    </ds-grid-thumbnail>
   </a>
   <div class="card-body">
     <h4 class="card-title">{{object.name}}</h4>
     <p *ngIf="object.shortDescription" class="card-text">{{object.shortDescription}}</p>
     <div class="text-center">
-      <a [routerLink]="['/communities/' + object.id]" class="lead btn btn-primary viewButton">View</a>
+      <a [routerLink]="['/communities/', object.id]" class="lead btn btn-primary viewButton">View</a>
     </div>
   </div>
 </div>

src/app/shared/object-grid/item-grid-element/item-grid-element.component.html

@@ -1,6 +1,6 @@
 <div class="card">
 
-  <a [routerLink]="['/items/' + object.id]" class="card-img-top">
+  <a [routerLink]="['/items/', object.id]" class="card-img-top">
     <ds-grid-thumbnail [thumbnail]="object.getThumbnail()">
     </ds-grid-thumbnail>
   </a>
@@ -16,7 +16,7 @@
     <p *ngIf="object.findMetadata('dc.description.abstract')" class="item-abstract card-text">{{object.findMetadata("dc.description.abstract") | dsTruncate:[200] }}</p>
 
     <div class="text-center">
-      <a [routerLink]="['/items/' + object.id]" class="lead btn btn-primary viewButton">View</a>
+      <a [routerLink]="['/items/', object.id]" class="lead btn btn-primary viewButton">View</a>
     </div>
   </div>
 </div>

src/app/shared/object-grid/object-grid.component.html

@@ -10,12 +10,14 @@
   (sortDirectionChange)="onSortDirectionChange($event)"
   (sortFieldChange)="onSortFieldChange($event)"
   (paginationChange)="onPaginationChange($event)">
-    <div class="card-columns" *ngIf="objects?.hasSucceeded" @fadeIn>
-        <div
-          *ngFor="let object of objects?.payload?.page">
+    <div class="card-columns row" *ngIf="objects?.hasSucceeded">
+      <div class="card-column col col-sm-6 col-lg-4" *ngFor="let column of (columns$ | async)" @fadeIn>
+        <div class="card-element" *ngFor="let object of column">
           <ds-wrapper-grid-element [object]="object"></ds-wrapper-grid-element>
+        </div>
       </div>
     </div>
   <ds-error *ngIf="objects.hasFailed | async" message="{{'error.objects' | translate}}"></ds-error>
   <ds-loading *ngIf="objects.isLoading | async" message="{{'loading.objects' | translate}}"></ds-loading>
 </ds-pagination>
+

src/app/shared/object-grid/object-grid.component.scss

@@ -1,24 +1,26 @@
 @import '../../../styles/variables';
 @import '../../../styles/mixins';
 
+$ds-wrapper-grid-spacing: $spacer/2;
+
 ds-wrapper-grid-element ::ng-deep {
   div.thumbnail > img {
     height: $card-thumbnail-height;
     width: 100%;
   }
   div.card {
-    margin-bottom: $spacer;
+    margin-top: $ds-wrapper-grid-spacing;
+    margin-bottom: $ds-wrapper-grid-spacing;
   }
 }
 
 .card-columns {
-  @include media-breakpoint-only(lg) {
-    column-count: 3;
+  margin-left: -$ds-wrapper-grid-spacing;
+  margin-right: -$ds-wrapper-grid-spacing;
+
+  .card-column {
+    padding-left: $ds-wrapper-grid-spacing;
+    padding-right: $ds-wrapper-grid-spacing;
   }
-  @include media-breakpoint-only(sm) {
-    column-count: 2;
-  }
-  @include media-breakpoint-only(xs) {
-    column-count: 1;
-  }
-}
+}
+

src/app/shared/object-grid/object-grid.component.spec.ts

@@ -0,0 +1,224 @@
+import { cold, hot } from 'jasmine-marbles';
+import { map } from 'rxjs/operators';
+import { WidthCategory } from '../host-window.service';
+import { ObjectGridComponent } from './object-grid.component';
+
+describe('ObjectGridComponent', () => {
+  const testObjects = [
+    { one: 1 },
+    { two: 2 },
+    { three: 3 },
+    { four: 4 },
+    { five: 5 },
+    { six: 6 },
+    { seven: 7 },
+    { eight: 8 },
+    { nine: 9 },
+    { ten: 10 }
+  ];
+  const mockRD = {
+    payload: {
+      page: testObjects
+    }
+  } as any;
+
+  describe('the number of columns', () => {
+
+    it('should be 3 for xl screens', () => {
+      const hostWindowService = {
+        widthCategory: hot('a', { a: WidthCategory.XL }),
+      } as any;
+      const comp = new ObjectGridComponent(hostWindowService);
+
+      (comp as any)._objects$ = hot('b', { b: mockRD });
+
+      comp.ngOnInit();
+
+      const expected = cold('c', { c: 3 });
+
+      const result = comp.columns$.pipe(
+        map((columns) => columns.length)
+      );
+
+      expect(result).toBeObservable(expected);
+    });
+
+    it('should be 3 for lg screens', () => {
+      const hostWindowService = {
+        widthCategory: hot('a', { a: WidthCategory.LG }),
+      } as any;
+      const comp = new ObjectGridComponent(hostWindowService);
+
+      (comp as any)._objects$ = hot('b', { b: mockRD });
+
+      comp.ngOnInit();
+
+      const expected = cold('c', { c: 3 });
+
+      const result = comp.columns$.pipe(
+        map((columns) => columns.length)
+      );
+
+      expect(result).toBeObservable(expected);
+    });
+
+    it('should be 2 for md screens', () => {
+      const hostWindowService = {
+        widthCategory: hot('a', { a: WidthCategory.MD }),
+      } as any;
+      const comp = new ObjectGridComponent(hostWindowService);
+
+      (comp as any)._objects$ = hot('b', { b: mockRD });
+
+      comp.ngOnInit();
+
+      const expected = cold('c', { c: 2 });
+
+      const result = comp.columns$.pipe(
+        map((columns) => columns.length)
+      );
+
+      expect(result).toBeObservable(expected);
+    });
+
+    it('should be 2 for sm screens', () => {
+      const hostWindowService = {
+        widthCategory: hot('a', { a: WidthCategory.SM }),
+      } as any;
+      const comp = new ObjectGridComponent(hostWindowService);
+
+      (comp as any)._objects$ = hot('b', { b: mockRD });
+
+      comp.ngOnInit();
+
+      const expected = cold('c', { c: 2 });
+
+      const result = comp.columns$.pipe(
+        map((columns) => columns.length)
+      );
+
+      expect(result).toBeObservable(expected);
+    });
+
+    it('should be 1 for xs screens', () => {
+      const hostWindowService = {
+        widthCategory: hot('a', { a: WidthCategory.XS }),
+      } as any;
+      const comp = new ObjectGridComponent(hostWindowService);
+
+      (comp as any)._objects$ = hot('b', { b: mockRD });
+
+      comp.ngOnInit();
+
+      const expected = cold('c', { c: 1 });
+
+      const result = comp.columns$.pipe(
+        map((columns) => columns.length)
+      );
+
+      expect(result).toBeObservable(expected);
+    });
+
+  });
+
+  describe('The ordering of the content', () => {
+    it('should be left to right for XL screens', () => {
+      const hostWindowService = {
+        widthCategory: hot('a', { a: WidthCategory.XL }),
+      } as any;
+      const comp = new ObjectGridComponent(hostWindowService);
+
+      (comp as any)._objects$ = hot('b', { b: mockRD });
+
+      comp.ngOnInit();
+
+      const expected = cold('c', { c: [
+          [testObjects[0], testObjects[3], testObjects[6], testObjects[9]],
+          [testObjects[1], testObjects[4], testObjects[7]],
+          [testObjects[2], testObjects[5], testObjects[8]]
+        ] });
+
+      const result = comp.columns$;
+
+      expect(result).toBeObservable(expected);
+    });
+
+    it('should be left to right for LG screens', () => {
+      const hostWindowService = {
+        widthCategory: hot('a', { a: WidthCategory.LG }),
+      } as any;
+      const comp = new ObjectGridComponent(hostWindowService);
+
+      (comp as any)._objects$ = hot('b', { b: mockRD });
+
+      comp.ngOnInit();
+
+      const expected = cold('c', { c: [
+          [testObjects[0], testObjects[3], testObjects[6], testObjects[9]],
+          [testObjects[1], testObjects[4], testObjects[7]],
+          [testObjects[2], testObjects[5], testObjects[8]]
+        ] });
+
+      const result = comp.columns$;
+
+      expect(result).toBeObservable(expected);
+    });
+
+    it('should be left to right for MD screens', () => {
+      const hostWindowService = {
+        widthCategory: hot('a', { a: WidthCategory.MD }),
+      } as any;
+      const comp = new ObjectGridComponent(hostWindowService);
+
+      (comp as any)._objects$ = hot('b', { b: mockRD });
+
+      comp.ngOnInit();
+
+      const expected = cold('c', { c: [
+          [testObjects[0], testObjects[2], testObjects[4], testObjects[6], testObjects[8]],
+          [testObjects[1], testObjects[3], testObjects[5], testObjects[7], testObjects[9]],
+        ] });
+
+      const result = comp.columns$;
+
+      expect(result).toBeObservable(expected);
+    });
+
+    it('should be left to right for SM screens', () => {
+      const hostWindowService = {
+        widthCategory: hot('a', { a: WidthCategory.SM }),
+      } as any;
+      const comp = new ObjectGridComponent(hostWindowService);
+
+      (comp as any)._objects$ = hot('b', { b: mockRD });
+
+      comp.ngOnInit();
+
+      const expected = cold('c', { c: [
+          [testObjects[0], testObjects[2], testObjects[4], testObjects[6], testObjects[8]],
+          [testObjects[1], testObjects[3], testObjects[5], testObjects[7], testObjects[9]],
+        ] });
+
+      const result = comp.columns$;
+
+      expect(result).toBeObservable(expected);
+    });
+
+    it('should be top to bottom for XS screens', () => {
+      const hostWindowService = {
+        widthCategory: hot('a', { a: WidthCategory.XS }),
+      } as any;
+      const comp = new ObjectGridComponent(hostWindowService);
+
+      (comp as any)._objects$ = hot('b', { b: mockRD });
+
+      comp.ngOnInit();
+
+      const expected = cold('c', { c: [ testObjects ] });
+
+      const result = comp.columns$;
+
+      expect(result).toBeObservable(expected);
+    });
+  });
+});

src/app/shared/object-grid/object-grid.component.ts

@@ -2,16 +2,21 @@ import {
   ChangeDetectionStrategy,
   Component,
   EventEmitter,
-  Input,
+  Input, OnInit,
   Output,
   ViewEncapsulation
 } from '@angular/core';
+import { BehaviorSubject } from 'rxjs/BehaviorSubject';
+import { Observable } from 'rxjs/Observable';
+import { distinctUntilChanged, map } from 'rxjs/operators';
 
 import { SortDirection, SortOptions } from '../../core/cache/models/sort-options.model';
 import { PaginatedList } from '../../core/data/paginated-list';
 
 import { RemoteData } from '../../core/data/remote-data';
 import { fadeIn } from '../animations/fade';
+import { hasNoValue, hasValue } from '../empty.util';
+import { HostWindowService, WidthCategory } from '../host-window.service';
 import { ListableObject } from '../object-collection/shared/listable-object.model';
 
 import { PaginationComponentOptions } from '../pagination/pagination-component-options.model';
@@ -25,18 +30,18 @@ import { PaginationComponentOptions } from '../pagination/pagination-component-o
   animations: [fadeIn]
 })
 
-export class ObjectGridComponent {
+export class ObjectGridComponent implements OnInit {
 
   @Input() config: PaginationComponentOptions;
   @Input() sortConfig: SortOptions;
   @Input() hideGear = false;
   @Input() hidePagerWhenSinglePage = true;
-  private _objects: RemoteData<PaginatedList<ListableObject>>;
+  private _objects$: BehaviorSubject<RemoteData<PaginatedList<ListableObject>>>;
   @Input() set objects(objects: RemoteData<PaginatedList<ListableObject>>) {
-    this._objects = objects;
+    this._objects$.next(objects);
   }
   get objects() {
-    return this._objects;
+    return this._objects$.getValue();
   }
 
   /**
@@ -77,6 +82,56 @@ export class ObjectGridComponent {
    */
   @Output() sortFieldChange: EventEmitter<string> = new EventEmitter<string>();
   data: any = {};
+  columns$: Observable<ListableObject[]>
+
+  constructor(private hostWindow: HostWindowService) {
+    this._objects$ = new BehaviorSubject(undefined);
+  }
+
+  ngOnInit(): void {
+    const nbColumns$ = this.hostWindow.widthCategory.pipe(
+      map((widthCat: WidthCategory) => {
+        switch (widthCat) {
+          case WidthCategory.XL:
+          case WidthCategory.LG: {
+            return 3;
+          }
+          case WidthCategory.MD:
+          case WidthCategory.SM: {
+            return 2;
+          }
+          default: {
+            return 1;
+          }
+        }
+      }),
+      distinctUntilChanged()
+    ).startWith(3);
+
+    this.columns$ = Observable.combineLatest(
+      nbColumns$,
+      this._objects$,
+      (nbColumns, objects) => {
+        if (hasValue(objects) && hasValue(objects.payload) && hasValue(objects.payload.page)) {
+          const page = objects.payload.page;
+
+          const result = [];
+
+          page.forEach((obj: ListableObject, i: number) => {
+            const colNb = i % nbColumns;
+            let col = result[colNb];
+            if (hasNoValue(col)) {
+              col = [];
+            }
+            result[colNb] = [...col, obj];
+          });
+          return result;
+        } else {
+          return [];
+        }
+    });
+  }
+
   onPageChange(event) {
     this.pageChange.emit(event);
   }

src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.html

@@ -1,13 +1,13 @@
 <div class="card">
-  <a [routerLink]="['/collections/' + dso.id]"class="card-img-top">
-    <ds-comcol-page-logo [logo]="dso.logo">
-    </ds-comcol-page-logo>
+  <a [routerLink]="['/collections/', dso.id]" class="card-img-top">
+    <ds-grid-thumbnail [thumbnail]="dso.logo">
+    </ds-grid-thumbnail>
   </a>
   <div class="card-body">
     <h4 class="card-title">{{dso.name}}</h4>
     <p *ngIf="dso.shortDescription" class="card-text">{{dso.shortDescription}}</p>
     <div class="text-center">
-      <a [routerLink]="['/collections/' + dso.id]" class="lead btn btn-primary viewButton">View</a>
+      <a [routerLink]="['/collections/',  dso.id]" class="lead btn btn-primary viewButton">View</a>
     </div>
   </div>
 </div>

src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.html

@@ -1,14 +1,14 @@
 <div class="card">
 
-  <a [routerLink]="['/communities/' + dso.id]"class="card-img-top">
-    <ds-comcol-page-logo [logo]="dso.logo">
-    </ds-comcol-page-logo>
+  <a [routerLink]="['/communities/', dso.id]" class="card-img-top">
+    <ds-grid-thumbnail [thumbnail]="dso.logo">
+    </ds-grid-thumbnail>
   </a>
   <div class="card-body">
     <h4 class="card-title">{{dso.name}}</h4>
     <p *ngIf="dso.shortDescription" class="card-text">{{dso.shortDescription}}</p>
     <div class="text-center">
-      <a [routerLink]="['/communities/' + dso.id]" class="lead btn btn-primary viewButton">View</a>
+      <a [routerLink]="['/communities/', dso.id]" class="lead btn btn-primary viewButton">View</a>
     </div>
   </div>
 </div>

src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.html

@@ -1,5 +1,5 @@
 <ds-truncatable [id]="dso.id">
-    <div class="card mt-1" [@focusShadow]="(isCollapsed() | async)?'blur':'focus'">
+    <div class="card" [@focusShadow]="(isCollapsed() | async)?'blur':'focus'">
         <a [routerLink]="['/items/' + dso.id]" class="card-img-top full-width">
             <div>
                 <ds-grid-thumbnail [thumbnail]="dso.getThumbnail()">
@@ -30,4 +30,4 @@
             </div>
         </div>
     </div>
-</ds-truncatable>
+</ds-truncatable>

src/app/shared/object-list/search-result-list-element/search-result-list-element.component.ts

@@ -1,12 +1,12 @@
 import { Component, Inject } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
 
 import { SearchResult } from '../../../+search-page/search-result.model';
 import { DSpaceObject } from '../../../core/shared/dspace-object.model';
 import { Metadatum } from '../../../core/shared/metadatum.model';
-import { isEmpty, hasNoValue, isNotEmpty } from '../../empty.util';
+import { hasNoValue, isEmpty } from '../../empty.util';
 import { ListableObject } from '../../object-collection/shared/listable-object.model';
 import { AbstractListableElementComponent } from '../../object-collection/shared/object-collection-element/abstract-listable-element.component';
-import { Observable } from 'rxjs/Observable';
 import { TruncatableService } from '../../truncatable/truncatable.service';
 
 @Component({
@@ -24,15 +24,13 @@ export class SearchResultListElementComponent<T extends SearchResult<K>, K exten
 
   getValues(keys: string[]): string[] {
     const results: string[] = new Array<string>();
-    if (isNotEmpty(this.object.hitHighlights)) {
-      this.object.hitHighlights.forEach(
-        (md: Metadatum) => {
-          if (keys.indexOf(md.key) > -1) {
-            results.push(md.value);
-          }
+    this.object.hitHighlights.forEach(
+      (md: Metadatum) => {
+        if (keys.indexOf(md.key) > -1) {
+          results.push(md.value);
         }
-      );
-    }
+      }
+    );
     if (isEmpty(results)) {
       this.dso.filterMetadata(keys).forEach(
         (md: Metadatum) => {
@@ -45,16 +43,14 @@ export class SearchResultListElementComponent<T extends SearchResult<K>, K exten
 
   getFirstValue(key: string): string {
     let result: string;
-    if (isNotEmpty(this.object.hitHighlights)) {
-      this.object.hitHighlights.some(
-        (md: Metadatum) => {
-          if (key === md.key) {
-            result = md.value;
-            return true;
-          }
+    this.object.hitHighlights.some(
+      (md: Metadatum) => {
+        if (key === md.key) {
+          result = md.value;
+          return true;
         }
-      );
-    }
+      }
+    );
     if (hasNoValue(result)) {
       result = this.dso.findMetadata(key);
     }

src/app/shared/pagination/pagination.component.html

@@ -12,7 +12,7 @@
             <h6 class="dropdown-header">{{ 'pagination.results-per-page' | translate}}</h6>
             <button class="dropdown-item" *ngFor="let item of pageSizeOptions" (click)="doPageSizeChange(item)"><i [ngClass]="{'invisible': item != pageSize}" class="fa fa-check" aria-hidden="true"></i> {{item}} </button>
             <h6 class="dropdown-header">{{ 'pagination.sort-direction' | translate}}</h6>
-            <button class="dropdown-item" *ngFor="let direction of (sortDirections | dsKeys)" (click)="doSortDirectionChange(direction.value)"><i [ngClass]="{'invisible': direction.value !== sortDirection}" class="fa fa-check" aria-hidden="true"></i> {{direction.key}} </button>
+            <button class="dropdown-item" *ngFor="let direction of (sortDirections | dsKeys)" (click)="doSortDirectionChange(direction.value)"><i [ngClass]="{'invisible': direction.value !== sortDirection}" class="fa fa-check" aria-hidden="true"></i> {{'sorting.' + direction.key | translate}} </button>
           </div>
         </div>
       </div>

src/app/shared/pagination/pagination.component.spec.ts

@@ -41,7 +41,7 @@ import { MockRouter } from '../mocks/mock-router';
 
 import { HostWindowService } from '../host-window.service';
 import { EnumKeysPipe } from '../utils/enum-keys-pipe';
-import { SortOptions } from '../../core/cache/models/sort-options.model';
+import { SortDirection, SortOptions } from '../../core/cache/models/sort-options.model';
 
 import { GLOBAL_CONFIG, ENV_CONFIG } from '../../../config';
 
@@ -349,7 +349,7 @@ class TestComponent {
   collection: string[] = [];
   collectionSize: number;
   paginationOptions = new PaginationComponentOptions();
-  sortOptions = new SortOptions();
+  sortOptions = new SortOptions('dc.title', SortDirection.ASC);
 
   constructor() {
     this.collection = Array.from(new Array(100), (x, i) => `item ${i + 1}`);

src/app/shared/pagination/pagination.component.ts

@@ -144,7 +144,7 @@ export class PaginationComponent implements OnDestroy, OnInit {
   /**
    * Direction in which to sort: ascending or descending
    */
-  public sortDirection: SortDirection = SortDirection.Ascending;
+  public sortDirection: SortDirection = SortDirection.ASC;
 
   /**
    * Name of the field that's used to sort by

src/app/shared/route.service.ts

@@ -13,19 +13,19 @@ export class RouteService {
   }
 
   getQueryParameterValues(paramName: string): Observable<string[]> {
-    return this.route.queryParamMap.map((map) => [...map.getAll(paramName)]);
+    return this.route.queryParamMap.map((map) => [...map.getAll(paramName)]).distinctUntilChanged();
   }
 
   getQueryParameterValue(paramName: string): Observable<string> {
-    return this.route.queryParamMap.map((map) => map.get(paramName));
+    return this.route.queryParamMap.map((map) => map.get(paramName)).distinctUntilChanged();
   }
 
   hasQueryParam(paramName: string): Observable<boolean> {
-    return this.route.queryParamMap.map((map) => map.has(paramName));
+    return this.route.queryParamMap.map((map) => map.has(paramName)).distinctUntilChanged();
   }
 
   hasQueryParamWithValue(paramName: string, paramValue: string): Observable<boolean> {
-    return this.route.queryParamMap.map((map) => map.getAll(paramName).indexOf(paramValue) > -1);
+    return this.route.queryParamMap.map((map) => map.getAll(paramName).indexOf(paramValue) > -1).distinctUntilChanged();
   }
 
   getQueryParamsWithPrefix(prefix: string): Observable<Params> {
@@ -38,6 +38,6 @@ export class RouteService {
               params[key] = [...map.getAll(key)];
             });
           return params;
-        });
+        }).distinctUntilChanged();
   }
 }

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

@@ -2,7 +2,6 @@ import { ComponentFixture, TestBed, async, tick, fakeAsync } from '@angular/core
 import { By } from '@angular/platform-browser';
 import { DebugElement } from '@angular/core';
 import { SearchFormComponent } from './search-form.component';
-import { Observable } from 'rxjs/Observable';
 import { FormsModule } from '@angular/forms';
 import { ResourceType } from '../../core/shared/resource-type';
 import { RouterTestingModule } from '@angular/router/testing';

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

@@ -1,7 +1,8 @@
 import { Component, Input } from '@angular/core';
+import { SearchService } from '../../+search-page/search-service/search.service';
 import { DSpaceObject } from '../../core/shared/dspace-object.model';
 import { Router } from '@angular/router';
-import { isNotEmpty, hasValue, isEmpty } from '../empty.util';
+import { isNotEmpty, hasValue, isEmpty, hasNoValue } from '../empty.util';
 
 /**
  * This component renders a simple item page.
@@ -17,8 +18,7 @@ import { isNotEmpty, hasValue, isEmpty } from '../empty.util';
 export class SearchFormComponent {
   @Input() query: string;
   selectedId = '';
-  // Optional existing search parameters
-  @Input() currentParams: {};
+  @Input() currentUrl: string;
   @Input() scopes: DSpaceObject[];
 
   @Input()
@@ -34,16 +34,15 @@ export class SearchFormComponent {
   }
 
   updateSearch(data: any) {
-    this.router.navigate(['/search'], {
-      queryParams: Object.assign({}, this.currentParams,
-        {
-          query: data.query,
-          scope: data.scope || undefined,
-          page: data.page || 1
-        }
-      )
-    })
-    ;
+    const newUrl = hasValue(this.currentUrl) ? this.currentUrl : 'search';
+    this.router.navigate([newUrl], {
+      queryParams: {
+        query: data.query,
+        scope: data.scope || undefined,
+        page: data.page || 1
+      },
+      queryParamsHandling: 'merge'
+    });
   }
 
   isNotEmpty(object: any) {

tsconfig.json

@@ -26,7 +26,8 @@
       "es6",
       "es2015",
       "es2016",
-      "es2017"
+      "es2017",
+      "es2017.object"
     ]
   },
   "exclude": [

webpack/webpack.common.js

@@ -13,6 +13,9 @@ module.exports = {
   output: {
     path: root('dist')
   },
+  watchOptions: {
+    aggregateTimeout: 50,
+  },
   module: {
     rules: [{
         test: /\.ts$/,