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

* loading state datatable

* modify readme after review

ng2-components/ng2-alfresco-datatable/README.md

@@ -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>
+    
-            <h1>Sorry, no content</h1>
+        <no-content-template>
-        </template>
+            <!--Add your custom empty template here-->
-    </no-content-template>
+            <ng-template>
+                <h1>Sorry, no content</h1>
+            </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:

ng2-components/ng2-alfresco-datatable/index.ts

@@ -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
 ];
 

ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.css

@@ -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%;
 }
 

ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.html

@@ -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"
@@ -66,21 +67,23 @@
                     <div *ngSwitchCase="'image'" class="cell-value">
                         <i *ngIf="isIconValue(row, col)" class="material-icons icon-cell">{{asIconValue(row, col)}}</i>
                         <img *ngIf="!isIconValue(row, col)"
-                            class="image-cell"
+                             class="image-cell"
-                            alt="{{ iconAltTextKey(data.getValue(row, col)) | translate }}"
+                             alt="{{ iconAltTextKey(data.getValue(row, col)) | translate }}"
-                            src="{{ data.getValue(row, col) }}"
+                             src="{{ data.getValue(row, col) }}"
-                            (error)="onImageLoadingError($event)">
+                             (error)="onImageLoadingError($event)">
                     </div>
                     <div *ngSwitchCase="'icon'" class="cell-value">
                         <img class="image-cell"
-                            alt="{{ iconAltTextKey(data.getValue(row, col)) | translate }}"
+                             alt="{{ iconAltTextKey(data.getValue(row, col)) | translate }}"
-                            src="{{ data.getValue(row, col) }}"
+                             src="{{ data.getValue(row, col) }}"
-                            (error)="onImageLoadingError($event)">
+                             (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,12 +117,21 @@
         </td>
 
     </tr>
-    <tr *ngIf="data.getRows().length === 0">
+    <tr *ngIf="data.getRows().length === 0 && !loading">
-        <td class="mdl-data-table__cell--non-numeric no-content-container"
+        <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]"
+                         ngFor [ngForOf]="[data]"
-                      [ngForTemplate]="noContentTemplate">
+                         [ngForTemplate]="noContentTemplate">
+            </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>

ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.ts

@@ -15,20 +15,7 @@
  * limitations under the License.
  */
 
-import {
+import { Component, OnChanges, SimpleChange, SimpleChanges, Input, Output, EventEmitter, ElementRef, TemplateRef, AfterContentInit, ContentChild, Optional } from '@angular/core';
-    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) {

ng2-components/ng2-alfresco-datatable/src/components/datatable/index.ts

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

ng2-components/ng2-alfresco-datatable/src/directives/index.ts

@@ -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';

ng2-components/ng2-alfresco-datatable/src/directives/loading-template.component.spec.ts

@@ -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();
+    });
+});

ng2-components/ng2-alfresco-datatable/src/directives/loading-template.component.ts

@@ -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;
+    }
+
+}

ng2-components/ng2-alfresco-datatable/src/directives/no-content-template.component.spec.ts

@@ -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;

ng2-components/ng2-alfresco-datatable/src/directives/no-content-template.component.ts

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

ng2-components/ng2-alfresco-documentlist/README.md

@@ -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
 

ng2-components/ng2-alfresco-documentlist/index.ts

@@ -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

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

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

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

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

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

@@ -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;
 
@@ -43,7 +44,7 @@ let fakeNodeAnswerWithEntries = {
         'entries': [{
             'entry': {
                 'isFile': true,
-                'createdByUser': { 'id': 'admin', 'displayName': 'Administrator' },
+                'createdByUser': {'id': 'admin', 'displayName': 'Administrator'},
                 'modifiedAt': '2017-05-24T15:08:55.640Z',
                 'nodeType': 'cm:content',
                 'content': {
@@ -60,13 +61,13 @@ let fakeNodeAnswerWithEntries = {
                     'elements': [{
                         'id': '94acfc73-7014-4475-9bd9-93a2162f0f8c',
                         'name': 'Company Home'
-                    }, { 'id': 'd124de26-6ba0-4f40-8d98-4907da2d337a', 'name': 'Guest Home' }]
+                    }, {'id': 'd124de26-6ba0-4f40-8d98-4907da2d337a', 'name': 'Guest Home'}]
                 },
                 'isFolder': false,
-                'modifiedByUser': { 'id': 'admin', 'displayName': 'Administrator' },
+                'modifiedByUser': {'id': 'admin', 'displayName': 'Administrator'},
                 'name': 'b_txt_file.rtf',
                 'id': '67b80f77-dbca-4f58-be6c-71b9dd61ea53',
-                'properties': { 'cm:versionLabel': '1.0', 'cm:versionType': 'MAJOR' },
+                'properties': {'cm:versionLabel': '1.0', 'cm:versionType': 'MAJOR'},
                 'allowableOperations': ['delete', 'update']
             }
         }]
@@ -100,7 +101,8 @@ describe('DocumentList', () => {
         TestBed.configureTestingModule({
             imports: [
                 CoreModule.forRoot(),
-                DataTableModule.forRoot()
+                DataTableModule.forRoot(),
+                MdProgressSpinnerModule
             ],
             declarations: [
                 DocumentListComponent,
@@ -108,7 +110,7 @@ describe('DocumentList', () => {
             ],
             providers: [
                 DocumentListService,
-                { provide: NgZone, useValue: zone }
+                {provide: NgZone, useValue: zone}
             ]
         }).compileComponents();
     }));
@@ -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 () {
@@ -248,7 +263,7 @@ describe('DocumentList', () => {
             documentMenu
         ];
 
-        let nodeFile = { entry: { isFile: true, name: 'xyz', allowableOperations: ['create', 'update'] } };
+        let nodeFile = {entry: {isFile: true, name: 'xyz', allowableOperations: ['create', 'update']}};
 
         let actions = documentList.getNodeActions(nodeFile);
         expect(actions.length).toBe(1);
@@ -269,7 +284,7 @@ describe('DocumentList', () => {
             documentMenu
         ];
 
-        let nodeFile = { entry: { isFolder: true, name: 'xyz', allowableOperations: ['create', 'update'] } };
+        let nodeFile = {entry: {isFolder: true, name: 'xyz', allowableOperations: ['create', 'update']}};
 
         let actions = documentList.getNodeActions(nodeFile);
         expect(actions.length).toBe(1);
@@ -290,7 +305,7 @@ describe('DocumentList', () => {
             documentMenu
         ];
 
-        let nodeFile = { entry: { isFile: true, name: 'xyz', allowableOperations: ['create', 'update'] } };
+        let nodeFile = {entry: {isFile: true, name: 'xyz', allowableOperations: ['create', 'update']}};
 
         let actions = documentList.getNodeActions(nodeFile);
         expect(actions.length).toBe(1);
@@ -310,7 +325,7 @@ describe('DocumentList', () => {
             documentMenu
         ];
 
-        let nodeFile = { entry: { isFolder: true, name: 'xyz', allowableOperations: ['create', 'update'] } };
+        let nodeFile = {entry: {isFolder: true, name: 'xyz', allowableOperations: ['create', 'update']}};
 
         let actions = documentList.getNodeActions(nodeFile);
         expect(actions.length).toBe(1);
@@ -330,7 +345,7 @@ describe('DocumentList', () => {
             documentMenu
         ];
 
-        let nodeFile = { entry: { isFile: true, name: 'xyz', allowableOperations: ['create', 'update', 'delete'] } };
+        let nodeFile = {entry: {isFile: true, name: 'xyz', allowableOperations: ['create', 'update', 'delete']}};
 
         let actions = documentList.getNodeActions(nodeFile);
         expect(actions.length).toBe(1);
@@ -350,7 +365,7 @@ describe('DocumentList', () => {
             documentMenu
         ];
 
-        let nodeFile = { entry: { isFolder: true, name: 'xyz', allowableOperations: ['create', 'update', 'delete'] } };
+        let nodeFile = {entry: {isFolder: true, name: 'xyz', allowableOperations: ['create', 'update', 'delete']}};
 
         let actions = documentList.getNodeActions(nodeFile);
         expect(actions.length).toBe(1);
@@ -369,7 +384,7 @@ describe('DocumentList', () => {
             documentMenu
         ];
 
-        let nodeFile = { entry: { isFile: true, name: 'xyz', allowableOperations: null } };
+        let nodeFile = {entry: {isFile: true, name: 'xyz', allowableOperations: null}};
 
         let actions = documentList.getNodeActions(nodeFile);
         expect(actions.length).toBe(1);
@@ -388,7 +403,7 @@ describe('DocumentList', () => {
             documentMenu
         ];
 
-        let nodeFile = { entry: { isFolder: true, name: 'xyz', allowableOperations: null } };
+        let nodeFile = {entry: {isFolder: true, name: 'xyz', allowableOperations: null}};
 
         let actions = documentList.getNodeActions(nodeFile);
         expect(actions.length).toBe(1);
@@ -692,7 +707,7 @@ describe('DocumentList', () => {
         });
 
         documentList.currentFolderId = 'wrong-id';
-        documentList.ngOnChanges({ currentFolderId: new SimpleChange(null, documentList.currentFolderId, true) });
+        documentList.ngOnChanges({currentFolderId: new SimpleChange(null, documentList.currentFolderId, true)});
     });
 
     it('should require dataTable to check empty template', () => {
@@ -784,11 +799,11 @@ describe('DocumentList', () => {
     it('should load folder by ID on init', () => {
         documentList.currentFolderId = '1d26e465-dea3-42f3-b415-faa8364b9692';
         spyOn(documentList, 'loadFolderNodesByFolderNodeId').and.returnValue(Promise.resolve());
-        documentList.ngOnChanges({ folderNode: new SimpleChange(null, documentList.currentFolderId, true) });
+        documentList.ngOnChanges({folderNode: new SimpleChange(null, documentList.currentFolderId, true)});
         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)
         });
-    }));
+    });
 });

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

@@ -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;
+        } else if (changes['currentFolderId'] && changes['currentFolderId'].currentValue) {
-        }
-
-        if (changes['currentFolderId'] && changes['currentFolderId'].currentValue) {
             this.loadFolderByNodeId(changes['currentFolderId'].currentValue);
-            return;
+        } else if (changes['node'] && changes['node'].currentValue) {
-        }
-
-        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;
+            } else if (this.currentFolderId) {
-            }
-
-            if (this.currentFolderId) {
                 this.loadFolderByNodeId(this.currentFolderId);
-                return;
+            } else if (this.node) {
-            }
-
-            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,42 +369,36 @@ 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
-                this.documentListService
+                .getFolder(null, {
-                    .getFolder(null, {
+                    maxItems: maxItems,
-                        maxItems: maxItems,
+                    skipCount: skipCount,
-                        skipCount: skipCount,
+                    rootFolderId: id
-                        rootFolderId: id
+                })
-                    })
+                .subscribe(
-                    .subscribe(
+                    val => {
-                        val => {
+                        if (this.isCurrentPageEmpty(val, skipCount)) {
-                            if (this.checkIfTheCurrentPageIsEmpty(val, skipCount)) {
+                            this.updateSkipCount(skipCount - maxItems);
-                                this.updateSkipCount(skipCount - maxItems);
+                            this.loadFolderNodesByFolderNodeId(id, maxItems, skipCount - maxItems).then(() => {
-                                this.loadFolderNodesByFolderNodeId(id, maxItems, skipCount - maxItems);
-                            } else {
-                                this.data.loadPage(<NodePaging>val);
-                                this.pagination = val.list.pagination;
                                 resolve(true);
-                            }
+                            }, () => {
-                        },
+                                reject(error);
-                        error => {
+                            });
-                            reject(error);
+                        } else {
-                        });
+                            this.data.loadPage(<NodePaging>val);
-            } else {
+                            this.pagination = val.list.pagination;
-                resolve(false);
+                            this.loading = false;
-            }
+                            this.ready.emit();
+                            resolve(true);
+                        }
+                    },
+                    error => {
+                        reject(error);
+                    });
         });
 
     }
 
-    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;
     }
+
 }