Merge remote-tracking branch 'origin/master' into mkirova/row-pinning-export-to-excel

Author: ChronosSF

Diff for: projects/igniteui-angular/src/lib/core/styles/components/navbar/_navbar-theme.scss

@@ -155,5 +155,6 @@
 
     %igx-navbar-title {
         @include igx-type-style($type-scale, $title);
+        margin-bottom: 0;
     }
 }

Diff for: projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.ts

@@ -462,12 +462,14 @@ export class IgxGridFilteringRowComponent implements AfterViewInit {
             this.expressionsList[0].expression.searchVal === null &&
             this.expressionsList[0].expression.condition.isUnary === false) {
             this.filteringService.getExpressions(this.column.field).pop();
+
+            this.filter();
         } else {
-            this.expressionsList.forEach((item) => {
-                if (item.expression.searchVal === null && !item.expression.condition.isUnary) {
-                    this.filteringService.removeExpression(this.column.field, this.expressionsList.indexOf(item));
-                }
-            });
+            const condToRemove = this.expressionsList.filter(ex => ex.expression.searchVal === null && !ex.expression.condition.isUnary);
+            if (condToRemove && condToRemove.length > 0) {
+                condToRemove.forEach(c => this.filteringService.removeExpression(this.column.field, this.expressionsList.indexOf(c)));
+                this.filter();
+            }
         }
 
         this.filteringService.isFilterRowVisible = false;

Diff for: projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts

@@ -1969,6 +1969,23 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
             const activeFilterIcon = header.nativeElement.querySelector('.igx-excel-filter__icon--filtered');
             expect(activeFilterIcon).toBeDefined('no active filter icon was found');
         }));
+
+        it('Should clear non-unary conditions with null searchVal when close', fakeAsync(() => {
+            GridFunctions.clickFilterCellChip(fix, 'ProductName');
+            fix.detectChanges();
+
+            GridFunctions.openFilterDD(fix.debugElement);
+            const dropdownList = fix.debugElement.query(By.css('div.igx-drop-down__list.igx-toggle'));
+            GridFunctions.selectFilteringCondition('Empty', dropdownList);
+            fix.detectChanges();
+            GridFunctions.openFilterDD(fix.debugElement);
+            GridFunctions.selectFilteringCondition('Contains', dropdownList);
+            fix.detectChanges();
+            GridFunctions.closeFilterRow(fix);
+
+            const headerChip = GridFunctions.getFilterChipsForColumn('ProductName', fix);
+            expect(headerChip.length).toBe(1);
+        }));
     });
 
     describe('Integration scenarios', () => {

Diff for: projects/igniteui-angular/src/lib/grids/grid/row-pinning.spec.ts

@@ -699,6 +699,50 @@ describe('Row Pinning #grid', () => {
             verifyDOMMatchesLayoutSettings(gridUnpinnedRow, fix.componentInstance.colGroups);
         });
     });
+    describe(' Hiding', () => {
+        beforeEach(fakeAsync(() => {
+            fix = TestBed.createComponent(GridRowPinningComponent);
+            fix.detectChanges();
+            grid = fix.componentInstance.instance;
+            tick();
+            fix.detectChanges();
+        }));
+
+        it('should hide columns in pinned and unpinned area', () => {
+            // pin 2nd data row
+            grid.pinRow(fix.componentInstance.data[1]);
+            fix.detectChanges();
+            const hiddenCol = grid.columns[1];
+            hiddenCol.hidden = true;
+            fix.detectChanges();
+
+            const pinnedCells = grid.pinnedRows[0].cells;
+            expect(pinnedCells.filter(cell => cell.column.field === hiddenCol.field).length).toBe(0);
+
+            const unpinnedCells = grid.rowList.first.cells;
+            expect(unpinnedCells.filter(cell => cell.column.field === hiddenCol.field).length).toBe(0);
+
+            expect(pinnedCells.length).toBe(unpinnedCells.length);
+
+            const headerCells = grid.headerCellList;
+            expect(headerCells.filter(cell => cell.column.field === hiddenCol.field).length).toBe(0);
+
+            expect(grid.pinnedRows.length).toBe(1);
+            const pinRowContainer = fix.debugElement.queryAll(By.css(FIXED_ROW_CONTAINER));
+            expect(pinRowContainer.length).toBe(1);
+            expect(pinRowContainer[0].children.length).toBe(1);
+            expect(pinRowContainer[0].children[0].context.rowID).toBe(fix.componentInstance.data[1]);
+            expect(pinRowContainer[0].children[0].nativeElement).toBe(grid.getRowByIndex(0).nativeElement);
+
+            expect(grid.getRowByIndex(1).rowID).toBe(fix.componentInstance.data[0]);
+            expect(grid.getRowByIndex(2).rowID).toBe(fix.componentInstance.data[2]);
+
+            // 1 records pinned + 2px border
+            expect(grid.pinnedRowHeight).toBe(grid.renderedRowHeight + 2);
+            const expectedHeight = parseInt(grid.height, 10) - grid.pinnedRowHeight - 18 - grid.theadRow.nativeElement.offsetHeight;
+            expect(grid.calcHeight - expectedHeight).toBeLessThanOrEqual(1);
+        });
+    });
 });
 
 @Component({

Diff for: projects/igniteui-angular/src/lib/grids/state.directive.spec.ts

@@ -72,7 +72,7 @@ describe('IgxGridState - input properties #grid', () => {
 
     it('getState should return corect JSON string', () => {
         // tslint:disable-next-line:max-line-length
-        const initialGridState = '{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ProductID","width":"150px","header":"Product ID","resizable":true,"searchable":false},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Prodyct Name","resizable":true,"searchable":true},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"InStock","width":"140px","header":"In Stock","resizable":true,"searchable":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"OrderDate","width":"110px","header":"Date ordered","resizable":false,"searchable":true}],"filtering":{"filteringOperands":[],"operator":0},"sorting":[],"groupBy":{"expressions":[],"expansion":[],"defaultExpanded":true},"paging":{"index":0,"recordsPerPage":15,"metadata":{"countPages":1,"countRecords":10,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[]}';
+        const initialGridState = '{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ProductID","width":"150px","header":"Product ID","resizable":true,"searchable":false},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Prodyct Name","resizable":true,"searchable":true},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"InStock","width":"140px","header":"In Stock","resizable":true,"searchable":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"OrderDate","width":"110px","header":"Date ordered","resizable":false,"searchable":true}],"filtering":{"filteringOperands":[],"operator":0},"sorting":[],"groupBy":{"expressions":[],"expansion":[],"defaultExpanded":true},"paging":{"index":0,"recordsPerPage":15,"metadata":{"countPages":1,"countRecords":10,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[]}';
         const fix = TestBed.createComponent(IgxGridStateComponent);
         fix.detectChanges();
 
@@ -392,6 +392,30 @@ describe('IgxGridState - input properties #grid', () => {
         expect(gridState).toBe(rowSelectionState);
     });
 
+    it('setState should correctly restore grid row pinning state from object', () => {
+        const fix = TestBed.createComponent(IgxGridStateComponent);
+        fix.detectChanges();
+        const grid  = fix.componentInstance.grid;
+        grid.primaryKey = 'ProductID';
+        fix.detectChanges();
+        const state = fix.componentInstance.state;
+        const rowPinState = '{"rowPinning":[1,3]}';
+        const initialState = '{"rowPinning":[]}';
+        const rowPinStateObject = JSON.parse(rowPinState);
+
+        let gridState = state.getState(true, 'rowPinning');
+        expect(gridState).toBe(initialState);
+
+        state.setState(rowPinStateObject);
+        fix.detectChanges();
+
+        expect(grid.pinnedRows.length).toBe(2);
+        expect(grid.pinnedRows[0].rowID).toBe(1);
+        expect(grid.pinnedRows[1].rowID).toBe(3);
+        gridState = state.getState(true, 'rowPinning');
+        expect(gridState).toBe(rowPinState);
+    });
+
     it('setState should correctly restore grid cell selection state from string', () => {
         const fix = TestBed.createComponent(IgxGridStateComponent);
         fix.detectChanges();

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

@@ -12,6 +12,7 @@ import { GridSelectionRange } from './selection/selection.service';
 import { IGroupByExpandState } from '../data-operations/groupby-expand-state.interface';
 import { IGroupingState } from '../data-operations/groupby-state.interface';
 import { IgxGridComponent } from './grid/grid.component';
+import { IPinningConfig } from './common/grid.interface';
 
 export interface IGridState {
     columns?: IColumnState[];
@@ -23,6 +24,8 @@ export interface IGridState {
     cellSelection?: GridSelectionRange[];
     rowSelection?: any[];
     columnSelection?: string[];
+    rowPinning?: any[];
+    pinningConfig?: IPinningConfig;
 }
 
 export interface IGridStateOptions {
@@ -35,6 +38,8 @@ export interface IGridStateOptions {
     cellSelection?: boolean;
     rowSelection?: boolean;
     columnSelection?: boolean;
+    rowPinning?: boolean;
+    pinningConfig?: boolean;
 }
 
 export interface IColumnState {
@@ -66,6 +71,8 @@ const SORTING = 'sorting';
 const GROUPBY = 'groupBy';
 const PAGING = 'paging';
 const ROW_SELECTION = 'rowSelection';
+const ROW_PINNING = 'rowPinning';
+const PINNING_CONFIG = 'pinningConfig';
 const CELL_SELECTION = 'cellSelection';
 const COLUMN_SELECTION = 'columnSelection';
 
@@ -83,7 +90,8 @@ export class IgxGridStateDirective {
         paging: true,
         cellSelection: true,
         rowSelection: true,
-        columnSelection: true
+        columnSelection: true,
+        rowPinning: true
     };
 
     private state: IGridState;
@@ -216,6 +224,14 @@ export class IgxGridStateDirective {
                 this.restoreRowSelection(state as any[]);
                 break;
               }
+              case ROW_PINNING: {
+                this.restoreRowPinning(state as any[]);
+                break;
+              }
+              case PINNING_CONFIG: {
+                this.restorePinningConfig(state as IPinningConfig);
+                break;
+              }
               case CELL_SELECTION: {
                 this.restoreCellSelection(state as GridSelectionRange[]);
                 break;
@@ -279,6 +295,14 @@ export class IgxGridStateDirective {
                 Object.assign(state, this.getRowSelection());
                 break;
               }
+              case ROW_PINNING: {
+                Object.assign(state, this.getRowPinning());
+                break;
+              }
+              case PINNING_CONFIG: {
+                Object.assign(state, this.getPinningConfig());
+                break;
+              }
               case CELL_SELECTION: {
                 Object.assign(state, this.getCellSelection());
                 break;
@@ -360,6 +384,15 @@ export class IgxGridStateDirective {
         return { rowSelection: selection };
     }
 
+    private getRowPinning(): IGridState {
+        const pinned = this.grid.pinnedRows.map(x => x.rowID);
+        return { rowPinning: pinned };
+    }
+
+    private getPinningConfig(): IGridState {
+        return { pinningConfig: this.grid.pinning };
+    }
+
     private getColumnSelection(): IGridState {
         const selection = this.grid.selectedColumns().map(c => c.field);
         return { columnSelection: selection };
@@ -444,6 +477,14 @@ export class IgxGridStateDirective {
         this.grid.selectRows(state);
     }
 
+    private restoreRowPinning(state: any[]) {
+        state.forEach(rowID => this.grid.pinRow(rowID));
+    }
+
+    private restorePinningConfig(state: IPinningConfig) {
+       this.grid.pinning = state;
+    }
+
     private restoreColumnSelection(state: string[]) {
         this.grid.selectColumns(state);
     }

Diff for: src/app/grid-column-pinning/grid-column-pinning.sample.ts

@@ -103,7 +103,7 @@ export class GridColumnPinningSampleComponent implements OnInit {
 
     togglePinRow(index) {
         const rec = this.data[index];
-        this.grid1.isRecordPinned(rec) ?
+        !this.grid1.isRecordPinned(rec) ?
          this.grid1.pinRow(rec) :
          this.grid1.unpinRow(rec)
     }

Diff for: src/app/grid-row-pinning/grid-row-pinning.sample.html

@@ -6,27 +6,34 @@
     <button (click)="exportButtonHandler()">Export</button>
     <div class="sample-content">
         <div class="sample-column">
+            <div class="sample-buttons">
+                <button igxButton="raised" (click)="saveGridState()">Save state</button>
+                <button igxButton="raised" (click)="restoreGridState()">Restore state</button>
+            </div>
             <div class="sample-switches">
                 <igx-switch (change)='onRowChange()' style="padding-left: 10px"> Bottom Row Pinning toggle</igx-switch>
                 <igx-switch (change)='onChange()' style="padding-left: 10px"> Right Column Pinning toggle</igx-switch>
             </div>
-        <igx-grid [allowFiltering]='true' [primaryKey]='"ID"' [pinning]="pinningConfig" [showToolbar]='true' [columnPinning]='true' #grid1 [data]="data" [width]="'800px'" [height]="'500px'" [rowSelectable]="false">
-            <igx-column width='70px' [filterable]='false'>
-                <ng-template igxCell let-cell="cell" let-val>
-                    <igx-icon class="pin-icon" (mousedown)="togglePining(cell.row, $event)">
-                        {{cell.row.pinned ? 'lock' : 'lock_open'}}
-                    </igx-icon>
-                </ng-template>
-            </igx-column>
-            <igx-column width='100px' [filterable]='false'>
-                <ng-template igxCell let-cell="cell" let-val>
-                    <button (click)="grid1.deleteRow(cell.row.rowID)">Delete</button>
-                </ng-template>
-            </igx-column>
-            <igx-column *ngFor="let c of columns" [sortable]="true" [field]="c.field" [header]="c.field" [width]="c.width" [pinned]='c.pinned' [groupable]='c.groupable'
-                [hidden]='c.hidden' [editable]='true'>
-            </igx-column>
-        </igx-grid>
+            <igx-grid [igxGridState]="options" [allowFiltering]='true' [primaryKey]='"ID"' [pinning]="pinningConfig"
+                [columnHiding]='true' [showToolbar]='true' [columnPinning]='true' #grid1 [data]="data" [width]="'800px'"
+                [height]="'500px'" [rowSelectable]="false">
+                <igx-column width='70px' [filterable]='false'>
+                    <ng-template igxCell let-cell="cell" let-val>
+                        <igx-icon class="pin-icon" (mousedown)="togglePining(cell.row, $event)">
+                            {{cell.row.pinned ? 'lock' : 'lock_open'}}
+                        </igx-icon>
+                    </ng-template>
+                </igx-column>
+                <igx-column width='100px' [filterable]='false'>
+                    <ng-template igxCell let-cell="cell" let-val>
+                        <button (click)="grid1.deleteRow(cell.row.rowID)">Delete</button>
+                    </ng-template>
+                </igx-column>
+                <igx-column *ngFor="let c of columns" [sortable]="true" [field]="c.field" [header]="c.field"
+                    [width]="c.width" [pinned]='c.pinned' [groupable]='c.groupable' [hidden]='c.hidden'
+                    [editable]='true'>
+                </igx-column>
+            </igx-grid>
         </div>
     </div>
-</div>
+</div>