Convert to themed, shared component

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

@@ -1,8 +1,6 @@
-<div class="row" *ngIf="showBackButton | async" (click)="back()">
+<div class="row" *ngIf="showBackButton | async">
   <div class="col-12">
-    <button class="btn btn-secondary back-btn ng-tns-c242-28" >
+    <ds-themed-item-back-button></ds-themed-item-back-button>
-      <i _ngcontent-dspace-angular-c242="" class="fas fa-arrow-left ng-tns-c242-3"></i>
-      {{"search-browse-item-return" | translate}}</button>
   </div>
 </div>
 

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

@@ -1,8 +1,6 @@
-<div class="row" *ngIf="showBackButton | async" (click)="back()">
+<div class="row" *ngIf="showBackButton | async">
   <div class="col-12">
-    <button class="btn btn-secondary back-btn ng-tns-c242-28" >
+    <ds-themed-item-back-button></ds-themed-item-back-button>
-      <i _ngcontent-dspace-angular-c242="" class="fas fa-arrow-left ng-tns-c242-3"></i>
-      {{"search-browse-item-return" | translate}}</button>
   </div>
 </div>
 

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

@@ -1,8 +1,6 @@
-<div class="row" *ngIf="showBackButton | async" (click)="back()">
+<div class="row" *ngIf="showBackButton | async">
   <div class="col-12">
-    <button class="btn btn-secondary back-btn ng-tns-c242-28" >
+    <ds-themed-item-back-button></ds-themed-item-back-button>
-      <i _ngcontent-dspace-angular-c242="" class="fas fa-arrow-left ng-tns-c242-3"></i>
-      {{"search-browse-item-return" | translate}}</button>
   </div>
 </div>
 

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

@@ -1,8 +1,6 @@
-<div class="row" *ngIf="showBackButton | async" (click)="back()">
+<div class="row" *ngIf="showBackButton | async">
   <div class="col-12">
-    <button class="btn btn-secondary back-btn ng-tns-c242-28" >
+    <ds-themed-item-back-button></ds-themed-item-back-button>
-      <i _ngcontent-dspace-angular-c242="" class="fas fa-arrow-left ng-tns-c242-3"></i>
-      {{"search-browse-item-return" | translate}}</button>
   </div>
 </div>
 

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

@@ -1,8 +1,6 @@
-<div class="row" *ngIf="showBackButton | async" (click)="back()">
+<div class="row" *ngIf="showBackButton | async">
   <div class="col-12">
-    <button class="btn btn-secondary back-btn ng-tns-c242-28" >
+    <ds-themed-item-back-button></ds-themed-item-back-button>
-      <i _ngcontent-dspace-angular-c242="" class="fas fa-arrow-left ng-tns-c242-3"></i>
-      {{"search-browse-item-return" | translate}}</button>
   </div>
 </div>
 

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

@@ -1,8 +1,6 @@
-<div class="row" *ngIf="showBackButton | async" (click)="back()">
+<div class="row" *ngIf="showBackButton | async">
   <div class="col-12">
-    <button class="btn btn-secondary back-btn ng-tns-c242-28" >
+    <ds-themed-item-back-button></ds-themed-item-back-button>
-      <i _ngcontent-dspace-angular-c242="" class="fas fa-arrow-left ng-tns-c242-3"></i>
-      {{"search-browse-item-return" | translate}}</button>
   </div>
 </div>
 

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

@@ -1,8 +1,6 @@
-<div class="row" *ngIf="showBackButton | async" (click)="back()">
+<div class="row" *ngIf="showBackButton | async">
   <div class="col-12">
-    <button class="btn btn-secondary back-btn ng-tns-c242-28" >
+    <ds-themed-item-back-button></ds-themed-item-back-button>
-      <i _ngcontent-dspace-angular-c242="" class="fas fa-arrow-left ng-tns-c242-3"></i>
-      {{"search-browse-item-return" | translate}}</button>
   </div>
 </div>
 

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

@@ -478,24 +478,6 @@ describe('ItemComponent', () => {
         expect(val).toBeTrue();
       });
     });
-    it('should navigate back to the search list', () => {
-      spyOn(mockRouteService, 'getPreviousUrl').and.returnValue(observableOf(searchUrl));
-      comp.back();
-      expect(mockRouteService.getPreviousUrl).toHaveBeenCalled();
-      expect(router.navigateByUrl).toHaveBeenCalledWith(searchUrl);
-    });
-    it('should navigate back to the browse list', () => {
-      spyOn(mockRouteService, 'getPreviousUrl').and.returnValue(observableOf(browseUrl));
-      comp.back();
-      expect(mockRouteService.getPreviousUrl).toHaveBeenCalled();
-      expect(router.navigateByUrl).toHaveBeenCalledWith(browseUrl);
-    });
-    it('should navigate back to the recent submissions list', () => {
-      spyOn(mockRouteService, 'getPreviousUrl').and.returnValue(observableOf(recentSubmissionsUrl));
-      comp.back();
-      expect(mockRouteService.getPreviousUrl).toHaveBeenCalled();
-      expect(router.navigateByUrl).toHaveBeenCalledWith(recentSubmissionsUrl);
-    });
   });
 
 });

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

@@ -6,7 +6,6 @@ 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',
@@ -45,22 +44,9 @@ export class ItemComponent implements OnInit {
 
   mediaViewer;
 
-  constructor(protected routeService: RouteService,
+  constructor(protected routeService: RouteService) {
-              protected router: Router) {
     this.mediaViewer = environment.mediaViewer;
   }
-
-  /**
-   * Navigate back from the item to the previous pagination url.
-   */
-  public back() {
-    this.routeService.getPreviousUrl().pipe(
-      take(1)
-    ).subscribe(
-      (url => this.router.navigateByUrl(url))
-    );
-  }
-
   ngOnInit(): void {
     this.itemPageRoute = getItemPageRoute(this.object);
     // check to see if iiif viewer is required.

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

@@ -1,8 +1,6 @@
-<div class="row" *ngIf="showBackButton | async" (click)="back()">
+<div class="row" *ngIf="showBackButton | async">
   <div class="col-12">
-    <button class="btn btn-secondary back-btn ng-tns-c242-28" >
+    <ds-themed-item-back-button></ds-themed-item-back-button>
-      <i _ngcontent-dspace-angular-c242="" class="fas fa-arrow-left ng-tns-c242-3"></i>
-      {{"search-browse-item-return" | translate}}</button>
   </div>
 </div>
 

src/app/item-page/simple/item-types/untyped-item/untyped-item.component.spec.ts

@@ -196,11 +196,6 @@ describe('UntypedItemComponent', () => {
     it('should retrieve the query term for previous route', (): void => {
       expect(comp.iiifQuery$.subscribe(result => expect(result).toEqual('test query')));
     });
-    it('should navigate back to the browse list', () => {
-      comp.back();
-      expect(localMockRouteService.getPreviousUrl).toHaveBeenCalled();
-      //expect(routerSpy.navigateByUrl).toHaveBeenCalledWith(url);
-    });
   });
 
   describe('with IIIF viewer and search but no previous search query', () => {

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, router);
+    super(routeService);
   }
 
   /**

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

@@ -0,0 +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}}
+</button>

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

@@ -0,0 +1,4 @@
+
+button.back-btn {
+  margin-bottom: 10px;
+}

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

@@ -0,0 +1,48 @@
+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

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1,23 @@
+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/shared.module.ts

@@ -326,6 +326,8 @@ import { GoogleRecaptchaModule } from '../core/google-recaptcha/google-recaptcha
 import {
   ListableNotificationObjectComponent
 } from './object-list/listable-notification-object/listable-notification-object.component';
+import { ItemBackButtonComponent } from './item-back-button/item-back-button.component';
+import { ThemedItemBackButtonComponent } from './item-back-button/themed-item-back-button.component';
 
 const MODULES = [
   CommonModule,
@@ -410,6 +412,8 @@ const COMPONENTS = [
   ItemSubmitterComponent,
   ItemDetailPreviewComponent,
   ItemDetailPreviewFieldComponent,
+  ItemBackButtonComponent,
+  ThemedItemBackButtonComponent,
   ClaimedTaskActionsComponent,
   ClaimedTaskActionsApproveComponent,
   ClaimedTaskActionsRejectComponent,

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

@@ -0,0 +1,13 @@
+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/eager-theme.module.ts

@@ -43,6 +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';
 
 
 /**
@@ -74,6 +75,7 @@ const DECLARATIONS = [
   EditCollectionSelectorComponent,
   EditCommunitySelectorComponent,
   EditItemSelectorComponent,
+  ItemBackButtonComponent
 ];
 
 @NgModule({