added search link fixes

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

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, OnDestroy, OnInit } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { Observable, Subscription } from 'rxjs';
-import { filter, flatMap, map, take } from 'rxjs/operators';
+import { filter, flatMap, map, switchMap, take } 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,7 +15,11 @@ 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';
@@ -31,22 +35,19 @@ 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 collectionId: string;
-  private currentPage: number;
-  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 +58,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 +67,26 @@ export class CollectionPageComponent implements OnInit, OnDestroy {
       filter((collection: Collection) => hasValue(collection)),
       flatMap((collection: Collection) => collection.logo)
     );
-    this.subs.push(
+    this.route.queryParams.pipe(take(1)).subscribe((params) => {
-      this.route.queryParams.subscribe((params) => {
+      this.metadata.processRemoteData(this.collectionRD$);
-        this.metadata.processRemoteData(this.collectionRD$);
+      this.onPaginationChange(params)
-        const page = +params.page || this.paginationConfig.currentPage;
+    })
-        const pageSize = +params.pageSize || this.paginationConfig.pageSize;
-
-        this.collectionRD$.subscribe((rd: RemoteData<Collection>) => {
-          this.collectionId = rd.payload.id;
-          this.updatePage(page, pageSize);
-        });
-      })
-    );
   }
 
-  updatePage(currentPage: number, pageSize: number) {
+  updatePage() {
-    this.itemRD$ = this.searchService.search(
+    this.itemRD$ = 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(
-    this.currentPage = currentPage;
+          new PaginatedSearchOptions({
-    this.pageSize = pageSize;
+            scope: id,
-  }
+            pagination: this.paginationConfig,
-
+            sort: this.sortConfig,
-  ngOnDestroy(): void {
+            dsoType: DSpaceObjectType.ITEM
-    this.subs.filter((sub) => hasValue(sub)).forEach((sub) => sub.unsubscribe());
+          })).pipe(toDSpaceObjectListRD()) as Observable<RemoteData<PaginatedList<Item>>>;
+      })
+    )
   }
 
   isNotEmpty(object: any) {
@@ -108,8 +94,10 @@ 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.updatePage();
   }
 }

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/+my-dspace-page/my-dspace-page.component.html

@@ -12,9 +12,10 @@
                           [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 +25,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.ts

@@ -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) {
   }
 
@@ -167,12 +168,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,7 +222,7 @@ 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]: [
                   ...selectedValues.map((facet) => this.getFacetValue(facet)),

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

@@ -25,6 +25,7 @@ import { Params } from '@angular/router';
 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

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.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);
       })
   }
 

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,28 @@ 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/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,10 @@ export class SearchFormComponent {
    * @param data Updated parameters
    */
   updateSearch(data: any) {
-    const newUrl = hasValue(this.currentUrl) ? this.currentUrl : '/search';
+
-    let handling: QueryParamsHandling = '' ;
+    this.router.navigate(this.getSearchLinkParts(), {
-    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 +83,24 @@ 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('/');
+  }
+
 }