#82 multiselection UI for datatable

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

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

demo-shell-ng2/tsconfig.json

@@ -14,6 +14,5 @@
     "node_modules",
     "typings/main",
     "typings/main.d.ts"
-  ],
-  "compileOnSave": true
+  ]
 }

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)">

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://');
     }

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) {
     }
+
 }

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) {
     }