inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-12 17:04:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix datatable multi select checkboxes (#1784)

Browse Source 
* fix datatable multi select checkboxes

* template cleanup

* fix unit tests
This commit is contained in:
Denys Vuika 2017-03-30 09:44:34 +01:00 committed by Mario Romano
parent 020952c174
commit 0a57c640ef
4 changed files with 18 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
demo-shell-ng2/app/components/datatable/datatable-demo.component.html
View File

@ -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">
<input type="checkbox" id="checkbox-1" class="mdl-checkbox__input" [(ngModel)]="multiselect">
<span class="mdl-checkbox__label">Multiselect</span>
</label>
<md-checkbox [(ngModel)]="multiselect">Multiselect</md-checkbox>
</div>
<div class="p-10">
<button
class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored"
(click)="reset()">
Reset to default
</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>
<button md-raised-button (click)="reset()">Reset to default</button>
<button md-raised-button (click)="addRow()">Add row</button>
<button md-raised-button (click)="replaceRows()">Replace rows</button>
<button md-raised-button (click)="replaceColumns()">Replace columns</button>
</div>

15
ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.html
View File

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

19
ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.spec.ts
View File

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

17
ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.ts
View File

@ -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) {
if (e) {
e.preventDefault();
}
this.isSelectAllChecked = !this.isSelectAllChecked;
onSelectAllClick(e: MdCheckboxChange) {
this.isSelectAllChecked = e.checked;
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;
});
*/
}
}
}