inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-31 17:38:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-524] Datatable loading state (#1958)

Browse Source 
* loading state datatable

* modify readme after review
This commit is contained in:
Eugenio Romano
2017-06-14 20:18:52 +01:00
committed by Eugenio Romano
parent 069345a028
commit f3d5b88671
17 changed files with 305 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
ng2-components/ng2-alfresco-datatable/README.md
View File

@@ -123,6 +123,7 @@ export class DataTableDemo {
| fallbackThumbnail | string | | Fallback image for row ehre thubnail is missing|
| contextMenu | boolean | false | Toggles custom context menu for the component |
| allowDropFiles | boolean | false | Toggle file drop support for rows (see **ng2-alfresco-core/UploadDirective** for more details) |
| loading | boolean | false | Flag that indicate if the datable is in loading state and need to show the loading template. Read the documentation above to know how to configure a loading template |
### DataColumn Properties
@@ -176,7 +177,9 @@ onRowClick(event) {
![](docs/assets/datatable-dom-events.png)
### Advanced usage
### Empty content template
You can add a template that will be showed when there are no result in your datatable:
```html
<alfresco-datatable
@@ -188,14 +191,56 @@ onRowClick(event) {
(executeRowAction)="onExecuteRowAction($event)"
(rowClick)="onRowClick($event)"
(rowDblClick)="onRowDblClick($event)">
<no-content-template>
<template>
<!--Add your custom empty template here-->
<ng-template>
<h1>Sorry, no content</h1>
</template>
</ng-template>
</no-content-template>
</alfresco-datatable>
```
### Loading content template
You can add a template that will be showed during the loading of your data:
```html
<alfresco-datatable
[data]="data"
[actions]="contentActions"
[multiselect]="multiselect"
[loading]=isLoading()"
(showRowContextMenu)="onShowRowContextMenu($event)"
(showRowActionsMenu)="onShowRowActionsMenu($event)"
(executeRowAction)="onExecuteRowAction($event)"
(rowClick)="onRowClick($event)"
(rowDblClick)="onRowDblClick($event)">
<loading-content-template>
<ng-template>
<!--Add your custom loading template here-->
<md-progress-spinner
class="adf-document-list-loading-margin"
[color]="'primary'"
[mode]="'indeterminate'">
</md-progress-spinner>
</ng-template>
</loading-content-template>
</alfresco-datatable>
```
```js
isLoading(): boolean {
//your custom logic to identify if you are in a loading state
}
```
Note: the `<loading-content-template>` and `<no-content-template>` can be used together
#### Column Templates
It is possible assigning a custom column template like the following:

4
ng2-components/ng2-alfresco-datatable/index.ts
View File

@@ -26,7 +26,8 @@ export * from './src/components/datatable/data-cell.event';
export * from './src/components/datatable/data-row-action.event';
import { DataTableComponent } from './src/components/datatable/datatable.component';
import { NoContentTemplateComponent } from './src/components/datatable/no-content-template.component';
import { NoContentTemplateComponent } from './src/directives/no-content-template.component';
import { LoadingContentTemplateComponent } from './src/directives/loading-template.component';
import { PaginationComponent } from './src/components/pagination/pagination.component';
import { DataTableCellComponent } from './src/components/datatable/datatable-cell.component';
@@ -34,6 +35,7 @@ export const ALFRESCO_DATATABLE_DIRECTIVES: [any] = [
DataTableComponent,
DataTableCellComponent,
NoContentTemplateComponent,
LoadingContentTemplateComponent,
PaginationComponent
];

13
ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.css
View File

@@ -26,11 +26,20 @@
/* Empty folder */
:host .no-content-container {
:host .adf-no-content-container {
padding: 0 !important;
}
:host .no-content-container > img {
:host .adf-no-content-container > img {
width: 100%;
}
/* Loading folder */
:host .adf-loading-content-container {
padding: 0 !important;
}
:host .adf-loading-content-container > img {
width: 100%;
}

25
ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.html
View File

@@ -38,7 +38,8 @@
<!-- Actions (left) -->
<td *ngIf="actions && actionsPosition === 'left'" class="alfresco-datatable__actions-cell">
<button [id]="'action_menu_' + idx" alfresco-mdl-button class="mdl-button--icon" [attr.data-automation-id]="actions_menu">
<button [id]="'action_menu_' + idx" alfresco-mdl-button class="mdl-button--icon"
[attr.data-automation-id]="actions_menu">
<i class="material-icons">more_vert</i>
</button>
<ul alfresco-mdl-menu class="mdl-menu--bottom-left"
@@ -77,10 +78,12 @@
src="{{ data.getValue(row, col) }}"
(error)="onImageLoadingError($event)">
</div>
<div *ngSwitchCase="'date'" class="cell-value" [attr.data-automation-id]="'date_' + data.getValue(row, col)">
<div *ngSwitchCase="'date'" class="cell-value"
[attr.data-automation-id]="'date_' + data.getValue(row, col)">
<alfresco-datatable-cell [data]="data" [column]="col" [row]="row"></alfresco-datatable-cell>
</div>
<div *ngSwitchCase="'text'" class="cell-value" [attr.data-automation-id]="'text_' + data.getValue(row, col)">
<div *ngSwitchCase="'text'" class="cell-value"
[attr.data-automation-id]="'text_' + data.getValue(row, col)">
<alfresco-datatable-cell [data]="data" [column]="col" [row]="row"></alfresco-datatable-cell>
</div>
<span *ngSwitchDefault class="cell-value">
@@ -98,7 +101,8 @@
<!-- Actions (right) -->
<td *ngIf="actions && actionsPosition === 'right'" class="alfresco-datatable__actions-cell">
<button [id]="'action_menu_' + idx" alfresco-mdl-button class="mdl-button--icon" [attr.data-automation-id]="actions_menu">
<button [id]="'action_menu_' + idx" alfresco-mdl-button class="mdl-button--icon"
[attr.data-automation-id]="actions_menu">
<i class="material-icons">more_vert</i>
</button>
<ul alfresco-mdl-menu class="mdl-menu--bottom-right"
@@ -113,8 +117,8 @@
</td>
</tr>
<tr *ngIf="data.getRows().length === 0">
<td class="mdl-data-table__cell--non-numeric no-content-container"
<tr *ngIf="data.getRows().length === 0 && !loading">
<td class="mdl-data-table__cell--non-numeric adf-no-content-container"
[attr.colspan]="1 + data.getColumns().length">
<ng-template *ngIf="noContentTemplate"
ngFor [ngForOf]="[data]"
@@ -122,5 +126,14 @@
</ng-template>
</td>
</tr>
<tr *ngIf="loading">
<td class="mdl-data-table__cell--non-numeric adf-loading-content-container"
[attr.colspan]="1 + data.getColumns().length">
<ng-template *ngIf="loadingTemplate"
ngFor [ngForOf]="[data]"
[ngForTemplate]="loadingTemplate">
</ng-template>
</td>
</tr>
</tbody>
</table>

22
ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.ts
View File

@@ -15,20 +15,7 @@
* limitations under the License.
*/
import {
Component,
OnChanges,
SimpleChange,
SimpleChanges,
Input,
Output,
EventEmitter,
ElementRef,
TemplateRef,
AfterContentInit,
ContentChild,
Optional
} from '@angular/core';
import { Component, OnChanges, SimpleChange, SimpleChanges, Input, Output, EventEmitter, ElementRef, TemplateRef, AfterContentInit, ContentChild, Optional } from '@angular/core';
import { DataTableAdapter, DataRow, DataColumn, DataSorting, DataRowEvent, ObjectDataTableAdapter, ObjectDataRow } from '../../data/index';
import { DataCellEvent } from './data-cell.event';
import { DataRowActionEvent } from './data-row-action.event';
@@ -94,7 +81,12 @@ export class DataTableComponent implements AfterContentInit, OnChanges {
@Output()
executeRowAction: EventEmitter<DataRowActionEvent> = new EventEmitter<DataRowActionEvent>();
noContentTemplate: TemplateRef<any>;
@Input()
loading: boolean = false;
public noContentTemplate: TemplateRef<any>;
public loadingTemplate: TemplateRef<any>;
isSelectAllChecked: boolean = false;
constructor(@Optional() private el: ElementRef) {

1
ng2-components/ng2-alfresco-datatable/src/components/datatable/index.ts
View File

@@ -16,5 +16,4 @@
*/
export * from './datatable.component';
export * from './no-content-template.component';
export * from './datatable-cell.component';

19
ng2-components/ng2-alfresco-datatable/src/directives/index.ts Normal file
View File

@@ -0,0 +1,19 @@
/*!
* @license
* Copyright 2016 Alfresco Software, Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export * from './no-content-template.component';
export * from './loading-template.component';

41
ng2-components/ng2-alfresco-datatable/src/directives/loading-template.component.spec.ts Normal file
View File

@@ -0,0 +1,41 @@
/*!
* @license
* Copyright 2016 Alfresco Software, Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { LoadingContentTemplateComponent } from './loading-template.component';
import { Injector } from '@angular/core';
import { getTestBed, TestBed } from '@angular/core/testing';
import { DataTableComponent } from '../components/datatable/datatable.component';
describe('LoadingContentTemplateComponent', () => {
let injector: Injector;
let loadingContentTemplateComponent: LoadingContentTemplateComponent;
beforeEach(() => {
TestBed.configureTestingModule({
providers: [
LoadingContentTemplateComponent,
DataTableComponent
]
});
injector = getTestBed();
loadingContentTemplateComponent = injector.get(LoadingContentTemplateComponent);
});
it('is defined', () => {
expect(loadingContentTemplateComponent).toBeDefined();
});
});

36
ng2-components/ng2-alfresco-datatable/src/directives/loading-template.component.ts Normal file
View File

@@ -0,0 +1,36 @@
/*!
* @license
* Copyright 2016 Alfresco Software, Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { Directive, ContentChild, TemplateRef, AfterContentInit } from '@angular/core';
import { DataTableComponent } from '../components/datatable/datatable.component';
@Directive({
selector: 'loading-content-template'
})
export class LoadingContentTemplateComponent implements AfterContentInit {
@ContentChild(TemplateRef)
template: any;
constructor(private dataTable: DataTableComponent) {
}
ngAfterContentInit() {
this.dataTable.loadingTemplate = this.template;
}
}

4
ng2-components/ng2-alfresco-datatable/src/components/datatable/no-content-template.component.spec.ts → ng2-components/ng2-alfresco-datatable/src/directives/no-content-template.component.spec.ts
View File

@@ -15,10 +15,10 @@
* limitations under the License.
*/
import { NoContentTemplateComponent } from '../datatable/no-content-template.component';
import { NoContentTemplateComponent } from './no-content-template.component';
import { Injector } from '@angular/core';
import { getTestBed, TestBed } from '@angular/core/testing';
import { DataTableComponent } from './datatable.component';
import { DataTableComponent } from '../components/datatable/datatable.component';
describe('NoContentTemplateComponent', () => {
let injector: Injector;

12
ng2-components/ng2-alfresco-datatable/src/components/datatable/no-content-template.component.ts → ng2-components/ng2-alfresco-datatable/src/directives/no-content-template.component.ts
View File

@@ -15,13 +15,8 @@
* limitations under the License.
*/
import {
Directive,
ContentChild,
TemplateRef,
AfterContentInit
} from '@angular/core';
import { DataTableComponent } from './datatable.component';
import { Directive, ContentChild, TemplateRef, AfterContentInit } from '@angular/core';
import { DataTableComponent } from '../components/datatable/datatable.component';
@Directive({
selector: 'no-content-template'
@@ -31,8 +26,7 @@ export class NoContentTemplateComponent implements AfterContentInit {
@ContentChild(TemplateRef)
template: any;
constructor(
private dataTable: DataTableComponent) {
constructor(private dataTable: DataTableComponent) {
}
ngAfterContentInit() {

1
ng2-components/ng2-alfresco-documentlist/README.md
View File

@@ -689,6 +689,7 @@ DocumentList emits the following events:
| folderChange | emitted once current display folder has changed |
| preview | emitted when user acts upon files with either single or double click (depends on `navigation-mode`), recommended for Viewer components integration |
| permissionError | emitted when user is attempting to create a folder via action menu but it doesn't have the permission to do it |
| ready | emitted when the documentList is ready and load all the elements|
## Advanced usage and customization

5
ng2-components/ng2-alfresco-documentlist/index.ts
View File

@@ -16,7 +16,7 @@
*/
import { NgModule, ModuleWithProviders } from '@angular/core';
import { MdMenuModule, MdButtonModule, MdIconModule } from '@angular/material';
import { MdMenuModule, MdButtonModule, MdIconModule, MdProgressSpinnerModule } from '@angular/material';
import { CoreModule } from 'ng2-alfresco-core';
import { DataTableModule } from 'ng2-alfresco-datatable';
@@ -79,7 +79,8 @@ export const DOCUMENT_LIST_PROVIDERS: any[] = [
DataTableModule,
MdMenuModule,
MdButtonModule,
MdIconModule
MdIconModule,
MdProgressSpinnerModule
],
declarations: [
...DOCUMENT_LIST_DIRECTIVES

4
ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.css
View File

@@ -42,3 +42,7 @@
object-fit: contain;
margin-top: 17px;
}
.adf-document-list-loading-margin {
margin: auto;
}

24
ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.html
View File

@@ -16,6 +16,7 @@
[contextMenu]="contextMenuActions"
[rowStyle]="rowStyle"
[rowStyleClass]="rowStyleClass"
[loading]="loading"
(showRowContextMenu)="onShowRowContextMenu($event)"
(showRowActionsMenu)="onShowRowActionsMenu($event)"
(executeRowAction)="onExecuteRowAction($event)"
@@ -24,15 +25,26 @@
<div *ngIf="!isEmptyTemplateDefined()">
<no-content-template>
<ng-template>
<div class="document-list_empty_template">
<div class="document-list__this-space-is-empty">This folder is empty</div>
<div class="document-list__drag-drop">Drag and Drop</div>
<div class="document-list__any-files-here-to-add">any files here to add</div>
<img [src]="emptyFolderImageUrl" class="document-list__empty_doc_lib">
</div>
<!--put your cutom template here-->
<md-progress-spinner
class="adf-document-list-loading-margin"
[color]="'primary'"
[mode]="'indeterminate'">
</md-progress-spinner>
</ng-template>
</no-content-template>
</div>
<div>
<loading-content-template>
<ng-template>
<md-progress-spinner id="adf-document-list-loading"
class="adf-document-list-loading-margin"
[color]="'primary'"
[mode]="'indeterminate'">
</md-progress-spinner>
</ng-template>
</loading-content-template>
</div>
</alfresco-datatable>
<alfresco-pagination *ngIf="isPaginationEnabled()"
(changePageSize)="onChangePageSize($event)"

24
ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.spec.ts
View File

@@ -28,6 +28,7 @@ import { ShareDataRow, RowFilter, ImageResolver } from './../data/share-datatabl
import { DataTableModule } from 'ng2-alfresco-datatable';
import { DocumentMenuActionComponent } from './document-menu-action.component';
import { Observable } from 'rxjs/Rx';
import { MdProgressSpinnerModule } from '@angular/material';
declare let jasmine: any;
@@ -100,7 +101,8 @@ describe('DocumentList', () => {
TestBed.configureTestingModule({
imports: [
CoreModule.forRoot(),
DataTableModule.forRoot()
DataTableModule.forRoot(),
MdProgressSpinnerModule
],
declarations: [
DocumentListComponent,
@@ -199,6 +201,19 @@ describe('DocumentList', () => {
});
it('should show the loading state during the loading of new elements', (done) => {
documentList.ngAfterContentInit();
documentList.node = new NodePaging();
fixture.detectChanges();
fixture.whenStable().then(() => {
fixture.detectChanges();
expect(element.querySelector('#adf-document-list-loading')).toBeDefined();
done();
});
});
it('should not execute action without node provided', () => {
let action = new ContentActionModel();
action.handler = function () {
@@ -788,7 +803,7 @@ describe('DocumentList', () => {
expect(documentList.loadFolderNodesByFolderNodeId).toHaveBeenCalled();
});
it('should load previous page if there are no other elements in multi page table', async(() => {
it('should load previous page if there are no other elements in multi page table', () => {
documentList.currentFolderId = '1d26e465-dea3-42f3-b415-faa8364b9692';
documentList.folderNode = new NodeMinimal();
documentList.folderNode.id = '1d26e465-dea3-42f3-b415-faa8364b9692';
@@ -799,11 +814,12 @@ describe('DocumentList', () => {
fixture.detectChanges();
fixture.whenStable().then(() => {
documentList.ready.subscribe(() => {
fixture.detectChanges();
let rowElement = element.querySelector('[data-automation-id="b_txt_file.rtf"]');
expect(rowElement).toBeDefined();
expect(rowElement).not.toBeNull();
done();
});
jasmine.Ajax.requests.at(0).respondWith({
@@ -817,5 +833,5 @@ describe('DocumentList', () => {
contentType: 'application/json',
responseText: JSON.stringify(fakeNodeAnswerWithEntries)
});
}));
});
});

53
ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.ts
View File

@@ -146,6 +146,9 @@ export class DocumentListComponent implements OnInit, OnChanges, AfterContentIni
@Output()
success: EventEmitter<any> = new EventEmitter();
@Output()
ready: EventEmitter<any> = new EventEmitter();
@Output()
error: EventEmitter<any> = new EventEmitter();
@@ -161,6 +164,8 @@ export class DocumentListComponent implements OnInit, OnChanges, AfterContentIni
contextActionHandler: Subject<any> = new Subject();
data: ShareDataTableAdapter;
loading: boolean = false;
constructor(private documentListService: DocumentListService,
private ngZone: NgZone,
private translateService: AlfrescoTranslationService,
@@ -223,19 +228,12 @@ export class DocumentListComponent implements OnInit, OnChanges, AfterContentIni
ngOnChanges(changes: SimpleChanges) {
if (changes['folderNode'] && changes['folderNode'].currentValue) {
this.loadFolder();
return;
}
if (changes['currentFolderId'] && changes['currentFolderId'].currentValue) {
} else if (changes['currentFolderId'] && changes['currentFolderId'].currentValue) {
this.loadFolderByNodeId(changes['currentFolderId'].currentValue);
return;
}
if (changes['node'] && changes['node'].currentValue) {
} else if (changes['node'] && changes['node'].currentValue) {
if (this.data) {
this.data.loadPage(changes['node'].currentValue);
}
return;
}
}
@@ -243,17 +241,11 @@ export class DocumentListComponent implements OnInit, OnChanges, AfterContentIni
this.ngZone.run(() => {
if (this.folderNode) {
this.loadFolder();
return;
}
if (this.currentFolderId) {
} else if (this.currentFolderId) {
this.loadFolderByNodeId(this.currentFolderId);
return;
}
if (this.node) {
} else if (this.node) {
this.data.loadPage(this.node);
return;
this.ready.emit();
}
});
}
@@ -356,6 +348,7 @@ export class DocumentListComponent implements OnInit, OnChanges, AfterContentIni
}
loadFolder() {
this.loading = true;
let nodeId = this.folderNode ? this.folderNode.id : this.currentFolderId;
if (nodeId) {
this.loadFolderNodesByFolderNodeId(nodeId, this.pageSize, this.skipCount).catch(err => this.error.emit(err));
@@ -364,6 +357,7 @@ export class DocumentListComponent implements OnInit, OnChanges, AfterContentIni
// gets folder node and its content
loadFolderByNodeId(nodeId: string) {
this.loading = true;
this.documentListService.getFolderNode(nodeId).then(node => {
this.folderNode = node;
this.currentFolderId = node.id;
@@ -375,7 +369,6 @@ export class DocumentListComponent implements OnInit, OnChanges, AfterContentIni
loadFolderNodesByFolderNodeId(id: string, maxItems: number, skipCount: number): Promise<any> {
return new Promise((resolve, reject) => {
if (id && this.documentListService) {
this.documentListService
.getFolder(null, {
maxItems: maxItems,
@@ -384,33 +377,28 @@ export class DocumentListComponent implements OnInit, OnChanges, AfterContentIni
})
.subscribe(
val => {
if (this.checkIfTheCurrentPageIsEmpty(val, skipCount)) {
if (this.isCurrentPageEmpty(val, skipCount)) {
this.updateSkipCount(skipCount - maxItems);
this.loadFolderNodesByFolderNodeId(id, maxItems, skipCount - maxItems);
this.loadFolderNodesByFolderNodeId(id, maxItems, skipCount - maxItems).then(() => {
resolve(true);
}, () => {
reject(error);
});
} else {
this.data.loadPage(<NodePaging>val);
this.pagination = val.list.pagination;
this.loading = false;
this.ready.emit();
resolve(true);
}
},
error => {
reject(error);
});
} else {
resolve(false);
}
});
}
private checkIfTheCurrentPageIsEmpty(node, skipCount): boolean {
let isCheckNeeded: boolean = false;
if (this.isCurrentPageEmpty(node, skipCount)) {
isCheckNeeded = true;
}
return isCheckNeeded;
}
private isCurrentPageEmpty(node, skipCount): boolean {
return !this.hasNodeEntries(node) && this.hasPages(skipCount);
}
@@ -592,4 +580,5 @@ export class DocumentListComponent implements OnInit, OnChanges, AfterContentIni
updateSkipCount(newSkipCount) {
this.skipCount = newSkipCount;
}
}