From 58f7429f25a36d76b4e279a5fae9e82dfa2d1e01 Mon Sep 17 00:00:00 2001
From: Denys Vuika <denis.vuyka@gmail.com>
Date: Fri, 20 May 2016 13:30:11 +0100
Subject: [PATCH] #82 multiselection UI for datatable

---
 .../datatable/datatable-demo.component.html   |  8 +++++-
 .../datatable/datatable-demo.component.ts     |  4 ++-
 demo-shell-ng2/tsconfig.json                  |  3 +-
 .../src/components/datatable.component.html   | 22 +++++++++++++--
 .../src/components/datatable.component.ts     | 28 +++++++++++++++++++
 .../src/data/datatable-adapter.ts             |  8 ++++++
 .../src/data/object-datatable-adapter.ts      |  3 ++
 7 files changed, 70 insertions(+), 6 deletions(-)

diff --git a/demo-shell-ng2/app/components/datatable/datatable-demo.component.html b/demo-shell-ng2/app/components/datatable/datatable-demo.component.html
index b69f30cc77..9bcf32654a 100644
--- a/demo-shell-ng2/app/components/datatable/datatable-demo.component.html
+++ b/demo-shell-ng2/app/components/datatable/datatable-demo.component.html
@@ -1,5 +1,11 @@
 <div class="p-10">
-    <alfresco-datatable [data]="data"></alfresco-datatable>
+    <alfresco-datatable [data]="data" [multiselect]="multiselect"></alfresco-datatable>
+</div>
+<div class="p-10">
+    <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-1">
+        <input type="checkbox" id="checkbox-1" class="mdl-checkbox__input" [(ngModel)]="multiselect">
+        <span class="mdl-checkbox__label">Multiselect</span>
+    </label>
 </div>
 <div class="p-10">
     <button
diff --git a/demo-shell-ng2/app/components/datatable/datatable-demo.component.ts b/demo-shell-ng2/app/components/datatable/datatable-demo.component.ts
index 31bc57133a..dcc30cc348 100644
--- a/demo-shell-ng2/app/components/datatable/datatable-demo.component.ts
+++ b/demo-shell-ng2/app/components/datatable/datatable-demo.component.ts
@@ -35,6 +35,8 @@ declare let __moduleName: string;
     pipes: [AlfrescoPipeTranslate]
 })
 export class DataTableDemoComponent {
+
+    multiselect: boolean = false;
     data: ObjectDataTableAdapter;
 
     private _imageUrl: string = 'http://placehold.it/140x100';
@@ -88,7 +90,7 @@ export class DataTableDemoComponent {
     replaceColumns() {
         let schema = [
             { type: 'text', key: 'id', sortable: true },
-            { type: 'text', key: 'name', sortable: true }
+            { type: 'text', key: 'name', sortable: true, cssClass: 'full-width name-column' }
         ];
         let columns = schema.map(col => new ObjectDataColumn(col));
         this.data.setColumns(columns);
diff --git a/demo-shell-ng2/tsconfig.json b/demo-shell-ng2/tsconfig.json
index 0f3a0a2ed1..0cd78ac35d 100644
--- a/demo-shell-ng2/tsconfig.json
+++ b/demo-shell-ng2/tsconfig.json
@@ -14,6 +14,5 @@
     "node_modules",
     "typings/main",
     "typings/main.d.ts"
-  ],
-  "compileOnSave": true
+  ]
 }
diff --git a/ng2-components/ng2-alfresco-datatable/src/components/datatable.component.html b/ng2-components/ng2-alfresco-datatable/src/components/datatable.component.html
index d6435a1c9d..0de1ec6409 100644
--- a/ng2-components/ng2-alfresco-datatable/src/components/datatable.component.html
+++ b/ng2-components/ng2-alfresco-datatable/src/components/datatable.component.html
@@ -1,7 +1,18 @@
-<table *ngIf="data" class="mdl-data-table mdl-js-data-table mdl-shadow--2dp full-width">
+<table
+    *ngIf="data"
+    class="mdl-data-table mdl-js-data-table mdl-shadow--2dp full-width">
     <thead>
     <tr>
         <!-- Columns -->
+        <th *ngIf="multiselect">
+            <label
+                class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect mdl-data-table__select"
+                [class.is-checked]="isSelectAllChecked"
+                for="table-header"
+                (click)="onSelectAllClick($event)">
+                <input type="checkbox" id="table-header" class="mdl-checkbox__input" />
+            </label>
+        </th>
         <th class="mdl-data-table__cell--non-numeric {{col.cssClass}}"
             *ngFor="#col of data.getColumns()"
             [class.column-header]="col.title"
@@ -21,7 +32,14 @@
     <!-- todo: special 'navigate parent row' support -->
 
     <tr *ngFor="#row of data.getRows(); #idx = index">
-
+        <td *ngIf="multiselect">
+            <label
+                class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect mdl-data-table__select"
+                [attr.for]="'row[' + idx + ']'"
+                [class.is-checked]="row.isSelected">
+                <input type="checkbox" [attr.id]="'row[' + idx + ']'" class="mdl-checkbox__input" [(ngModel)]="row.isSelected" />
+            </label>
+        </td>
         <td *ngFor="#col of data.getColumns()" [ngSwitch]="col.type"
             class="mdl-data-table__cell--non-numeric data-cell {{col.cssClass}}"
             (click)="onRowClick(row, $event)" (dblclick)="onRowDblClick(row, $event)">
diff --git a/ng2-components/ng2-alfresco-datatable/src/components/datatable.component.ts b/ng2-components/ng2-alfresco-datatable/src/components/datatable.component.ts
index 99ae7451c1..24486faa2c 100644
--- a/ng2-components/ng2-alfresco-datatable/src/components/datatable.component.ts
+++ b/ng2-components/ng2-alfresco-datatable/src/components/datatable.component.ts
@@ -17,6 +17,7 @@
 
 import {
     Component,
+    // NgZone,
     OnInit,
     Input,
     Output,
@@ -46,12 +47,19 @@ export class DataTableComponent implements OnInit, AfterViewChecked {
     @Input()
     data: DataTableAdapter;
 
+    @Input()
+    multiselect: boolean = false;
+
     @Output()
     rowClick: EventEmitter<any> = new EventEmitter();
 
     @Output()
     rowDblClick: EventEmitter<any> = new EventEmitter();
 
+    isSelectAllChecked: boolean = false;
+
+    constructor(/*private _ngZone?: NgZone*/) {}
+
     ngOnInit() {
         if (this.data) {
             console.log(this.data);
@@ -98,6 +106,26 @@ export class DataTableComponent implements OnInit, AfterViewChecked {
         }
     }
 
+    onSelectAllClick(e?) {
+        if (e) {
+            e.preventDefault();
+        }
+
+        this.isSelectAllChecked = !this.isSelectAllChecked;
+
+        if (this.multiselect) {
+            let rows = this.data.getRows();
+            for (let i = 0; i < rows.length; i++) {
+                rows[i].isSelected = this.isSelectAllChecked;
+            }
+            /*
+             this._ngZone.run(() => {
+             this.data.getRows()[1].isSelected = true;
+             });
+             */
+        }
+    }
+
     isIconValue(row: DataRow, col: DataColumn) {
         return row.getValue(col.key).startsWith('material-icons://');
     }
diff --git a/ng2-components/ng2-alfresco-datatable/src/data/datatable-adapter.ts b/ng2-components/ng2-alfresco-datatable/src/data/datatable-adapter.ts
index 4f5213a840..cec755921f 100644
--- a/ng2-components/ng2-alfresco-datatable/src/data/datatable-adapter.ts
+++ b/ng2-components/ng2-alfresco-datatable/src/data/datatable-adapter.ts
@@ -25,25 +25,33 @@ export interface DataTableAdapter {
     getSorting(): DataSorting;
     setSorting(sorting: DataSorting): void;
     sort(key?: string, direction?: string): void;
+
 }
 
 export interface DataRow {
+
+    isSelected: boolean;
     hasValue(key: string): boolean;
     getValue(key: string): any;
+
 }
 
 export interface DataColumn {
+
     key: string;
     type: string; // text|image
     sortable?: boolean;
     title?: string;
     srTitle?: string;
     cssClass?: string;
+
 }
 
 export class DataSorting {
+
     constructor(
         public key?: string,
         public direction?: string) {
     }
+
 }
diff --git a/ng2-components/ng2-alfresco-datatable/src/data/object-datatable-adapter.ts b/ng2-components/ng2-alfresco-datatable/src/data/object-datatable-adapter.ts
index 08d76586ee..011c399758 100644
--- a/ng2-components/ng2-alfresco-datatable/src/data/object-datatable-adapter.ts
+++ b/ng2-components/ng2-alfresco-datatable/src/data/object-datatable-adapter.ts
@@ -97,6 +97,9 @@ export class ObjectDataTableAdapter implements DataTableAdapter {
 
 // Simple implementation of the DataRow interface.
 export class ObjectDataRow implements DataRow {
+
+    isSelected: boolean = false;
+
     constructor(
         private obj: any) {
     }