From 30826500e5d713792ce0369f5af864212aea9634 Mon Sep 17 00:00:00 2001
From: Denys Vuika <denys.vuika@gmail.com>
Date: Thu, 7 Jun 2018 23:20:57 +0100
Subject: [PATCH] simple filtering for datatable (#3453)

---
 .../datatable/datatable.component.html        |  5 +-
 .../datatable/datatable.component.ts          | 65 +++++++++----------
 2 files changed, 35 insertions(+), 35 deletions(-)

diff --git a/demo-shell/src/app/components/datatable/datatable.component.html b/demo-shell/src/app/components/datatable/datatable.component.html
index 84ca436c4e..efbbcc1a5d 100644
--- a/demo-shell/src/app/components/datatable/datatable.component.html
+++ b/demo-shell/src/app/components/datatable/datatable.component.html
@@ -1,3 +1,7 @@
+<mat-form-field>
+    <input matInput placeholder="Name filter" [(ngModel)]="data.filterValue">
+</mat-form-field>
+
 <adf-datatable
     #dataTable
     [data]="data"
@@ -43,5 +47,4 @@
     <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)="replaceColumns()">{{ 'DATATABLE.REPLACE_COLUMNS'| translate }}</button>
-    <button mat-raised-button (click)="getRowForNode()">{{ 'DATATABLE.LOAD_NODE'| translate }}</button>
 </div>
diff --git a/demo-shell/src/app/components/datatable/datatable.component.ts b/demo-shell/src/app/components/datatable/datatable.component.ts
index 32a7490d4d..d701b1586f 100644
--- a/demo-shell/src/app/components/datatable/datatable.component.ts
+++ b/demo-shell/src/app/components/datatable/datatable.component.ts
@@ -16,9 +16,35 @@
  */
 
 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 { 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({
     selector: 'app-datatable',
@@ -27,7 +53,7 @@ import { Observable } from 'rxjs/Observable';
 export class DataTableComponent {
 
     multiselect = false;
-    data: ObjectDataTableAdapter;
+    data: FilteredDataAdapter;
 
     @Input()
     selectionMode = 'single';
@@ -44,12 +70,12 @@ export class DataTableComponent {
         email: 'admin@alfresco.com'
     };
 
-    constructor(private apiService: AlfrescoApiService, private logService: LogService) {
+    constructor(private logService: LogService) {
         this.reset();
     }
 
     reset() {
-        this.data = new ObjectDataTableAdapter(
+        this.data = new FilteredDataAdapter(
             [
                 {
                     id: 1,
@@ -173,33 +199,4 @@ export class DataTableComponent {
     onRowDblClick(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;
-            });
-    }
 }