diff --git a/src/app/+collection-page/collection-page-routing.module.ts b/src/app/+collection-page/collection-page-routing.module.ts index 757066a176..ca56bca2cd 100644 --- a/src/app/+collection-page/collection-page-routing.module.ts +++ b/src/app/+collection-page/collection-page-routing.module.ts @@ -2,7 +2,7 @@ import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; import { CollectionPageComponent } from './collection-page.component'; -import { CollectionPageResolverService } from './collection-page-resolver.service'; +import { CollectionPageResolver } from './collection-page.resolver'; @NgModule({ imports: [ @@ -11,12 +11,14 @@ import { CollectionPageResolverService } from './collection-page-resolver.servic path: ':id', component: CollectionPageComponent, pathMatch: 'full', - resolve: { collection: CollectionPageResolverService } + resolve: { + collection: CollectionPageResolver + } } ]) ], providers: [ - CollectionPageResolverService + CollectionPageResolver, ] }) export class CollectionPageRoutingModule { diff --git a/src/app/+collection-page/collection-page.component.html b/src/app/+collection-page/collection-page.component.html index 05b4d6f11e..7b56d2307c 100644 --- a/src/app/+collection-page/collection-page.component.html +++ b/src/app/+collection-page/collection-page.component.html @@ -1,6 +1,6 @@
+ *ngVar="(collectionRD$ | async) as collectionRD">
@@ -8,8 +8,8 @@ [name]="collection.name"> - @@ -35,17 +35,17 @@
- +
- +

{{'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 2dee8e0cb4..ec94ed4404 100644 --- a/src/app/+collection-page/collection-page.component.ts +++ b/src/app/+collection-page/collection-page.component.ts @@ -18,6 +18,7 @@ import { Item } from '../core/shared/item.model'; import { fadeIn, fadeInOut } from '../shared/animations/fade'; import { hasValue, isNotEmpty } from '../shared/empty.util'; import { PaginationComponentOptions } from '../shared/pagination/pagination-component-options.model'; +import { filter, flatMap, map } from 'rxjs/operators'; @Component({ selector: 'ds-collection-page', @@ -30,9 +31,9 @@ import { PaginationComponentOptions } from '../shared/pagination/pagination-comp ] }) export class CollectionPageComponent implements OnInit, OnDestroy { - collectionRDObs: Observable>; - itemRDObs: Observable>>; - logoRDObs: Observable>; + collectionRD$: Observable>; + itemRD$: Observable>>; + logoRD$: Observable>; paginationConfig: PaginationComponentOptions; sortConfig: SortOptions; private subs: Subscription[] = []; @@ -44,55 +45,44 @@ export class CollectionPageComponent implements OnInit, OnDestroy { private metadata: MetadataService, private route: ActivatedRoute ) { - // this.route.snapshot.data.subscribe((c) => console.log(c)); this.paginationConfig = new PaginationComponentOptions(); this.paginationConfig.id = 'collection-page-pagination'; this.paginationConfig.pageSize = 5; this.paginationConfig.currentPage = 1; - this.sortConfig = new SortOptions('dc.title', SortDirection.ASC); + this.sortConfig = new SortOptions('dc.date.accessioned', SortDirection.DESC); } ngOnInit(): void { - this.route.data.subscribe((data) => { - console.log('data.collection', data.collection.state, data.collection) - }) + this.collectionRD$ = this.route.data.map((data) => data.collection); + this.logoRD$ = this.collectionRD$.pipe( + map((rd: RemoteData) => rd.payload), + filter((collection: Collection) => hasValue(collection)), + flatMap((collection: Collection) => collection.logo) + ); this.subs.push( - Observable.combineLatest( - this.route.params, - this.route.queryParams, - (params, queryParams, ) => { - return Object.assign({}, params, queryParams); - }) - .subscribe((params) => { - this.collectionId = params.id; - 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.logoRDObs = collection.logo)); - - const page = +params.page || this.paginationConfig.currentPage; - const pageSize = +params.pageSize || this.paginationConfig.pageSize; - const sortDirection = +params.page || this.sortConfig.direction; - const pagination = Object.assign({}, - this.paginationConfig, - { currentPage: page, pageSize: pageSize } - ); - const sort = Object.assign({}, - this.sortConfig, - { direction: sortDirection, field: params.sortField } - ); - this.updatePage({ - pagination: pagination, - sort: sort - }); - })); + this.route.queryParams.subscribe((params) => { + this.metadata.processRemoteData(this.collectionRD$); + const page = +params.page || this.paginationConfig.currentPage; + const pageSize = +params.pageSize || this.paginationConfig.pageSize; + const sortDirection = +params.page || this.sortConfig.direction; + const pagination = Object.assign({}, + this.paginationConfig, + { currentPage: page, pageSize: pageSize } + ); + const sort = Object.assign({}, + this.sortConfig, + { direction: sortDirection, field: params.sortField } + ); + this.updatePage({ + pagination: pagination, + sort: sort + }); + })); } updatePage(searchOptions) { - this.itemRDObs = this.itemDataService.findAll({ + this.itemRD$ = this.itemDataService.findAll({ scopeID: this.collectionId, currentPage: searchOptions.pagination.currentPage, elementsPerPage: searchOptions.pagination.pageSize, diff --git a/src/app/+collection-page/collection-page-resolver.service.ts b/src/app/+collection-page/collection-page.resolver.ts similarity index 54% rename from src/app/+collection-page/collection-page-resolver.service.ts rename to src/app/+collection-page/collection-page.resolver.ts index 76007da146..3204b8d5c3 100644 --- a/src/app/+collection-page/collection-page-resolver.service.ts +++ b/src/app/+collection-page/collection-page.resolver.ts @@ -1,20 +1,20 @@ import { Injectable } from '@angular/core'; -import { ActivatedRouteSnapshot, Resolve, Router, RouterStateSnapshot } from '@angular/router'; +import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router'; import { Collection } from '../core/shared/collection.model'; import { Observable } from 'rxjs/Observable'; import { CollectionDataService } from '../core/data/collection-data.service'; import { RemoteData } from '../core/data/remote-data'; -import { filter, first, takeUntil } from 'rxjs/operators'; +import { getSucceededRemoteData } from '../core/shared/operators'; @Injectable() -export class CollectionPageResolverService implements Resolve> { - constructor(private collectionService: CollectionDataService, private router: Router) { +export class CollectionPageResolver implements Resolve> { + constructor(private collectionService: CollectionDataService) { } resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable> { + return this.collectionService.findById(route.params.id).pipe( - filter((rd: RemoteData) => rd.hasSucceeded), - first() + getSucceededRemoteData() ); } } diff --git a/src/app/+community-page/community-page-routing.module.ts b/src/app/+community-page/community-page-routing.module.ts index 6fd5cc8cb5..4cc927d341 100644 --- a/src/app/+community-page/community-page-routing.module.ts +++ b/src/app/+community-page/community-page-routing.module.ts @@ -2,12 +2,23 @@ import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; import { CommunityPageComponent } from './community-page.component'; +import { CommunityPageResolver } from './community-page.resolver'; @NgModule({ imports: [ RouterModule.forChild([ - { path: ':id', component: CommunityPageComponent, pathMatch: 'full' } + { + path: ':id', + component: CommunityPageComponent, + pathMatch: 'full', + resolve: { + community: CommunityPageResolver + } + } ]) + ], + providers: [ + CommunityPageResolver, ] }) export class CommunityPageRoutingModule { diff --git a/src/app/+community-page/community-page.component.html b/src/app/+community-page/community-page.component.html index 976e1091e5..637e37af0c 100644 --- a/src/app/+community-page/community-page.component.html +++ b/src/app/+community-page/community-page.component.html @@ -1,11 +1,11 @@ -
+
- diff --git a/src/app/+community-page/community-page.component.ts b/src/app/+community-page/community-page.component.ts index 605d488820..5fea9b01c9 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 { - communityRDObs: Observable>; - logoRDObs: Observable>; + communityRD$: Observable>; + logoRD$: Observable>; private subs: Subscription[] = []; constructor( @@ -35,14 +35,11 @@ export class CommunityPageComponent implements OnInit, OnDestroy { } ngOnInit(): void { - this.route.params.subscribe((params: Params) => { - 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.logoRDObs = community.logo)); - }); + this.communityRD$ = this.route.data.map((data) => data.community); + this.logoRD$ = this.communityRD$ + .map((rd: RemoteData) => rd.payload) + .filter((community: Community) => hasValue(community)) + .flatMap((community: Community) => community.logo); } ngOnDestroy(): void { diff --git a/src/app/+community-page/community-page.resolver.ts b/src/app/+community-page/community-page.resolver.ts new file mode 100644 index 0000000000..1b92b19765 --- /dev/null +++ b/src/app/+community-page/community-page.resolver.ts @@ -0,0 +1,20 @@ +import { Injectable } from '@angular/core'; +import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router'; +import { Observable } from 'rxjs/Observable'; +import { RemoteData } from '../core/data/remote-data'; +import { getSucceededRemoteData } from '../core/shared/operators'; +import { Community } from '../core/shared/community.model'; +import { CommunityDataService } from '../core/data/community-data.service'; + +@Injectable() +export class CommunityPageResolver implements Resolve> { + constructor(private communityService: CommunityDataService) { + } + + resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable> { + + return this.communityService.findById(route.params.id).pipe( + getSucceededRemoteData() + ); + } +} 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 4c44b72602..ba517f0f59 100644 --- a/src/app/+item-page/full/full-item-page.component.html +++ b/src/app/+item-page/full/full-item-page.component.html @@ -1,4 +1,4 @@ -
+
@@ -9,7 +9,7 @@
- + 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 aa1fc4cc78..dafecd748e 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 { - itemRDObs: Observable>; + itemRD$: Observable>; - metadataObs: Observable; + metadata$: Observable; constructor(route: ActivatedRoute, items: ItemDataService, metadataService: MetadataService) { super(route, items, metadataService); @@ -41,14 +41,9 @@ export class FullItemPageComponent extends ItemPageComponent implements OnInit { /*** AoT inheritance fix, will hopefully be resolved in the near future **/ ngOnInit(): void { super.ngOnInit(); - } - - initialize(params) { - super.initialize(params); - this.metadataObs = this.itemRDObs + this.metadata$ = this.itemRD$ .map((rd: RemoteData) => rd.payload) .filter((item: Item) => hasValue(item)) .map((item: Item) => item.metadata); } - } diff --git a/src/app/+item-page/item-page-routing.module.ts b/src/app/+item-page/item-page-routing.module.ts index 9dca4d0f6e..96158b867e 100644 --- a/src/app/+item-page/item-page-routing.module.ts +++ b/src/app/+item-page/item-page-routing.module.ts @@ -3,13 +3,30 @@ import { RouterModule } from '@angular/router'; import { ItemPageComponent } from './simple/item-page.component'; import { FullItemPageComponent } from './full/full-item-page.component'; +import { ItemPageResolver } from './item-page.resolver'; @NgModule({ imports: [ RouterModule.forChild([ - { path: ':id', component: ItemPageComponent, pathMatch: 'full' }, - { path: ':id/full', component: FullItemPageComponent } + { + path: ':id', + component: ItemPageComponent, + pathMatch: 'full', + resolve: { + item: ItemPageResolver + } + }, + { + path: ':id/full', + component: FullItemPageComponent, + resolve: { + item: ItemPageResolver + } + } ]) + ], + providers: [ + ItemPageResolver, ] }) export class ItemPageRoutingModule { diff --git a/src/app/+item-page/item-page.resolver.ts b/src/app/+item-page/item-page.resolver.ts new file mode 100644 index 0000000000..2908a0ce1e --- /dev/null +++ b/src/app/+item-page/item-page.resolver.ts @@ -0,0 +1,19 @@ +import { Injectable } from '@angular/core'; +import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router'; +import { Observable } from 'rxjs/Observable'; +import { RemoteData } from '../core/data/remote-data'; +import { getSucceededRemoteData } from '../core/shared/operators'; +import { ItemDataService } from '../core/data/item-data.service'; +import { Item } from '../core/shared/item.model'; + +@Injectable() +export class ItemPageResolver implements Resolve> { + constructor(private itemService: ItemDataService) { + } + + resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable> { + return this.itemService.findById(route.params.id).pipe( + getSucceededRemoteData() + ); + } +} diff --git a/src/app/+item-page/simple/item-page.component.html b/src/app/+item-page/simple/item-page.component.html index 5f938364e2..98b98a5e32 100644 --- a/src/app/+item-page/simple/item-page.component.html +++ b/src/app/+item-page/simple/item-page.component.html @@ -1,11 +1,11 @@ -
+
- + diff --git a/src/app/+item-page/simple/item-page.component.ts b/src/app/+item-page/simple/item-page.component.ts index 58a056a5dd..7ff304236d 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; - itemRDObs: Observable>; + itemRD$: Observable>; - thumbnailObs: Observable; + thumbnail$: Observable; constructor( private route: ActivatedRoute, @@ -44,19 +44,11 @@ export class ItemPageComponent implements OnInit { } ngOnInit(): void { - this.sub = this.route.params.subscribe((params) => { - this.initialize(params); - }); - } - - initialize(params) { - this.id = +params.id; - this.itemRDObs = this.items.findById(params.id); - this.metadataService.processRemoteData(this.itemRDObs); - this.thumbnailObs = this.itemRDObs + this.itemRD$ = this.route.data.map((data) => data.item); + this.metadataService.processRemoteData(this.itemRD$); + this.thumbnail$ = this.itemRD$ .map((rd: RemoteData) => rd.payload) .filter((item: Item) => hasValue(item)) .flatMap((item: Item) => item.getThumbnail()); } - } diff --git a/src/app/+search-page/search-filters/search-filter/search-facet-filter/search-facet-filter.component.ts b/src/app/+search-page/search-filters/search-filter/search-facet-filter/search-facet-filter.component.ts index c87f96ffba..e0500b555e 100644 --- a/src/app/+search-page/search-filters/search-filter/search-facet-filter/search-facet-filter.component.ts +++ b/src/app/+search-page/search-filters/search-filter/search-facet-filter/search-facet-filter.component.ts @@ -16,6 +16,8 @@ import { SearchFilterConfig } from '../../../search-service/search-filter-config import { SearchService } from '../../../search-service/search.service'; import { FILTER_CONFIG, SearchFilterService } from '../search-filter.service'; import { SearchConfigurationService } from '../../../search-service/search-configuration.service'; +import { getSucceededRemoteData } from '../../../../core/shared/operators'; +import { map } from 'rxjs/operators'; @Component({ selector: 'ds-search-facet-filter', @@ -88,13 +90,16 @@ export class SearchFacetFilterComponent implements OnInit, OnDestroy { return { options, page } }).switchMap(({ options, page }) => { return this.searchService.getFacetValuesFor(this.filterConfig, page, options) - .first((RD) => !RD.isLoading).map((results) => { - return { - values: Observable.of(results), - page: page - }; - } - ); + .pipe( + getSucceededRemoteData(), + map((results) => { + return { + values: Observable.of(results), + page: page + }; + } + ) + ) }); let filterValues = []; this.subs.push(facetValues.subscribe((facetOutcome) => { @@ -250,14 +255,15 @@ export class SearchFacetFilterComponent implements OnInit, OnDestroy { this.searchConfigService.searchOptions.first().subscribe( (options) => { this.filterSearchResults = this.searchService.getFacetValuesFor(this.filterConfig, 1, options, data.toLowerCase()) - .first() - .map( - (rd: RemoteData>) => { - return rd.payload.page.map((facet) => { - return { displayValue: this.getDisplayValue(facet, data), value: facet.value } - }) - } - ); + .pipe( + getSucceededRemoteData(), + map( + (rd: RemoteData>) => { + return rd.payload.page.map((facet) => { + return { displayValue: this.getDisplayValue(facet, data), value: facet.value } + }) + } + )) } ) } else { diff --git a/src/app/+search-page/search-filters/search-filters.component.ts b/src/app/+search-page/search-filters/search-filters.component.ts index 684f4d94fe..f4b63c332f 100644 --- a/src/app/+search-page/search-filters/search-filters.component.ts +++ b/src/app/+search-page/search-filters/search-filters.component.ts @@ -6,6 +6,7 @@ import { Observable } from 'rxjs/Observable'; import { SearchConfigurationService } from '../search-service/search-configuration.service'; import { isNotEmpty } from '../../shared/empty.util'; import { SearchFilterService } from './search-filter/search-filter.service'; +import { getSucceededRemoteData } from '../../core/shared/operators'; @Component({ selector: 'ds-search-filters', @@ -35,7 +36,7 @@ export class SearchFiltersComponent { * @param {SearchFilterService} filterService */ constructor(private searchService: SearchService, private searchConfigService: SearchConfigurationService, private filterService: SearchFilterService) { - this.filters = searchService.getConfig().first((RD) => !RD.isLoading); + this.filters = searchService.getConfig().pipe(getSucceededRemoteData()); this.clearParams = searchConfigService.getCurrentFrontendFilters().map((filters) => { Object.keys(filters).forEach((f) => filters[f] = null); return filters; diff --git a/src/app/+search-page/search-page.component.ts b/src/app/+search-page/search-page.component.ts index 2326355472..4bed660720 100644 --- a/src/app/+search-page/search-page.component.ts +++ b/src/app/+search-page/search-page.component.ts @@ -15,6 +15,7 @@ import { Subscription } from 'rxjs/Subscription'; import { hasValue } from '../shared/empty.util'; import { BehaviorSubject } from 'rxjs/BehaviorSubject'; import { SearchConfigurationService } from './search-service/search-configuration.service'; +import { getSucceededRemoteData } from '../core/shared/operators'; /** * This component renders a simple item page. @@ -78,7 +79,7 @@ export class SearchPageComponent implements OnInit { ngOnInit(): void { this.searchOptions$ = this.searchConfigService.paginatedSearchOptions; this.sub = this.searchOptions$ - .switchMap((options) => this.service.search(options).filter((rd) => !rd.isLoading).first()) + .switchMap((options) => this.service.search(options).pipe(getSucceededRemoteData())) .subscribe((results) => { this.resultsRD$.next(results); }); diff --git a/src/app/+search-page/search-service/search-configuration.service.ts b/src/app/+search-page/search-service/search-configuration.service.ts index 8ad0b684ad..35462debc4 100644 --- a/src/app/+search-page/search-service/search-configuration.service.ts +++ b/src/app/+search-page/search-service/search-configuration.service.ts @@ -10,6 +10,7 @@ import { hasNoValue, isEmpty, isNotEmpty } from '../../shared/empty.util'; import { RemoteData } from '../../core/data/remote-data'; import { BehaviorSubject } from 'rxjs/BehaviorSubject'; import { Subscription } from 'rxjs/Subscription'; +import { getSucceededRemoteData } from '../../core/shared/operators'; /** * Service that performs all actions that have to do with the current search configuration @@ -67,15 +68,17 @@ export class SearchConfigurationService implements OnDestroy { */ constructor(private routeService: RouteService, private route: ActivatedRoute) { - this.defaults.first().subscribe((defRD) => { - const defs = defRD.payload; - this.paginatedSearchOptions = new BehaviorSubject(defs); - this.searchOptions = new BehaviorSubject(defs); + this.defaults + .pipe(getSucceededRemoteData()) + .subscribe((defRD) => { + const defs = defRD.payload; + this.paginatedSearchOptions = new BehaviorSubject(defs); + this.searchOptions = new BehaviorSubject(defs); - this.subs.push(this.subscribeToSearchOptions(defs)); - this.subs.push(this.subscribeToPaginatedSearchOptions(defs)); - } - ) + this.subs.push(this.subscribeToSearchOptions(defs)); + this.subs.push(this.subscribeToPaginatedSearchOptions(defs)); + } + ) } /** diff --git a/src/app/core/shared/operators.ts b/src/app/core/shared/operators.ts index c0b9be3fbf..af41c9c56b 100644 --- a/src/app/core/shared/operators.ts +++ b/src/app/core/shared/operators.ts @@ -1,5 +1,5 @@ import { Observable } from 'rxjs/Observable'; -import { filter, flatMap, map, tap } from 'rxjs/operators'; +import { filter, first, flatMap, map, tap } from 'rxjs/operators'; import { hasValueOperator } from '../../shared/empty.util'; import { DSOSuccessResponse } from '../cache/response-cache.models'; import { ResponseCacheEntry } from '../cache/response-cache.reducer'; @@ -45,3 +45,7 @@ export const configureRequest = (requestService: RequestService) => export const getRemoteDataPayload = () => (source: Observable>): Observable => source.pipe(map((remoteData: RemoteData) => remoteData.payload)); + +export const getSucceededRemoteData = () => + (source: Observable>): Observable> => + source.pipe(first((rd: RemoteData) => rd.hasSucceeded));
{{metadatum.key}} {{metadatum.value}} {{metadatum.language}}