Defining back logic in parent

src/app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component.html

@@ -1,4 +1,4 @@
-<ds-themed-results-back-button *ngIf="showBackButton | async"></ds-themed-results-back-button>
+<ds-themed-results-back-button *ngIf="showBackButton | async" [back]="back"></ds-themed-results-back-button>
 <div class="d-flex flex-row">
   <ds-item-page-title-field [item]="object" class="mr-auto">
   </ds-item-page-title-field>

src/app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component.html

@@ -1,4 +1,4 @@
-<ds-themed-results-back-button *ngIf="showBackButton | async"></ds-themed-results-back-button>
+<ds-themed-results-back-button *ngIf="showBackButton | async" [back]="back"></ds-themed-results-back-button>
 <div class="d-flex flex-row">
   <ds-item-page-title-field [item]="object" class="mr-auto">
   </ds-item-page-title-field>

src/app/entity-groups/journal-entities/item-pages/journal/journal.component.html

@@ -1,4 +1,4 @@
-<ds-themed-results-back-button *ngIf="showBackButton | async"></ds-themed-results-back-button>
+<ds-themed-results-back-button *ngIf="showBackButton | async" [back]="back"></ds-themed-results-back-button>
 <div class="d-flex flex-row">
   <ds-item-page-title-field [item]="object" class="mr-auto">
   </ds-item-page-title-field>

src/app/entity-groups/research-entities/item-pages/org-unit/org-unit.component.html

@@ -1,4 +1,4 @@
-<ds-themed-results-back-button *ngIf="showBackButton | async"></ds-themed-results-back-button>
+<ds-themed-results-back-button *ngIf="showBackButton | async" [back]="back"></ds-themed-results-back-button>
 <div class="d-flex flex-row">
   <ds-item-page-title-field [item]="object" class="mr-auto">
   </ds-item-page-title-field>

src/app/entity-groups/research-entities/item-pages/person/person.component.html

@@ -1,4 +1,4 @@
-<ds-themed-results-back-button *ngIf="showBackButton | async"></ds-themed-results-back-button>
+<ds-themed-results-back-button *ngIf="showBackButton | async" [back]="back"></ds-themed-results-back-button>
 <div class="d-flex flex-row">
   <ds-item-page-title-field class="mr-auto" [item]="object">
   </ds-item-page-title-field>

src/app/entity-groups/research-entities/item-pages/project/project.component.html

@@ -1,4 +1,4 @@
-<ds-themed-results-back-button *ngIf="showBackButton | async"></ds-themed-results-back-button>
+<ds-themed-results-back-button *ngIf="showBackButton | async" [back]="back"></ds-themed-results-back-button>
 <div class="d-flex flex-row">
   <ds-item-page-title-field [item]="object" class="mr-auto">
   </ds-item-page-title-field>

src/app/item-page/simple/item-types/publication/publication.component.html

@@ -1,4 +1,4 @@
-<ds-themed-results-back-button *ngIf="showBackButton | async"></ds-themed-results-back-button>
+<ds-themed-results-back-button *ngIf="showBackButton | async" [back]="back"></ds-themed-results-back-button>
 <div class="row" *ngIf="iiifEnabled">
   <div class="col-12">
     <ds-mirador-viewer  id="iiif-viewer"

src/app/item-page/simple/item-types/shared/item.component.ts

@@ -6,6 +6,7 @@ import { RouteService } from '../../../../core/services/route.service';
 import { Observable } from 'rxjs';
 import { getDSpaceQuery, isIiifEnabled, isIiifSearchEnabled } from './item-iiif-utils';
 import { filter, map, take } from 'rxjs/operators';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'ds-item',
@@ -44,17 +45,33 @@ export class ItemComponent implements OnInit {
 
   mediaViewer;
 
-  constructor(protected routeService: RouteService) {
+  constructor(protected routeService: RouteService,
+              protected router: Router) {
     this.mediaViewer = environment.mediaViewer;
   }
+
+  /**
+   * The function used to return to list from the item.
+   */
+  back = () => {
+    this.routeService.getPreviousUrl().pipe(
+          take(1)
+        ).subscribe(
+          (url => {
+            this.router.navigateByUrl(url);
+          })
+        );
+  };
+
   ngOnInit(): void {
 
+    this.itemPageRoute = getItemPageRoute(this.object);
+    // hide/show the back button
     this.showBackButton = this.routeService.getPreviousUrl().pipe(
       filter(url => /^(\/search|\/browse|\/collections|\/admin\/search|\/mydspace)/.test(url)),
       take(1),
       map(() => true)
     );
-    this.itemPageRoute = getItemPageRoute(this.object);
     // check to see if iiif viewer is required.
     this.iiifEnabled = isIiifEnabled(this.object);
     this.iiifSearchEnabled = isIiifSearchEnabled(this.object);

src/app/item-page/simple/item-types/untyped-item/untyped-item.component.html

@@ -1,4 +1,4 @@
-<ds-themed-results-back-button *ngIf="showBackButton | async"></ds-themed-results-back-button>
+<ds-themed-results-back-button *ngIf="showBackButton | async" [back]="back"></ds-themed-results-back-button>
 <div class="row" *ngIf="iiifEnabled">
   <div class="col-12">
     <ds-mirador-viewer id="iiif-viewer"

src/app/item-page/simple/item-types/versioned-item/versioned-item.component.ts

@@ -37,7 +37,7 @@ export class VersionedItemComponent extends ItemComponent {
     private itemService: ItemDataService,
     protected routeService: RouteService,
   ) {
-    super(routeService);
+    super(routeService, router);
   }
 
   /**

src/app/shared/browse-by/browse-by.component.html

@@ -3,8 +3,7 @@
   <ng-container *ngComponentOutlet="getStartsWithComponent(); injector: objectInjector;"></ng-container>
   <div *ngIf="objects?.hasSucceeded && !objects?.isLoading && objects?.payload?.page.length > 0" @fadeIn>
       <div *ngIf="shouldDisplayResetButton$ |async" class="mb-2 reset">
-        <ds-results-back-button [paginationConfig]="paginationConfig"
-                                [previousPage$]="previousPage$"></ds-results-back-button>
+        <ds-themed-results-back-button [back]="back" [buttonType]="backButtonType"></ds-themed-results-back-button>
       </div>
     <ds-viewable-collection
       [config]="paginationConfig"
@@ -19,8 +18,7 @@
   <ds-error *ngIf="objects?.hasFailed" message="{{'error.browse-by' | translate}}"></ds-error>
   <div *ngIf="!objects?.isLoading && objects?.payload?.page.length === 0">
     <div *ngIf="shouldDisplayResetButton$ |async" class="d-inline-block mb-4 reset">
-      <ds-results-back-button [paginationConfig]="paginationConfig"
-                              [previousPage$]="previousPage$"></ds-results-back-button>
+      <ds-themed-results-back-button [back]="back" [buttonType]="backButtonType"></ds-themed-results-back-button>
     </div>
     <div class="alert alert-info w-100" role="alert">
       {{'browse.empty' | translate}}

src/app/shared/browse-by/browse-by.component.ts

@@ -129,6 +129,19 @@ export class BrowseByComponent implements OnInit, OnDestroy {
 
   }
 
+  /**
+   * Used to set the back button label for metadata browsing.
+   */
+  backButtonType = 'metadata-browse';
+
+  /**
+   * Used for back navigation in metadata browse.
+   */
+  back = () => {
+    const page = +this.previousPage$.value > 1 ? +this.previousPage$.value : 1;
+    this.paginationService.updateRoute(this.paginationConfig.id, {page: page}, {[this.paginationConfig.id + '.return']: null, value: null, startsWith: null});
+  };
+
   /**
    * Go to the previous page
    */

src/app/shared/results-back-button/results-back-button.component.spec.ts

@@ -2,12 +2,7 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { ResultsBackButtonComponent } from './results-back-button.component';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
-import { RouteService } from '../../core/services/route.service';
 import { RouterTestingModule } from '@angular/router/testing';
-import { BehaviorSubject, Observable, of } from 'rxjs';
-import { Router } from '@angular/router';
-import { PaginationComponentOptions } from '../pagination/pagination-component-options.model';
-import { PaginationService } from '../../core/pagination/pagination.service';
 import { PaginationServiceStub } from '../testing/pagination-service.stub';
 
 describe('ResultsBackButtonComponent', () => {
@@ -15,23 +10,7 @@ describe('ResultsBackButtonComponent', () => {
   let component: ResultsBackButtonComponent;
   let fixture: ComponentFixture<ResultsBackButtonComponent>;
   let router;
-  const paginationConfig = Object.assign(new PaginationComponentOptions(), {
-    id: 'test-pagination',
-    currentPage: 1,
-    pageSizeOptions: [5, 10, 15, 20],
-    pageSize: 15
-  });
 
-  const searchUrl = '/search?query=test&spc.page=2';
-  const nonSearchUrl = '/item';
-
-  function getMockRouteService(url) {
-    return {
-      getPreviousUrl(): Observable < string > {
-        return of(url);
-      }
-    };
-  }
 
   router = jasmine.createSpyObj('router', {
     navigateByUrl: jasmine.createSpy('navigateByUrl')
@@ -43,7 +22,6 @@ describe('ResultsBackButtonComponent', () => {
 
   describe('back to results', () => {
 
-    const mockRouteService = getMockRouteService(searchUrl);
 
     beforeEach(waitForAsync(() => {
       TestBed.configureTestingModule({
@@ -52,14 +30,10 @@ describe('ResultsBackButtonComponent', () => {
           RouterTestingModule.withRoutes([])
         ],
         providers: [
-          { provide: RouteService, useValue: mockRouteService },
-          { provide: PaginationService, useValue: paginationService},
-          { provide: Router, useValue: router },
           { provide: TranslateService, useValue: translate }
         ],
         schemas: [NO_ERRORS_SCHEMA]
       }).compileComponents();
-      spyOn(mockRouteService, 'getPreviousUrl').and.callThrough();
     }));
 
     describe('from a metadata browse list', () => {
@@ -67,8 +41,7 @@ describe('ResultsBackButtonComponent', () => {
       beforeEach(waitForAsync(() => {
         fixture = TestBed.createComponent(ResultsBackButtonComponent);
         component = fixture.componentInstance;
-        component.paginationConfig = paginationConfig;
-        component.previousPage$ = new BehaviorSubject<string>('1');
+        component.buttonType = 'metadata-browse';
         fixture.detectChanges();
       }));
 
@@ -76,8 +49,6 @@ describe('ResultsBackButtonComponent', () => {
         expect(translate.get).toHaveBeenCalledWith('browse.back.all-results');
       });
 
-
-
     });
 
     describe('from an item', () => {
@@ -92,11 +63,6 @@ describe('ResultsBackButtonComponent', () => {
         expect(translate.get).toHaveBeenCalledWith('search.browse.item-back');
       });
 
-      it('should navigate to previous url', () => {
-        component.back();
-        expect(mockRouteService.getPreviousUrl).toHaveBeenCalled();
-        expect(router.navigateByUrl).toHaveBeenCalledWith(searchUrl);
-      });
     });
 
   });

src/app/shared/results-back-button/results-back-button.component.ts

@@ -1,12 +1,6 @@
 import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
-import { take } from 'rxjs/operators';
-import { RouteService } from '../../core/services/route.service';
-import { Router } from '@angular/router';
-import { PaginationService } from '../../core/pagination/pagination.service';
-import { PaginationComponentOptions } from '../pagination/pagination-component-options.model';
-import { BehaviorSubject, Observable } from 'rxjs';
+import { Observable } from 'rxjs';
 import { TranslateService } from '@ngx-translate/core';
-import { isNotEmpty } from '../empty.util';
 
 @Component({
   selector: 'ds-results-back-button',
@@ -20,52 +14,31 @@ import { isNotEmpty } from '../empty.util';
 export class ResultsBackButtonComponent implements OnInit {
 
   /**
-   * Page number of the previous page
+   * The button type determines the button label.
    */
-  @Input() previousPage$?: BehaviorSubject<string>;
+  @Input() buttonType?: string;
 
   /**
-   * The pagination configuration used for the list
+   * The function used for back navigation.
    */
-  @Input() paginationConfig?: PaginationComponentOptions;
+  @Input() back: () => void;
 
   /**
-   * The button text
+   * The button label translation.
    */
   buttonLabel: Observable<string>;
 
-  constructor(protected routeService: RouteService,
-              protected paginationService: PaginationService,
-              protected router: Router,
-              private translateService: TranslateService) {
+  constructor(private translateService: TranslateService) {
 
   }
 
   ngOnInit(): void {
-    if (this.paginationConfig) {
+    // Set labels for metadata browse and item back buttons.
+    if (this.buttonType === 'metadata-browse') {
       this.buttonLabel = this.translateService.get('browse.back.all-results');
     } else {
       this.buttonLabel = this.translateService.get('search.browse.item-back');
     }
   }
 
-  /**
-   * Navigate back from the item to the previous pagination list.
-   */
-  public back() {
-    if (isNotEmpty(this.paginationConfig) && isNotEmpty(this.previousPage$)) {
-      // if pagination configuration is provided use it to update the route to the previous browse page.
-      const page = +this.previousPage$.value > 1 ? +this.previousPage$.value : 1;
-      this.paginationService.updateRoute(this.paginationConfig.id, {page: page}, {[this.paginationConfig.id + '.return']: null, value: null, startsWith: null});
-    } else {
-      this.routeService.getPreviousUrl().pipe(
-        take(1)
-      ).subscribe(
-        (url => {
-          this.router.navigateByUrl(url);
-        })
-      );
-    }
-  }
-
 }

src/app/shared/results-back-button/themed-results-back-button.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { ThemedComponent } from '../theme-support/themed.component';
 import { ResultsBackButtonComponent } from './results-back-button.component';
 
@@ -9,6 +9,12 @@ import { ResultsBackButtonComponent } from './results-back-button.component';
 })
 export class ThemedResultsBackButtonComponent extends ThemedComponent<ResultsBackButtonComponent> {
 
+  @Input() buttonType?: string;
+
+  @Input() back: () => void;
+
+  protected inAndOutputNames: (keyof ResultsBackButtonComponent & keyof this)[] = ['back', 'buttonType'];
+
   protected getComponentName(): string {
     return 'ResultsBackButtonComponent';
   }