Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Table loading init #2412

Merged
merged 3 commits into from
Jun 19, 2018
Merged

Table loading init #2412

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3b7e40d
WIP table init fix
KlapTrap Jun 18, 2018
e858e0b
Revert "WIP table init fix"
Jun 18, 2018
b67ba2c
Ensure we show loading indicator when initing table
Jun 18, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
204 changes: 103 additions & 101 deletions src/frontend/app/shared/components/list/list.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,130 +1,132 @@
<div class="list-component" *ngIf="initialised$ | async" [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">
<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>
<!-- Multi filters, such as filter app wall by cf/org/space -->
<div class="list-component__header__left--multi-filters" [hidden]="(!(hasRows$ | async) && !filter) || (isAddingOrSelecting$ | async)">
<mat-form-field *ngFor="let multiFilterConfig of multiFilterConfigs" [floatLabel]="'never'">
<mat-select matInput [(value)]="multiFilters[multiFilterConfig.key]" [disabled]="(dataSource.isLoadingPage$ | async) || (multiFilterConfig.loading$ | async) || !(multiFilterConfig.list$ | async) || !(multiFilterConfig.list$ | async).length" (selectionChange)="multiFilterConfig.select.next($event.value)">
<mat-option>All</mat-option>
<mat-option *ngFor="let selectItem of multiFilterConfig.list$ | async" [value]="selectItem.value">
{{selectItem.label}}
</mat-option>
</mat-select>
<mat-placeholder>{{multiFilterConfig.label}}</mat-placeholder>
</mat-form-field>
<app-stateful-icon *ngIf="(multiFilterConfigsLoading$ | async)" [state]="'busy'"></app-stateful-icon>
<div class="list-component" [ngClass]="{'list-component__table': (view$ | async) === 'table', 'list-component__cards': (view$ | async) === 'cards' }">
<mat-progress-bar color="primary" *ngIf="!(initialised$ | async) || (showProgressBar$ | async)" mode="indeterminate"></mat-progress-bar>
<ng-container *ngIf="initialised$ | async">
<div class="list-component__header" [hidden]="!(hasControls$ | async) && ((noRowsNotFiltering$ | async) && noEntries)">
<mat-card [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>
<!-- Multi filters, such as filter app wall by cf/org/space -->
<div class="list-component__header__left--multi-filters" [hidden]="(!(hasRows$ | async) && !filter) || (isAddingOrSelecting$ | async)">
<mat-form-field *ngFor="let multiFilterConfig of multiFilterConfigs" [floatLabel]="'never'">
<mat-select matInput [(value)]="multiFilters[multiFilterConfig.key]" [disabled]="(dataSource.isLoadingPage$ | async) || (multiFilterConfig.loading$ | async) || !(multiFilterConfig.list$ | async) || !(multiFilterConfig.list$ | async).length" (selectionChange)="multiFilterConfig.select.next($event.value)">
<mat-option>All</mat-option>
<mat-option *ngFor="let selectItem of multiFilterConfig.list$ | async" [value]="selectItem.value">
{{selectItem.label}}
</mat-option>
</mat-select>
<mat-placeholder>{{multiFilterConfig.label}}</mat-placeholder>
</mat-form-field>
<app-stateful-icon *ngIf="(multiFilterConfigsLoading$ | async)" [state]="'busy'"></app-stateful-icon>
</div>
</div>
</div>
<div class="list-component__header__right">
<!-- Filter by text input -->
<div class="filter" [hidden]="!config.enableTextFilter || (!(hasRows$ | async) && !filter) || (dataSource.isAdding$ | async)">
<mat-form-field floatLabel="never">
<input matInput [ngModel]="filterString" #filter="ngModel" [disabled]="(dataSource.isLoadingPage$ | async)" name="filter" placeholder="{{config.text?.filter || 'Filter'}}">
</mat-form-field>
</div>
<!-- Sort Button & Drop down -->
<div class="sort" [hidden]="(view$ | async) === 'table' || sortColumns.length < 1 || (isAddingOrSelecting$ | async) || (!(dataSource.isLoadingPage$ | async) && !(hasRowsOrIsFiltering$ | async))">
<mat-form-field>
<mat-select matInput [(ngModel)]="headerSort.value" shouldPlaceholderFloat="false" [disabled]="(disableActions$ | async)" (selectionChange)="updateListSort($event.value, headerSort.direction)">
<mat-option *ngFor="let column of sortColumns" [value]="column.columnId">
{{column.headerCell()}}
</mat-option>
</mat-select>
</mat-form-field>
<button mat-icon-button (click)="updateListSort(headerSort.value, 'desc')" [disabled]="(disableActions$ | async)" *ngIf="headerSort.direction==='asc'">
<div class="list-component__header__right">
<!-- Filter by text input -->
<div class="filter" [hidden]="!config.enableTextFilter || (!(hasRows$ | async) && !filter) || (dataSource.isAdding$ | async)">
<mat-form-field floatLabel="never">
<input matInput [ngModel]="filterString" #filter="ngModel" [disabled]="(dataSource.isLoadingPage$ | async)" name="filter" placeholder="{{config.text?.filter || 'Filter'}}">
</mat-form-field>
</div>
<!-- Sort Button & Drop down -->
<div class="sort" [hidden]="(view$ | async) === 'table' || sortColumns.length < 1 || (isAddingOrSelecting$ | async) || (!(dataSource.isLoadingPage$ | async) && !(hasRowsOrIsFiltering$ | async))">
<mat-form-field>
<mat-select matInput [(ngModel)]="headerSort.value" shouldPlaceholderFloat="false" [disabled]="(disableActions$ | async)" (selectionChange)="updateListSort($event.value, headerSort.direction)">
<mat-option *ngFor="let column of sortColumns" [value]="column.columnId">
{{column.headerCell()}}
</mat-option>
</mat-select>
</mat-form-field>
<button mat-icon-button (click)="updateListSort(headerSort.value, 'desc')" [disabled]="(disableActions$ | async)" *ngIf="headerSort.direction==='asc'">
<mat-icon>sort</mat-icon>
</button>
<button mat-icon-button (click)="updateListSort(headerSort.value, 'asc')" [disabled]="(disableActions$ | async)" *ngIf="headerSort.direction==='desc'">
<button mat-icon-button (click)="updateListSort(headerSort.value, 'asc')" [disabled]="(disableActions$ | async)" *ngIf="headerSort.direction==='desc'">
<mat-icon style="transform: rotate(180deg);">sort</mat-icon>
</button>
</div>
<!-- Multi actions (those applied to selection) -->
<div *ngIf="(dataSource.isSelecting$ | async)">
<ng-container *ngFor="let action of multiActions">
<button mat-icon-button *ngIf="action.visible$ | async" (click)="executeActionMultiple(action)" [disabled]="!(action.enabled$ | async)" matTooltip="{{action.description}}" matTooltipShowDelay="1000">
</div>
<!-- Multi actions (those applied to selection) -->
<div *ngIf="(dataSource.isSelecting$ | async)">
<ng-container *ngFor="let action of multiActions">
<button mat-icon-button *ngIf="action.visible$ | async" (click)="executeActionMultiple(action)" [disabled]="!(action.enabled$ | async)" matTooltip="{{action.description}}" matTooltipShowDelay="1000">
<mat-icon>{{action.icon}}</mat-icon>
</button>
</ng-container>
</div>
<!-- Global actions (those not applied to specific rows) -->
<div *ngIf="!(isAddingOrSelecting$ | async) && globalActions?.length > 0">
<ng-container *ngFor="let action of globalActions">
<button mat-icon-button *ngIf="action.visible$ | async" (click)="executeActionGlobal(action)" [disabled]="!(action.enabled$ | async)" matTooltip="{{action.description}}" matTooltipShowDelay="1000">
</ng-container>
</div>
<!-- Global actions (those not applied to specific rows) -->
<div *ngIf="!(isAddingOrSelecting$ | async) && globalActions?.length > 0">
<ng-container *ngFor="let action of globalActions">
<button mat-icon-button *ngIf="action.visible$ | async" (click)="executeActionGlobal(action)" [disabled]="!(action.enabled$ | async)" matTooltip="{{action.description}}" matTooltipShowDelay="1000">
<mat-icon>{{action.icon}}</mat-icon>
</button>
</ng-container>
</div>
<!-- Add new row form -->
<div *ngIf="addForm && (dataSource.isAdding$ | async) && !(dataSource.isSelecting$ | async)" class="add-container">
<div class="spacer"></div>
<ng-content select="[app-table-add]"></ng-content>
<button mat-icon-button (click)="dataSource.saveAdd()" [disabled]="!safeAddForm().valid">
</ng-container>
</div>
<!-- Add new row form -->
<div *ngIf="addForm && (dataSource.isAdding$ | async) && !(dataSource.isSelecting$ | async)" class="add-container">
<div class="spacer"></div>
<ng-content select="[app-table-add]"></ng-content>
<button mat-icon-button (click)="dataSource.saveAdd()" [disabled]="!safeAddForm().valid">
<mat-icon>done</mat-icon>
</button>
<button mat-icon-button (click)="dataSource.cancelAdd()">
<button mat-icon-button (click)="dataSource.cancelAdd()">
<mat-icon>clear</mat-icon>
</button>
</div>
<!-- Add form button -->
<div *ngIf="addForm && !(isAddingOrSelecting$ | async)">
<button mat-icon-button [disabled]="(dataSource.isLoadingPage$ | async)" (click)="safeAddForm().reset();dataSource.startAdd();">
</div>
<!-- Add form button -->
<div *ngIf="addForm && !(isAddingOrSelecting$ | async)">
<button mat-icon-button [disabled]="(dataSource.isLoadingPage$ | async)" (click)="safeAddForm().reset();dataSource.startAdd();">
<mat-icon>add</mat-icon>
</button>
</div>
<!-- Select table or cards view button -->
<div *ngIf="config.viewType === 'both' && !(isAddingOrSelecting$ | async) && ((dataSource.isLoadingPage$ | async) || (hasRowsOrIsFiltering$ | async))">
<button mat-icon-button [disabled]="(dataSource.isLoadingPage$ | async)" (click)="updateListView('cards');" *ngIf="(view$ | async)==='table'">
</div>
<!-- Select table or cards view button -->
<div *ngIf="config.viewType === 'both' && !(isAddingOrSelecting$ | async) && ((dataSource.isLoadingPage$ | async) || (hasRowsOrIsFiltering$ | async))">
<button mat-icon-button [disabled]="(dataSource.isLoadingPage$ | async)" (click)="updateListView('cards');" *ngIf="(view$ | async)==='table'">
<mat-icon>grid_on</mat-icon>
</button>
<button mat-icon-button [disabled]="(dataSource.isLoadingPage$ | async)" (click)="updateListView('table');" *ngIf="(view$ | async)==='cards'">
<button mat-icon-button [disabled]="(dataSource.isLoadingPage$ | async)" (click)="updateListView('table');" *ngIf="(view$ | async)==='cards'">
<mat-icon>list</mat-icon>
</button>
</div>
<button mat-icon-button *ngIf="dataSource.refresh && !(isAddingOrSelecting$ | async)" [disabled]="dataSource.isLoadingPage$ | async" (click)="refresh()">
</div>
<button mat-icon-button *ngIf="dataSource.refresh && !(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>
</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>

</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()">
<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>
</ng-container>
</div>

<ng-template #refreshButton>
Expand Down
4 changes: 2 additions & 2 deletions src/frontend/app/shared/components/list/list.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import {
takeWhile,
tap,
withLatestFrom,
switchMap,
} from 'rxjs/operators';
import { animate, style, transition, trigger } from '@angular/animations';
import {
Expand Down Expand Up @@ -423,8 +424,7 @@ export class ListComponent<T> implements OnInit, OnDestroy, AfterViewInit {

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