forked from DSpace/dspace-angular
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
TEMP: Should only be done later when DSpace#2339 is merged on main
- Loading branch information
1 parent
093f591
commit 0794eea
Showing
24 changed files
with
295 additions
and
60 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| import { Component, Input } from '@angular/core'; | ||
| import { BrowseByDataType } from './browse-by-switcher/browse-by-decorator'; | ||
|
|
||
| @Component({ | ||
| selector: 'ds-abstract-browse-by-page', | ||
| template: '', | ||
| }) | ||
| export class AbstractBrowseByPageComponent { | ||
|
|
||
| /** | ||
| * The {@link BrowseByDataType} of this Component | ||
| */ | ||
| @Input() browseByType: BrowseByDataType; | ||
|
|
||
| /** | ||
| * Whether to show the browse by page as a standalone page or not | ||
| * This will have an effect on how the component is rendered for accessibility reasons | ||
| */ | ||
| @Input() showAsStandalonePage: boolean; | ||
|
|
||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
18 changes: 12 additions & 6 deletions
18
src/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
3 changes: 3 additions & 0 deletions
3
src/app/browse-by/browse-by-page/browse-by-page.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| <ds-themed-browse-by-switcher [browseByType]="browseByDataType$ | async" | ||
| [showAsStandalonePage]="true"> | ||
| </ds-themed-browse-by-switcher> |
Empty file.
24 changes: 24 additions & 0 deletions
24
src/app/browse-by/browse-by-page/browse-by-page.component.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| import { ComponentFixture, TestBed } from '@angular/core/testing'; | ||
| import { BrowseByPageComponent } from './browse-by-page.component'; | ||
|
|
||
| describe('BrowseByPageComponent', () => { | ||
| let component: BrowseByPageComponent; | ||
| let fixture: ComponentFixture<BrowseByPageComponent>; | ||
|
|
||
| beforeEach(async () => { | ||
| await TestBed.configureTestingModule({ | ||
| declarations: [ | ||
| BrowseByPageComponent, | ||
| ], | ||
| }) | ||
| .compileComponents(); | ||
|
|
||
| fixture = TestBed.createComponent(BrowseByPageComponent); | ||
| component = fixture.componentInstance; | ||
| fixture.detectChanges(); | ||
| }); | ||
|
|
||
| it('should create', () => { | ||
| expect(component).toBeTruthy(); | ||
| }); | ||
| }); |
27 changes: 27 additions & 0 deletions
27
src/app/browse-by/browse-by-page/browse-by-page.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| import { Component, OnInit } from '@angular/core'; | ||
| import { ActivatedRoute, Data } from '@angular/router'; | ||
| import { map } from 'rxjs/operators'; | ||
| import { BrowseByDataType } from '../browse-by-switcher/browse-by-decorator'; | ||
| import { Observable } from 'rxjs'; | ||
|
|
||
| @Component({ | ||
| selector: 'ds-browse-by-page', | ||
| templateUrl: './browse-by-page.component.html', | ||
| styleUrls: ['./browse-by-page.component.scss'], | ||
| }) | ||
| export class BrowseByPageComponent implements OnInit { | ||
|
|
||
| browseByDataType$: Observable<BrowseByDataType>; | ||
|
|
||
| constructor( | ||
| protected route: ActivatedRoute, | ||
| ) { | ||
| } | ||
|
|
||
| ngOnInit(): void { | ||
| this.browseByDataType$ = this.route.data.pipe( | ||
| map((data: Data) => data?.browseDefinition), | ||
| ); | ||
| } | ||
|
|
||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
2 changes: 1 addition & 1 deletion
2
src/app/browse-by/browse-by-switcher/browse-by-switcher.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1 @@ | ||
| <ng-container *ngComponentOutlet="browseByComponent | async"></ng-container> | ||
| <ng-template dsDynamicComponentLoader></ng-template> |
93 changes: 79 additions & 14 deletions
93
src/app/browse-by/browse-by-switcher/browse-by-switcher.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,38 +1,103 @@ | ||
| import { Component, Inject, OnInit } from '@angular/core'; | ||
| import { ActivatedRoute } from '@angular/router'; | ||
| import { Observable } from 'rxjs'; | ||
| import { map } from 'rxjs/operators'; | ||
| import { BROWSE_BY_COMPONENT_FACTORY } from './browse-by-decorator'; | ||
| import { Component, OnInit, Input, ComponentRef, ViewChild, SimpleChanges, ViewContainerRef, OnChanges, Inject } from '@angular/core'; | ||
| import { Subscription } from 'rxjs'; | ||
| import { GenericConstructor } from '../../core/shared/generic-constructor'; | ||
| import { BrowseDefinition } from '../../core/shared/browse-definition.model'; | ||
| import { ThemeService } from '../../shared/theme-support/theme.service'; | ||
| import { AbstractBrowseByPageComponent } from '../abstract-browse-by-page.component'; | ||
| import { DynamicComponentLoaderDirective } from './dynamic-component-loader-directive'; | ||
| import { hasValue, isNotEmpty, hasNoValue } from '../../shared/empty.util'; | ||
| import { BROWSE_BY_COMPONENT_FACTORY, BrowseByDataType } from './browse-by-decorator'; | ||
|
|
||
| @Component({ | ||
| selector: 'ds-browse-by-switcher', | ||
| templateUrl: './browse-by-switcher.component.html' | ||
| }) | ||
| /** | ||
| * Component for determining what Browse-By component to use depending on the metadata (browse ID) provided | ||
| * | ||
| * TODO should extend AbstractComponentLoaderComponent once PR https://github.com/DSpace/dspace-angular/pull/2339 is | ||
| * merged. | ||
| */ | ||
| export class BrowseBySwitcherComponent implements OnInit { | ||
| export class BrowseBySwitcherComponent implements OnInit, OnChanges { | ||
|
|
||
| @Input() browseByType: BrowseByDataType; | ||
|
|
||
| @Input() showAsStandalonePage = true; | ||
|
|
||
| /** | ||
| * Directive to determine where the dynamic child component is located | ||
| */ | ||
| @ViewChild(DynamicComponentLoaderDirective, { static: true }) componentDirective: DynamicComponentLoaderDirective; | ||
|
|
||
| /** | ||
| * Resolved browse-by component | ||
| * The reference to the dynamic component | ||
| */ | ||
| browseByComponent: Observable<any>; | ||
| protected compRef: ComponentRef<AbstractBrowseByPageComponent>; | ||
|
|
||
| public constructor(protected route: ActivatedRoute, | ||
| protected themeService: ThemeService, | ||
| @Inject(BROWSE_BY_COMPONENT_FACTORY) private getComponentByBrowseByType: (browseByType, theme) => GenericConstructor<any>) { | ||
| subs: Subscription[] = []; | ||
|
|
||
| inputNames: (keyof this)[] = [ | ||
| 'browseByType', | ||
| 'showAsStandalonePage', | ||
| ]; | ||
|
|
||
| public constructor( | ||
| protected themeService: ThemeService, | ||
| @Inject(BROWSE_BY_COMPONENT_FACTORY) private getComponentByBrowseByType: (browseByType: string, theme: string) => GenericConstructor<AbstractBrowseByPageComponent>, | ||
| ) { | ||
| } | ||
|
|
||
| /** | ||
| * Fetch the correct browse-by component by using the relevant config from the route data | ||
| */ | ||
| ngOnInit(): void { | ||
| this.browseByComponent = this.route.data.pipe( | ||
| map((data: { browseDefinition: BrowseDefinition }) => this.getComponentByBrowseByType(data.browseDefinition.getRenderType(), this.themeService.getThemeName())) | ||
| this.instantiateComponent(); | ||
| } | ||
|
|
||
| ngOnChanges(changes: SimpleChanges): void { | ||
| if (hasNoValue(this.compRef)) { | ||
| // sometimes the component has not been initialized yet, so it first needs to be initialized | ||
| // before being called again | ||
| this.instantiateComponent(changes); | ||
| } else { | ||
| // if an input or output has changed | ||
| if (this.inputNames.some((name: any) => hasValue(changes[name]))) { | ||
| this.connectInputs(); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| public instantiateComponent(changes?: SimpleChanges): void { | ||
| const component: GenericConstructor<AbstractBrowseByPageComponent> = this.getComponent(); | ||
|
|
||
| const viewContainerRef: ViewContainerRef = this.componentDirective.viewContainerRef; | ||
| viewContainerRef.clear(); | ||
|
|
||
| this.compRef = viewContainerRef.createComponent( | ||
| component, { | ||
| index: 0, | ||
| injector: undefined, | ||
| }, | ||
| ); | ||
|
|
||
| if (hasValue(changes)) { | ||
| this.ngOnChanges(changes); | ||
| } else { | ||
| this.connectInputs(); | ||
| } | ||
| } | ||
|
|
||
| public getComponent(): GenericConstructor<AbstractBrowseByPageComponent> { | ||
| return this.getComponentByBrowseByType(this.browseByType, this.themeService.getThemeName()); | ||
| } | ||
|
|
||
|
|
||
| protected connectInputs(): void { | ||
| if (isNotEmpty(this.inputNames) && hasValue(this.compRef) && hasValue(this.compRef.instance)) { | ||
| this.inputNames.filter((name: any) => this[name] !== undefined).forEach((name: any) => { | ||
| this.compRef.setInput(name, this[name]); | ||
| }); | ||
| } | ||
| } | ||
|
|
||
|
|
||
| } |
17 changes: 17 additions & 0 deletions
17
src/app/browse-by/browse-by-switcher/dynamic-component-loader-directive.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| import { Directive, ViewContainerRef } from '@angular/core'; | ||
|
|
||
| /** | ||
| * Directive used as a hook to know where to inject the dynamic loaded component | ||
| * TODO should be removed once https://github.com/DSpace/dspace-angular/pull/2339 is merged | ||
| */ | ||
| @Directive({ | ||
| selector: '[dsDynamicComponentLoader]' | ||
| }) | ||
| export class DynamicComponentLoaderDirective { | ||
|
|
||
| constructor( | ||
| public viewContainerRef: ViewContainerRef, | ||
| ) { | ||
| } | ||
|
|
||
| } |
Oops, something went wrong.