diff --git a/src/app/shared/menu/menu-item-type.model.ts b/src/app/shared/menu/menu-item-type.model.ts index 713dc6ab88..0063ed77e7 100644 --- a/src/app/shared/menu/menu-item-type.model.ts +++ b/src/app/shared/menu/menu-item-type.model.ts @@ -2,5 +2,5 @@ * List of possible MenuItemTypes */ export enum MenuItemType { - TEXT, LINK, ALTMETRIC, SEARCH, ONCLICK + TEXT, LINK, ALTMETRIC, SEARCH, ONCLICK, EXTERNAL } diff --git a/src/app/shared/menu/menu-item/external-link-menu-item.component.html b/src/app/shared/menu/menu-item/external-link-menu-item.component.html new file mode 100644 index 0000000000..dc602cc572 --- /dev/null +++ b/src/app/shared/menu/menu-item/external-link-menu-item.component.html @@ -0,0 +1,7 @@ +{{item.text | translate}} diff --git a/src/app/shared/menu/menu-item/external-link-menu-item.component.spec.ts b/src/app/shared/menu/menu-item/external-link-menu-item.component.spec.ts new file mode 100644 index 0000000000..4c55758b3d --- /dev/null +++ b/src/app/shared/menu/menu-item/external-link-menu-item.component.spec.ts @@ -0,0 +1,53 @@ +import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; +import { TranslateModule } from '@ngx-translate/core'; +import { DebugElement, NO_ERRORS_SCHEMA } from '@angular/core'; +import { By } from '@angular/platform-browser'; +import { ExternalLinkMenuItemComponent } from './external-link-menu-item.component'; + +describe('ExternalLinkMenuItemComponent', () => { + let component: ExternalLinkMenuItemComponent; + let fixture: ComponentFixture; + let debugElement: DebugElement; + let text; + let link; + + function init() { + text = 'HELLO'; + link = 'https://google.com/'; + } + + beforeEach(waitForAsync(() => { + init(); + TestBed.configureTestingModule({ + imports: [TranslateModule.forRoot()], + declarations: [ExternalLinkMenuItemComponent], + providers: [ + { provide: 'itemModelProvider', useValue: { text: text, href: link } }, + ], + schemas: [NO_ERRORS_SCHEMA] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ExternalLinkMenuItemComponent); + component = fixture.componentInstance; + debugElement = fixture.debugElement; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); + + it('should contain the correct text', () => { + const textContent = debugElement.query(By.css('a')).nativeElement.textContent; + expect(textContent).toEqual(text); + }); + + it('should have the right href attribute', () => { + const links = fixture.debugElement.queryAll(By.css('a')); + expect(links.length).toBe(1); + expect(links[0].nativeElement.href).toBe(link); + }); +}); diff --git a/src/app/shared/menu/menu-item/external-link-menu-item.component.ts b/src/app/shared/menu/menu-item/external-link-menu-item.component.ts new file mode 100644 index 0000000000..5fbbe608db --- /dev/null +++ b/src/app/shared/menu/menu-item/external-link-menu-item.component.ts @@ -0,0 +1,36 @@ +import { Component, Inject, OnInit } from '@angular/core'; +import { rendersMenuItemForType } from '../menu-item.decorator'; +import { isNotEmpty } from '../../empty.util'; +import { ExternalLinkMenuItemModel } from './models/external-link.model'; +import { MenuItemType } from '../menu-item-type.model'; + +/** + * Component that renders a menu section of type EXTERNAL + */ +@Component({ + selector: 'ds-external-link-menu-item', + templateUrl: './external-link-menu-item.component.html' +}) +@rendersMenuItemForType(MenuItemType.EXTERNAL) +export class ExternalLinkMenuItemComponent implements OnInit { + item: ExternalLinkMenuItemModel; + + hasLink: boolean; + + constructor( + @Inject('itemModelProvider') item: ExternalLinkMenuItemModel + ) { + this.item = item; + } + + ngOnInit() { + this.hasLink = isNotEmpty(this.item.href); + } + + get href() { + if (this.hasLink) { + return this.item.href; + } + return undefined; + } +} diff --git a/src/app/shared/menu/menu-item/link-menu-item.component.spec.ts b/src/app/shared/menu/menu-item/link-menu-item.component.spec.ts index 57cf05e37c..e9552f9173 100644 --- a/src/app/shared/menu/menu-item/link-menu-item.component.spec.ts +++ b/src/app/shared/menu/menu-item/link-menu-item.component.spec.ts @@ -19,7 +19,7 @@ describe('LinkMenuItemComponent', () => { function init() { text = 'HELLO'; - link = 'http://google.com'; + link = '/world/hello'; queryParams = {params: true}; } diff --git a/src/app/shared/menu/menu-item/models/external-link.model.ts b/src/app/shared/menu/menu-item/models/external-link.model.ts new file mode 100644 index 0000000000..c5168a449e --- /dev/null +++ b/src/app/shared/menu/menu-item/models/external-link.model.ts @@ -0,0 +1,11 @@ +import { MenuItemModel } from './menu-item.model'; +import { MenuItemType } from '../../menu-item-type.model'; + +/** + * Model representing a Link Menu Section for an external link + */ +export class ExternalLinkMenuItemModel implements MenuItemModel { + type = MenuItemType.EXTERNAL; + text: string; + href: string; +} diff --git a/src/app/shared/menu/menu.module.ts b/src/app/shared/menu/menu.module.ts index e9430299cc..1d186a9b7d 100644 --- a/src/app/shared/menu/menu.module.ts +++ b/src/app/shared/menu/menu.module.ts @@ -7,13 +7,15 @@ import { LinkMenuItemComponent } from './menu-item/link-menu-item.component'; import { TextMenuItemComponent } from './menu-item/text-menu-item.component'; import { OnClickMenuItemComponent } from './menu-item/onclick-menu-item.component'; import { CommonModule } from '@angular/common'; +import { ExternalLinkMenuItemComponent } from './menu-item/external-link-menu-item.component'; const COMPONENTS = [ MenuSectionComponent, MenuComponent, LinkMenuItemComponent, TextMenuItemComponent, - OnClickMenuItemComponent + OnClickMenuItemComponent, + ExternalLinkMenuItemComponent, ]; const MODULES = [ diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts index acfb099574..37f4fafb1e 100644 --- a/src/app/shared/shared.module.ts +++ b/src/app/shared/shared.module.ts @@ -172,6 +172,7 @@ import { BitstreamRequestACopyPageComponent } from './bitstream-request-a-copy-p import { DsSelectComponent } from './ds-select/ds-select.component'; import { LogInOidcComponent } from './log-in/methods/oidc/log-in-oidc.component'; import { ThemedItemListPreviewComponent } from './object-list/my-dspace-result-list-element/item-list-preview/themed-item-list-preview.component'; +import { ExternalLinkMenuItemComponent } from './menu/menu-item/external-link-menu-item.component'; const MODULES = [ // Do NOT include UniversalModule, HttpModule, or JsonpModule here @@ -397,6 +398,7 @@ const ENTRY_COMPONENTS = [ OnClickMenuItemComponent, TextMenuItemComponent, ScopeSelectorModalComponent, + ExternalLinkMenuItemComponent, ]; const SHARED_ITEM_PAGE_COMPONENTS = [