[ADF-966] added the ability to reflect data change on datatable (#2042)

* [ADF - 966] added a setTimeout to test the async loading of datatable

* [ADF-966] added the ability to reflect changes on data change

* [ADF-917] changed due PR

demo-shell-ng2/app/components/datatable/datatable-demo.component.html

@@ -37,4 +37,5 @@
     <button md-raised-button (click)="addRow()">Add row</button>
     <button md-raised-button (click)="replaceRows()">Replace rows</button>
     <button md-raised-button (click)="replaceColumns()">Replace columns</button>
+    <button md-raised-button (click)="getRowForNode()">Load Node</button>
 </div>

demo-shell-ng2/app/components/datatable/datatable-demo.component.ts

@@ -17,6 +17,8 @@
 
 import { Component, Input } from '@angular/core';
 import { ObjectDataTableAdapter, DataSorting, ObjectDataRow, ObjectDataColumn, DataCellEvent, DataRowActionEvent } from 'ng2-alfresco-datatable';
+import { AlfrescoApiService } from 'ng2-alfresco-core';
+import { Observable } from 'rxjs/Rx';
 
 @Component({
     selector: 'datatable-demo',
@@ -43,7 +45,7 @@ export class DataTableDemoComponent {
         email: 'denys.vuika@alfresco.com'
     };
 
-    constructor() {
+    constructor(private apiService: AlfrescoApiService) {
         this.reset();
     }
 
@@ -80,11 +82,11 @@ export class DataTableDemoComponent {
                 }
             ],
             [
-                {type: 'image', key: 'icon', title: '', srTitle: 'Thumbnail'},
+                { type: 'image', key: 'icon', title: '', srTitle: 'Thumbnail' },
-                {type: 'text', key: 'id', title: 'Id', sortable: true},
+                { type: 'text', key: 'id', title: 'Id', sortable: true },
-                {type: 'text', key: 'createdOn', title: 'Created On', sortable: true},
+                { type: 'text', key: 'createdOn', title: 'Created On', sortable: true },
-                {type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true},
+                { type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true },
-                {type: 'text', key: 'createdBy.name', title: 'Created By', sortable: true}
+                { type: 'text', key: 'createdBy.name', title: 'Created By', sortable: true }
             ]
         );
 
@@ -172,4 +174,33 @@ export class DataTableDemoComponent {
     onRowDblClick(event) {
         console.log(event);
     }
+
+    getRowForNode() {
+        let opts: any = {
+            includeSource: true,
+            include: ['path', 'properties', 'allowableOperations']
+        };
+
+        Observable.fromPromise(this.apiService.getInstance().nodes
+            .getNodeInfo('-my-', opts)).subscribe((data) => {
+                console.log('FUnNy');
+                console.log(data);
+                let objects = new ObjectDataTableAdapter([
+                    {
+                        id: data.id,
+                        name: data.name,
+                        createdBy: data.createdByUser.displayName,
+                        createdOn: new Date(data.createdAt),
+                        icon: 'material-icons://face'
+                    }],
+                    [
+                        { type: 'image', key: 'icon', title: '', srTitle: 'Thumbnail' },
+                        { type: 'text', key: 'id', title: 'Id', sortable: true },
+                        { type: 'text', key: 'createdOn', title: 'Created On', sortable: true },
+                        { type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true },
+                        { type: 'text', key: 'createdBy.name', title: 'Created By', sortable: true }
+                    ]);
+                this.data = objects;
+            });
+    }
 }

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

@@ -66,6 +66,31 @@ describe('DataTable', () => {
         };
     });
 
+    it('should change the rows on changing of the data', () => {
+        let newData = new ObjectDataTableAdapter(
+            [
+                { name: 'TEST' },
+                { name: 'FAKE' }
+            ],
+            [new ObjectDataColumn({ key: 'name' })]
+        );
+        dataTable.data = new ObjectDataTableAdapter(
+            [
+                { name: '1' },
+                { name: '2' }
+            ],
+            [new ObjectDataColumn({ key: 'name' })]
+        );
+
+        dataTable.ngOnChanges({
+            data: new SimpleChange(null, newData, false)
+        });
+        fixture.detectChanges();
+
+        expect(element.querySelector('[data-automation-id="text_TEST"]')).not.toBeNull();
+        expect(element.querySelector('[data-automation-id="text_FAKE"]')).not.toBeNull();
+    });
+
     it('should reset selection on mode change', () => {
         spyOn(dataTable, 'resetSelection').and.callThrough();
 

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

@@ -133,6 +133,8 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck
         if (this.isPropertyChanged(changes['data'])) {
             if (this.isTableEmpty()) {
                 this.initTable();
+            }else {
+                this.data = changes['data'].currentValue;
             }
             return;
         }