mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-26 17:24:56 +00:00
[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:
parent
44446b73c4
commit
866cb121fb
@ -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>
|
||||
|
@ -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;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
@ -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();
|
||||
|
||||
|
@ -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;
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user