From ce330fcb47b552f649e63fddb9c7bc5eef15b8cc Mon Sep 17 00:00:00 2001 From: Art Lowel Date: Fri, 27 Oct 2017 17:57:28 +0200 Subject: [PATCH] refactored template variables --- .../collection-page.component.html | 52 ++++++++-------- .../collection-page.component.ts | 16 ++--- .../community-page.component.html | 60 ++++++++++--------- .../community-page.component.ts | 12 ++-- ...ty-page-sub-collection-list.component.html | 28 +++++---- ...nity-page-sub-collection-list.component.ts | 4 +- .../top-level-community-list.component.html | 28 +++++---- .../top-level-community-list.component.ts | 4 +- .../full-file-section.component.html | 4 +- .../full-file-section.component.ts | 6 +- .../full/full-item-page.component.html | 38 ++++++------ .../full/full-item-page.component.ts | 6 +- .../file-section/file-section.component.html | 16 ++--- .../file-section/file-section.component.ts | 4 +- .../simple/item-page.component.html | 48 ++++++++------- .../+item-page/simple/item-page.component.ts | 10 ++-- .../+search-page/search-page.component.html | 6 +- .../search-page.component.spec.ts | 2 +- src/app/+search-page/search-page.component.ts | 14 ++--- src/app/shared/shared.module.ts | 9 ++- src/app/shared/utils/var.directive.ts | 23 +++++++ src/modules/app/browser-app.module.ts | 2 +- 22 files changed, 219 insertions(+), 173 deletions(-) create mode 100644 src/app/shared/utils/var.directive.ts diff --git a/src/app/+collection-page/collection-page.component.html b/src/app/+collection-page/collection-page.component.html index a66a31f75f..49c3aad33e 100644 --- a/src/app/+collection-page/collection-page.component.html +++ b/src/app/+collection-page/collection-page.component.html @@ -1,51 +1,55 @@ -
-
-
+
+
+
+ [name]="collection.name"> -
- - + +
-
-

{{'collection.page.browse.recent.head' | translate}}

- - -
- - + +
+

{{'collection.page.browse.recent.head' | translate}}

+ + +
+ + +
diff --git a/src/app/+collection-page/collection-page.component.ts b/src/app/+collection-page/collection-page.component.ts index cec4e8b497..853bd0d154 100644 --- a/src/app/+collection-page/collection-page.component.ts +++ b/src/app/+collection-page/collection-page.component.ts @@ -29,9 +29,9 @@ import { PaginationComponentOptions } from '../shared/pagination/pagination-comp ] }) export class CollectionPageComponent implements OnInit, OnDestroy { - collectionData: Observable>; - itemData: Observable>; - logoData: Observable>; + collectionRDObs: Observable>; + itemRDObs: Observable>; + logoRDObs: Observable>; paginationConfig: PaginationComponentOptions; sortConfig: SortOptions; private subs: Subscription[] = []; @@ -60,12 +60,12 @@ export class CollectionPageComponent implements OnInit, OnDestroy { }) .subscribe((params) => { this.collectionId = params.id; - this.collectionData = this.collectionDataService.findById(this.collectionId); - this.metadata.processRemoteData(this.collectionData); - this.subs.push(this.collectionData + this.collectionRDObs = this.collectionDataService.findById(this.collectionId); + this.metadata.processRemoteData(this.collectionRDObs); + this.subs.push(this.collectionRDObs .map((rd: RemoteData) => rd.payload) .filter((collection: Collection) => hasValue(collection)) - .subscribe((collection: Collection) => this.logoData = collection.logo)); + .subscribe((collection: Collection) => this.logoRDObs = collection.logo)); const page = +params.page || this.paginationConfig.currentPage; const pageSize = +params.pageSize || this.paginationConfig.pageSize; @@ -87,7 +87,7 @@ export class CollectionPageComponent implements OnInit, OnDestroy { } updatePage(searchOptions) { - this.itemData = this.itemDataService.findAll({ + this.itemRDObs = this.itemDataService.findAll({ scopeID: this.collectionId, currentPage: searchOptions.pagination.currentPage, elementsPerPage: searchOptions.pagination.pageSize, diff --git a/src/app/+community-page/community-page.component.html b/src/app/+community-page/community-page.component.html index e9f91e3f10..bf9968c637 100644 --- a/src/app/+community-page/community-page.component.html +++ b/src/app/+community-page/community-page.component.html @@ -1,30 +1,32 @@ -
-
- - - - - - - - - - - - - - - + +
+
+ + + + + + + + + + + + + + + +
-
- - + + + diff --git a/src/app/+community-page/community-page.component.ts b/src/app/+community-page/community-page.component.ts index 40b57bc4cd..605d488820 100644 --- a/src/app/+community-page/community-page.component.ts +++ b/src/app/+community-page/community-page.component.ts @@ -22,8 +22,8 @@ import { Observable } from 'rxjs/Observable'; animations: [fadeInOut] }) export class CommunityPageComponent implements OnInit, OnDestroy { - communityData: Observable>; - logoData: Observable>; + communityRDObs: Observable>; + logoRDObs: Observable>; private subs: Subscription[] = []; constructor( @@ -36,12 +36,12 @@ export class CommunityPageComponent implements OnInit, OnDestroy { ngOnInit(): void { this.route.params.subscribe((params: Params) => { - this.communityData = this.communityDataService.findById(params.id); - this.metadata.processRemoteData(this.communityData); - this.subs.push(this.communityData + this.communityRDObs = this.communityDataService.findById(params.id); + this.metadata.processRemoteData(this.communityRDObs); + this.subs.push(this.communityRDObs .map((rd: RemoteData) => rd.payload) .filter((community: Community) => hasValue(community)) - .subscribe((community: Community) => this.logoData = community.logo)); + .subscribe((community: Community) => this.logoRDObs = community.logo)); }); } diff --git a/src/app/+community-page/sub-collection-list/community-page-sub-collection-list.component.html b/src/app/+community-page/sub-collection-list/community-page-sub-collection-list.component.html index 16de33a642..b04e93ff71 100644 --- a/src/app/+community-page/sub-collection-list/community-page-sub-collection-list.component.html +++ b/src/app/+community-page/sub-collection-list/community-page-sub-collection-list.component.html @@ -1,13 +1,15 @@ -
-

{{'community.sub-collection-list.head' | translate}}

- -
- - + +
+

{{'community.sub-collection-list.head' | translate}}

+ +
+ + + diff --git a/src/app/+community-page/sub-collection-list/community-page-sub-collection-list.component.ts b/src/app/+community-page/sub-collection-list/community-page-sub-collection-list.component.ts index 0f310d4aec..8edc275437 100644 --- a/src/app/+community-page/sub-collection-list/community-page-sub-collection-list.component.ts +++ b/src/app/+community-page/sub-collection-list/community-page-sub-collection-list.component.ts @@ -14,13 +14,13 @@ import { Observable } from 'rxjs/Observable'; animations:[fadeIn] }) export class CommunityPageSubCollectionListComponent implements OnInit { - subCollections: Observable>; + subCollectionsRDObs: Observable>; constructor(private cds: CollectionDataService) { } ngOnInit(): void { - this.subCollections = this.cds.findAll(); + this.subCollectionsRDObs = this.cds.findAll(); } } diff --git a/src/app/+home-page/top-level-community-list/top-level-community-list.component.html b/src/app/+home-page/top-level-community-list/top-level-community-list.component.html index e3e995f545..a34951afe0 100644 --- a/src/app/+home-page/top-level-community-list/top-level-community-list.component.html +++ b/src/app/+home-page/top-level-community-list/top-level-community-list.component.html @@ -1,13 +1,15 @@ -
-

{{'home.top-level-communities.head' | translate}}

-

{{'home.top-level-communities.help' | translate}}

- - -
- - + +
+

{{'home.top-level-communities.head' | translate}}

+

{{'home.top-level-communities.help' | translate}}

+ + +
+ + + diff --git a/src/app/+home-page/top-level-community-list/top-level-community-list.component.ts b/src/app/+home-page/top-level-community-list/top-level-community-list.component.ts index b7510db5ed..b364985fc1 100644 --- a/src/app/+home-page/top-level-community-list/top-level-community-list.component.ts +++ b/src/app/+home-page/top-level-community-list/top-level-community-list.component.ts @@ -17,7 +17,7 @@ import { PaginationComponentOptions } from '../../shared/pagination/pagination-c animations: [fadeInOut] }) export class TopLevelCommunityListComponent { - topLevelCommunities: Observable>; + communitiesRDObs: Observable>; config: PaginationComponentOptions; sortConfig: SortOptions; @@ -37,7 +37,7 @@ export class TopLevelCommunityListComponent { } updatePage(data) { - this.topLevelCommunities = this.cds.findAll({ + this.communitiesRDObs = this.cds.findAll({ currentPage: data.page, elementsPerPage: data.pageSize, sort: { field: data.sortField, direction: data.sortDirection } diff --git a/src/app/+item-page/full/field-components/file-section/full-file-section.component.html b/src/app/+item-page/full/field-components/file-section/full-file-section.component.html index 358b658a76..c29f868de2 100644 --- a/src/app/+item-page/full/field-components/file-section/full-file-section.component.html +++ b/src/app/+item-page/full/field-components/file-section/full-file-section.component.html @@ -1,5 +1,5 @@ -
+
@@ -13,7 +13,7 @@
{{"item.page.filesection.format" | translate}}
-
{{(file.mimetype)}}
+
{{(file.format.)}}
{{"item.page.filesection.description" | translate}}
diff --git a/src/app/+item-page/full/field-components/file-section/full-file-section.component.ts b/src/app/+item-page/full/field-components/file-section/full-file-section.component.ts index 262773b1be..331e979c8f 100644 --- a/src/app/+item-page/full/field-components/file-section/full-file-section.component.ts +++ b/src/app/+item-page/full/field-components/file-section/full-file-section.component.ts @@ -22,7 +22,7 @@ export class FullFileSectionComponent extends FileSectionComponent implements On label: string; - files: Observable; + bitstreamsObs: Observable; thumbnails: Map> = new Map(); @@ -33,8 +33,8 @@ export class FullFileSectionComponent extends FileSectionComponent implements On initialize(): void { const originals = this.item.getFiles(); const licenses = this.item.getBitstreamsByBundleName('LICENSE'); - this.files = Observable.combineLatest(originals, licenses, (o, l) => [...o, ...l]); - this.files.subscribe( + this.bitstreamsObs = Observable.combineLatest(originals, licenses, (o, l) => [...o, ...l]); + this.bitstreamsObs.subscribe( (files) => files.forEach( (original) => { diff --git a/src/app/+item-page/full/full-item-page.component.html b/src/app/+item-page/full/full-item-page.component.html index 998be0eb76..9f5126fde8 100644 --- a/src/app/+item-page/full/full-item-page.component.html +++ b/src/app/+item-page/full/full-item-page.component.html @@ -1,23 +1,25 @@ -
-
- -
- - {{"item.page.link.simple" | translate}} - -
- - - + +
+
+ + - -
{{metadatum.key}} {{metadatum.value}} {{metadatum.language}}
- - + + + + +
-
- - + + + diff --git a/src/app/+item-page/full/full-item-page.component.ts b/src/app/+item-page/full/full-item-page.component.ts index 1a26b92f13..aa1fc4cc78 100644 --- a/src/app/+item-page/full/full-item-page.component.ts +++ b/src/app/+item-page/full/full-item-page.component.ts @@ -30,9 +30,9 @@ import { hasValue } from '../../shared/empty.util'; }) export class FullItemPageComponent extends ItemPageComponent implements OnInit { - item: Observable>; + itemRDObs: Observable>; - metadata: Observable; + metadataObs: Observable; constructor(route: ActivatedRoute, items: ItemDataService, metadataService: MetadataService) { super(route, items, metadataService); @@ -45,7 +45,7 @@ export class FullItemPageComponent extends ItemPageComponent implements OnInit { initialize(params) { super.initialize(params); - this.metadata = this.item + this.metadataObs = this.itemRDObs .map((rd: RemoteData) => rd.payload) .filter((item: Item) => hasValue(item)) .map((item: Item) => item.metadata); diff --git a/src/app/+item-page/simple/field-components/file-section/file-section.component.html b/src/app/+item-page/simple/field-components/file-section/file-section.component.html index 0a56242075..7063bac0be 100644 --- a/src/app/+item-page/simple/field-components/file-section/file-section.component.html +++ b/src/app/+item-page/simple/field-components/file-section/file-section.component.html @@ -1,9 +1,11 @@ - + +
- - {{file?.name}} - ({{(file?.sizeBytes) | dsFileSize }}) - - + + {{file?.name}} + ({{(file?.sizeBytes) | dsFileSize }}) + +
- + + diff --git a/src/app/+item-page/simple/field-components/file-section/file-section.component.ts b/src/app/+item-page/simple/field-components/file-section/file-section.component.ts index a44d6c0d1e..b42e73940f 100644 --- a/src/app/+item-page/simple/field-components/file-section/file-section.component.ts +++ b/src/app/+item-page/simple/field-components/file-section/file-section.component.ts @@ -20,14 +20,14 @@ export class FileSectionComponent implements OnInit { separator = '
'; - files: Observable; + bitstreamsObs: Observable; ngOnInit(): void { this.initialize(); } initialize(): void { - this.files = this.item.getFiles(); + this.bitstreamsObs = this.item.getFiles(); } } diff --git a/src/app/+item-page/simple/item-page.component.html b/src/app/+item-page/simple/item-page.component.html index 3ce80a0eed..60d8c041a6 100644 --- a/src/app/+item-page/simple/item-page.component.html +++ b/src/app/+item-page/simple/item-page.component.html @@ -1,27 +1,29 @@ -
-
- -
-
- - - - - - -
-
- - - - - - + + + diff --git a/src/app/+item-page/simple/item-page.component.ts b/src/app/+item-page/simple/item-page.component.ts index 7856315810..58a056a5dd 100644 --- a/src/app/+item-page/simple/item-page.component.ts +++ b/src/app/+item-page/simple/item-page.component.ts @@ -31,9 +31,9 @@ export class ItemPageComponent implements OnInit { private sub: any; - item: Observable>; + itemRDObs: Observable>; - thumbnail: Observable; + thumbnailObs: Observable; constructor( private route: ActivatedRoute, @@ -51,9 +51,9 @@ export class ItemPageComponent implements OnInit { initialize(params) { this.id = +params.id; - this.item = this.items.findById(params.id); - this.metadataService.processRemoteData(this.item); - this.thumbnail = this.item + this.itemRDObs = this.items.findById(params.id); + this.metadataService.processRemoteData(this.itemRDObs); + this.thumbnailObs = this.itemRDObs .map((rd: RemoteData) => rd.payload) .filter((item: Item) => hasValue(item)) .flatMap((item: Item) => item.getThumbnail()); diff --git a/src/app/+search-page/search-page.component.html b/src/app/+search-page/search-page.component.html index 768ee1f043..5b9dfb195e 100644 --- a/src/app/+search-page/search-page.component.html +++ b/src/app/+search-page/search-page.component.html @@ -1,10 +1,10 @@
+ [scopes]="(scopeListRDObs | async)?.payload"> - +
diff --git a/src/app/+search-page/search-page.component.spec.ts b/src/app/+search-page/search-page.component.spec.ts index ad0152ecfd..348b62ae1b 100644 --- a/src/app/+search-page/search-page.component.spec.ts +++ b/src/app/+search-page/search-page.component.spec.ts @@ -103,7 +103,7 @@ describe('SearchPageComponent', () => { (comp as any).updateSearchResults({}); - expect(comp.results as any).toBe(mockResults); + expect(comp.resultsRDObs as any).toBe(mockResults); }); }); diff --git a/src/app/+search-page/search-page.component.ts b/src/app/+search-page/search-page.component.ts index c1ad3ed671..2330b47e9d 100644 --- a/src/app/+search-page/search-page.component.ts +++ b/src/app/+search-page/search-page.component.ts @@ -31,18 +31,18 @@ export class SearchPageComponent implements OnInit, OnDestroy { private scope: string; query: string; - scopeObject: Observable>; - results: Observable>>>; + scopeObjectRDObs: Observable>; + resultsRDObs: Observable>>>; currentParams = {}; searchOptions: SearchOptions; - scopeList: Observable>; + scopeListRDObs: Observable>; constructor( private service: SearchService, private route: ActivatedRoute, private communityService: CommunityDataService ) { - this.scopeList = communityService.findAll(); + this.scopeListRDObs = communityService.findAll(); // Initial pagination config const pagination: PaginationComponentOptions = new PaginationComponentOptions(); pagination.id = 'search-results-pagination'; @@ -76,9 +76,9 @@ export class SearchPageComponent implements OnInit, OnDestroy { sort: sort }); if (isNotEmpty(this.scope)) { - this.scopeObject = this.communityService.findById(this.scope); + this.scopeObjectRDObs = this.communityService.findById(this.scope); } else { - this.scopeObject = Observable.of(undefined); + this.scopeObjectRDObs = Observable.of(undefined); } } ); @@ -86,7 +86,7 @@ export class SearchPageComponent implements OnInit, OnDestroy { private updateSearchResults(searchOptions) { // Resolve search results - this.results = this.service.search(this.query, this.scope, searchOptions); + this.resultsRDObs = this.service.search(this.query, this.scope, searchOptions); } ngOnDestroy() { diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts index 5b6146b7a4..371cca39c2 100644 --- a/src/app/shared/shared.module.ts +++ b/src/app/shared/shared.module.ts @@ -30,6 +30,7 @@ import { SearchResultListElementComponent } from '../object-list/search-result-l import { SearchFormComponent } from './search-form/search-form.component'; import { WrapperListElementComponent } from '../object-list/wrapper-list-element/wrapper-list-element.component'; import { ViewModeSwitchComponent } from './view-mode-switch/view-mode-switch.component'; +import { VarDirective } from './utils/var.directive'; const MODULES = [ // Do NOT include UniversalModule, HttpModule, or JsonpModule here @@ -74,6 +75,10 @@ const ENTRY_COMPONENTS = [ SearchResultListElementComponent ]; +const DIRECTIVES = [ + VarDirective +]; + @NgModule({ imports: [ ...MODULES @@ -81,12 +86,14 @@ const ENTRY_COMPONENTS = [ declarations: [ ...PIPES, ...COMPONENTS, + ...DIRECTIVES, ...ENTRY_COMPONENTS ], exports: [ ...MODULES, ...PIPES, - ...COMPONENTS + ...COMPONENTS, + ...DIRECTIVES ], entryComponents: [ ...ENTRY_COMPONENTS diff --git a/src/app/shared/utils/var.directive.ts b/src/app/shared/utils/var.directive.ts new file mode 100644 index 0000000000..f6ef731042 --- /dev/null +++ b/src/app/shared/utils/var.directive.ts @@ -0,0 +1,23 @@ +import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core'; + +/* tslint:disable:directive-selector */ +@Directive({ + selector: '[ngVar]', +}) +export class VarDirective { + @Input() + set ngVar(context: any) { + this.context.$implicit = this.context.ngVar = context; + this.updateView(); + } + + context: any = {}; + + constructor(private vcRef: ViewContainerRef, private templateRef: TemplateRef) {} + + updateView() { + this.vcRef.clear(); + this.vcRef.createEmbeddedView(this.templateRef, this.context); + } +} +/* tslint:enable:directive-selector */ diff --git a/src/modules/app/browser-app.module.ts b/src/modules/app/browser-app.module.ts index 61f4cf8499..0283f44f52 100644 --- a/src/modules/app/browser-app.module.ts +++ b/src/modules/app/browser-app.module.ts @@ -40,7 +40,7 @@ export function createTranslateLoader(http: HttpClient) { // forRoot ensures the providers are only created once IdlePreloadModule.forRoot(), RouterModule.forRoot([], { - // enableTracing: true, + enableTracing: true, useHash: false, preloadingStrategy: IdlePreload