From d029e804953e1a2b1636dbf3dcc431de302b34b3 Mon Sep 17 00:00:00 2001 From: Michael Spalti Date: Mon, 19 Dec 2022 12:32:53 -0800 Subject: [PATCH] Convert to themed, shared component --- .../journal-issue.component.html | 6 +-- .../journal-volume.component.html | 6 +-- .../item-pages/journal/journal.component.html | 6 +-- .../org-unit/org-unit.component.html | 6 +-- .../item-pages/person/person.component.html | 6 +-- .../item-pages/project/project.component.html | 6 +-- .../publication/publication.component.html | 6 +-- .../item-types/shared/item.component.spec.ts | 18 ------- .../item-types/shared/item.component.ts | 16 +------ .../untyped-item/untyped-item.component.html | 6 +-- .../untyped-item.component.spec.ts | 5 -- .../versioned-item.component.ts | 2 +- .../item-back-button.component.html | 4 ++ .../item-back-button.component.scss | 4 ++ .../item-back-button.component.spec.ts | 48 +++++++++++++++++++ .../item-back-button.component.ts | 32 +++++++++++++ .../themed-item-back-button.component.ts | 23 +++++++++ src/app/shared/shared.module.ts | 4 ++ .../item-back-button.component.html | 0 .../item-back-button.component.scss | 0 .../item-back-button.component.ts | 13 +++++ src/themes/custom/eager-theme.module.ts | 2 + 22 files changed, 148 insertions(+), 71 deletions(-) create mode 100644 src/app/shared/item-back-button/item-back-button.component.html create mode 100644 src/app/shared/item-back-button/item-back-button.component.scss create mode 100644 src/app/shared/item-back-button/item-back-button.component.spec.ts create mode 100644 src/app/shared/item-back-button/item-back-button.component.ts create mode 100644 src/app/shared/item-back-button/themed-item-back-button.component.ts create mode 100644 src/themes/custom/app/shared/item-back-button/item-back-button.component.html create mode 100644 src/themes/custom/app/shared/item-back-button/item-back-button.component.scss create mode 100644 src/themes/custom/app/shared/item-back-button/item-back-button.component.ts diff --git a/src/app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component.html b/src/app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component.html index 22002d4af6..0507153ab7 100644 --- a/src/app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component.html +++ b/src/app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component.html @@ -1,8 +1,6 @@ -
+
- +
diff --git a/src/app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component.html b/src/app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component.html index 23b600691c..6265b515a8 100644 --- a/src/app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component.html +++ b/src/app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component.html @@ -1,8 +1,6 @@ -
+
- +
diff --git a/src/app/entity-groups/journal-entities/item-pages/journal/journal.component.html b/src/app/entity-groups/journal-entities/item-pages/journal/journal.component.html index f52990f539..ddd4b53a30 100644 --- a/src/app/entity-groups/journal-entities/item-pages/journal/journal.component.html +++ b/src/app/entity-groups/journal-entities/item-pages/journal/journal.component.html @@ -1,8 +1,6 @@ -
+
- +
diff --git a/src/app/entity-groups/research-entities/item-pages/org-unit/org-unit.component.html b/src/app/entity-groups/research-entities/item-pages/org-unit/org-unit.component.html index bd75e0bcde..89a3417d62 100644 --- a/src/app/entity-groups/research-entities/item-pages/org-unit/org-unit.component.html +++ b/src/app/entity-groups/research-entities/item-pages/org-unit/org-unit.component.html @@ -1,8 +1,6 @@ -
+
- +
diff --git a/src/app/entity-groups/research-entities/item-pages/person/person.component.html b/src/app/entity-groups/research-entities/item-pages/person/person.component.html index a1486fde0e..f805b6568c 100644 --- a/src/app/entity-groups/research-entities/item-pages/person/person.component.html +++ b/src/app/entity-groups/research-entities/item-pages/person/person.component.html @@ -1,8 +1,6 @@ -
+
- +
diff --git a/src/app/entity-groups/research-entities/item-pages/project/project.component.html b/src/app/entity-groups/research-entities/item-pages/project/project.component.html index 991cbf864d..6ccfdbf5e0 100644 --- a/src/app/entity-groups/research-entities/item-pages/project/project.component.html +++ b/src/app/entity-groups/research-entities/item-pages/project/project.component.html @@ -1,8 +1,6 @@ -
+
- +
diff --git a/src/app/item-page/simple/item-types/publication/publication.component.html b/src/app/item-page/simple/item-types/publication/publication.component.html index 9c02fc8fd8..2741d90500 100644 --- a/src/app/item-page/simple/item-types/publication/publication.component.html +++ b/src/app/item-page/simple/item-types/publication/publication.component.html @@ -1,8 +1,6 @@ -
+
- +
diff --git a/src/app/item-page/simple/item-types/shared/item.component.spec.ts b/src/app/item-page/simple/item-types/shared/item.component.spec.ts index 914483bbfd..7544a857b3 100644 --- a/src/app/item-page/simple/item-types/shared/item.component.spec.ts +++ b/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); - }); }); }); diff --git a/src/app/item-page/simple/item-types/shared/item.component.ts b/src/app/item-page/simple/item-types/shared/item.component.ts index b5037924f3..297886dfaa 100644 --- a/src/app/item-page/simple/item-types/shared/item.component.ts +++ b/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, - protected router: Router) { + constructor(protected routeService: RouteService) { 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. diff --git a/src/app/item-page/simple/item-types/untyped-item/untyped-item.component.html b/src/app/item-page/simple/item-types/untyped-item/untyped-item.component.html index ebc4aaa38a..b6c54138ce 100644 --- a/src/app/item-page/simple/item-types/untyped-item/untyped-item.component.html +++ b/src/app/item-page/simple/item-types/untyped-item/untyped-item.component.html @@ -1,8 +1,6 @@ -
+
- +
diff --git a/src/app/item-page/simple/item-types/untyped-item/untyped-item.component.spec.ts b/src/app/item-page/simple/item-types/untyped-item/untyped-item.component.spec.ts index 135810d543..85d6d4728e 100644 --- a/src/app/item-page/simple/item-types/untyped-item/untyped-item.component.spec.ts +++ b/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', () => { diff --git a/src/app/item-page/simple/item-types/versioned-item/versioned-item.component.ts b/src/app/item-page/simple/item-types/versioned-item/versioned-item.component.ts index 2dbbd494d6..0308a85ade 100644 --- a/src/app/item-page/simple/item-types/versioned-item/versioned-item.component.ts +++ b/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); } /** diff --git a/src/app/shared/item-back-button/item-back-button.component.html b/src/app/shared/item-back-button/item-back-button.component.html new file mode 100644 index 0000000000..acd49bda3a --- /dev/null +++ b/src/app/shared/item-back-button/item-back-button.component.html @@ -0,0 +1,4 @@ + diff --git a/src/app/shared/item-back-button/item-back-button.component.scss b/src/app/shared/item-back-button/item-back-button.component.scss new file mode 100644 index 0000000000..57d3445d89 --- /dev/null +++ b/src/app/shared/item-back-button/item-back-button.component.scss @@ -0,0 +1,4 @@ + +button.back-btn { + margin-bottom: 10px; +} diff --git a/src/app/shared/item-back-button/item-back-button.component.spec.ts b/src/app/shared/item-back-button/item-back-button.component.spec.ts new file mode 100644 index 0000000000..5d1b2c96f3 --- /dev/null +++ b/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; + let router; + const searchUrl = '/search?query=test&spc.page=2'; + + const mockRouteService = { + getPreviousUrl(): Observable { + 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); + }); + })); +}); diff --git a/src/app/shared/item-back-button/item-back-button.component.ts b/src/app/shared/item-back-button/item-back-button.component.ts new file mode 100644 index 0000000000..6e0d96520d --- /dev/null +++ b/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)) + ); + } + +} diff --git a/src/app/shared/item-back-button/themed-item-back-button.component.ts b/src/app/shared/item-back-button/themed-item-back-button.component.ts new file mode 100644 index 0000000000..f24556ad22 --- /dev/null +++ b/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 { + protected getComponentName(): string { + return 'ItemBackButtonComponent'; + } + + protected importThemedComponent(themeName: string): Promise { + return import(`../../../themes/${themeName}/app/shared/item-back-button/item-back-button.component`); + } + + protected importUnthemedComponent(): Promise { + return import(`./item-back-button.component`); + } + +} diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts index 0eb5284112..0c849a36ba 100644 --- a/src/app/shared/shared.module.ts +++ b/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, diff --git a/src/themes/custom/app/shared/item-back-button/item-back-button.component.html b/src/themes/custom/app/shared/item-back-button/item-back-button.component.html new file mode 100644 index 0000000000..e69de29bb2 diff --git a/src/themes/custom/app/shared/item-back-button/item-back-button.component.scss b/src/themes/custom/app/shared/item-back-button/item-back-button.component.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/src/themes/custom/app/shared/item-back-button/item-back-button.component.ts b/src/themes/custom/app/shared/item-back-button/item-back-button.component.ts new file mode 100644 index 0000000000..4277a26219 --- /dev/null +++ b/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 {} diff --git a/src/themes/custom/eager-theme.module.ts b/src/themes/custom/eager-theme.module.ts index 4e3c6f8b46..d384d7f78e 100644 --- a/src/themes/custom/eager-theme.module.ts +++ b/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({