[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
This commit is contained in:
Vito 2017-07-05 04:39:50 -07:00 committed by Eugenio Romano
parent 44446b73c4
commit 866cb121fb
4 changed files with 65 additions and 6 deletions

View File

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

View File

@ -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: '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}
{ 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 }
]
);
@ -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;
});
}
}

View File

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

View File

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