feat(grid): Add selection, adv filtering #5460

Author: hanastasov

projects/igniteui-angular/src/lib/grids/state.directive.ts

@@ -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 {
@@ -28,7 +29,8 @@ interface IGridStateOptions {
     sorting?: boolean;
     groupby?: boolean;
     paging?: boolean;
-    selection?: boolean;
+    cellSelection?: boolean;
+    rowSelection?: boolean;
 }
 
 interface IColumnState {
@@ -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]'
@@ -70,7 +73,8 @@ export class IgxGridStateDirective {
         sorting: true,
         groupby: true,
         paging: true,
-        selection: true,
+        cellSelection: true,
+        rowSelection: true
     };
 
     private state: IGridState | IColumnState | IFilteringExpressionsTree |
@@ -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);
     }
 
@@ -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;
@@ -191,7 +180,7 @@ export class IgxGridStateDirective {
                 break;
             }
             case ACTION_ADVANCED_FILTERING: {
-                state = this.getAdvancedFiltering();
+                state = this.restoreAdvancedFiltering(state);
                 break;
             }
             case ACTION_SORTING: {
@@ -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;
               }
          }
@@ -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;
               }
          }
@@ -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,
@@ -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 };
     }
 
     /**
@@ -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;
     }
 
@@ -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.
      */
@@ -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);

src/app/grid-state/grid-state.component.html

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

src/app/grid-state/grid-state.component.ts

@@ -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
   };
 
@@ -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() {
@@ -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 {
@@ -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() });
     }
   }
 
@@ -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 });
     }
   }
 
@@ -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;
   }