Merge pull request #398 from atmire/preview-misc-fixes-2

Miscellaneous fixes for Preview Release - Part 2

README.md

@@ -14,7 +14,7 @@ If you're looking for the 2016 Angular 2 DSpace UI prototype, you can find it [h
 Quick start
 -----------
 
-**Ensure you're running [Node](https://nodejs.org) >= `v8.0.x`, [npm](https://www.npmjs.com/) >= `v3.x` and [yarn](https://yarnpkg.com) >= `v0.20.x`**
+**Ensure you're running [Node](https://nodejs.org) >= `v8.0.x`, [npm](https://www.npmjs.com/) >= `v5.x` and [yarn](https://yarnpkg.com) >= `v1.x`**
 
 ```bash
 # clone the repo
@@ -65,7 +65,7 @@ Requirements
 ------------
 
 -	[Node.js](https://nodejs.org), [npm](https://www.npmjs.com/), and [yarn](https://yarnpkg.com)
--	Ensure you're running node >= `v5.x`, npm >= `v3.x` and yarn >= `v0.20.x`
+-	Ensure you're running node >= `v8.x`, npm >= `v5.x` and yarn >= `v1.x`
 
 If you have [`nvm`](https://github.com/creationix/nvm#install-script) or [`nvm-windows`](https://github.com/coreybutler/nvm-windows) installed, which is highly recommended, you can run `nvm install --lts && nvm use` to install and start using the latest Node LTS.
 

package.json

@@ -23,9 +23,9 @@
     "prebuild": "yarn run clean:dist",
     "prebuild:aot": "yarn run prebuild",
     "prebuild:prod": "yarn run prebuild",
-    "build": "webpack --progress --mode development",
+    "build": "node ./webpack/run-webpack.js --progress --mode development",
-    "build:aot": "webpack --env.aot --env.server --mode development && webpack --env.aot --env.client --mode development",
+    "build:aot": "node ./webpack/run-webpack.js --env.aot --env.server --mode development && node ./webpack/run-webpack.js --env.aot --env.client --mode development",
-    "build:prod": "webpack --env.aot --env.server --mode production && webpack --env.aot --env.client --mode production",
+    "build:prod": "node ./webpack/run-webpack.js --env.aot --env.server --mode production && node ./webpack/run-webpack.js --env.aot --env.client --mode production",
     "postbuild:prod": "yarn run rollup",
     "rollup": "rollup -c rollup.config.js",
     "prestart": "yarn run build:prod",
@@ -40,7 +40,7 @@
     "server": "node dist/server.js",
     "server:watch": "nodemon dist/server.js",
     "server:watch:debug": "nodemon --debug dist/server.js",
-    "webpack:watch": "webpack -w --mode development",
+    "webpack:watch": "node ./webpack/run-webpack.js -w --mode development",
     "watch": "yarn run build && npm-run-all -p webpack:watch server:watch",
     "watch:debug": "yarn run build && npm-run-all -p webpack:watch server:watch:debug",
     "predebug": "yarn run build",

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

@@ -1,7 +1,7 @@
-import { ChangeDetectionStrategy, Component, OnDestroy, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
-import { Observable, Subscription } from 'rxjs';
+import { BehaviorSubject, of as observableOf, Observable, Subject } from 'rxjs';
-import { filter, flatMap, map, take } from 'rxjs/operators';
+import { filter, flatMap, map, startWith, switchMap, take, tap } from 'rxjs/operators';
 import { PaginatedSearchOptions } from '../+search-page/paginated-search-options.model';
 import { SearchService } from '../+search-page/search-service/search.service';
 import { SortDirection, SortOptions } from '../core/cache/models/sort-options.model';
@@ -15,10 +15,14 @@ import { Bitstream } from '../core/shared/bitstream.model';
 import { Collection } from '../core/shared/collection.model';
 import { DSpaceObjectType } from '../core/shared/dspace-object-type.model';
 import { Item } from '../core/shared/item.model';
-import { getSucceededRemoteData, toDSpaceObjectListRD } from '../core/shared/operators';
+import {
+  getSucceededRemoteData,
+  redirectToPageNotFoundOn404,
+  toDSpaceObjectListRD
+} from '../core/shared/operators';
 
 import { fadeIn, fadeInOut } from '../shared/animations/fade';
-import { hasValue, isNotEmpty } from '../shared/empty.util';
+import { hasNoValue, hasValue, isNotEmpty } from '../shared/empty.util';
 import { PaginationComponentOptions } from '../shared/pagination/pagination-component-options.model';
 
 @Component({
@@ -31,22 +35,23 @@ import { PaginationComponentOptions } from '../shared/pagination/pagination-comp
     fadeInOut
   ]
 })
-export class CollectionPageComponent implements OnInit, OnDestroy {
+export class CollectionPageComponent implements OnInit {
   collectionRD$: Observable<RemoteData<Collection>>;
   itemRD$: Observable<RemoteData<PaginatedList<Item>>>;
   logoRD$: Observable<RemoteData<Bitstream>>;
   paginationConfig: PaginationComponentOptions;
   sortConfig: SortOptions;
-  private subs: Subscription[] = [];
+  private paginationChanges$: Subject<{
-  private collectionId: string;
+    paginationConfig: PaginationComponentOptions,
-  private currentPage: number;
+    sortConfig: SortOptions
-  private pageSize: number;
+  }>;
 
   constructor(
     private collectionDataService: CollectionDataService,
     private searchService: SearchService,
     private metadata: MetadataService,
-    private route: ActivatedRoute
+    private route: ActivatedRoute,
+    private router: Router
   ) {
     this.paginationConfig = new PaginationComponentOptions();
     this.paginationConfig.id = 'collection-page-pagination';
@@ -57,7 +62,8 @@ export class CollectionPageComponent implements OnInit, OnDestroy {
 
   ngOnInit(): void {
     this.collectionRD$ = this.route.data.pipe(
-      map((data) => data.collection),
+      map((data) => data.collection as RemoteData<Collection>),
+      redirectToPageNotFoundOn404(this.router),
       take(1)
     );
     this.logoRD$ = this.collectionRD$.pipe(
@@ -65,42 +71,34 @@ export class CollectionPageComponent implements OnInit, OnDestroy {
       filter((collection: Collection) => hasValue(collection)),
       flatMap((collection: Collection) => collection.logo)
     );
-    this.subs.push(
-      this.route.queryParams.subscribe((params) => {
-        this.metadata.processRemoteData(this.collectionRD$);
-        const page = +params.page || this.paginationConfig.currentPage;
-        const pageSize = +params.pageSize || this.paginationConfig.pageSize;
 
-        this.collectionRD$.subscribe((rd: RemoteData<Collection>) => {
+    this.paginationChanges$ = new BehaviorSubject({
-          this.collectionId = rd.payload.id;
+      paginationConfig: this.paginationConfig,
-          this.updatePage(page, pageSize);
+      sortConfig: this.sortConfig
     });
-      })
-    );
-  }
 
-  updatePage(currentPage: number, pageSize: number) {
+    this.itemRD$ = this.paginationChanges$.pipe(
-    this.itemRD$ = this.searchService.search(
+      switchMap((dto) => this.collectionRD$.pipe(
-      new PaginatedSearchOptions({
-        scope: this.collectionId,
-        pagination: {
-          currentPage,
-          pageSize
-        } as PaginationComponentOptions,
-        sort: this.sortConfig,
-        dsoType: DSpaceObjectType.ITEM
-      })).pipe(
-      toDSpaceObjectListRD(),
         getSucceededRemoteData(),
-      take(1),
+        map((rd) => rd.payload.id),
-    ) as Observable<RemoteData<PaginatedList<Item>>>;
+        switchMap((id: string) => {
+          return this.searchService.search(
+              new PaginatedSearchOptions({
+                scope: id,
+                pagination: dto.paginationConfig,
+                sort: dto.sortConfig,
+                dsoType: DSpaceObjectType.ITEM
+              })).pipe(toDSpaceObjectListRD()) as Observable<RemoteData<PaginatedList<Item>>>
+        }),
+        startWith(undefined) // Make sure switching pages shows loading component
+        )
+      )
+    );
 
-    this.currentPage = currentPage;
+    this.route.queryParams.pipe(take(1)).subscribe((params) => {
-    this.pageSize = pageSize;
+      this.metadata.processRemoteData(this.collectionRD$);
-  }
+      this.onPaginationChange(params);
-
+    })
-  ngOnDestroy(): void {
-    this.subs.filter((sub) => hasValue(sub)).forEach((sub) => sub.unsubscribe());
   }
 
   isNotEmpty(object: any) {
@@ -108,8 +106,14 @@ export class CollectionPageComponent implements OnInit, OnDestroy {
   }
 
   onPaginationChange(event) {
-    if (this.currentPage !== event.page || this.pageSize !== event.pageSize) {
+    this.paginationConfig.currentPage = +event.page || this.paginationConfig.currentPage;
-      this.updatePage(event.page, event.pageSize);
+    this.paginationConfig.pageSize = +event.pageSize || this.paginationConfig.pageSize;
-    }
+    this.sortConfig.direction = event.sortDirection || this.sortConfig.direction;
+    this.sortConfig.field = event.sortField || this.sortConfig.field;
+
+    this.paginationChanges$.next({
+      paginationConfig: this.paginationConfig,
+      sortConfig: this.sortConfig
+    });
   }
 }

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

@@ -1,5 +1,5 @@
 <ds-home-news></ds-home-news>
 <div class="container">
-  <ds-search-form></ds-search-form>
+  <ds-search-form [inPlaceSearch]="false"></ds-search-form>
   <ds-top-level-community-list></ds-top-level-community-list>
 </div>

src/app/+item-page/simple/item-page.component.ts

@@ -1,5 +1,5 @@
 
-import { mergeMap, filter, map, take } from 'rxjs/operators';
+import { mergeMap, filter, map, take, tap } from 'rxjs/operators';
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 
@@ -41,11 +41,6 @@ export class ItemPageComponent implements OnInit {
    */
   itemRD$: Observable<RemoteData<Item>>;
 
-  /**
-   * The item's thumbnail
-   */
-  thumbnail$: Observable<Bitstream>;
-
   /**
    * The view-mode we're currently on
    */
@@ -64,9 +59,5 @@ export class ItemPageComponent implements OnInit {
       redirectToPageNotFoundOn404(this.router)
     );
     this.metadataService.processRemoteData(this.itemRD$);
-    this.thumbnail$ = this.itemRD$.pipe(
-      map((rd: RemoteData<Item>) => rd.payload),
-      filter((item: Item) => hasValue(item)),
-      mergeMap((item: Item) => item.getThumbnail()));
   }
 }

src/app/+my-dspace-page/my-dspace-page.component.html

@@ -6,15 +6,17 @@
                          id="search-sidebar"
                          [configurationList]="(configurationList$ | async)"
                          [resultCount]="(resultsRD$ | async)?.payload.totalElements"
-                         [viewModeList]="viewModeList"></ds-search-sidebar>
+                         [viewModeList]="viewModeList"
+                         [inPlaceSearch]="inPlaceSearch"></ds-search-sidebar>
       <div class="col-12 col-md-9">
           <ds-search-form id="search-form"
                           [query]="(searchOptions$ | async)?.query"
                           [scope]="(searchOptions$ | async)?.scope"
                           [currentUrl]="getSearchLink()"
-                          [scopes]="(scopeListRD$ | async)">
+                          [scopes]="(scopeListRD$ | async)"
+                          [inPlaceSearch]="inPlaceSearch">
           </ds-search-form>
-          <ds-search-labels></ds-search-labels>
+          <ds-search-labels [inPlaceSearch]="inPlaceSearch"></ds-search-labels>
           <div class="row">
               <div id="search-body"
                    class="row-offcanvas row-offcanvas-left"
@@ -24,11 +26,12 @@
                                      [configurationList]="(configurationList$ | async)"
                                      [resultCount]="(resultsRD$ | async)?.payload.totalElements"
                                      (toggleSidebar)="closeSidebar()"
-                                     [ngClass]="{'active': !(isSidebarCollapsed() | async)}">
+                                     [ngClass]="{'active': !(isSidebarCollapsed() | async)}"
+                                     [inPlaceSearch]="inPlaceSearch">
                   </ds-search-sidebar>
                   <div id="search-content" class="col-12">
                       <div class="d-block d-md-none search-controls clearfix">
-                          <ds-view-mode-switch [viewModeList]="viewModeList"></ds-view-mode-switch>
+                          <ds-view-mode-switch [viewModeList]="viewModeList" [inPlaceSearch]="inPlaceSearch"></ds-view-mode-switch>
                           <button (click)="openSidebar()" aria-controls="#search-body"
                                   class="btn btn-outline-primary float-right open-sidebar"><i
                                   class="fas fa-sliders"></i> {{"search.sidebar.open"

src/app/+my-dspace-page/my-dspace-page.component.ts

@@ -1,4 +1,11 @@
-import { ChangeDetectionStrategy, Component, Inject, InjectionToken, OnInit } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Inject,
+  InjectionToken,
+  Input,
+  OnInit
+} from '@angular/core';
 
 import { BehaviorSubject, Observable, Subscription } from 'rxjs';
 import { switchMap, tap, } from 'rxjs/operators';
@@ -43,6 +50,11 @@ export const SEARCH_CONFIG_SERVICE: InjectionToken<SearchConfigurationService> =
 })
 export class MyDSpacePageComponent implements OnInit {
 
+  /**
+   * True when the search component should show results on the current page
+   */
+  @Input() inPlaceSearch = true;
+
   /**
    * The list of available configuration options
    */

src/app/+search-page/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$"></ds-search-facet-selected-option>
+        <ds-search-facet-selected-option *ngFor="let value of (selectedValues$ | async)" [selectedValue]="value" [filterConfig]="filterConfig" [selectedValues$]="selectedValues$" [inPlaceSearch]="inPlaceSearch"></ds-search-facet-selected-option>
         <ng-container *ngFor="let page of (filterValues$ | async)?.payload">
           <div [@facetLoad]="animationState">
-                  <ds-search-facet-option *ngFor="let value of page.page; trackBy: trackUpdate" [filterConfig]="filterConfig" [filterValue]="value" [selectedValues$]="selectedValues$"></ds-search-facet-option>
+                  <ds-search-facet-option *ngFor="let value of page.page; trackBy: trackUpdate" [filterConfig]="filterConfig" [filterValue]="value" [selectedValues$]="selectedValues$" [inPlaceSearch]="inPlaceSearch"></ds-search-facet-option>
           </div>
         </ng-container>
         <div class="clearfix toggle-more-filters">

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

@@ -33,5 +33,4 @@ export class SearchAuthorityFilterComponent extends SearchFacetFilterComponent i
 
     return params[this.filterConfig.paramName];
   }
-
 }

src/app/+search-page/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$"></ds-search-facet-selected-option>
+        <ds-search-facet-selected-option *ngFor="let value of (selectedValues$ | async)" [selectedValue]="value" [filterConfig]="filterConfig" [selectedValues$]="selectedValues$" [inPlaceSearch]="inPlaceSearch"></ds-search-facet-selected-option>
       <ng-container *ngFor="let page of (filterValues$ | async)?.payload">
         <div [@facetLoad]="animationState">
-            <ds-search-facet-option *ngFor="let value of page.page; trackBy: trackUpdate" [filterConfig]="filterConfig" [filterValue]="value" [selectedValues$]="selectedValues$"></ds-search-facet-option>
+            <ds-search-facet-option *ngFor="let value of page.page; trackBy: trackUpdate" [filterConfig]="filterConfig" [filterValue]="value" [selectedValues$]="selectedValues$" [inPlaceSearch]="inPlaceSearch"></ds-search-facet-option>
         </div>
         </ng-container>
         <div class="clearfix toggle-more-filters">

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

@@ -35,6 +35,11 @@ export class SearchFacetOptionComponent implements OnInit, OnDestroy {
    */
   @Input() selectedValues$: Observable<FacetValue[]>;
 
+  /**
+   * True when the search component should show results on the current page
+   */
+  @Input() inPlaceSearch;
+
   /**
    * Emits true when this option should be visible and false when it should be invisible
    */
@@ -76,9 +81,12 @@ export class SearchFacetOptionComponent implements OnInit, OnDestroy {
   }
 
   /**
-   * @returns {string} The base path to the search page
+   * @returns {string} The base path to the search page, or the current page when inPlaceSearch is true
    */
-  getSearchLink() {
+  public getSearchLink(): string {
+    if (this.inPlaceSearch) {
+      return './';
+    }
     return this.searchService.getSearchLink();
   }
 

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

@@ -35,6 +35,11 @@ export class SearchFacetRangeOptionComponent implements OnInit, OnDestroy {
    */
   @Input() filterConfig: SearchFilterConfig;
 
+  /**
+   * True when the search component should show results on the current page
+   */
+  @Input() inPlaceSearch;
+
   /**
    * Emits true when this option should be visible and false when it should be invisible
    */
@@ -75,9 +80,12 @@ export class SearchFacetRangeOptionComponent implements OnInit, OnDestroy {
   }
 
   /**
-   * @returns {string} The base path to the search page
+   * @returns {string} The base path to the search page, or the current page when inPlaceSearch is true
    */
-  getSearchLink() {
+  public getSearchLink(): string {
+    if (this.inPlaceSearch) {
+      return './';
+    }
     return this.searchService.getSearchLink();
   }
 

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

@@ -34,6 +34,11 @@ export class SearchFacetSelectedOptionComponent implements OnInit, OnDestroy {
    */
   @Input() selectedValues$: Observable<FacetValue[]>;
 
+  /**
+   * True when the search component should show results on the current page
+   */
+  @Input() inPlaceSearch;
+
   /**
    * UI parameters when this filter is removed
    */
@@ -62,9 +67,12 @@ export class SearchFacetSelectedOptionComponent implements OnInit, OnDestroy {
   }
 
   /**
-   * @returns {string} The base path to the search page
+   * @returns {string} The base path to the search page, or the current page when inPlaceSearch is true
    */
-  getSearchLink() {
+  public getSearchLink(): string {
+    if (this.inPlaceSearch) {
+      return './';
+    }
     return this.searchService.getSearchLink();
   }
 

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

@@ -2,7 +2,7 @@ import { Component, Injector, Input, OnInit } from '@angular/core';
 import { renderFilterType } from '../search-filter-type-decorator';
 import { FilterType } from '../../../search-service/filter-type.model';
 import { SearchFilterConfig } from '../../../search-service/search-filter-config.model';
-import { FILTER_CONFIG } from '../search-filter.service';
+import { FILTER_CONFIG, IN_PLACE_SEARCH } from '../search-filter.service';
 import { GenericConstructor } from '../../../../core/shared/generic-constructor';
 import { SearchFacetFilterComponent } from '../search-facet-filter/search-facet-filter.component';
 
@@ -20,6 +20,11 @@ export class SearchFacetFilterWrapperComponent implements OnInit {
    */
   @Input() filterConfig: SearchFilterConfig;
 
+  /**
+   * True when the search component should show results on the current page
+   */
+  @Input() inPlaceSearch;
+
   /**
    * The constructor of the search facet filter that should be rendered, based on the filter config's type
    */
@@ -39,7 +44,8 @@ export class SearchFacetFilterWrapperComponent implements OnInit {
     this.searchFilter = this.getSearchFilter();
     this.objectInjector = Injector.create({
       providers: [
-        { provide: FILTER_CONFIG, useFactory: () => (this.filterConfig), deps: [] }
+        { provide: FILTER_CONFIG, useFactory: () => (this.filterConfig), deps: [] },
+        { provide: IN_PLACE_SEARCH, useFactory: () => (this.inPlaceSearch), deps: [] }
       ],
       parent: this.injector
     });

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

@@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, NO_ERRORS_SCHEMA } from '@angular/core';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { TranslateModule } from '@ngx-translate/core';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { FILTER_CONFIG, SearchFilterService } from '../search-filter.service';
+import { FILTER_CONFIG, IN_PLACE_SEARCH, SearchFilterService } from '../search-filter.service';
 import { SearchFilterConfig } from '../../../search-service/search-filter-config.model';
 import { FilterType } from '../../../search-service/filter-type.model';
 import { FacetValue } from '../../../search-service/facet-value.model';
@@ -19,6 +19,7 @@ import { SearchFacetFilterComponent } from './search-facet-filter.component';
 import { RemoteDataBuildService } from '../../../../core/cache/builders/remote-data-build.service';
 import { SearchConfigurationServiceStub } from '../../../../shared/testing/search-configuration-service-stub';
 import { SEARCH_CONFIG_SERVICE } from '../../../../+my-dspace-page/my-dspace-page.component';
+import { tap } from 'rxjs/operators';
 
 describe('SearchFacetFilterComponent', () => {
   let comp: SearchFacetFilterComponent;
@@ -69,8 +70,9 @@ describe('SearchFacetFilterComponent', () => {
         { provide: SearchService, useValue: new SearchServiceStub(searchLink) },
         { provide: Router, useValue: new RouterStub() },
         { provide: FILTER_CONFIG, useValue: new SearchFilterConfig() },
-        { provide: RemoteDataBuildService, useValue: {aggregate: () => observableOf({})} },
+        { provide: RemoteDataBuildService, useValue: { aggregate: () => observableOf({}) } },
         { provide: SEARCH_CONFIG_SERVICE, useValue: new SearchConfigurationServiceStub() },
+        { provide: IN_PLACE_SEARCH, useValue: false },
         {
           provide: SearchFilterService, useValue: {
             getSelectedValuesForFilter: () => observableOf(selectedValues),
@@ -172,13 +174,20 @@ describe('SearchFacetFilterComponent', () => {
     const searchUrl = '/search/path';
     const testValue = 'test';
     const data = testValue;
+
     beforeEach(() => {
+      comp.selectedValues$ = observableOf(selectedValues.map((value) =>
+        Object.assign(new FacetValue(), {
+          label: value,
+          value: value
+        })));
+      fixture.detectChanges();
       spyOn(comp, 'getSearchLink').and.returnValue(searchUrl);
       comp.onSubmit(data);
     });
 
     it('should call navigate on the router with the right searchlink and parameters', () => {
-      expect(router.navigate).toHaveBeenCalledWith([searchUrl], {
+      expect(router.navigate).toHaveBeenCalledWith(searchUrl.split('/'), {
         queryParams: { [mockFilterConfig.paramName]: [...selectedValues, testValue] },
         queryParamsHandling: 'merge'
       });

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

@@ -6,7 +6,7 @@ import {
   Subject,
   Subscription
 } from 'rxjs';
-import { switchMap, distinctUntilChanged, map, take, flatMap } from 'rxjs/operators';
+import { switchMap, distinctUntilChanged, map, take, flatMap, tap } from 'rxjs/operators';
 import { animate, state, style, transition, trigger } from '@angular/animations';
 import { Component, Inject, OnDestroy, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
@@ -18,7 +18,7 @@ import { EmphasizePipe } from '../../../../shared/utils/emphasize.pipe';
 import { FacetValue } from '../../../search-service/facet-value.model';
 import { SearchFilterConfig } from '../../../search-service/search-filter-config.model';
 import { SearchService } from '../../../search-service/search.service';
-import { FILTER_CONFIG, SearchFilterService } from '../search-filter.service';
+import { FILTER_CONFIG, IN_PLACE_SEARCH, SearchFilterService } from '../search-filter.service';
 import { SearchConfigurationService } from '../../../search-service/search-configuration.service';
 import { getSucceededRemoteData } from '../../../../core/shared/operators';
 import { InputSuggestion } from '../../../../shared/input-suggestions/input-suggestions.model';
@@ -85,6 +85,7 @@ export class SearchFacetFilterComponent implements OnInit, OnDestroy {
               protected rdbs: RemoteDataBuildService,
               protected router: Router,
               @Inject(SEARCH_CONFIG_SERVICE) public searchConfigService: SearchConfigurationService,
+              @Inject(IN_PLACE_SEARCH) public inPlaceSearch: boolean,
               @Inject(FILTER_CONFIG) public filterConfig: SearchFilterConfig) {
   }
 
@@ -116,14 +117,6 @@ export class SearchFacetFilterComponent implements OnInit, OnDestroy {
       })
     );
 
-    this.selectedValues$ = observableCombineLatest(
-      this.filterService.getSelectedValuesForFilter(this.filterConfig),
-      facetValues$.pipe(flatMap((facetValues) => facetValues.values))).pipe(
-      map(([selectedValues, facetValues]) => {
-        return facetValues.payload.page.filter((facetValue) => selectedValues.includes(this.getFacetValue(facetValue)))
-      })
-    );
-
     let filterValues = [];
     this.subs.push(facetValues$.subscribe((facetOutcome) => {
       const newValues$ = facetOutcome.values;
@@ -139,9 +132,24 @@ export class SearchFacetFilterComponent implements OnInit, OnDestroy {
 
       filterValues = [...filterValues, newValues$];
 
-      this.subs.push(this.rdbs.aggregate(filterValues).subscribe((rd: RemoteData<Array<PaginatedList<FacetValue>>>) => {
+      this.subs.push(this.rdbs.aggregate(filterValues).pipe(
+        tap((rd: RemoteData<Array<PaginatedList<FacetValue>>>) => {
+          this.selectedValues$ = this.filterService.getSelectedValuesForFilter(this.filterConfig).pipe(
+            map((selectedValues) => {
+              return selectedValues.map((value: string) => {
+                const fValue = [].concat(...rd.payload.map((page) => page.page)).find((facetValue: FacetValue) => facetValue.value === value);
+                if (hasValue(fValue)) {
+                  return fValue;
+                }
+                return Object.assign(new FacetValue(), { label: value, value: value });
+              });
+            })
+          );
+        })
+      ).subscribe((rd: RemoteData<Array<PaginatedList<FacetValue>>>) => {
         this.animationState = 'ready';
         this.filterValues$.next(rd);
+
       }));
       this.subs.push(newValues$.pipe(take(1)).subscribe((rd) => {
         this.isLastPage$.next(hasNoValue(rd.payload.next))
@@ -167,12 +175,25 @@ export class SearchFacetFilterComponent implements OnInit, OnDestroy {
   }
 
   /**
-   * @returns {string} The base path to the search page
+   * @returns {string} The base path to the search page, or the current page when inPlaceSearch is true
    */
-  getSearchLink() {
+  public getSearchLink(): string {
+    if (this.inPlaceSearch) {
+      return './';
+    }
     return this.searchService.getSearchLink();
   }
 
+  /**
+   * @returns {string[]} The base path to the search page, or the current page when inPlaceSearch is true, split in separate pieces
+   */
+  public getSearchLinkParts(): string[] {
+    if (this.inPlaceSearch) {
+      return [];
+    }
+    return this.getSearchLink().split('/');
+  }
+
   /**
    * Show the next page as well
    */
@@ -208,12 +229,14 @@ export class SearchFacetFilterComponent implements OnInit, OnDestroy {
   onSubmit(data: any) {
     this.selectedValues$.pipe(take(1)).subscribe((selectedValues) => {
         if (isNotEmpty(data)) {
-          this.router.navigate([this.getSearchLink()], {
+          this.router.navigate(this.getSearchLinkParts(), {
             queryParams:
-              { [this.filterConfig.paramName]: [
+              {
+                [this.filterConfig.paramName]: [
                   ...selectedValues.map((facet) => this.getFacetValue(facet)),
                   data
-                ] },
+                ]
+              },
             queryParamsHandling: 'merge'
           });
           this.filter = '';

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

@@ -2,6 +2,6 @@
     <div (click)="toggle()" class="filter-name"><h5 class="d-inline-block mb-0">{{'search.filters.filter.' + filter.name + '.head'| translate}}</h5> <span class="filter-toggle fas float-right"
                                                                       [ngClass]="(collapsed$ | async) ? 'fa-plus' : 'fa-minus'"></span></div>
     <div [@slide]="(collapsed$ | async) ? 'collapsed' : 'expanded'"  (@slide.start)="startSlide($event)" (@slide.done)="finishSlide($event)" class="search-filter-wrapper" [ngClass]="{'closed' : closed}">
-        <ds-search-facet-filter-wrapper [filterConfig]="filter"></ds-search-facet-filter-wrapper>
+        <ds-search-facet-filter-wrapper [filterConfig]="filter" [inPlaceSearch]="inPlaceSearch"></ds-search-facet-filter-wrapper>
     </div>
 </div>

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

@@ -27,6 +27,11 @@ export class SearchFilterComponent implements OnInit {
    */
   @Input() filter: SearchFilterConfig;
 
+  /**
+   * True when the search component should show results on the current page
+   */
+  @Input() inPlaceSearch;
+
   /**
    * True when the filter is 100% collapsed in the UI
    */

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

@@ -21,10 +21,13 @@ import { SearchOptions } from '../../search-options.model';
 import { PaginatedSearchOptions } from '../../paginated-search-options.model';
 import { SearchFixedFilterService } from './search-fixed-filter.service';
 import { Params } from '@angular/router';
+import * as postcss from 'postcss';
+import prefix = postcss.vendor.prefix;
 // const spy = create();
 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');
 
 /**
  * Service that performs all actions that have to do with search filters and facets
@@ -141,7 +144,6 @@ export class SearchFilterService {
     const prefixValues$ = this.routeService.getQueryParamsWithPrefix(filterConfig.paramName + '.').pipe(
       map((params: Params) => [].concat(...Object.values(params))),
     );
-
     return observableCombineLatest(values$, prefixValues$).pipe(
       map(([values, prefixValues]) => {
           if (isNotEmpty(values)) {

src/app/+search-page/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$"></ds-search-facet-selected-option>
+        <ds-search-facet-selected-option *ngFor="let value of (selectedValues$ | async)" [selectedValue]="value" [filterConfig]="filterConfig" [selectedValues$]="selectedValues$" [inPlaceSearch]="inPlaceSearch"></ds-search-facet-selected-option>
         <ng-container *ngFor="let page of (filterValues$ | async)?.payload">
           <div [@facetLoad]="animationState">
-            <ds-search-facet-option *ngFor="let value of page.page; trackBy: trackUpdate" [filterConfig]="filterConfig" [filterValue]="value" [selectedValues$]="selectedValues$"></ds-search-facet-option>
+            <ds-search-facet-option *ngFor="let value of page.page; trackBy: trackUpdate" [filterConfig]="filterConfig" [filterValue]="value" [selectedValues$]="selectedValues$" [inPlaceSearch]="inPlaceSearch"></ds-search-facet-option>
           </div>
         </ng-container>
         <div class="clearfix toggle-more-filters">

src/app/+search-page/search-filters/search-filter/search-range-filter/search-range-filter.component.html

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

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

@@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, NO_ERRORS_SCHEMA } from '@angular/core';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { TranslateModule } from '@ngx-translate/core';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { FILTER_CONFIG, SearchFilterService } from '../search-filter.service';
+import { FILTER_CONFIG, IN_PLACE_SEARCH, SearchFilterService } from '../search-filter.service';
 import { SearchFilterConfig } from '../../../search-service/search-filter-config.model';
 import { FilterType } from '../../../search-service/filter-type.model';
 import { FacetValue } from '../../../search-service/facet-value.model';
@@ -18,7 +18,6 @@ import { PageInfo } from '../../../../core/shared/page-info.model';
 import { SearchRangeFilterComponent } from './search-range-filter.component';
 import { RouteService } from '../../../../shared/services/route.service';
 import { RemoteDataBuildService } from '../../../../core/cache/builders/remote-data-build.service';
-import { SearchConfigurationService } from '../../../search-service/search-configuration.service';
 import { SEARCH_CONFIG_SERVICE } from '../../../../+my-dspace-page/my-dspace-page.component';
 import { SearchConfigurationServiceStub } from '../../../../shared/testing/search-configuration-service-stub';
 
@@ -79,6 +78,7 @@ describe('SearchRangeFilterComponent', () => {
         { provide: RemoteDataBuildService, useValue: {aggregate: () => observableOf({})} },
         { provide: RouteService, useValue: {getQueryParameterValue: () => observableOf({})} },
         { provide: SEARCH_CONFIG_SERVICE, useValue: new SearchConfigurationServiceStub() },
+        { provide: IN_PLACE_SEARCH, useValue: false },
         {
           provide: SearchFilterService, useValue: {
             getSelectedValuesForFilter: () => selectedValues,
@@ -119,7 +119,7 @@ describe('SearchRangeFilterComponent', () => {
     });
 
     it('should call navigate on the router with the right searchlink and parameters', () => {
-      expect(router.navigate).toHaveBeenCalledWith([searchUrl], {
+      expect(router.navigate).toHaveBeenCalledWith(searchUrl.split('/'), {
         queryParams: {
           [mockFilterConfig.paramName + minSuffix]: [1900],
           [mockFilterConfig.paramName + maxSuffix]: [1950]

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

@@ -10,7 +10,7 @@ import {
   SearchFacetFilterComponent
 } from '../search-facet-filter/search-facet-filter.component';
 import { SearchFilterConfig } from '../../../search-service/search-filter-config.model';
-import { FILTER_CONFIG, SearchFilterService } from '../search-filter.service';
+import { FILTER_CONFIG, IN_PLACE_SEARCH, SearchFilterService } from '../search-filter.service';
 import { SearchService } from '../../../search-service/search.service';
 import { Router } from '@angular/router';
 import * as moment from 'moment';
@@ -76,10 +76,11 @@ export class SearchRangeFilterComponent extends SearchFacetFilterComponent imple
               protected router: Router,
               protected rdbs: RemoteDataBuildService,
               @Inject(SEARCH_CONFIG_SERVICE) public searchConfigService: SearchConfigurationService,
+              @Inject(IN_PLACE_SEARCH) public inPlaceSearch: boolean,
               @Inject(FILTER_CONFIG) public filterConfig: SearchFilterConfig,
               @Inject(PLATFORM_ID) private platformId: any,
               private route: RouteService) {
-    super(searchService, filterService, rdbs, router, searchConfigService, filterConfig);
+    super(searchService, filterService, rdbs, router, searchConfigService, inPlaceSearch, filterConfig);
 
   }
 
@@ -108,7 +109,7 @@ export class SearchRangeFilterComponent extends SearchFacetFilterComponent imple
   onSubmit() {
     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.getSearchLink()], {
+    this.router.navigate(this.getSearchLinkParts(), {
       queryParams:
         {
           [this.filterConfig.paramName + RANGE_FILTER_MIN_SUFFIX]: newMin,

src/app/+search-page/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$"></ds-search-facet-selected-option>
+        <ds-search-facet-selected-option *ngFor="let value of (selectedValues$ | async)" [selectedValue]="value" [filterConfig]="filterConfig" [selectedValues$]="selectedValues$" [inPlaceSearch]="inPlaceSearch"></ds-search-facet-selected-option>
         <ng-container *ngFor="let page of (filterValues$ | async)?.payload">
           <div [@facetLoad]="animationState">
-                  <ds-search-facet-option *ngFor="let value of page.page; trackBy: trackUpdate" [filterConfig]="filterConfig" [filterValue]="value" [selectedValues$]="selectedValues$"></ds-search-facet-option>
+                  <ds-search-facet-option *ngFor="let value of page.page; trackBy: trackUpdate" [filterConfig]="filterConfig" [filterValue]="value" [selectedValues$]="selectedValues$" [inPlaceSearch]="inPlaceSearch"></ds-search-facet-option>
           </div>
         </ng-container>
         <div class="clearfix toggle-more-filters">

src/app/+search-page/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"></ds-search-filter>
+        <ds-search-filter [filter]="filter" [inPlaceSearch]="inPlaceSearch"></ds-search-filter>
     </div>
 </div>
 <a class="btn btn-primary" [routerLink]="[getSearchLink()]" [queryParams]="clearParams | async" queryParamsHandling="merge" role="button">{{"search.filters.reset" | translate}}</a>

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

@@ -1,4 +1,4 @@
-import { Component, Inject, OnInit } from '@angular/core';
+import { Component, Inject, Input, OnInit } from '@angular/core';
 
 import { Observable } from 'rxjs';
 import { map, switchMap } from 'rxjs/operators';
@@ -32,6 +32,11 @@ export class SearchFiltersComponent implements OnInit {
    */
   clearParams;
 
+  /**
+   * True when the search component should show results on the current page
+   */
+  @Input() inPlaceSearch;
+
   /**
    * Initialize instance variables
    * @param {SearchService} searchService
@@ -58,9 +63,12 @@ export class SearchFiltersComponent implements OnInit {
   }
 
   /**
-   * @returns {string} The base path to the search page
+   * @returns {string} The base path to the search page, or the current page when inPlaceSearch is true
    */
-  getSearchLink() {
+  public getSearchLink(): string {
+    if (this.inPlaceSearch) {
+      return './';
+    }
     return this.searchService.getSearchLink();
   }
 

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

@@ -1,4 +1,4 @@
-import { Component, Inject } from '@angular/core';
+import { Component, Inject, Input } from '@angular/core';
 import { SearchService } from '../search-service/search.service';
 import { Observable } from 'rxjs';
 import { Params } from '@angular/router';
@@ -22,6 +22,11 @@ export class SearchLabelsComponent {
    */
   appliedFilters: Observable<Params>;
 
+  /**
+   * True when the search component should show results on the current page
+   */
+  @Input() inPlaceSearch;
+
   /**
    * Initialize the instance variable
    */
@@ -51,9 +56,12 @@ export class SearchLabelsComponent {
   }
 
   /**
-   * @returns {string} The base path to the search page
+   * @returns {string} The base path to the search page, or the current page when inPlaceSearch is true
    */
-  getSearchLink() {
+  public getSearchLink(): string {
+    if (this.inPlaceSearch) {
+      return './';
+    }
     return this.searchService.getSearchLink();
   }
 

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

@@ -2,15 +2,16 @@
     <div class="search-page row">
         <ds-search-sidebar *ngIf="!(isXsOrSm$ | async)" class="col-{{sideBarWidth}} sidebar-md-sticky"
                            id="search-sidebar"
-                           [resultCount]="(resultsRD$ | async)?.payload.totalElements"></ds-search-sidebar>
+                           [resultCount]="(resultsRD$ | async)?.payload.totalElements" [inPlaceSearch]="inPlaceSearch"></ds-search-sidebar>
         <div class="col-12 col-md-{{12 - sideBarWidth}}">
             <ds-search-form *ngIf="searchEnabled" id="search-form"
                             [query]="(searchOptions$ | async)?.query"
                             [scope]="(searchOptions$ | async)?.scope"
                             [currentUrl]="getSearchLink()"
-                            [scopes]="(scopeListRD$ | async)">
+                            [scopes]="(scopeListRD$ | async)"
+                            [inPlaceSearch]="inPlaceSearch">
             </ds-search-form>
-            <ds-search-labels *ngIf="searchEnabled"></ds-search-labels>
+            <ds-search-labels *ngIf="searchEnabled" [inPlaceSearch]="inPlaceSearch"></ds-search-labels>
             <div class="row">
                 <div id="search-body"
                      class="row-offcanvas row-offcanvas-left"
@@ -23,7 +24,7 @@
                     </ds-search-sidebar>
                     <div id="search-content" class="col-12">
                         <div class="d-block d-md-none search-controls clearfix">
-                            <ds-view-mode-switch></ds-view-mode-switch>
+                            <ds-view-mode-switch [inPlaceSearch]="inPlaceSearch"></ds-view-mode-switch>
                             <button (click)="openSidebar()" aria-controls="#search-body"
                                     class="btn btn-outline-primary float-right open-sidebar"><i
                                     class="fas fa-sliders"></i> {{"search.sidebar.open"

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

@@ -69,6 +69,11 @@ export class SearchPageComponent implements OnInit {
    */
   sub: Subscription;
 
+  /**
+   * True when the search component should show results on the current page
+   */
+  @Input() inPlaceSearch = true;
+
   /**
    * Whether or not the search bar should be visible
    */
@@ -148,9 +153,12 @@ export class SearchPageComponent implements OnInit {
   }
 
   /**
-   * @returns {string} The base path to the search page
+   * @returns {string} The base path to the search page, or the current page when inPlaceSearch is true
    */
   public getSearchLink(): string {
+    if (this.inPlaceSearch) {
+      return './';
+    }
     return this.service.getSearchLink();
   }
 

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

@@ -332,7 +332,7 @@ export class SearchService implements OnDestroy {
    * Changes the current view mode in the current URL
    * @param {ViewMode} viewMode Mode to switch to
    */
-  setViewMode(viewMode: ViewMode) {
+  setViewMode(viewMode: ViewMode, searchLinkParts?: string[]) {
     this.routeService.getQueryParameterValue('pageSize').pipe(first())
       .subscribe((pageSize) => {
         let queryParams = { view: viewMode, page: 1 };
@@ -346,7 +346,7 @@ export class SearchService implements OnDestroy {
           queryParamsHandling: 'merge'
         };
 
-        this.router.navigate([this.getSearchLink()], navigationExtras);
+        this.router.navigate(hasValue(searchLinkParts) ? searchLinkParts : [this.getSearchLink()], navigationExtras);
       })
   }
 
@@ -354,10 +354,7 @@ export class SearchService implements OnDestroy {
    * @returns {string} The base path to the search page
    */
   getSearchLink(): string {
-    const urlTree = this.router.parseUrl(this.router.url);
+    return '/search';
-    const g: UrlSegmentGroup = urlTree.root.children[PRIMARY_OUTLET];
-    const searchLink: any = '/' + g.toString();
-    return (searchLink !== '/search' && searchLink !== '/mydspace') ? '/search' : searchLink;
   }
 
   /**

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

@@ -1,4 +1,4 @@
-import { Component, Inject, OnInit } from '@angular/core';
+import { Component, Inject, Input, OnInit } from '@angular/core';
 import { SearchService } from '../search-service/search.service';
 import { SortDirection, SortOptions } from '../../core/cache/models/sort-options.model';
 import { ActivatedRoute, NavigationExtras, Router } from '@angular/router';
@@ -18,6 +18,11 @@ import { SEARCH_CONFIG_SERVICE } from '../../+my-dspace-page/my-dspace-page.comp
  */
 export class SearchSettingsComponent implements OnInit {
 
+  /**
+   * True when the search component should show results on the current page
+   */
+  @Input() inPlaceSearch;
+
   /**
    * The configuration for the current paginated search results
    */
@@ -54,7 +59,7 @@ export class SearchSettingsComponent implements OnInit {
       },
       queryParamsHandling: 'merge'
     };
-    this.router.navigate([ this.service.getSearchLink() ], navigationExtras);
+    this.router.navigate(this.getSearchLinkParts(), navigationExtras);
   }
 
   /**
@@ -71,6 +76,26 @@ export class SearchSettingsComponent implements OnInit {
       },
       queryParamsHandling: 'merge'
     };
-    this.router.navigate([ this.service.getSearchLink() ], navigationExtras);
+    this.router.navigate(this.getSearchLinkParts(), navigationExtras);
+  }
+
+  /**
+   * @returns {string} The base path to the search page, or the current page when inPlaceSearch is true
+   */
+  public getSearchLink(): string {
+    if (this.inPlaceSearch) {
+      return './';
+    }
+    return this.service.getSearchLink();
+  }
+
+  /**
+   * @returns {string[]} The base path to the search page, or the current page when inPlaceSearch is true, split in separate pieces
+   */
+  public getSearchLinkParts(): string[] {
+    if (this.service) {
+      return [];
+    }
+    return this.getSearchLink().split('/');
   }
 }

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

@@ -11,8 +11,8 @@
         <ds-view-mode-switch [viewModeList]="viewModeList" class="d-none d-md-block"></ds-view-mode-switch>
         <div class="sidebar-content">
             <ds-search-switch-configuration *ngIf="configurationList" [configurationList]="configurationList"></ds-search-switch-configuration>
-            <ds-search-filters></ds-search-filters>
+            <ds-search-filters [inPlaceSearch]="inPlaceSearch"></ds-search-filters>
-            <ds-search-settings></ds-search-settings>
+            <ds-search-settings [inPlaceSearch]="inPlaceSearch"></ds-search-settings>
         </div>
     </div>
 </div>

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

@@ -34,8 +34,14 @@ export class SearchSidebarComponent {
    */
   @Input() viewModeList;
 
+  /**
+   * True when the search component should show results on the current page
+   */
+  @Input() inPlaceSearch;
+
   /**
    * Emits event when the user clicks a button to open or close the sidebar
    */
   @Output() toggleSidebar = new EventEmitter<boolean>();
+
 }

src/app/core/cache/builders/remote-data-build.service.ts

@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 
 import { combineLatest as observableCombineLatest, Observable, of as observableOf, race as observableRace } from 'rxjs';
-import { distinctUntilChanged, flatMap, map, startWith, switchMap } from 'rxjs/operators';
+import { distinctUntilChanged, flatMap, map, startWith, switchMap, tap } from 'rxjs/operators';
 
 import { hasValue, hasValueOperator, isEmpty, isNotEmpty, isNotUndefined } from '../../../shared/empty.util';
 import { PaginatedList } from '../../data/paginated-list';
@@ -205,17 +205,28 @@ export class RemoteDataBuildService {
 
     return observableCombineLatest(...input).pipe(
       map((arr) => {
+        // The request of an aggregate RD should be pending if at least one
+        // of the RDs it's based on is still in the state RequestPending
         const requestPending: boolean = arr
           .map((d: RemoteData<T>) => d.isRequestPending)
-          .every((b: boolean) => b === true);
+          .find((b: boolean) => b === true);
 
-        const responsePending: boolean = arr
+        // The response of an aggregate RD should be pending if no requests
+        // are still pending and at least one of the RDs it's based
+        // on is still in the state ResponsePending
+        const responsePending: boolean = !requestPending && arr
           .map((d: RemoteData<T>) => d.isResponsePending)
-          .every((b: boolean) => b === true);
+          .find((b: boolean) => b === true);
 
-        const isSuccessful: boolean = arr
+        let isSuccessful: boolean;
+        // isSuccessful should be undefined until all responses have come in.
+        // We can't know its state beforehand. We also can't say it's false
+        // because that would imply a request failed.
+        if (!(requestPending || responsePending)) {
+          isSuccessful = arr
             .map((d: RemoteData<T>) => d.hasSucceeded)
             .every((b: boolean) => b === true);
+        }
 
         const errorMessage: string = arr
           .map((d: RemoteData<T>) => d.error)

src/app/navbar/navbar.component.ts

@@ -115,7 +115,7 @@ export class NavbarComponent extends MenuComponent implements OnInit {
         model: {
           type: MenuItemType.LINK,
           text: 'menu.section.statistics',
-          link: '#'
+          link: ''
         } as LinkMenuItemModel,
         index: 2
       },

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

@@ -8,6 +8,7 @@ import { RouterTestingModule } from '@angular/router/testing';
 import { Community } from '../../core/shared/community.model';
 import { TranslateModule } from '@ngx-translate/core';
 import { DSpaceObject } from '../../core/shared/dspace-object.model';
+import { SearchService } from '../../+search-page/search-service/search.service';
 
 describe('SearchFormComponent', () => {
   let comp: SearchFormComponent;
@@ -18,6 +19,12 @@ describe('SearchFormComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       imports: [FormsModule, RouterTestingModule, TranslateModule.forRoot()],
+      providers: [
+        {
+          provide: SearchService,
+          useValue: {}
+        }
+      ],
       declarations: [SearchFormComponent]
     }).compileComponents();
   }));

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

@@ -4,6 +4,7 @@ import { Router } from '@angular/router';
 import { hasValue, isNotEmpty } from '../empty.util';
 import { QueryParamsHandling } from '@angular/router/src/config';
 import { MYDSPACE_ROUTE } from '../../+my-dspace-page/my-dspace-page.component';
+import { SearchService } from '../../+search-page/search-service/search.service';
 
 /**
  * This component renders a simple item page.
@@ -26,6 +27,11 @@ export class SearchFormComponent {
    */
   @Input() query: string;
 
+  /**
+   * True when the search component should show results on the current page
+   */
+  @Input() inPlaceSearch;
+
   /**
    * The currently selected scope object's UUID
    */
@@ -39,7 +45,7 @@ export class SearchFormComponent {
    */
   @Input() scopes: DSpaceObject[];
 
-  constructor(private router: Router) {
+  constructor(private router: Router, private searchService: SearchService) {
   }
 
   /**
@@ -63,14 +69,9 @@ export class SearchFormComponent {
    * @param data Updated parameters
    */
   updateSearch(data: any) {
-    const newUrl = hasValue(this.currentUrl) ? this.currentUrl : '/search';
+    this.router.navigate(this.getSearchLinkParts(), {
-    let handling: QueryParamsHandling = '' ;
-    if (this.currentUrl === '/search' || this.currentUrl === MYDSPACE_ROUTE) {
-      handling = 'merge';
-    }
-    this.router.navigate([newUrl], {
       queryParams: Object.assign({}, { page: 1 }, data),
-      queryParamsHandling: handling
+      queryParamsHandling: 'merge'
     });
   }
 
@@ -81,4 +82,23 @@ export class SearchFormComponent {
     return isNotEmpty(object);
   }
 
+  /**
+   * @returns {string} The base path to the search page, or the current page when inPlaceSearch is true
+   */
+  public getSearchLink(): string {
+    if (this.inPlaceSearch) {
+      return './';
+    }
+    return this.searchService.getSearchLink();
+  }
+
+  /**
+   * @returns {string[]} The base path to the search page, or the current page when inPlaceSearch is true, split in separate pieces
+   */
+  public getSearchLinkParts(): string[] {
+    if (this.inPlaceSearch) {
+      return [];
+    }
+    return this.getSearchLink().split('/');
+  }
 }

src/app/shared/view-mode-switch/view-mode-switch.component.ts

@@ -17,6 +17,11 @@ import { isEmpty } from '../empty.util';
 export class ViewModeSwitchComponent implements OnInit, OnDestroy {
   @Input() viewModeList: ViewMode[];
 
+  /**
+   * True when the search component should show results on the current page
+   */
+  @Input() inPlaceSearch;
+
   currentMode: ViewMode = ViewMode.List;
   viewModeEnum = ViewMode;
   private sub: Subscription;
@@ -35,7 +40,7 @@ export class ViewModeSwitchComponent implements OnInit, OnDestroy {
   }
 
   switchViewTo(viewMode: ViewMode) {
-    this.searchService.setViewMode(viewMode);
+    this.searchService.setViewMode(viewMode, this.getSearchLinkParts());
   }
 
   ngOnDestroy() {
@@ -47,4 +52,25 @@ export class ViewModeSwitchComponent implements OnInit, OnDestroy {
   isToShow(viewMode: ViewMode) {
     return this.viewModeList && this.viewModeList.includes(viewMode);
   }
+
+  /**
+   * @returns {string} The base path to the search page, or the current page when inPlaceSearch is true
+   */
+  public getSearchLink(): string {
+    if (this.inPlaceSearch) {
+      return './';
+    }
+    return this.searchService.getSearchLink();
+  }
+
+  /**
+   * @returns {string[]} The base path to the search page, or the current page when inPlaceSearch is true, split in separate pieces
+   */
+  public getSearchLinkParts(): string[] {
+    if (this.searchService) {
+      return [];
+    }
+    return this.getSearchLink().split('/');
+  }
+
 }

src/app/thumbnail/thumbnail.component.html

@@ -1,4 +1,4 @@
 <div class="thumbnail">
-  <img *ngIf="thumbnail && thumbnail.content" [src]="thumbnail.content" (error)="errorHandler($event)" class="img-fluid"/>
+  <img [src]="src | dsSafeUrl" (error)="errorHandler($event)" class="img-fluid"/>
-  <img *ngIf="!thumbnail || !thumbnail.content" [src]="defaultImage | dsSafeUrl" class="img-fluid"/>
 </div>
+

src/app/thumbnail/thumbnail.component.ts

@@ -1,5 +1,6 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { Bitstream } from '../core/shared/bitstream.model';
+import { hasValue } from '../shared/empty.util';
 
 /**
  * This component renders a given Bitstream as a thumbnail.
@@ -12,19 +13,26 @@ import { Bitstream } from '../core/shared/bitstream.model';
   styleUrls: ['./thumbnail.component.scss'],
   templateUrl: './thumbnail.component.html'
 })
-export class ThumbnailComponent {
+export class ThumbnailComponent implements OnInit {
 
   @Input() thumbnail: Bitstream;
 
-  data: any = {};
-
   /**
    * The default 'holder.js' image
    */
   @Input() defaultImage? = 'data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2293%22%20height%3D%22120%22%20viewBox%3D%220%200%2093%20120%22%20preserveAspectRatio%3D%22none%22%3E%3C!--%0ASource%20URL%3A%20holder.js%2F93x120%3Ftext%3DNo%20Thumbnail%0ACreated%20with%20Holder.js%202.8.2.%0ALearn%20more%20at%20http%3A%2F%2Fholderjs.com%0A(c)%202012-2015%20Ivan%20Malopinsky%20-%20http%3A%2F%2Fimsky.co%0A--%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%3C!%5BCDATA%5B%23holder_1543e460b05%20text%20%7B%20fill%3A%23AAAAAA%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%5D%5D%3E%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1543e460b05%22%3E%3Crect%20width%3D%2293%22%20height%3D%22120%22%20fill%3D%22%23EEEEEE%22%2F%3E%3Cg%3E%3Ctext%20x%3D%2235.6171875%22%20y%3D%2257%22%3ENo%3C%2Ftext%3E%3Ctext%20x%3D%2210.8125%22%20y%3D%2272%22%3EThumbnail%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E';
 
+  src: string;
   errorHandler(event) {
     event.currentTarget.src = this.defaultImage;
   }
 
+  ngOnInit(): void {
+      if (hasValue(this.thumbnail) && this.thumbnail.content) {
+        this.src = this.thumbnail.content;
+      } else {
+        this.src = this.defaultImage
+      }
+  }
+
 }

webpack/run-webpack.js

@@ -0,0 +1,13 @@
+const path = require('path');
+const child_process = require('child_process');
+
+const heapSize = 4096;
+const webpackPath = path.join('node_modules', 'webpack', 'bin', 'webpack.js');
+
+const params = [
+  '--max_old_space_size=' + heapSize,
+  webpackPath,
+  ...process.argv.slice(2)
+];
+
+child_process.spawn('node', params, { stdio:'inherit' });