inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

simple filtering for datatable (#3453)

Browse Source
This commit is contained in:
Denys Vuika
2018-06-07 23:20:57 +01:00
committed by Eugenio Romano
parent f8e92b2fb0
commit 30826500e5
2 changed files with 35 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
demo-shell/src/app/components/datatable/datatable.component.html
View File

@@ -1,3 +1,7 @@
<mat-form-field>
<input matInput placeholder="Name filter" [(ngModel)]="data.filterValue">
</mat-form-field>
<adf-datatable <adf-datatable
#dataTable #dataTable
[data]="data" [data]="data"
@@ -43,5 +47,4 @@
<button mat-raised-button (click)="addRow()">{{ 'DATATABLE.ADD_ROW'| translate }}</button> <button mat-raised-button (click)="addRow()">{{ 'DATATABLE.ADD_ROW'| translate }}</button>
<button mat-raised-button (click)="replaceRows()">{{ 'DATATABLE.REPLACE_ROWS'| translate }}</button> <button mat-raised-button (click)="replaceRows()">{{ 'DATATABLE.REPLACE_ROWS'| translate }}</button>
<button mat-raised-button (click)="replaceColumns()">{{ 'DATATABLE.REPLACE_COLUMNS'| translate }}</button> <button mat-raised-button (click)="replaceColumns()">{{ 'DATATABLE.REPLACE_COLUMNS'| translate }}</button>
<button mat-raised-button (click)="getRowForNode()">{{ 'DATATABLE.LOAD_NODE'| translate }}</button>
</div> </div>

65
demo-shell/src/app/components/datatable/datatable.component.ts
View File

@@ -16,9 +16,35 @@
*/ */
import { Component, Input } from '@angular/core'; import { Component, Input } from '@angular/core';
import { AlfrescoApiService, LogService } from '@alfresco/adf-core'; import { LogService, DataColumn, DataRow } from '@alfresco/adf-core';
import { DataCellEvent, DataRowActionEvent, DataSorting, ObjectDataColumn, ObjectDataRow, ObjectDataTableAdapter } from '@alfresco/adf-core'; import { DataCellEvent, DataRowActionEvent, DataSorting, ObjectDataColumn, ObjectDataRow, ObjectDataTableAdapter } from '@alfresco/adf-core';
import { Observable } from 'rxjs/Observable';
export class FilteredDataAdapter extends ObjectDataTableAdapter {
filterValue = '';
filterKey = 'name';
getRows(): Array<DataRow> {
let rows = super.getRows();
const filter = (this.filterValue || '').trim().toLowerCase();
if (this.filterKey && filter) {
rows = rows.filter(row => {
const value = row.getValue(this.filterKey);
if (value !== undefined && value !== null) {
const stringValue: string = value.toString().trim().toLowerCase();
return stringValue.startsWith(filter);
}
return false;
});
}
return rows;
}
constructor(data?: any[], schema?: DataColumn[]) {
super(data, schema);
}
}
@Component({ @Component({
selector: 'app-datatable', selector: 'app-datatable',
@@ -27,7 +53,7 @@ import { Observable } from 'rxjs/Observable';
export class DataTableComponent { export class DataTableComponent {
multiselect = false; multiselect = false;
data: ObjectDataTableAdapter; data: FilteredDataAdapter;
@Input() @Input()
selectionMode = 'single'; selectionMode = 'single';
@@ -44,12 +70,12 @@ export class DataTableComponent {
email: 'admin@alfresco.com' email: 'admin@alfresco.com'
}; };
constructor(private apiService: AlfrescoApiService, private logService: LogService) { constructor(private logService: LogService) {
this.reset(); this.reset();
} }
reset() { reset() {
this.data = new ObjectDataTableAdapter( this.data = new FilteredDataAdapter(
[ [
{ {
id: 1, id: 1,
@@ -173,33 +199,4 @@ export class DataTableComponent {
onRowDblClick(event) { onRowDblClick(event) {
this.logService.log(event); this.logService.log(event);
} }
getRowForNode() {
const opts: any = {
includeSource: true,
include: ['path', 'properties', 'allowableOperations', 'permissions']
};
Observable.fromPromise(this.apiService.getInstance().nodes
.getNodeInfo('-my-', opts)).subscribe((data) => {
this.logService.log('FUnNy');
this.logService.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;
});
}
} }