Skip to content

Commit

Permalink
Merge 4299b81 into 6820ca0
Browse files Browse the repository at this point in the history
  • Loading branch information
hdimitrieski committed Feb 12, 2020
2 parents 6820ca0 + 4299b81 commit 55f28d4
Show file tree
Hide file tree
Showing 25 changed files with 313 additions and 83 deletions.
4 changes: 4 additions & 0 deletions projects/data-grid-demo/src/app/app.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -9,3 +9,7 @@
<button (click)="onInitialize()">Initialize</button>
<br/>
<button (click)="onResetGridState()">Reset Grid State</button>
<br/>
<button (click)="initializeWithCheckboxSelection()">Checkbox Selection</button>
<br/>
<button (click)="initializeWithRadioSelection()">Radio button Selection</button>
21 changes: 18 additions & 3 deletions projects/data-grid-demo/src/app/app.component.ts
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
import { DataGridColumn, FilterType, GridConfig, GridConfigBuilder, hasData, initGrid, FilteringOptions, updateGridData } from 'ngrx-data-grid';
import { DataGridColumn, FilteringOptions, FilterType, GridConfig, GridConfigBuilder, hasData, initGrid, SelectionType, updateGridData } from 'ngrx-data-grid';
import * as R from 'ramda';
import { NumberComponent } from './components/number.component';
import { MockService } from './mock/mock.service';
import { from } from 'rxjs';
import { formatDate } from '@angular/common';
import { select, Store } from '@ngrx/store';
import { TextComponent } from './components/text.component';
Expand All @@ -30,7 +29,7 @@ export class AppComponent implements OnInit {

constructor(private store: Store<any>) {
this.config = GridConfigBuilder.gridConfig()
.withCheckboxSelection(true)
.withSelection(SelectionType.Checkbox)
.build();

this.data = new MockService().getData().rows;
Expand Down Expand Up @@ -179,6 +178,22 @@ export class AppComponent implements OnInit {
}));
}

initializeWithCheckboxSelection() {
this.config = GridConfigBuilder.gridConfig()
.withSelection(SelectionType.Checkbox)
.build();

this.onInitialize();
}

initializeWithRadioSelection() {
this.config = GridConfigBuilder.gridConfig()
.withSelection(SelectionType.Radio)
.build();

this.onInitialize();
}

onInitialize() {
this.store.dispatch(initGrid({
name: this.gridName,
Expand Down
2 changes: 2 additions & 0 deletions projects/data-grid/src/lib/actions/data-grid-payload.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { DataGridColumn, FilteringOptions, SortType } from '../models';
import { SelectionType } from '../config';

export interface BaseGridPayload {
name: string;
Expand Down Expand Up @@ -31,6 +32,7 @@ export interface ChangePageNumberPayload extends BaseGridPayload {

export interface ToggleRowSelectionPayload<T extends object = object> extends BaseGridPayload {
dataItem: T;
selectionType: SelectionType;
}

export interface ToggleAllRowsSelectionPayload extends BaseGridPayload {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<div class="grid">
<ngrx-grid-header
[columns]="columns"
[checkboxSelection]="checkboxSelection"
[selectionType]="selectionType"
[allSelected]="allSelected"
[ngStyle]="columnsStyle"
(filterGrid)="filterGrid.emit($event)"
Expand All @@ -16,7 +16,7 @@
[columns]="columns"
[data]="rowData"
[rowIndex]="i"
[checkBoxSelection]="checkboxSelection"
[selectionType]="selectionType"
[ngStyle]="columnsStyle"
(toggleRow)="onToggleRow(i)">
</ngrx-grid-row>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
import { NO_ERRORS_SCHEMA, SimpleChange } from '@angular/core';
import { GridDisplayComponent } from './grid-display.component';
import { DataGridColumnWithId, GridCell } from '../models';
import { GridConfigBuilder } from '../config';
import { SelectionType } from '../config';

class MockCellComponent implements GridCell {
data: any;
Expand Down Expand Up @@ -84,12 +84,13 @@ describe('GridDisplayComponent', () => {
it('should emit event when row/s is toggled', () => {
// given
const index = 1;
component.selectionType = SelectionType.Radio;

// when
component.onToggleRow(index);

// then
expect(component.toggleRow.emit).toHaveBeenCalledWith(mockData[1]);
expect(component.toggleRow.emit).toHaveBeenCalledWith({dataItem: mockData[1], selectionType: SelectionType.Radio});
});

it('should return true if a checkbox is selected', () => {
Expand Down Expand Up @@ -120,7 +121,7 @@ describe('GridDisplayComponent', () => {
const changes = {columns: new SimpleChange([], newColumns, false)};

component.columns = newColumns;
component.selectionConfig = GridConfigBuilder.gridConfig().withCheckboxSelection(true).build().selection;
component.selectionType = SelectionType.Checkbox;

const expected = {'grid-template-columns': '3rem minmax(150px, 1.4fr) 300px'};

Expand Down
14 changes: 7 additions & 7 deletions projects/data-grid/src/lib/components/grid-display.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,10 @@ import {
SimpleChanges
} from '@angular/core';
import * as R from 'ramda';
import { SelectionConfig } from '../config';
import { ApplyFilterEvent, DataGridColumnWithId, GridDataSortWithColumnId } from '../models';
import { SelectionConfig, SelectionType } from '../config';
import { ApplyFilterEvent, DataGridColumnWithId, GridDataSortWithColumnId, ToggleRowSelectionEvent } from '../models';
import { ColumnsStyle, toColumnsStyle } from '../util/columns-style';
import { hasValue } from '../util/type';

@Component({
selector: 'ngrx-grid-display',
Expand All @@ -19,25 +20,24 @@ import { ColumnsStyle, toColumnsStyle } from '../util/columns-style';
changeDetection: ChangeDetectionStrategy.OnPush
})
export class GridDisplayComponent implements OnChanges {
@Input() selectionConfig: SelectionConfig;
@Input() columns: DataGridColumnWithId[] = [];
@Input() gridRows: any[] = [];
@Input() rowDataIndexes: number[] = [];
@Input() selectedRowIndexes: number[] = [];
@Input() checkboxSelection = false;
@Input() selectionType: SelectionType;
@Input() allSelected = false;

@Output() sortGrid = new EventEmitter<GridDataSortWithColumnId>();
@Output() filterGrid = new EventEmitter<ApplyFilterEvent>();
@Output() toggleSelectAllRows = new EventEmitter();
@Output() toggleRow = new EventEmitter();
@Output() toggleRow = new EventEmitter<ToggleRowSelectionEvent>();

columnsStyle: ColumnsStyle;

ngOnChanges({columns: columnsChanges}: SimpleChanges): void {
if (columnsChanges && columnsChanges.currentValue !== columnsChanges.previousValue) {
const columnsStyle = toColumnsStyle(this.columns);
const selectionStyle = (this.selectionConfig.checkboxSelection) ? '3rem' : '';
const selectionStyle = hasValue(this.selectionType) ? '3rem' : '';
this.columnsStyle = {'grid-template-columns': `${selectionStyle} ${columnsStyle}`};
}
}
Expand All @@ -47,7 +47,7 @@ export class GridDisplayComponent implements OnChanges {
}

onToggleRow(index: number) {
this.toggleRow.emit(this.gridRows[index]);
this.toggleRow.emit({dataItem: this.gridRows[index], selectionType: this.selectionType});
}

checkSelected(index: number): boolean {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,13 +1,11 @@
<ngrx-grid-header-item *ngIf="checkboxSelection">
<div class="data-grid-checkbox-wrapper data-grid-checkbox">
<input
type="checkbox"
[checked]="allSelected"
(change)="onToggleSelectAllRows()"
id="select-all"
class="data-grid-input"/>
<label class="data-grid-label" for="select-all"></label>
</div>
<ngrx-grid-header-item *ngIf="selectionType">
<ngrx-row-select
*ngIf="hasCheckboxSelection()"
id="selectAll"
[isSelected]="allSelected"
[type]="selectionType"
(selected)="onToggleSelectAllRows()">
</ngrx-row-select>
</ngrx-grid-header-item>

<ng-container *ngFor="let column of columns; trackBy: trackByIndex; let i = index">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,3 @@
@include display-grid();
border-bottom: 2px solid $c_primary;
}

.grid-checkbox-header {
height: $header-height;
display: flex;
justify-content: center;
align-items: center;
}
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
import { Component, EventEmitter, Input, Output } from '@angular/core';
import {
ApplyFilterEvent,
DataGridColumnWithId,
GridDataSortWithColumnId
} from '../../models';
import { ApplyFilterEvent, DataGridColumnWithId, GridDataSortWithColumnId } from '../../models';
import { SelectionType } from '../../config';
import { isCheckboxSelection } from '../../util/selection';

@Component({
selector: 'ngrx-grid-header',
Expand All @@ -12,7 +10,7 @@ import {
})
export class GridHeaderComponent {
@Input() columns: DataGridColumnWithId[];
@Input() checkboxSelection = false;
@Input() selectionType: SelectionType;
@Input() allSelected = false;

@Output() sortGrid = new EventEmitter<GridDataSortWithColumnId>();
Expand All @@ -27,4 +25,8 @@ export class GridHeaderComponent {
this.toggleSelectAllRows.emit(!this.allSelected);
}

hasCheckboxSelection() {
return isCheckboxSelection(this.selectionType);
}

}
Original file line number Diff line number Diff line change
@@ -1,12 +1,10 @@
<ngrx-grid-cell *ngIf="checkBoxSelection">
<div class="data-grid-checkbox-wrapper data-grid-checkbox">
<input type="checkbox"
class="data-grid-input"
[checked]="isSelected"
(change)="toggleRowSelection()"
[id]="rowIndex"/>
<label class="data-grid-label" [for]="rowIndex"></label>
</div>
<ngrx-grid-cell *ngIf="selectionType">
<ngrx-row-select
[isSelected]="isSelected"
[id]="rowIndex"
[type]="selectionType"
(selected)="toggleRowSelection()">
</ngrx-row-select>
</ngrx-grid-cell>

<ng-container *ngFor="let column of columns; trackBy: trackByIndex;">
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { columnValueResolver, DataGridColumnWithId } from '../../models';
import { SelectionType } from '../../config';

@Component({
selector: 'ngrx-grid-row',
Expand All @@ -11,7 +12,7 @@ export class GridRowComponent {
@Input() columns: DataGridColumnWithId[];
@Input() isSelected: boolean;
@Input() rowIndex: number;
@Input() checkBoxSelection = false;
@Input() selectionType: SelectionType;
@Output() toggleRow = new EventEmitter();

trackByIndex(_, index) {
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<div class="data-grid-checkbox-wrapper data-grid-checkbox">
<ng-container *ngIf="isCheckbox()">
<input
type="checkbox"
[checked]="isSelected"
(change)="selected.emit()"
[id]="inputId"
class="data-grid-input"/>
<label class="data-grid-label" [for]="inputId"></label>
</ng-container>

<input
*ngIf="isRadio()"
type="radio"
name="radioSelection"
[id]="inputId"
[checked]="isSelected"
(change)="select()" />
</div>
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
@import "../../../styles/checkbox";
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
import { TestBed } from '@angular/core/testing';
import { NO_ERRORS_SCHEMA } from '@angular/core';
import { GridTranslateService } from '../../services/grid-translate.service';
import { RowSelectComponent } from './row-select.component';
import { SelectionType } from '../../config';

describe('RowSelectComponent', () => {
let component: RowSelectComponent;

beforeEach(() => {
TestBed.configureTestingModule({
declarations: [
RowSelectComponent
],
providers: [
GridTranslateService
],
schemas: [
NO_ERRORS_SCHEMA
]
}).compileComponents();

component = TestBed.createComponent(RowSelectComponent).componentInstance;
spyOn(component.selected, 'emit');
});

it('should create the component', () => {
expect(component).toBeTruthy();
});

it('should return true for checkbox selection', () => {
// given
component.type = SelectionType.Checkbox;

// then
expect(component.isCheckbox()).toBeTruthy();
});

it('should return true for radio selection', () => {
// given
component.type = SelectionType.Radio;

// then
expect(component.isRadio()).toBeTruthy();
});

it('should dispatch select action if the component is not selected', () => {
// given
component.isSelected = false;

// when
component.select();

// then
expect(component.selected.emit).toHaveBeenCalled();
});

it('should not dispatch select action if the component is already selected', () => {
// given
component.isSelected = true;

// when
component.select();

// then
expect(component.selected.emit).not.toHaveBeenCalled();
});

});
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { SelectionType } from '../../config';
import { isCheckboxSelection, isRadioSelection } from '../../util/selection';

@Component({
selector: 'ngrx-row-select',
templateUrl: 'row-select.component.html',
styleUrls: ['./row-select.component.scss']
})
export class RowSelectComponent {
@Input() isSelected = false;
@Input() id: any;
@Input() type: SelectionType;

@Output() selected = new EventEmitter();

get inputId() {
return `${this.id}-${this.type}`;
}

isCheckbox() {
return isCheckboxSelection(this.type);
}

isRadio() {
return isRadioSelection(this.type);
}

select() {
if (!this.isSelected) {
this.selected.emit();
}
}

}
Loading

0 comments on commit 55f28d4

Please sign in to comment.