From 33f529bea379f6640998e5c64fc4ef7610c5f584 Mon Sep 17 00:00:00 2001 From: emoralesb05 Date: Sun, 7 May 2017 22:57:19 -0700 Subject: [PATCH] revert: "feat(data-table): indeterminate state in 'selectAll' checkbox" This reverts commit 17241e1318675db90a457b27e93516cc811ba9d3. --- .../core/data-table/data-table.component.html | 3 +- .../data-table/data-table.component.spec.ts | 149 ++---------------- .../core/data-table/data-table.component.ts | 61 ++----- 3 files changed, 24 insertions(+), 189 deletions(-) diff --git a/src/platform/core/data-table/data-table.component.html b/src/platform/core/data-table/data-table.component.html index 504573660d..0a64214776 100644 --- a/src/platform/core/data-table/data-table.component.html +++ b/src/platform/core/data-table/data-table.component.html @@ -6,8 +6,7 @@ #checkBoxAll *ngIf="isMultiple" [disabled]="!hasData" - [indeterminate]="indeterminate && !allSelected && hasData" - [checked]="allSelected && hasData" + [checked]="areAllSelected() && hasData" (click)="selectAll(!checkBoxAll.checked)"> diff --git a/src/platform/core/data-table/data-table.component.spec.ts b/src/platform/core/data-table/data-table.component.spec.ts index ab19600c39..42166d9fc3 100644 --- a/src/platform/core/data-table/data-table.component.spec.ts +++ b/src/platform/core/data-table/data-table.component.spec.ts @@ -8,12 +8,10 @@ import 'hammerjs'; import { Component } from '@angular/core'; import { By } from '@angular/platform-browser'; import { TdDataTableColumnComponent } from './data-table-column/data-table-column.component'; -import { TdDataTableRowComponent } from './data-table-row/data-table-row.component'; import { TdDataTableComponent, ITdDataTableColumn } from './data-table.component'; import { TdDataTableService } from './services/data-table.service'; import { CovalentDataTableModule } from './data-table.module'; import { NgModule, DebugElement } from '@angular/core'; -import { MdCheckbox } from '@angular/material'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; describe('Component: DataTable', () => { @@ -122,141 +120,22 @@ describe('Component: DataTable', () => { })(); }); - describe('selectable and multiple', () => { - - it('should not set the data input and not fail', (done: DoneFn) => { - inject([], () => { - let fixture: ComponentFixture = TestBed.createComponent(TdDataTableSelectableTestComponent); - let element: DebugElement = fixture.debugElement; - let component: TdDataTableSelectableTestComponent = fixture.debugElement.componentInstance; - - component.selectable = true; - component.multiple = true; - - fixture.detectChanges(); - fixture.whenStable().then(() => { - // if it finishes in means it didnt fail - done(); - }); - })(); - }); - - it('should select one and be in indeterminate state, select all and then unselect all', - (done: DoneFn) => { inject([], () => { - let fixture: ComponentFixture = TestBed.createComponent(TdDataTableSelectableTestComponent); - let element: DebugElement = fixture.debugElement; - let component: TdDataTableSelectableTestComponent = fixture.debugElement.componentInstance; - - component.selectable = true; - component.multiple = true; - component.columns = [ - { name: 'sku', label: 'SKU #' }, - { name: 'item', label: 'Item name' }, - { name: 'price', label: 'Price (US$)', numeric: true }, - ]; - - component.data = [{ sku: '1452-2', item: 'Pork Chops', price: 32.11 }, - { sku: '1421-0', item: 'Prime Rib', price: 41.15 }, - { sku: '1452-1', item: 'Sirlone', price: 22.11 }, - { sku: '1421-3', item: 'T-Bone', price: 51.15 }]; - - fixture.detectChanges(); - fixture.whenStable().then(() => { - let dataTableComponent: TdDataTableComponent = fixture.debugElement.query(By.directive(TdDataTableComponent)).componentInstance; - // check how many rows (without count the columns) were rendered - expect(fixture.debugElement.queryAll(By.directive(TdDataTableRowComponent)).length - 1).toBe(4); - // check to see checkboxes states - expect(dataTableComponent.indeterminate).toBeFalsy(); - expect(dataTableComponent.allSelected).toBeFalsy(); - // select a row with a click event - fixture.debugElement.queryAll(By.directive(TdDataTableRowComponent))[2].triggerEventHandler('click', new Event('click')); - fixture.detectChanges(); - fixture.whenStable().then(() => { - // check to see if its in indeterminate state - expect(dataTableComponent.indeterminate).toBeTruthy(); - expect(dataTableComponent.allSelected).toBeFalsy(); - // select the rest of the rows by clicking in selectAll - fixture.debugElement.query(By.directive(MdCheckbox)).triggerEventHandler('click', new Event('click')); - fixture.detectChanges(); - fixture.whenStable().then(() => { - // check to see if its in indeterminate state and allSelected - expect(dataTableComponent.indeterminate).toBeTruthy(); - expect(dataTableComponent.allSelected).toBeTruthy(); - // unselect all rows by clicking in unselect all - fixture.debugElement.query(By.directive(MdCheckbox)).triggerEventHandler('click', new Event('click')); - fixture.detectChanges(); - fixture.whenStable().then(() => { - // check to see if its not in indeterminate state and not allSelected - expect(dataTableComponent.indeterminate).toBeFalsy(); - expect(dataTableComponent.allSelected).toBeFalsy(); - done(); - }); - }); - }); - }); - })(); - }); - - it('should be interminate when atleast one row is selected and allSelected when all rows are selected', - (done: DoneFn) => { inject([], () => { - let fixture: ComponentFixture = TestBed.createComponent(TdDataTableSelectableTestComponent); - let element: DebugElement = fixture.debugElement; - let component: TdDataTableSelectableTestComponent = fixture.debugElement.componentInstance; - - component.selectable = true; - component.multiple = true; - component.columns = [ - { name: 'sku', label: 'SKU #' }, - { name: 'item', label: 'Item name' }, - { name: 'price', label: 'Price (US$)', numeric: true }, - ]; - - component.data = [{ sku: '1452-2', item: 'Pork Chops', price: 32.11 }, - { sku: '1421-0', item: 'Prime Rib', price: 41.15 }, - { sku: '1452-1', item: 'Sirlone', price: 22.11 }, - { sku: '1421-3', item: 'T-Bone', price: 51.15 }]; - - fixture.detectChanges(); - fixture.whenStable().then(() => { - let dataTableComponent: TdDataTableComponent = fixture.debugElement.query(By.directive(TdDataTableComponent)).componentInstance; - // check how many rows (without count the columns) were rendered - expect(fixture.debugElement.queryAll(By.directive(TdDataTableRowComponent)).length - 1).toBe(4); - // check to see checkboxes states - expect(dataTableComponent.indeterminate).toBeFalsy(); - expect(dataTableComponent.allSelected).toBeFalsy(); - // select a row with a click event - fixture.debugElement.queryAll(By.directive(TdDataTableRowComponent))[2].triggerEventHandler('click', new Event('click')); - fixture.detectChanges(); - fixture.whenStable().then(() => { - // check to see if its in indeterminate state - expect(dataTableComponent.indeterminate).toBeTruthy(); - expect(dataTableComponent.allSelected).toBeFalsy(); - // select the rest of the rows - fixture.debugElement.queryAll(By.directive(TdDataTableRowComponent))[1].triggerEventHandler('click', new Event('click')); - fixture.debugElement.queryAll(By.directive(TdDataTableRowComponent))[3].triggerEventHandler('click', new Event('click')); - fixture.debugElement.queryAll(By.directive(TdDataTableRowComponent))[4].triggerEventHandler('click', new Event('click')); - fixture.detectChanges(); - fixture.whenStable().then(() => { - // check to see if its in indeterminate state and allSelected - expect(dataTableComponent.indeterminate).toBeTruthy(); - expect(dataTableComponent.allSelected).toBeTruthy(); - // unselect one of the rows - fixture.debugElement.queryAll(By.directive(TdDataTableRowComponent))[2].triggerEventHandler('click', new Event('click')); - fixture.detectChanges(); - fixture.whenStable().then(() => { - // check to see if its in indeterminate state and not allSelected - expect(dataTableComponent.indeterminate).toBeTruthy(); - expect(dataTableComponent.allSelected).toBeFalsy(); - done(); - }); - }); - }); - }); - })(); - }); + it('should not set the data input and not fail when selectable and multiple', (done: DoneFn) => { + inject([], () => { + let fixture: ComponentFixture = TestBed.createComponent(TdDataTableSelectableTestComponent); + let element: DebugElement = fixture.debugElement; + let component: TdDataTableSelectableTestComponent = fixture.debugElement.componentInstance; + + component.selectable = true; + component.multiple = true; + fixture.detectChanges(); + fixture.whenStable().then(() => { + // if it finishes in means it didnt fail + done(); + }); + })(); }); - }); @Component({ diff --git a/src/platform/core/data-table/data-table.component.ts b/src/platform/core/data-table/data-table.component.ts index 4d773b0e15..addfa8b481 100644 --- a/src/platform/core/data-table/data-table.component.ts +++ b/src/platform/core/data-table/data-table.component.ts @@ -63,8 +63,6 @@ export class TdDataTableComponent implements ControlValueAccessor, AfterContentI private _columns: ITdDataTableColumn[]; private _selectable: boolean = false; private _multiple: boolean = true; - private _allSelected: boolean = false; - private _indeterminate: boolean = false; /** sorting */ private _sortable: boolean = false; @@ -75,21 +73,6 @@ export class TdDataTableComponent implements ControlValueAccessor, AfterContentI private _templateMap: Map> = new Map>(); @ContentChildren(TdDataTableTemplateDirective) _templates: QueryList; - /** - * Returns true if all values are selected. - */ - get allSelected(): boolean { - return this._allSelected; - } - - /** - * Returns true if all values are not deselected - * and atleast one is. - */ - get indeterminate(): boolean { - return this._indeterminate; - } - /** * Implemented as part of ControlValueAccessor. */ @@ -294,10 +277,18 @@ export class TdDataTableComponent implements ControlValueAccessor, AfterContentI * Refreshes data table and rerenders [data] and [columns] */ refresh(): void { - this._calculateCheckboxState(); this._changeDetectorRef.markForCheck(); } + /** + * Checks if all visible rows are selected. + */ + areAllSelected(): boolean { + const match: string = + this._data ? this._data.find((d: any) => !this.isRowSelected(d)) : true; + return typeof match === 'undefined'; + } + /** * Selects or clears all rows depending on 'checked' value. */ @@ -312,7 +303,6 @@ export class TdDataTableComponent implements ControlValueAccessor, AfterContentI } else { this.clearModel(); } - this._calculateCheckboxState(); this.onSelectAll.emit({rows: this._value, selected: checked}); } @@ -353,7 +343,6 @@ export class TdDataTableComponent implements ControlValueAccessor, AfterContentI this._value.splice(index, 1); } } - this._calculateCheckboxState(); this.onRowSelect.emit({row: row, selected: checked}); this.onChange(this._value); } @@ -402,36 +391,4 @@ export class TdDataTableComponent implements ControlValueAccessor, AfterContentI } } - /** - * Calculate all the state of all checkboxes - */ - private _calculateCheckboxState(): void { - this._calculateAllSelected(); - this._calculateIndeterminate(); - } - - /** - * Checks if all visible rows are selected. - */ - private _calculateAllSelected(): void { - const match: string = - this._data ? this._data.find((d: any) => !this.isRowSelected(d)) : true; - this._allSelected = typeof match === 'undefined'; - } - - /** - * Checks if all visible rows are selected. - */ - private _calculateIndeterminate(): void { - this._indeterminate = false; - if (this._data) { - for (let row of this._data) { - if (!this.isRowSelected(row)) { - continue; - } - this._indeterminate = true; - } - } - } - }