Skip to content

Commit

Permalink
WIP table init fix
Browse files Browse the repository at this point in the history
  • Loading branch information
@KlapTrap
KlapTrap committed Jun 18, 2018
1 parent 923bf8f commit 3b7e40d
Show file tree
Hide file tree
Showing 2 changed files with 69 additions and 63 deletions.
62 changes: 32 additions & 30 deletions src/frontend/app/shared/components/list/list.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<div class="list-component" *ngIf="initialised$ | async" [ngClass]="{'list-component__table': (view$ | async) === 'table', 'list-component__cards': (view$ | async) === 'cards' }">
<div class="list-component" [ngClass]="{'list-component__table': (view$ | async) === 'table', 'list-component__cards': (view$ | async) === 'cards' }">
<mat-progress-bar color="primary" *ngIf="!(hasControls$ | async) && (showProgressBar$ | async)" mode="indeterminate"></mat-progress-bar>
<div class="list-component__header" [hidden]="!(hasControls$ | async) && ((noRowsNotFiltering$ | async) && noEntries)">
<mat-progress-bar color="primary" *ngIf="showProgressBar$ | async" mode="indeterminate"></mat-progress-bar>
<mat-card [ngClass]="{'list-component__header--selected': (dataSource.isSelecting$ | async), 'mat-header-row': (view$ | async) === 'table'}" class="list-component__header-card">
<mat-card *ngIf="initialised$ | async " [ngClass]="{'list-component__header--selected': (dataSource.isSelecting$ | async), 'mat-header-row': (view$ | async) === 'table'}" class="list-component__header-card">
<div class="list-component__header__left">
<div class="list-component__header__left--text" *ngIf="!(isAddingOrSelecting$ | async) && config.text?.title">{{ config.text?.title }}</div>
<div class="list-component__header__left--text" *ngIf="(dataSource.isSelecting$ | async)">{{dataSource.selectedRows.size}} Selected</div>
Expand Down Expand Up @@ -91,39 +91,41 @@
</div>
</mat-card>
</div>
<div class="refresh-button__no-header" *ngIf="dataSource.refresh && !(hasControls$ | async) && (!(hasRowsOrIsFiltering$ | async) && noEntries)">
<button mat-mini-fab *ngIf="!(isAddingOrSelecting$ | async)" [disabled]="dataSource.isLoadingPage$ | async" (click)="refresh()">
<div *ngIf="initialised$ | async">
<div class="refresh-button__no-header" *ngIf="dataSource.refresh && !(hasControls$ | async) && (!(hasRowsOrIsFiltering$ | async) && noEntries)">
<button mat-mini-fab *ngIf="!(isAddingOrSelecting$ | async)" [disabled]="dataSource.isLoadingPage$ | async" (click)="refresh()">
<mat-icon class="refresh-icon" [ngClass]="{refreshing: (isRefreshing$ | async)}" aria-label="Refresh list data">refresh</mat-icon>
</button>
</div>
<div class="list-component__body">
<div class="list-component__body-inner" [hidden]="!(hasRows$ | async)" [@list]="(pageState$ | async)">
<app-cards *ngIf="(view$ | async) === 'cards'" #cards [dataSource]="dataSource" [component]="config.cardComponent" [hidden]="!(hasRows$ | async)"></app-cards>
<app-table *ngIf="(view$ | async) === 'table'" #table [dataSource]="dataSource" [addActions]="(config.getSingleActions() || []).length > 0" [addSelect]="config.allowSelection || (haveMultiActions | async)" [paginationController]="paginationController"
[columns]="columns" [fixedRowHeight]="config.tableFixedRowHeight" [hidden]="!(hasRows$ | async)">
</app-table>
</div>
<mat-card class="list-component__paginator" [hidden]="(hidePaginator$ | async)">
<mat-paginator [pageSizeOptions]="paginatorSettings.pageSizeOptions" [pageSize]="paginatorSettings.pageSize" [pageIndex]="paginatorSettings.pageIndex" showFirstLastButtons="true" [length]="paginatorSettings.length">
</mat-paginator>
</mat-card>
</div>
<ng-template #defaultNoEntries>
<mat-card class="list-component__default-no-entries">
<mat-card-content>
<div class="no-rows">{{config.text?.noEntries || 'There are no entries.'}}</div>
</mat-card-content>
</mat-card>
</ng-template>
<div [hidden]="(showProgressBar$ | async) || (hasRows$ | async)" class="list-component__no-entries">
<ng-container *ngIf="(noRowsNotFiltering$ | async)">
<ng-container *ngTemplateOutlet="noEntries ? noEntries : defaultNoEntries">
<div class="list-component__body">
<div class="list-component__body-inner" [hidden]="!(hasRows$ | async)" [@list]="(pageState$ | async)">
<app-cards *ngIf="(view$ | async) === 'cards'" #cards [dataSource]="dataSource" [component]="config.cardComponent" [hidden]="!(hasRows$ | async)"></app-cards>
<app-table *ngIf="(view$ | async) === 'table'" #table [dataSource]="dataSource" [addActions]="(config.getSingleActions() || []).length > 0" [addSelect]="config.allowSelection || (haveMultiActions | async)" [paginationController]="paginationController"
[columns]="columns" [fixedRowHeight]="config.tableFixedRowHeight" [hidden]="!(hasRows$ | async)">
</app-table>
</div>
<mat-card class="list-component__paginator" [hidden]="(hidePaginator$ | async)">
<mat-paginator [pageSizeOptions]="paginatorSettings.pageSizeOptions" [pageSize]="paginatorSettings.pageSize" [pageIndex]="paginatorSettings.pageIndex" showFirstLastButtons="true" [length]="paginatorSettings.length">
</mat-paginator>
</mat-card>
</div>
<ng-template #defaultNoEntries>
<mat-card class="list-component__default-no-entries">
<mat-card-content>
<div class="no-rows">{{config.text?.noEntries || 'There are no entries.'}}</div>
</mat-card-content>
</mat-card>
</ng-template>
<div [hidden]="(showProgressBar$ | async) || (hasRows$ | async)" class="list-component__no-entries">
<ng-container *ngIf="(noRowsNotFiltering$ | async)">
<ng-container *ngTemplateOutlet="noEntries ? noEntries : defaultNoEntries">
</ng-container>
</ng-container>
</ng-container>
<ng-container *ngIf="(noRowsHaveFilter$ | async)">
<ng-container *ngTemplateOutlet="noEntriesForCurrentFilter ? noEntriesForCurrentFilter : defaultNoEntries">
<ng-container *ngIf="(noRowsHaveFilter$ | async)">
<ng-container *ngTemplateOutlet="noEntriesForCurrentFilter ? noEntriesForCurrentFilter : defaultNoEntries">
</ng-container>
</ng-container>
</ng-container>
</div>
</div>
</div>

Expand Down
70 changes: 37 additions & 33 deletions src/frontend/app/shared/components/list/list.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@

import { of as observableOf, BehaviorSubject, Observable, combineLatest as observableCombineLatest, Subscription } from 'rxjs';
import { of as observableOf, BehaviorSubject, Observable, combineLatest as observableCombineLatest, Subscription, combineLatest } from 'rxjs';

import {
debounceTime,
Expand Down Expand Up @@ -187,9 +187,8 @@ export class ListComponent<T> implements OnInit, OnDestroy, AfterViewInit {
private store: Store<AppState>,
private cd: ChangeDetectorRef,
public config: ListConfig<T>
) { }

ngOnInit() {
) {
this.dataSource = this.config.getDataSource();
if (this.config.getInitialised) {
this.initialised$ = this.config.getInitialised().pipe(
filter(initialised => initialised),
Expand All @@ -198,11 +197,44 @@ export class ListComponent<T> implements OnInit, OnDestroy, AfterViewInit {
publishReplay(1), refCount()
);
} else {
this.initialise();
this.initialised$ = observableOf(true);
this.initialise();
}
this.setupLoadingIndicators();
}

private setupLoadingIndicators() {
const canShowLoading$ = this.dataSource.isLoadingPage$.pipe(
distinctUntilChanged((previousVal, newVal) => !previousVal && newVal),
withLatestFrom(this.dataSource.pagination$),
map(([loading, page]) => page),
map(pag => pag.currentPage),
pairwise(),
map(([oldPage, newPage]) => oldPage !== newPage),
startWith(true)
);

this.showProgressBar$ = combineLatest(
this.dataSource.isLoadingPage$.pipe(startWith(true)),
this.initialised$.pipe(startWith(false))
).pipe(
map(([loading, initialised]) => loading || !initialised),
tap(console.log),
withLatestFrom(canShowLoading$),
map(([loading, canShowLoading]) => {
return canShowLoading && loading;
}),
distinctUntilChanged()
);

this.isRefreshing$ = this.dataSource.isLoadingPage$.pipe(
withLatestFrom(canShowLoading$),
map(([loading, canShowLoading]) => {
return !canShowLoading && loading;
}),
distinctUntilChanged()
);
}

private initialise() {
this.globalActions = this.setupActionsDefaultObservables(
Expand All @@ -213,7 +245,6 @@ export class ListComponent<T> implements OnInit, OnDestroy, AfterViewInit {
);
this.singleActions = this.config.getSingleActions();
this.columns = this.config.getColumns();
this.dataSource = this.config.getDataSource();
this.multiFilterConfigs = this.config.getMultiFiltersConfigs();

// Create convenience observables that make the html clearer
Expand Down Expand Up @@ -420,33 +451,6 @@ export class ListComponent<T> implements OnInit, OnDestroy, AfterViewInit {
return newVal;
})
);

const canShowLoading$ = this.dataSource.isLoadingPage$.pipe(
distinctUntilChanged((previousVal, newVal) => !previousVal && newVal),
withLatestFrom(this.dataSource.pagination$),
map(([loading, page]) => page),
map(pag => pag.currentPage),
pairwise(),
map(([oldPage, newPage]) => oldPage !== newPage),
startWith(true)
);

this.showProgressBar$ = this.dataSource.isLoadingPage$.pipe(
startWith(true),
withLatestFrom(canShowLoading$),
map(([loading, canShowLoading]) => {
return canShowLoading && loading;
}),
distinctUntilChanged()
);

this.isRefreshing$ = this.dataSource.isLoadingPage$.pipe(
withLatestFrom(canShowLoading$),
map(([loading, canShowLoading]) => {
return !canShowLoading && loading;
}),
distinctUntilChanged()
);
}

ngAfterViewInit() {
Expand Down

0 comments on commit 3b7e40d

Please sign in to comment.