Skip to content

Commit

Permalink
Merge pull request DSpace#2075 from atmire/w2p-98855_themeable-file-d…
Browse files Browse the repository at this point in the history
…ownload-link_contribute-main

Pass `ng-content` to themed child components
  • Loading branch information
tdonohue authored Feb 14, 2023
2 parents 368c1ea + a6be920 commit 21b0374
Show file tree
Hide file tree
Showing 13 changed files with 94 additions and 31 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -33,9 +33,9 @@ <h5 class="simple-view-element-header">{{"item.page.filesection.original.bundle"
</dl>
</div>
<div class="col-2">
<ds-file-download-link [bitstream]="file" [item]="item">
<ds-themed-file-download-link [bitstream]="file" [item]="item">
{{"item.page.filesection.download" | translate}}
</ds-file-download-link>
</ds-themed-file-download-link>
</div>
</div>
</ds-pagination>
Expand Down Expand Up @@ -74,9 +74,9 @@ <h5 class="simple-view-element-header">{{"item.page.filesection.license.bundle"
</dl>
</div>
<div class="col-2">
<ds-file-download-link [bitstream]="file" [item]="item">
<ds-themed-file-download-link [bitstream]="file" [item]="item">
{{"item.page.filesection.download" | translate}}
</ds-file-download-link>
</ds-themed-file-download-link>
</div>
</div>
</ds-pagination>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
<ng-container *ngVar="(bitstreams$ | async) as bitstreams">
<ds-metadata-field-wrapper *ngIf="bitstreams?.length > 0" [label]="label | translate">
<div class="file-section">
<ds-file-download-link *ngFor="let file of bitstreams; let last=last;" [bitstream]="file" [item]="item">
<ds-themed-file-download-link *ngFor="let file of bitstreams; let last=last;" [bitstream]="file" [item]="item">
<span>{{file?.name}}</span>
<span>({{(file?.sizeBytes) | dsFileSize }})</span>
<span *ngIf="!last" innerHTML="{{separator}}"></span>
</ds-file-download-link>
</ds-themed-file-download-link>
<ds-themed-loading *ngIf="isLoading" message="{{'loading.default' | translate}}" [showMessage]="false"></ds-themed-loading>
<div *ngIf="!isLastPage" class="mt-1" id="view-more">
<a class="bitstream-view-more btn btn-outline-secondary btn-sm" [routerLink]="[]" (click)="getNextPage()">{{'item.page.bitstreams.view-more' | translate}}</a>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,7 @@ describe('FileSectionComponent', () => {
it('one bitstream should be on the page', () => {
const viewMore = fixture.debugElement.query(By.css('.bitstream-view-more'));
viewMore.triggerEventHandler('click', null);
const fileDownloadLink = fixture.debugElement.queryAll(By.css('ds-file-download-link'));
const fileDownloadLink = fixture.debugElement.queryAll(By.css('ds-themed-file-download-link'));
expect(fileDownloadLink.length).toEqual(1);
});

Expand All @@ -125,7 +125,7 @@ describe('FileSectionComponent', () => {

});
it('should contain another bitstream', () => {
const fileDownloadLink = fixture.debugElement.queryAll(By.css('ds-file-download-link'));
const fileDownloadLink = fixture.debugElement.queryAll(By.css('ds-themed-file-download-link'));
expect(fileDownloadLink.length).toEqual(2);
});
});
Expand Down
4 changes: 2 additions & 2 deletions src/app/process-page/detail/process-detail.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,10 @@ <h2 class="flex-grow-1">{{'process.detail.title' | translate:{
<div *ngVar="(filesRD$ | async)?.payload?.page as files">
<ds-process-detail-field *ngIf="files && files?.length > 0" id="process-files"
[title]="'process.detail.output-files'">
<ds-file-download-link *ngFor="let file of files; let last=last;" [bitstream]="file">
<ds-themed-file-download-link *ngFor="let file of files; let last=last;" [bitstream]="file">
<span>{{getFileName(file)}}</span>
<span>({{(file?.sizeBytes) | dsFileSize }})</span>
</ds-file-download-link>
</ds-themed-file-download-link>
</ds-process-detail-field>
</div>

Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import { ThemedComponent } from '../theme-support/themed.component';
import { Component, Input } from '@angular/core';
import { FileDownloadLinkComponent } from './file-download-link.component';
import { Bitstream } from '../../core/shared/bitstream.model';
import { Item } from '../../core/shared/item.model';

@Component({
selector: 'ds-themed-file-download-link',
styleUrls: [],
templateUrl: '../theme-support/themed.component.html',
})
export class ThemedFileDownloadLinkComponent extends ThemedComponent<FileDownloadLinkComponent> {

@Input() bitstream: Bitstream;

@Input() item: Item;

@Input() cssClasses: string;

@Input() isBlank: boolean;

@Input() enableRequestACopy: boolean;

protected inAndOutputNames: (keyof FileDownloadLinkComponent & keyof this)[] = ['bitstream', 'item', 'cssClasses', 'isBlank', 'enableRequestACopy'];

protected getComponentName(): string {
return 'FileDownloadLinkComponent';
}

protected importThemedComponent(themeName: string): Promise<any> {
return import(`../../../themes/${themeName}/app/shared/file-download-link/file-download-link.component`);
}

protected importUnthemedComponent(): Promise<any> {
return import('./file-download-link.component');
}

}
2 changes: 2 additions & 0 deletions src/app/shared/shared.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -200,6 +200,7 @@ import { ClaimedTaskActionsDirective } from './mydspace-actions/claimed-task/swi
import { ImpersonateNavbarComponent } from './impersonate-navbar/impersonate-navbar.component';
import { NgForTrackByIdDirective } from './ng-for-track-by-id.directive';
import { FileDownloadLinkComponent } from './file-download-link/file-download-link.component';
import { ThemedFileDownloadLinkComponent } from './file-download-link/themed-file-download-link.component';
import { CollectionDropdownComponent } from './collection-dropdown/collection-dropdown.component';
import { EntityDropdownComponent } from './entity-dropdown/entity-dropdown.component';
import { CurationFormComponent } from '../curation-form/curation-form.component';
Expand Down Expand Up @@ -413,6 +414,7 @@ const ENTRY_COMPONENTS = [
CollectionDropdownComponent,
ThemedCollectionDropdownComponent,
FileDownloadLinkComponent,
ThemedFileDownloadLinkComponent,
CurationFormComponent,
ExportMetadataSelectorComponent,
ImportBatchSelectorComponent,
Expand Down
6 changes: 5 additions & 1 deletion src/app/shared/theme-support/themed.component.html
Original file line number Diff line number Diff line change
@@ -1 +1,5 @@
<ng-template #vcr></ng-template>
<ng-template #vcr>
</ng-template>
<div #content>
<ng-content></ng-content>
</div>
11 changes: 7 additions & 4 deletions src/app/shared/theme-support/themed.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@ import {
ComponentFactoryResolver,
ChangeDetectorRef,
OnChanges,
HostBinding
HostBinding,
ElementRef,
} from '@angular/core';
import { hasValue, isNotEmpty } from '../empty.util';
import { from as fromPromise, Observable, of as observableOf, Subscription, BehaviorSubject } from 'rxjs';
Expand All @@ -25,6 +26,7 @@ import { BASE_THEME_NAME } from './theme.constants';
})
export abstract class ThemedComponent<T> implements OnInit, OnDestroy, OnChanges {
@ViewChild('vcr', { read: ViewContainerRef }) vcr: ViewContainerRef;
@ViewChild('content') themedElementContent: ElementRef;
protected compRef: ComponentRef<T>;

/**
Expand All @@ -46,7 +48,7 @@ export abstract class ThemedComponent<T> implements OnInit, OnDestroy, OnChanges
constructor(
protected resolver: ComponentFactoryResolver,
protected cdr: ChangeDetectorRef,
protected themeService: ThemeService
protected themeService: ThemeService,
) {
}

Expand Down Expand Up @@ -102,10 +104,11 @@ export abstract class ThemedComponent<T> implements OnInit, OnDestroy, OnChanges
}),
).subscribe((constructor: GenericConstructor<T>) => {
const factory = this.resolver.resolveComponentFactory(constructor);
this.compRef = this.vcr.createComponent(factory);
this.compRef = this.vcr.createComponent(factory, undefined, undefined, [this.themedElementContent.nativeElement.childNodes]);
this.connectInputsAndOutputs();
this.compRef$.next(this.compRef);
this.cdr.markForCheck();
this.themedElementContent.nativeElement.remove();
});
}

Expand All @@ -121,7 +124,7 @@ export abstract class ThemedComponent<T> implements OnInit, OnDestroy, OnChanges

protected connectInputsAndOutputs(): void {
if (isNotEmpty(this.inAndOutputNames) && hasValue(this.compRef) && hasValue(this.compRef.instance)) {
this.inAndOutputNames.forEach((name: any) => {
this.inAndOutputNames.filter((name: any) => this[name] !== undefined).forEach((name: any) => {
this.compRef.instance[name] = this[name];
});
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,9 @@ <h3>{{fileName}} <span class="text-muted">({{fileData?.sizeBytes | dsFileSize}})
</div>
<div class="float-right w-15">
<ng-container>
<ds-file-download-link [cssClasses]="'btn btn-link-focus'" [isBlank]="true" [bitstream]="getBitstream()" [enableRequestACopy]="false">
<ds-themed-file-download-link [cssClasses]="'btn btn-link-focus'" [isBlank]="true" [bitstream]="getBitstream()" [enableRequestACopy]="false">
<i class="fa fa-download fa-2x text-normal" aria-hidden="true"></i>
</ds-file-download-link>
</ds-themed-file-download-link>
<button class="btn btn-link-focus"
[attr.aria-label]="'submission.sections.upload.edit.title' | translate"
title="{{ 'submission.sections.upload.edit.title' | translate }}"
Expand Down
Empty file.
Empty file.
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import { Component } from '@angular/core';
import {
FileDownloadLinkComponent as BaseComponent
} from '../../../../../app/shared/file-download-link/file-download-link.component';

@Component({
selector: 'ds-file-download-link',
// templateUrl: './file-download-link.component.html',
templateUrl: '../../../../../app/shared/file-download-link/file-download-link.component.html',
// styleUrls: ['./file-download-link.component.scss'],
styleUrls: ['../../../../../app/shared/file-download-link/file-download-link.component.scss'],
})
export class FileDownloadLinkComponent extends BaseComponent {
}
30 changes: 16 additions & 14 deletions src/themes/custom/eager-theme.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ import { CollectionDropdownComponent } from './app/shared/collection-dropdown/co
import { SharedBrowseByModule } from '../../app/shared/browse-by/shared-browse-by.module';
import { ResultsBackButtonModule } from '../../app/shared/results-back-button/results-back-button.module';
import { DsoPageModule } from '../../app/shared/dso-page/dso-page.module';
import { FileDownloadLinkComponent } from './app/shared/file-download-link/file-download-link.component';


/**
Expand All @@ -61,6 +62,7 @@ const ENTRY_COMPONENTS = [
CommunityListElementComponent,
CollectionListElementComponent,
CollectionDropdownComponent,
FileDownloadLinkComponent,
];

const DECLARATIONS = [
Expand All @@ -80,21 +82,21 @@ const DECLARATIONS = [
];

@NgModule({
imports: [
CommonModule,
SharedModule,
RootModule,
NavbarModule,
SharedBrowseByModule,
ResultsBackButtonModule,
ItemPageModule,
ItemSharedModule,
imports: [
CommonModule,
SharedModule,
RootModule,
NavbarModule,
SharedBrowseByModule,
ResultsBackButtonModule,
ItemPageModule,
ItemSharedModule,
DsoPageModule,
],
declarations: DECLARATIONS,
providers: [
...ENTRY_COMPONENTS.map((component) => ({provide: component}))
],
],
declarations: DECLARATIONS,
providers: [
...ENTRY_COMPONENTS.map((component) => ({provide: component}))
],
})
/**
* This module is included in the main bundle that gets downloaded at first page load. So it should
Expand Down

0 comments on commit 21b0374

Please sign in to comment.