Skip to content

Commit

Permalink
feat(grid): Add selection, adv filtering #5460
Browse files Browse the repository at this point in the history
  • Loading branch information
@hanastasov
hanastasov committed Nov 18, 2019
1 parent 56913bd commit 8a993e2
Show file tree
Hide file tree
Showing 3 changed files with 120 additions and 55 deletions.
101 changes: 59 additions & 42 deletions projects/igniteui-angular/src/lib/grids/state.directive.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,14 @@ import { IgxBooleanFilteringOperand, IgxNumberFilteringOperand, IgxDateFiltering
IgxStringFilteringOperand } from '../data-operations/filtering-condition';

export interface IGridState {
columns: IColumnState[];
filtering: FilteringExpressionsTree;
advancedFiltering: FilteringExpressionsTree;
sorting: ISortingExpression[];
groupby: IGroupingExpression[];
paging: IPagingState;
selection: any[];
columns?: IColumnState[];
filtering?: FilteringExpressionsTree;
advancedFiltering?: FilteringExpressionsTree;
sorting?: ISortingExpression[];
groupby?: IGroupingExpression[];
paging?: IPagingState;
cellSelection?: any[];
rowSelection?: any[];
}

interface IGridStateOptions {
Expand All @@ -28,7 +29,8 @@ interface IGridStateOptions {
sorting?: boolean;
groupby?: boolean;
paging?: boolean;
selection?: boolean;
cellSelection?: boolean;
rowSelection?: boolean;
}

interface IColumnState {
Expand Down Expand Up @@ -56,7 +58,8 @@ const ACTION_ADVANCED_FILTERING = 'advancedFiltering';
const ACTION_SORTING = 'sorting';
const ACTION_GROUPBY = 'groupby';
const ACTION_PAGING = 'paging';
const ACTION_SELECTION = 'selection';
const ACTION_ROW_SELECTION = 'rowSelection';
const ACTION_CELL_SELECTION = 'cellSelection';

@Directive({
selector: '[igxGridState]'
Expand All @@ -70,7 +73,8 @@ export class IgxGridStateDirective {
sorting: true,
groupby: true,
paging: true,
selection: true,
cellSelection: true,
rowSelection: true
};

private state: IGridState | IColumnState | IFilteringExpressionsTree |
Expand Down Expand Up @@ -110,17 +114,11 @@ export class IgxGridStateDirective {
* this.state.setState(gridState);
* ```
*/
public setState(state: IGridState |
IColumnState |
IFilteringExpressionsTree |
ISortingExpression |
IGroupingExpression |
IPagingState | string) {
public setState(state: IGridState | string) {
if (typeof state === 'string') {
state = JSON.parse(state as string, this.parseCallback) as string;
}
this.state = state as IGridState | IColumnState | IFilteringExpressionsTree |
ISortingExpression | IGroupingExpression | IPagingState;
this.state = state as IGridState;
this.restoreGridState(this.state);
}

Expand All @@ -137,25 +135,16 @@ export class IgxGridStateDirective {
* let state = this.state.getState();
* ```
*/
public getState(serialize = true, feature?: string | string[]): IGridState |
IColumnState |
IFilteringExpressionsTree |
ISortingExpression |
IGroupingExpression |
IPagingState | string {
let state: IGridState |
IColumnState |
IFilteringExpressionsTree |
ISortingExpression |
IGroupingExpression |
IPagingState | string;
public getState(serialize = true, feature?: string | string[]): IGridState | string {
let state: IGridState | string;
if (feature) {
state = {};
if (Array.isArray(feature)) {
feature.forEach(f => {
state[f] = this.getGridFeature(f);
state = Object.assign(state, this.getGridFeature(f));
});
} else {
state[feature] = this.getGridFeature(feature);
state = this.getGridFeature(feature);
}
} else {
state = this.getAllGridFeatures() as IGridState;
Expand Down Expand Up @@ -191,7 +180,7 @@ export class IgxGridStateDirective {
break;
}
case ACTION_ADVANCED_FILTERING: {
state = this.getAdvancedFiltering();
state = this.restoreAdvancedFiltering(state);
break;
}
case ACTION_SORTING: {
Expand All @@ -206,8 +195,12 @@ export class IgxGridStateDirective {
this.restorePaging(state);
break;
}
case ACTION_SELECTION: {
state = this.getSelection();
case ACTION_ROW_SELECTION: {
state = this.restoreRowSelection(state);
break;
}
case ACTION_CELL_SELECTION: {
state = this.restoreCellSelection(state);
break;
}
}
Expand Down Expand Up @@ -261,8 +254,12 @@ export class IgxGridStateDirective {
state = this.getPaging();
break;
}
case ACTION_SELECTION: {
state = this.getSelection();
case ACTION_ROW_SELECTION: {
state = this.getRowSelection();
break;
}
case ACTION_CELL_SELECTION: {
state = this.getCellSelection();
break;
}
}
Expand All @@ -279,6 +276,7 @@ export class IgxGridStateDirective {
sortable: c.sortable,
filterable: c.filterable,
editable: c.editable,
groupable: c.groupable,
movable: c.movable,
hidden: c.hidden,
dataType: c.dataType,
Expand Down Expand Up @@ -317,9 +315,16 @@ export class IgxGridStateDirective {
return { groupby: groupingState };
}

private getSelection() {
private getRowSelection() {
const selection = this.grid.selectedRows();
return { selection: selection };
return { rowSelection: selection };
}

private getCellSelection() {
const selection = this.grid.selectedCells.map(cell => {
return { row: cell.rowIndex, column: cell.columnIndex };
});
return { cellSelection: selection };
}

/**
Expand Down Expand Up @@ -363,7 +368,7 @@ export class IgxGridStateDirective {
* Restores the grid advanced filtering state, i.e. sets the `advancedFilteringExpressionsTree` property value.
*/
private restoreAdvancedFiltering(state) {
const advFilterTree = this.createExpressionsTreeFromObject(state.advancedFiltering);
const advFilterTree = this.createExpressionsTreeFromObject(state);
this.grid.advancedFilteringExpressionsTree = advFilterTree;
}

Expand Down Expand Up @@ -410,10 +415,17 @@ export class IgxGridStateDirective {
}
}

private restoreSelection(state: any[]) {
private restoreRowSelection(state: any[]) {
this.grid.selectRows(state);
}

private restoreCellSelection(state: any[]) {
state.forEach(cell => {
const range = { rowStart: cell.row, rowEnd: cell.row, columnStart: cell.column, columnEnd: cell.column};
this.grid.selectRange(range);
});
}

/**
* This method builds a FilteringExpressionsTree from a provided object.
*/
Expand All @@ -431,7 +443,12 @@ export class IgxGridStateDirective {
expressionsTree.filteringOperands.push(subTree);
} else {
const expr = item as IFilteringExpression;
const dataType = this.state[ACTION_COLUMNS].find(c => c.field === expr.fieldName).dataType;
let dataType: string;
if (this.grid.columnList.length > 0) {
dataType = this.grid.columnList.find(c => c.field === expr.fieldName).dataType;
} else {
dataType = this.state[ACTION_COLUMNS].find(c => c.field === expr.fieldName).dataType;
}
expr.condition = this.generateFilteringCondition(dataType, expr.condition.name);
expr.searchVal = (dataType === 'date') ? new Date(Date.parse(expr.searchVal)) : expr.searchVal;
expressionsTree.filteringOperands.push(expr);
Expand Down
20 changes: 16 additions & 4 deletions src/app/grid-state/grid-state.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,15 @@
<li>Use the <strong>delete</strong> and <strong>reload</strong> buttons to clear the localStorage content and reload the page with clear state.</li>
</ul>
</div>
<div class="switches" style="min-width: inherit">
<igx-buttongroup [values]="selectionModes" (onSelect)="selectCellSelectionMode($event)"></igx-buttongroup>
</div>
<div class="switches">
<div class="control-item">
<igx-switch [(ngModel)]="options.selection" (change)="onChange($event, 'selection')">Row Selection</igx-switch>
<igx-switch [(ngModel)]="options.rowSelection" (change)="onChange($event, 'rowSelection')">Row Selection</igx-switch>
</div>
<div class="control-item">
<igx-switch [(ngModel)]="options.cellSelection" (change)="onChange($event, 'cellSelection')">Cell Selection</igx-switch>
</div>
<div class="control-item">
<igx-switch [(ngModel)]="options.filtering" (change)="onChange($event, 'filtering')">Filtering</igx-switch>
Expand Down Expand Up @@ -43,14 +49,20 @@
<div class="control-item">
<button igxButton="raised" (click)="restoreFiltering()">Filtering</button>
</div>
<div class="control-item">
<button igxButton="raised" (click)="restoreAdvancedFiltering()">Adv Filtering</button>
</div>
<div class="control-item">
<button igxButton="raised" (click)="restoreSorting()">Sorting</button>
</div>
<div class="control-item">
<button igxButton="raised" (click)="restoreGroupby()">GroupBy</button>
</div>
<div class="control-item">
<button igxButton="raised" (click)="restoreSelection">Selection</button>
<button igxButton="raised" (click)="restoreRowSelection()">Row Selection</button>
</div>
<div class="control-item">
<button igxButton="raised" (click)="restoreCellSelection()">Cell Selection</button>
</div>
<div class="control-item">
<button igxButton="raised" (click)="restorePaging()">Paging</button>
Expand All @@ -67,10 +79,10 @@
</div>
</div>

<igx-grid [id]="gridId" #grid1 [igxGridState]="options" [data]="localData" [primaryKey]="'ProductID'" width="1200px" height="550px"
<igx-grid [id]="gridId" #grid1 [igxGridState]="options" [data]="localData" [primaryKey]="'EmployeeID'" width="1200px" height="550px"
[rowEditable]="false" [allowFiltering]="true" [allowAdvancedFiltering]="true"
[paging]="true" [showToolbar]="true" [columnPinning]="true" [columnHiding]="true"
[filterMode]="'excelStyleFilter'" [displayDensity]="'cosy'">
[filterMode]="'excelStyleFilter'" [displayDensity]="'cosy'" [cellSelection]="selectionMode" [rowSelection]="'none'">
<igx-column *ngFor="let c of columns" [sortable]="c.sortable" [movable]="c.movable" [editable]="true" [filterable]="c.filterable" [groupable]="c.groupable"
[field]="c.field" [header]="c.header" [dataType]="c.dataType" [pinned]="c.pinned" [hidden]="c.hidden">
</igx-column>
Expand Down
54 changes: 45 additions & 9 deletions src/app/grid-state/grid-state.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,12 +33,13 @@ export class GridSaveStateComponent implements OnInit, AfterViewInit {
public serialize = true;

public options = {
selection: false,
cellSelection: true,
rowSelection: true,
filtering: true,
advancedFiltering: false,
advancedFiltering: true,
paging: true,
sorting: true,
groupby: false,
groupby: true,
columns: true
};

Expand All @@ -56,7 +57,15 @@ export class GridSaveStateComponent implements OnInit, AfterViewInit {
// tslint:enable:max-line-length
];

public selectionMode = 'multiple';
public selectionModes = [];

constructor(private router: Router) {
this.selectionModes = [
{ label: 'none', selected: this.selectionMode === 'none', togglable: true },
{ label: 'single', selected: this.selectionMode === 'single', togglable: true },
{ label: 'multiple', selected: this.selectionMode === 'multiple', togglable: true }
];
}

public ngOnInit() {
Expand Down Expand Up @@ -87,6 +96,7 @@ export class GridSaveStateComponent implements OnInit, AfterViewInit {

public saveGridState() {
const state = this.state.getState(this.serialize);
// const state = this.state.getState(this.serialize, ['sorting', 'filtering']);
if (typeof state === 'string') {
window.localStorage.setItem(this.stateKey, state);
} else {
Expand All @@ -102,18 +112,32 @@ export class GridSaveStateComponent implements OnInit, AfterViewInit {
}

public restoreColumns() {
let state = window.localStorage.getItem(this.stateKey);
state = JSON.parse(state)['columns'];
const state = this.getColumnsState();
if (state) {
this.state.setState({ columns: state });
}
}

public getColumnsState(): any {
let state = window.localStorage.getItem(this.stateKey);
state = JSON.parse(state)['columns'];
return state;
}

public restoreFiltering() {
let state = window.localStorage.getItem(this.stateKey);
state = JSON.parse(state)['filtering'];
if (state) {
this.state.setState({ filtering: state });
this.state.setState({ filtering: state, columns: this.getColumnsState() });
}
}

public restoreAdvancedFiltering() {
this.restoreColumns();
let state = window.localStorage.getItem(this.stateKey);
state = JSON.parse(state)['advancedFiltering'];
if (state) {
this.state.setState({ advancedFiltering: state, columns: this.getColumnsState() });
}
}

Expand All @@ -133,11 +157,19 @@ export class GridSaveStateComponent implements OnInit, AfterViewInit {
}
}

public restoreSelection() {
public restoreRowSelection() {
let state = window.localStorage.getItem(this.stateKey);
state = JSON.parse(state)['rowSelection'];
if (state) {
this.state.setState({ rowSelection: state });
}
}

public restoreCellSelection() {
let state = window.localStorage.getItem(this.stateKey);
state = JSON.parse(state)['selection'];
state = JSON.parse(state)['cellSelection'];
if (state) {
this.state.setState({ selection: state });
this.state.setState({ cellSelection: state });
}
}

Expand All @@ -160,6 +192,10 @@ export class GridSaveStateComponent implements OnInit, AfterViewInit {
this.state.options[action] = event.checked;
}

public selectCellSelectionMode(args) {
this.selectionMode = this.selectionModes[args.index].label;
}

public onSerializeChange(event: any) {
// this.serialize = !!event.checked;
}
Expand Down

0 comments on commit 8a993e2

Please sign in to comment.