reduce async observables with local assignment

This commit is contained in:
William Welling
2017-10-04 19:41:20 -05:00
parent bd6557378d
commit 8932817658
11 changed files with 112 additions and 105 deletions

View File

@@ -1,35 +1,37 @@
<div class="collection-page"> <div class="collection-page">
<div *ngIf="collectionData.hasSucceeded | async" @fadeInOut> <div *ngIf="collectionData.hasSucceeded | async" @fadeInOut>
<!-- Collection Name --> <div *ngIf="collectionData.payload | async; let collectionPayload">
<ds-comcol-page-header <!-- Collection Name -->
[name]="(collectionData.payload | async)?.name"> <ds-comcol-page-header
</ds-comcol-page-header> [name]="collectionPayload.name">
<!-- Collection logo --> </ds-comcol-page-header>
<ds-comcol-page-logo *ngIf="logoData" <!-- Collection logo -->
[logo]="logoData.payload | async" <ds-comcol-page-logo *ngIf="logoData"
[alternateText]="'Collection Logo'"> [logo]="logoData.payload | async"
</ds-comcol-page-logo> [alternateText]="'Collection Logo'">
<!-- Introductionary text --> </ds-comcol-page-logo>
<ds-comcol-page-content <!-- Introductionary text -->
[content]="(collectionData.payload | async)?.introductoryText" <ds-comcol-page-content
[hasInnerHtml]="true"> [content]="collectionPayload.introductoryText"
</ds-comcol-page-content> [hasInnerHtml]="true">
<!-- News --> </ds-comcol-page-content>
<ds-comcol-page-content <!-- News -->
[content]="(collectionData.payload | async)?.sidebarText" <ds-comcol-page-content
[hasInnerHtml]="true" [content]="collectionPayload.sidebarText"
[title]="'community.page.news'"> [hasInnerHtml]="true"
</ds-comcol-page-content> [title]="'community.page.news'">
<!-- Copyright --> </ds-comcol-page-content>
<ds-comcol-page-content <!-- Copyright -->
[content]="(collectionData.payload | async)?.copyrightText" <ds-comcol-page-content
[hasInnerHtml]="true"> [content]="collectionPayload.copyrightText"
</ds-comcol-page-content> [hasInnerHtml]="true">
<!-- Licence --> </ds-comcol-page-content>
<ds-comcol-page-content <!-- Licence -->
[content]="(collectionData.payload | async)?.license" <ds-comcol-page-content
[title]="'collection.page.license'"> [content]="collectionPayload.license"
</ds-comcol-page-content> [title]="'collection.page.license'">
</ds-comcol-page-content>
</div>
</div> </div>
<ds-error *ngIf="collectionData.hasFailed | async" message="Error fetching collection"></ds-error> <ds-error *ngIf="collectionData.hasFailed | async" message="Error fetching collection"></ds-error>
<ds-loading *ngIf="collectionData.isLoading | async" message="Loading collection..."></ds-loading> <ds-loading *ngIf="collectionData.isLoading | async" message="Loading collection..."></ds-loading>

View File

@@ -27,7 +27,7 @@ import { fadeIn, fadeInOut } from '../shared/animations/fade';
selector: 'ds-collection-page', selector: 'ds-collection-page',
styleUrls: ['./collection-page.component.scss'], styleUrls: ['./collection-page.component.scss'],
templateUrl: './collection-page.component.html', templateUrl: './collection-page.component.html',
animations:[ animations: [
fadeIn, fadeIn,
fadeInOut fadeInOut
] ]

View File

@@ -1,28 +1,30 @@
<div class="community-page" *ngIf="communityData.hasSucceeded | async" @fadeInOut> <div class="community-page" *ngIf="communityData.hasSucceeded | async" @fadeInOut>
<!-- Community name --> <div *ngIf="communityData.payload | async; let communityPayload">
<ds-comcol-page-header [name]="(communityData.payload | async)?.name"></ds-comcol-page-header> <!-- Community name -->
<!-- Community logo --> <ds-comcol-page-header [name]="communityPayload.name"></ds-comcol-page-header>
<ds-comcol-page-logo *ngIf="logoData" <!-- Community logo -->
[logo]="logoData.payload | async" <ds-comcol-page-logo *ngIf="logoData"
[alternateText]="'Community Logo'"> [logo]="logoData.payload | async"
</ds-comcol-page-logo> [alternateText]="'Community Logo'">
<!-- Introductionary text --> </ds-comcol-page-logo>
<ds-comcol-page-content <!-- Introductionary text -->
[content]="(communityData.payload | async)?.introductoryText" <ds-comcol-page-content
[hasInnerHtml]="true"> [content]="communityPayload.introductoryText"
</ds-comcol-page-content> [hasInnerHtml]="true">
<!-- News --> </ds-comcol-page-content>
<ds-comcol-page-content <!-- News -->
[content]="(communityData.payload | async)?.sidebarText" <ds-comcol-page-content
[hasInnerHtml]="true" [content]="communityPayload.sidebarText"
[title]="'community.page.news'"> [hasInnerHtml]="true"
</ds-comcol-page-content> [title]="'community.page.news'">
<!-- Copyright --> </ds-comcol-page-content>
<ds-comcol-page-content <!-- Copyright -->
[content]="(communityData.payload | async)?.copyrightText" <ds-comcol-page-content
[hasInnerHtml]="true"> [content]="communityPayload.copyrightText"
</ds-comcol-page-content> [hasInnerHtml]="true">
<ds-community-page-sub-collection-list></ds-community-page-sub-collection-list> </ds-comcol-page-content>
<ds-community-page-sub-collection-list></ds-community-page-sub-collection-list>
</div>
</div> </div>
<ds-error *ngIf="communityData.hasFailed | async" message="Error fetching community"></ds-error> <ds-error *ngIf="communityData.hasFailed | async" message="Error fetching community"></ds-error>
<ds-loading *ngIf="communityData.isLoading | async" message="Loading community..."></ds-loading> <ds-loading *ngIf="communityData.isLoading | async" message="Loading community..."></ds-loading>

View File

@@ -15,7 +15,7 @@ import { fadeInOut } from '../shared/animations/fade';
selector: 'ds-community-page', selector: 'ds-community-page',
styleUrls: ['./community-page.component.scss'], styleUrls: ['./community-page.component.scss'],
templateUrl: './community-page.component.html', templateUrl: './community-page.component.html',
animations:[fadeInOut] animations: [fadeInOut]
}) })
export class CommunityPageComponent implements OnInit, OnDestroy { export class CommunityPageComponent implements OnInit, OnDestroy {
communityData: RemoteData<Community>; communityData: RemoteData<Community>;

View File

@@ -13,7 +13,7 @@ import { fadeInOut } from '../../shared/animations/fade';
selector: 'ds-top-level-community-list', selector: 'ds-top-level-community-list',
styleUrls: ['./top-level-community-list.component.scss'], styleUrls: ['./top-level-community-list.component.scss'],
templateUrl: './top-level-community-list.component.html', templateUrl: './top-level-community-list.component.html',
animations:[fadeInOut] animations: [fadeInOut]
}) })
export class TopLevelCommunityListComponent { export class TopLevelCommunityListComponent {
topLevelCommunities: RemoteData<Community[]>; topLevelCommunities: RemoteData<Community[]>;

View File

@@ -1,22 +1,24 @@
<div class="item-page" *ngIf="item.hasSucceeded | async" @fadeInOut> <div class="item-page" *ngIf="item.hasSucceeded | async" @fadeInOut>
<ds-item-page-title-field [item]="item.payload | async"></ds-item-page-title-field> <div *ngIf="item.payload | async; let itemPayload">
<div class="row"> <ds-item-page-title-field [item]="itemPayload"></ds-item-page-title-field>
<div class="col-xs-12 col-md-4"> <div class="row">
<ds-metadata-field-wrapper> <div class="col-xs-12 col-md-4">
<ds-thumbnail [thumbnail]="thumbnail | async"></ds-thumbnail> <ds-metadata-field-wrapper>
</ds-metadata-field-wrapper> <ds-thumbnail [thumbnail]="thumbnail | async"></ds-thumbnail>
<ds-item-page-file-section [item]="item.payload | async"></ds-item-page-file-section> </ds-metadata-field-wrapper>
<ds-item-page-date-field [item]="item.payload | async"></ds-item-page-date-field> <ds-item-page-file-section [item]="itemPayload"></ds-item-page-file-section>
<ds-item-page-author-field [item]="item.payload | async"></ds-item-page-author-field> <ds-item-page-date-field [item]="itemPayload"></ds-item-page-date-field>
</div> <ds-item-page-author-field [item]="itemPayload"></ds-item-page-author-field>
<div class="col-xs-12 col-md-6"> </div>
<ds-item-page-abstract-field [item]="item.payload | async"></ds-item-page-abstract-field> <div class="col-xs-12 col-md-6">
<ds-item-page-uri-field [item]="item.payload | async"></ds-item-page-uri-field> <ds-item-page-abstract-field [item]="itemPayload"></ds-item-page-abstract-field>
<ds-item-page-collections [item]="item.payload | async"></ds-item-page-collections> <ds-item-page-uri-field [item]="itemPayload"></ds-item-page-uri-field>
<div> <ds-item-page-collections [item]="itemPayload"></ds-item-page-collections>
<a class="btn btn-outline-primary" [routerLink]="['/items/' + (item.payload | async)?.id + '/full']"> <div>
{{"item.page.link.full" | translate}} <a class="btn btn-outline-primary" [routerLink]="['/items/' + itemPayload.id + '/full']">
</a> {{"item.page.link.full" | translate}}
</a>
</div>
</div> </div>
</div> </div>
</div> </div>

View File

@@ -20,7 +20,7 @@ import { fadeInOut } from '../../shared/animations/fade';
selector: 'ds-item-page', selector: 'ds-item-page',
styleUrls: ['./item-page.component.scss'], styleUrls: ['./item-page.component.scss'],
templateUrl: './item-page.component.html', templateUrl: './item-page.component.html',
animations:[fadeInOut] animations: [fadeInOut]
}) })
export class ItemPageComponent implements OnInit { export class ItemPageComponent implements OnInit {

View File

@@ -1,19 +1,20 @@
<ds-pagination [paginationOptions]="config" <ds-pagination
[pageInfoState]="pageInfo" [paginationOptions]="config"
[collectionSize]="(pageInfo | async)?.totalElements" [pageInfoState]="pageInfo"
[sortOptions]="sortConfig" [collectionSize]="(pageInfo | async)?.totalElements"
[hideGear]="hideGear" [sortOptions]="sortConfig"
[hidePagerWhenSinglePage]="hidePagerWhenSinglePage" [hideGear]="hideGear"
(pageChange)="onPageChange($event)" [hidePagerWhenSinglePage]="hidePagerWhenSinglePage"
(pageSizeChange)="onPageSizeChange($event)" (pageChange)="onPageChange($event)"
(sortDirectionChange)="onSortDirectionChange($event)" (pageSizeChange)="onPageSizeChange($event)"
(sortFieldChange)="onSortDirectionChange($event)" (sortDirectionChange)="onSortDirectionChange($event)"
(paginationChange)="onPaginationChange($event)"> (sortFieldChange)="onSortDirectionChange($event)"
<ul *ngIf="objects.hasSucceeded | async" @fadeIn> <!--class="list-unstyled"--> (paginationChange)="onPaginationChange($event)">
<li *ngFor="let object of (objects.payload | async) | paginate: { itemsPerPage: (pageInfo | async)?.elementsPerPage, currentPage: (pageInfo | async)?.currentPage, totalItems: (pageInfo | async)?.totalElements }"> <ul *ngIf="objects.hasSucceeded | async" @fadeIn> <!--class="list-unstyled"-->
<ds-wrapper-list-element [object]="object"></ds-wrapper-list-element> <li *ngFor="let object of (objects.payload | async) | paginate: { itemsPerPage: (pageInfo | async)?.elementsPerPage, currentPage: (pageInfo | async)?.currentPage, totalItems: (pageInfo | async)?.totalElements }">
</li> <ds-wrapper-list-element [object]="object"></ds-wrapper-list-element>
</ul> </li>
<ds-error *ngIf="objects.hasFailed | async" message="Error fetching"></ds-error> </ul>
<ds-loading *ngIf="objects.isLoading | async" message="Loading..."></ds-loading> <ds-error *ngIf="objects.hasFailed | async" message="Error fetching"></ds-error>
<ds-loading *ngIf="objects.isLoading | async" message="Loading..."></ds-loading>
</ds-pagination> </ds-pagination>

View File

@@ -10,23 +10,23 @@ import {
import { Observable } from 'rxjs/Observable'; import { Observable } from 'rxjs/Observable';
import { RemoteData } from '../../core/data/remote-data'; import { RemoteData } from '../core/data/remote-data';
import { PageInfo } from '../../core/shared/page-info.model'; import { PageInfo } from '../core/shared/page-info.model';
import { PaginationComponentOptions } from '../pagination/pagination-component-options.model'; import { PaginationComponentOptions } from '../shared/pagination/pagination-component-options.model';
import { SortOptions, SortDirection } from '../../core/cache/models/sort-options.model'; import { SortOptions, SortDirection } from '../core/cache/models/sort-options.model';
import { ListableObject } from '../../object-list/listable-object/listable-object.model'; import { ListableObject } from '../object-list/listable-object/listable-object.model';
import { fadeIn } from '../../shared/animations/fade'; import { fadeIn } from '../shared/animations/fade';
@Component({ @Component({
changeDetection: ChangeDetectionStrategy.Default, changeDetection: ChangeDetectionStrategy.Default,
encapsulation: ViewEncapsulation.Emulated, encapsulation: ViewEncapsulation.Emulated,
selector: 'ds-object-list', selector: 'ds-object-list',
styleUrls: ['../../object-list/object-list.component.scss'], styleUrls: ['./object-list.component.scss'],
templateUrl: '../../object-list/object-list.component.html', templateUrl: './object-list.component.html',
animations:[fadeIn] animations: [fadeIn]
}) })
export class ObjectListComponent implements OnChanges, OnInit { export class ObjectListComponent implements OnChanges, OnInit {

View File

@@ -13,7 +13,7 @@ import { Observable } from 'rxjs/Observable';
@Component({ @Component({
selector: 'ds-search-form', selector: 'ds-search-form',
styleUrls: ['./search-form.component.scss'], styleUrls: ['./search-form.component.scss'],
templateUrl: './search-form.component.html', templateUrl: './search-form.component.html'
}) })
export class SearchFormComponent { export class SearchFormComponent {
@Input() query: string; @Input() query: string;

View File

@@ -22,7 +22,7 @@ import { CommunityListElementComponent } from '../object-list/community-list-ele
import { ErrorComponent } from './error/error.component'; import { ErrorComponent } from './error/error.component';
import { LoadingComponent } from './loading/loading.component'; import { LoadingComponent } from './loading/loading.component';
import { ItemListElementComponent } from '../object-list/item-list-element/item-list-element.component'; import { ItemListElementComponent } from '../object-list/item-list-element/item-list-element.component';
import { ObjectListComponent } from './object-list/object-list.component'; import { ObjectListComponent } from '../object-list/object-list.component';
import { ObjectListElementComponent } from '../object-list/object-list-element/object-list-element.component'; import { ObjectListElementComponent } from '../object-list/object-list-element/object-list-element.component';
import { PaginationComponent } from './pagination/pagination.component'; import { PaginationComponent } from './pagination/pagination.component';
import { ThumbnailComponent } from '../thumbnail/thumbnail.component'; import { ThumbnailComponent } from '../thumbnail/thumbnail.component';