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

* loading state datatable

* modify readme after review

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"
-                            alt="{{ iconAltTextKey(data.getValue(row, col)) | translate }}"
-                            src="{{ data.getValue(row, col) }}"
-                            (error)="onImageLoadingError($event)">
+                             class="image-cell"
+                             alt="{{ iconAltTextKey(data.getValue(row, col)) | translate }}"
+                             src="{{ data.getValue(row, col) }}"
+                             (error)="onImageLoadingError($event)">
                     </div>
                     <div *ngSwitchCase="'icon'" class="cell-value">
                         <img class="image-cell"
-                            alt="{{ iconAltTextKey(data.getValue(row, col)) | translate }}"
-                            src="{{ data.getValue(row, col) }}"
-                            (error)="onImageLoadingError($event)">
+                             alt="{{ iconAltTextKey(data.getValue(row, col)) | translate }}"
+                             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,12 +117,21 @@
         </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]"
-                      [ngForTemplate]="noContentTemplate">
+                         ngFor [ngForOf]="[data]"
+                         [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 {
-    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) {

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 {
-    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() {