Apply shared button component to browse-by.

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

@@ -1,6 +1,6 @@
 <div class="row" *ngIf="showBackButton | async">
   <div class="col-12">
-    <ds-themed-item-back-button></ds-themed-item-back-button>
+    <ds-themed-results-back-button></ds-themed-results-back-button>
   </div>
 </div>
 

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

@@ -1,6 +1,6 @@
 <div class="row" *ngIf="showBackButton | async">
   <div class="col-12">
-    <ds-themed-item-back-button></ds-themed-item-back-button>
+    <ds-themed-results-back-button></ds-themed-results-back-button>
   </div>
 </div>
 

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

@@ -1,6 +1,6 @@
 <div class="row" *ngIf="showBackButton | async">
   <div class="col-12">
-    <ds-themed-item-back-button></ds-themed-item-back-button>
+    <ds-themed-results-back-button></ds-themed-results-back-button>
   </div>
 </div>
 

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

@@ -1,6 +1,6 @@
 <div class="row" *ngIf="showBackButton | async">
   <div class="col-12">
-    <ds-themed-item-back-button></ds-themed-item-back-button>
+    <ds-themed-results-back-button></ds-themed-results-back-button>
   </div>
 </div>
 

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

@@ -1,6 +1,6 @@
 <div class="row" *ngIf="showBackButton | async">
   <div class="col-12">
-    <ds-themed-item-back-button></ds-themed-item-back-button>
+    <ds-themed-results-back-button></ds-themed-results-back-button>
   </div>
 </div>
 

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

@@ -1,6 +1,6 @@
 <div class="row" *ngIf="showBackButton | async">
   <div class="col-12">
-    <ds-themed-item-back-button></ds-themed-item-back-button>
+    <ds-themed-results-back-button></ds-themed-results-back-button>
   </div>
 </div>
 

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

@@ -1,6 +1,6 @@
 <div class="row" *ngIf="showBackButton | async">
   <div class="col-12">
-    <ds-themed-item-back-button></ds-themed-item-back-button>
+    <ds-themed-results-back-button></ds-themed-results-back-button>
   </div>
 </div>
 

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

@@ -1,6 +1,6 @@
 <div class="row" *ngIf="showBackButton | async">
   <div class="col-12">
-    <ds-themed-item-back-button></ds-themed-item-back-button>
+    <ds-themed-results-back-button></ds-themed-results-back-button>
   </div>
 </div>
 

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

@@ -3,7 +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">
-          <button class="btn btn-secondary" (click)="back()"><i class="fas fa-arrow-left"></i> {{'browse.back.all-results' | translate}}</button>
+        <ds-results-back-button [paginationConfig]="paginationConfig" [previousPage$]="previousPage$"></ds-results-back-button>
       </div>
     <ds-viewable-collection
       [config]="paginationConfig"
@@ -18,7 +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">
-      <button class="btn btn-secondary" (click)="back()"><i class="fas fa-arrow-left"></i> {{'browse.back.all-results' | translate}}</button>
+      <ds-results-back-button [paginationConfig]="paginationConfig" [previousPage$]="previousPage$" ></ds-results-back-button>
     </div>
     <div class="alert alert-info w-100" role="alert">
       {{'browse.empty' | translate}}

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

@@ -1,48 +0,0 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { ItemBackButtonComponent } from './item-back-button.component';
-import { TranslateModule } 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 { Observable, of } from 'rxjs';
-import { Router } from '@angular/router';
-
-describe('ItemBackButtonComponent', () => {
-  let component: ItemBackButtonComponent;
-  let fixture: ComponentFixture<ItemBackButtonComponent>;
-  let router;
-  const searchUrl = '/search?query=test&spc.page=2';
-
-  const mockRouteService = {
-    getPreviousUrl(): Observable<string> {
-      return of(searchUrl);
-    }
-  };
-
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [ItemBackButtonComponent],
-      imports: [TranslateModule.forRoot(),
-        RouterTestingModule],
-      providers: [
-      { provide: RouteService, useValue: {} },
-    ],
-      schemas: [NO_ERRORS_SCHEMA]
-    }).compileComponents();
-
-
-  beforeEach(waitForAsync(() => {
-    router = TestBed.inject(Router);
-    spyOn(router, 'navigateByUrl');
-    spyOn(mockRouteService, 'getPreviousUrl');
-    fixture = TestBed.createComponent(ItemBackButtonComponent);
-    component = fixture.componentInstance;
-  }));
-
-  describe('back button click', () => {
-    component.back();
-    expect(mockRouteService.getPreviousUrl).toHaveBeenCalled();
-    expect(router.navigateByUrl).toHaveBeenCalledWith(searchUrl);
-  });
-  }));
-});

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

@@ -1,32 +0,0 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { take } from 'rxjs/operators';
-import { RouteService } from '../../core/services/route.service';
-import { Router } from '@angular/router';
-
-@Component({
-  selector: 'ds-item-back-button',
-  styleUrls: ['./item-back-button.component.scss'],
-  templateUrl: './item-back-button.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-/**
- * Component to add back to result list button to item.
- */
-export class ItemBackButtonComponent {
-
-  constructor(protected routeService: RouteService,
-              protected router: Router) {
-  }
-
-  /**
-   * Navigate back from the item to the previous pagination url.
-   */
-  public back() {
-    this.routeService.getPreviousUrl().pipe(
-      take(1)
-    ).subscribe(
-      (url => this.router.navigateByUrl(url))
-    );
-  }
-
-}

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

@@ -1,23 +0,0 @@
-import { Component } from '@angular/core';
-import { ThemedComponent } from '../theme-support/themed.component';
-import { ItemBackButtonComponent } from './item-back-button.component';
-
-@Component({
-  selector: 'ds-themed-item-back-button',
-  styleUrls: [],
-  templateUrl: '../theme-support/themed.component.html',
-})
-export class ThemedItemBackButtonComponent extends ThemedComponent<ItemBackButtonComponent> {
-  protected getComponentName(): string {
-    return 'ItemBackButtonComponent';
-  }
-
-  protected importThemedComponent(themeName: string): Promise<any> {
-    return import(`../../../themes/${themeName}/app/shared/item-back-button/item-back-button.component`);
-  }
-
-  protected importUnthemedComponent(): Promise<any> {
-    return import(`./item-back-button.component`);
-  }
-
-}

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

@@ -1,4 +1,4 @@
 <button class="btn btn-secondary btn-sm back-btn ng-tns-c242-28" (click)="back()">
   <i _ngcontent-dspace-angular-c242="" class="fas fa-arrow-left ng-tns-c242-3"></i>
-  {{"search-browse-item-return" | translate}}
+  {{this.buttonLabel | async}}
 </button>

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

@@ -0,0 +1,103 @@
+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', () => {
+
+  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 mockRouteService = {
+    getPreviousUrl(): Observable<string> {
+      return of(searchUrl);
+    }
+  };
+
+  router = jasmine.createSpyObj('router', {
+    navigateByUrl: jasmine.createSpy('navigateByUrl')
+  });
+
+  const translate = jasmine.createSpyObj('TranslateService', ['get']);
+
+  const paginationService = new PaginationServiceStub();
+
+  describe('back to results', () => {
+
+    beforeEach(waitForAsync(() => {
+      TestBed.configureTestingModule({
+        declarations: [ResultsBackButtonComponent],
+        imports: [TranslateModule.forRoot(),
+          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', () => {
+
+      beforeEach(waitForAsync(() => {
+        fixture = TestBed.createComponent(ResultsBackButtonComponent);
+        component = fixture.componentInstance;
+        component.paginationConfig = paginationConfig;
+        component.previousPage$ = new BehaviorSubject<string>('1');
+        fixture.detectChanges();
+      }));
+
+      it('should have back from browse label', () => {
+        expect(translate.get).toHaveBeenCalledWith('browse.back.all-results');
+      });
+
+      it('should navigate to previous pagination', () => {
+        component.back();
+        expect(mockRouteService.getPreviousUrl).not.toHaveBeenCalled();
+        expect(paginationService.updateRoute).toHaveBeenCalled();
+      });
+
+    });
+
+    describe('from an item', () => {
+
+      beforeEach(waitForAsync(() => {
+        fixture = TestBed.createComponent(ResultsBackButtonComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+      }));
+
+      it('should have item label', () => {
+        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

@@ -0,0 +1,70 @@
+import { ChangeDetectionStrategy, Component, Input } 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 { TranslateService } from '@ngx-translate/core';
+import { isNotEmpty } from '../empty.util';
+
+@Component({
+  selector: 'ds-results-back-button',
+  styleUrls: ['./results-back-button.component.scss'],
+  templateUrl: './results-back-button.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+/**
+ * Component to add back to result list button to item.
+ */
+export class ResultsBackButtonComponent {
+
+  /**
+   * Page number of the previous page
+   */
+  @Input() previousPage$?: BehaviorSubject<string>;
+
+  /**
+   * The pagination configuration used for the list
+   */
+  @Input() paginationConfig?: PaginationComponentOptions;
+
+  /**
+   * The button text
+   */
+  buttonLabel: Observable<string>;
+
+  constructor(protected routeService: RouteService,
+              protected paginationService: PaginationService,
+              protected router: Router,
+              private translateService: TranslateService) {
+
+  }
+
+  ngOnInit(): void {
+    if (this.paginationConfig) {
+      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

@@ -0,0 +1,23 @@
+import { Component } from '@angular/core';
+import { ThemedComponent } from '../theme-support/themed.component';
+import { ResultsBackButtonComponent } from './results-back-button.component';
+
+@Component({
+  selector: 'ds-themed-results-back-button',
+  styleUrls: [],
+  templateUrl: '../theme-support/themed.component.html',
+})
+export class ThemedResultsBackButtonComponent extends ThemedComponent<ResultsBackButtonComponent> {
+  protected getComponentName(): string {
+    return 'ResultsBackButtonComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../../themes/${themeName}/app/shared/results-back-button/results-back-button.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./results-back-button.component`);
+  }
+
+}

src/app/shared/shared.module.ts

@@ -315,9 +315,9 @@ import { MenuModule } from './menu/menu.module';
 import {
   ListableNotificationObjectComponent
 } from './object-list/listable-notification-object/listable-notification-object.component';
-import { ThemedItemBackButtonComponent } from './item-back-button/themed-item-back-button.component';
+import { ThemedResultsBackButtonComponent } from './results-back-button/themed-results-back-button.component';
 import { ThemedCollectionDropdownComponent } from './collection-dropdown/themed-collection-dropdown.component';
-import { ItemBackButtonComponent } from './item-back-button/item-back-button.component';
+import { ResultsBackButtonComponent } from './results-back-button/results-back-button.component';
 
 
 const MODULES = [
@@ -398,8 +398,8 @@ const COMPONENTS = [
   ItemSubmitterComponent,
   ItemDetailPreviewComponent,
   ItemDetailPreviewFieldComponent,
-  ItemBackButtonComponent,
-  ThemedItemBackButtonComponent,
+  ResultsBackButtonComponent,
+  ThemedResultsBackButtonComponent,
   ClaimedTaskActionsComponent,
   ClaimedTaskActionsLoaderComponent,
   ItemActionsComponent,

src/assets/i18n/en.json5

@@ -780,7 +780,7 @@
   "browse.title.page": "Browsing {{ collection }} by {{ field }} {{ value }}",
 
 
-  "search-browse-item-return": "Back to Results",
+  "search.browse.item-back": "Back to Results",
 
 
   "chips.remove": "Remove chip",

src/themes/custom/app/shared/item-back-button/item-back-button.component.ts

@@ -1,13 +0,0 @@
-import {
-  ItemBackButtonComponent as BaseComponent
-} from '../../../../../app/shared/item-back-button/item-back-button.component';
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'ds-item-back-button',
-  // styleUrls: ['./item-back-button.component.scss'],
-  styleUrls: ['../../../../../app/shared/item-back-button/item-back-button.component.scss'],
-  //templateUrl: './item-back-button.component.html',
-  templateUrl: '../../../../../app/shared/item-back-button/item-back-button.component.html'
-})
-export class ItemBackButtonComponent extends BaseComponent {}

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

@@ -0,0 +1,13 @@
+import {
+  ResultsBackButtonComponent as BaseComponent
+} from '../../../../../app/shared/results-back-button/results-back-button.component';
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ds-results-back-button',
+  // styleUrls: ['./results-back-button.component.scss'],
+  styleUrls: ['../../../../../app/shared/results-back-button/results-back-button.component.scss'],
+  //templateUrl: './results-back-button.component.html',
+  templateUrl: '../../../../../app/shared/results-back-button/results-back-button.component.html'
+})
+export class ResultsBackButtonComponent extends BaseComponent {}

src/themes/custom/eager-theme.module.ts

@@ -43,7 +43,7 @@ import {
 
 import { CommunityListElementComponent } from './app/shared/object-list/community-list-element/community-list-element.component';
 import { CollectionListElementComponent} from './app/shared/object-list/collection-list-element/collection-list-element.component';
-import { ItemBackButtonComponent } from './app/shared/item-back-button/item-back-button.component';
+import { ResultsBackButtonComponent } from './app/shared/results-back-button/results-back-button.component';
 import { CollectionDropdownComponent } from './app/shared/collection-dropdown/collection-dropdown.component';
 
 
@@ -77,7 +77,7 @@ const DECLARATIONS = [
   EditCollectionSelectorComponent,
   EditCommunitySelectorComponent,
   EditItemSelectorComponent,
-  ItemBackButtonComponent
+  ResultsBackButtonComponent
 ];
 
 @NgModule({
@@ -93,8 +93,11 @@ const DECLARATIONS = [
     ],
     declarations: DECLARATIONS,
     providers: [
-    ...ENTRY_COMPONENTS.map((component) => ({ provide: component }))
+        ...ENTRY_COMPONENTS.map((component) => ({provide: component}))
     ],
+    exports: [
+        ResultsBackButtonComponent
+    ]
 })
 /**
  * This module is included in the main bundle that gets downloaded at first page load. So it should