fix datatable multi select checkboxes (#1784)

* fix datatable multi select checkboxes

* template cleanup

* fix unit tests

demo-shell-ng2/app/components/datatable/datatable-demo.component.html

@@ -20,30 +20,11 @@
     </alfresco-datatable>
 </div>
 <div class="p-10">
-    <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-1">
+    <md-checkbox [(ngModel)]="multiselect">Multiselect</md-checkbox>
-        <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
+    <button md-raised-button (click)="reset()">Reset to default</button>
-            class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored"
+    <button md-raised-button (click)="addRow()">Add row</button>
-            (click)="reset()">
+    <button md-raised-button (click)="replaceRows()">Replace rows</button>
-        Reset to default
+    <button md-raised-button (click)="replaceColumns()">Replace columns</button>
-    </button>
-    <button
-        class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored"
-        (click)="addRow()">
-        Add row
-    </button>
-    <button
-        class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored"
-        (click)="replaceRows()">
-        Replace rows
-    </button>
-    <button
-        class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored"
-        (click)="replaceColumns()">
-        Replace columns
-    </button>
 </div>

ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.html

@@ -9,13 +9,7 @@
         </th>
         <!-- Columns -->
         <th *ngIf="multiselect">
-            <label
+            <md-checkbox [checked]="isSelectAllChecked" (change)="onSelectAllClick($event)"></md-checkbox>
-                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 non-selectable {{col.cssClass}}"
             *ngFor="let col of data.getColumns()"
@@ -57,12 +51,7 @@
         </td>
 
         <td *ngIf="multiselect">
-            <label
+            <md-checkbox [(ngModel)]="row.isSelected"></md-checkbox>
-                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="let col of data.getColumns()" [ngSwitch]="col.type"
             class="mdl-data-table__cell--non-numeric non-selectable data-cell {{col.cssClass}}"

ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.spec.ts

@@ -18,6 +18,7 @@
 import { SimpleChange } from '@angular/core';
 import { ComponentFixture, TestBed, async } from '@angular/core/testing';
 import { CoreModule } from 'ng2-alfresco-core';
+import { MdCheckboxChange } from '@angular/material';
 import { DataTableComponent } from './datatable.component';
 import {
     DataRow,
@@ -171,12 +172,6 @@ describe('DataTable', () => {
         expect(e.preventDefault).toHaveBeenCalled();
     });
 
-    it('should prevent default behaviour on select all click', () => {
-        let e = jasmine.createSpyObj('event', ['preventDefault']);
-        dataTable.onSelectAllClick(e);
-        expect(e.preventDefault).toHaveBeenCalled();
-    });
-
     it('should not sort if column is missing', () => {
         dataTable.ngAfterContentInit();
         let adapter = dataTable.data;
@@ -266,9 +261,9 @@ describe('DataTable', () => {
 
     it('should invert "select all" status', () => {
         expect(dataTable.isSelectAllChecked).toBeFalsy();
-        dataTable.onSelectAllClick(null);
+        dataTable.onSelectAllClick(<MdCheckboxChange> { checked: true });
         expect(dataTable.isSelectAllChecked).toBeTruthy();
-        dataTable.onSelectAllClick(null);
+        dataTable.onSelectAllClick(<MdCheckboxChange> { checked: false });
         expect(dataTable.isSelectAllChecked).toBeFalsy();
     });
 
@@ -280,13 +275,13 @@ describe('DataTable', () => {
         dataTable.multiselect = true;
         dataTable.ngAfterContentInit();
 
-        dataTable.onSelectAllClick(null);
+        dataTable.onSelectAllClick(<MdCheckboxChange> { checked: true });
         expect(dataTable.isSelectAllChecked).toBe(true);
         for (let i = 0; i < rows.length; i++) {
             expect(rows[i].isSelected).toBe(true);
         }
 
-        dataTable.onSelectAllClick(null);
+        dataTable.onSelectAllClick(<MdCheckboxChange> { checked: false });
         expect(dataTable.isSelectAllChecked).toBe(false);
         for (let i = 0; i < rows.length; i++) {
             expect(rows[i].isSelected).toBe(false);
@@ -297,7 +292,7 @@ describe('DataTable', () => {
         dataTable.multiselect = true;
         dataTable.ngAfterContentInit();
 
-        dataTable.onSelectAllClick(null);
+        dataTable.onSelectAllClick(<MdCheckboxChange> { checked: true });
         expect(dataTable.isSelectAllChecked).toBe(true);
     });
 
@@ -309,7 +304,7 @@ describe('DataTable', () => {
         dataTable.multiselect = false;
         dataTable.ngAfterContentInit();
 
-        dataTable.onSelectAllClick(null);
+        dataTable.onSelectAllClick(<MdCheckboxChange> { checked: true });
         expect(dataTable.isSelectAllChecked).toBe(true);
         for (let i = 0; i < rows.length; i++) {
             expect(rows[i].isSelected).toBe(false);

ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.ts

@@ -32,6 +32,7 @@ import { DataTableAdapter, DataRow, DataColumn, DataSorting, DataRowEvent, Objec
 import { DataCellEvent } from './data-cell.event';
 import { DataRowActionEvent } from './data-row-action.event';
 import { DataColumnListComponent } from 'ng2-alfresco-core';
+import { MdCheckboxChange } from '@angular/material';
 
 declare var componentHandler;
 
@@ -178,25 +179,15 @@ export class DataTableComponent implements AfterContentInit, OnChanges {
         }
     }
 
-    onSelectAllClick(e?: Event) {
+    onSelectAllClick(e: MdCheckboxChange) {
-        if (e) {
+        this.isSelectAllChecked = e.checked;
-            e.preventDefault();
-        }
-
-        this.isSelectAllChecked = !this.isSelectAllChecked;
 
         if (this.multiselect) {
             let rows = this.data.getRows();
             if (rows && rows.length > 0) {
                 for (let i = 0; i < rows.length; i++) {
-                    rows[i].isSelected = this.isSelectAllChecked;
+                    rows[i].isSelected = e.checked;
                 }
-                // TODO: left for reference, will be removed during future revisions
-                /*
-                 this._ngZone.run(() => {
-                 this.data.getRows()[1].isSelected = true;
-                 });
-                 */
             }
         }
     }