Merge branch 'master' into dkamburov/kb-test-pinning

Author: ChronosSF

CHANGELOG.md

@@ -14,6 +14,17 @@ All notable changes for each version of this project will be documented in this
 ### New Features
 
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
+    - Added ability to pin rows to top or bottom depending on the new `pinning` input.
+    And new API methods `pinRow` and `unpinRow`.
+    ```html
+    <igx-grid [data]="data" [pinning]="pinningConfiguration"></igx-grid>
+    ```
+    ```typescript
+    public pinningConfiguration: IPinningConfig = { rows: RowPinningPosition.Bottom };
+    ```
+    ```typescript
+    this.grid.pinRow(rowID);
+    ```
     - Added support for pinning columns on the right. Change the position of pinning using the new `pinning` input.
     ```html
     <igx-grid [data]="data" [pinning]="pinningConfiguration"></igx-grid>

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;
     }
 }

projects/igniteui-angular/src/lib/grids/api.service.ts

@@ -86,6 +86,9 @@ export class GridBaseAPIService <T extends IgxGridBaseDirective & GridType> {
     }
 
     public get_row_by_key(rowSelector: any): IgxRowDirective<IgxGridBaseDirective & GridType> {
+        if (!this.grid) {
+            return null;
+        }
         const primaryKey = this.grid.primaryKey;
         if (primaryKey !== undefined && primaryKey !== null) {
             return this.grid.dataRowList.find((row) => row.rowData[primaryKey] === rowSelector);

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;

projects/igniteui-angular/src/lib/grids/grid-base.directive.ts

@@ -147,6 +147,7 @@ import { IgxColumnComponent } from './columns/column.component';
 import { IgxColumnGroupComponent } from './columns/column-group.component';
 import { IGridSortingStrategy } from '../data-operations/sorting-strategy';
 import { IgxRowDragGhostDirective, IgxDragIndicatorIconDirective } from './row-drag.directive';
+import { isNumber } from 'util';
 
 const MINIMUM_COLUMN_WIDTH = 136;
 const FILTER_ROW_HEIGHT = 50;
@@ -603,6 +604,13 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         this.notifyChanges();
     }
 
+    /**
+     * @hidden
+     * @internal
+     */
+    @Input()
+    public class = '';
+
     /**
      * Gets/Sets the height.
      * @example
@@ -632,6 +640,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
     get hostWidth() {
         return this._width || this._hostWidth;
     }
+
     /**
      * Gets/Sets the width of the grid.
      * @example
@@ -1747,8 +1756,8 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
     /**
      * @hidden @internal
      */
-    @ViewChild('pinContainer', { static: false })
-    public pinContainer: ElementRef;
+    @ViewChildren('pinContainer', { read: ElementRef })
+    public pinContainers: QueryList<ElementRef>;
 
     /**
      * @hidden @internal
@@ -1939,7 +1948,10 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
      */
     @HostBinding('attr.class')
     get hostClass(): string {
-        return this.getComponentDensityClass('igx-grid');
+        const classes = [this.getComponentDensityClass('igx-grid')];
+        // The custom classes should be at the end.
+        classes.push(this.class);
+        return classes.join(' ');
     }
 
     get bannerClass(): string {
@@ -2410,6 +2422,11 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
      */
     protected destroy$ = new Subject<any>();
 
+    protected _filteredSortedPinnedData;
+    protected _filteredSortedUnpinnedData;
+    protected _filteredPinnedData;
+    protected _filteredUnpinnedData;
+
     /**
      * @hidden
      */
@@ -2479,15 +2496,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
      */
     protected _columnPinning = false;
 
-
-    /**
-     * @hidden
-    */
-    public get pinnedRecords() {
-        return this._pinnedRecords;
-    }
-
-    protected _pinnedRecords = [];
+    protected _pinnedRecordIDs = [];
 
     /**
      * @hidden
@@ -2652,6 +2661,40 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         });
     }
 
+    /**
+    * @hidden
+    * @internal
+    */
+    public isRecordPinned(rec) {
+        const id = this.primaryKey ? rec[this.primaryKey] : rec;
+        return this._pinnedRecordIDs.indexOf(id) !== -1;
+    }
+
+    /**
+    * @hidden
+    * @internal
+    */
+    public pinRecordIndex(rec) {
+        const id = this.primaryKey ? rec[this.primaryKey] : rec;
+        return this._pinnedRecordIDs.indexOf(id);
+    }
+
+    /**
+    * @hidden
+    * @internal
+    */
+    public get hasPinnedRecords() {
+        return this._pinnedRecordIDs.length > 0;
+    }
+
+    /**
+    * @hidden
+    * @internal
+    */
+    public get pinnedRecordsCount() {
+        return this._pinnedRecordIDs.length;
+    }
+
     private keydownHandler = (event) => {
         const key = event.key.toLowerCase();
         if ((isNavigationKey(key) && event.keyCode !== 32) || key === 'tab' || key === 'pagedown' || key === 'pageup') {
@@ -2798,6 +2841,10 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
             this.endEdit(true);
             this.cdr.markForCheck();
         });
+
+        this.onRowPinning.subscribe(() => {
+            this.summaryService.clearSummaryCache();
+        });
     }
 
     /**
@@ -2847,6 +2894,17 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         }
     }
 
+    public setFilterData(data, pinned: boolean) {
+        if (this.hasPinnedRecords && pinned) {
+            this._filteredPinnedData = data;
+            this.filteredData = [... this._filteredPinnedData, ... this._filteredUnpinnedData];
+        } else if (this.hasPinnedRecords && !pinned) {
+            this._filteredUnpinnedData = data;
+        } else {
+            this.filteredData = data;
+        }
+    }
+
     /**
      * @hidden
      * @internal
@@ -2890,6 +2948,22 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         this.setupColumns();
     }
 
+    /**
+     * @hidden
+     * @internal
+     */
+    public setFilteredSortedData(data, pinned: boolean) {
+        if (this._pinnedRecordIDs.length > 0 && pinned) {
+            this._filteredSortedPinnedData = data;
+            this.filteredSortedData = this.isRowPinningToTop ? [... this._filteredSortedPinnedData, ... this._filteredSortedUnpinnedData] :
+            [... this._filteredSortedUnpinnedData, ... this._filteredSortedPinnedData];
+        } else if (this._pinnedRecordIDs.length > 0 && !pinned) {
+            this._filteredSortedUnpinnedData = data;
+        } else {
+            this.filteredSortedData = data;
+        }
+    }
+
     /**
      * @hidden @internal
      */
@@ -2938,6 +3012,12 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         vertScrDC.addEventListener('scroll', this.scrollHandler);
         vertScrDC.addEventListener('wheel', () => this.wheelHandler());
 
+        this.pinContainers.changes.subscribe((c) => {
+            if (this.hasPinnedRecords) {
+                // on row pin containers change grid sizes should be recalculated.
+                this.calculateGridSizes();
+            }
+        });
     }
 
     /**
@@ -3062,6 +3142,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
     public set expansionStates(value) {
         this._expansionStates = new Map<any, boolean>(value);
         this.expansionStatesChange.emit(this._expansionStates);
+        this.notifyChanges(true);
         if (this.gridAPI.grid) {
             this.cdr.detectChanges();
         }
@@ -4066,8 +4147,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
      * @param index The index at which to insert the row in the pinned collection.
      */
     public pinRow(rowID: any, index?: number): boolean {
-        const rec = this.gridAPI.get_rec_by_id(rowID);
-        if (!rec || this.pinnedRecords.indexOf(rec) !== -1 || this.data.indexOf(rec) === -1) {
+        if (this._pinnedRecordIDs.indexOf(rowID) !== -1) {
             return false;
         }
         const row = this.gridAPI.get_row_by_key(rowID);
@@ -4080,7 +4160,10 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         };
         this.onRowPinning.emit(eventArgs);
 
-        this.pinnedRecords.splice(eventArgs.insertAtIndex || this.pinnedRecords.length, 0, rec);
+        this.endEdit(true);
+
+        const insertIndex = isNumber(eventArgs.insertAtIndex) ? eventArgs.insertAtIndex : this._pinnedRecordIDs.length;
+        this._pinnedRecordIDs.splice(insertIndex, 0, rowID);
         this._pipeTrigger++;
         if (this.gridAPI.grid) {
             this.notifyChanges(true);
@@ -4098,9 +4181,8 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
      * @param rowID The row id - primaryKey value or the data record instance.
     */
     public unpinRow(rowID: any) {
-        const rec = this.gridAPI.get_rec_by_id(rowID);
-        const index =  this.pinnedRecords.indexOf(rec);
-        if (index === -1 || !rec) {
+        const index =  this._pinnedRecordIDs.indexOf(rowID);
+        if (index === -1) {
             return false;
         }
         const row = this.gridAPI.get_row_by_key(rowID);
@@ -4110,7 +4192,8 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
             row: row
         };
         this.onRowPinning.emit(eventArgs);
-        this.pinnedRecords.splice(index, 1);
+        this.endEdit(true);
+        this._pinnedRecordIDs.splice(index, 1);
         this._pipeTrigger++;
         if (this.gridAPI.grid) {
             this.cdr.detectChanges();
@@ -4120,8 +4203,9 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
     }
 
     get pinnedRowHeight() {
-        const containerHeight = this.pinContainer ? this.pinContainer.nativeElement.offsetHeight : 0;
-        return this.pinnedRecords.length > 0 ? containerHeight : 0;
+        const pinContainer = this.pinContainers && this.pinContainers.length > 0 ? this.pinContainers.first : null;
+        const containerHeight = pinContainer ? pinContainer.nativeElement.offsetHeight : 0;
+        return this.hasPinnedRecords ? containerHeight : 0;
     }
 
     get totalHeight() {

projects/igniteui-angular/src/lib/grids/grid/column-group.spec.ts

@@ -13,6 +13,7 @@ import { DefaultSortingStrategy } from '../../data-operations/sorting-strategy';
 import { IgxStringFilteringOperand } from '../../data-operations/filtering-condition';
 import { configureTestSuite } from '../../test-utils/configure-suite';
 import { IgxGridHeaderComponent } from '../headers/grid-header.component';
+import { GridSummaryFunctions } from '../../test-utils/grid-functions.spec';
 
 const GRID_COL_THEAD_TITLE_CLASS = 'igx-grid__th-title';
 const GRID_COL_GROUP_THEAD_TITLE_CLASS = 'igx-grid__thead-title';
@@ -179,6 +180,8 @@ describe('IgxGrid - multi-column headers #grid', () => {
         expect(getColGroup(grid, 'General Information').hidden).toEqual(false);
     }));
 
+
+
     it('Width should be correct. Column group with column. No width.', fakeAsync(/** height/width setter rAF */() => {
         const fixture = TestBed.createComponent(OneGroupOneColGridComponent);
         fixture.detectChanges();
@@ -1215,6 +1218,28 @@ describe('IgxGrid - multi-column headers #grid', () => {
         expect(grid.getCellByColumn(4, 'Country').value).toEqual('Sweden');
     }));
 
+    it('summaries - verify summaries when there are grouped columns', fakeAsync(() => {
+        const fixture = TestBed.createComponent(ColumnGroupFourLevelTestComponent);
+        fixture.detectChanges();
+        const grid = fixture.componentInstance.grid;
+        const allColumns = grid.columnList;
+        allColumns.forEach((col) => {
+            if (!col.columnGroup) {
+                col.hasSummary = true;
+            }
+        });
+        fixture.detectChanges();
+
+        const summaryRow = GridSummaryFunctions.getRootSummaryRow(fixture);
+        GridSummaryFunctions.verifyColumnSummaries(summaryRow, 0, ['Count'], ['27']);
+        GridSummaryFunctions.verifyColumnSummaries(summaryRow, 1, ['Count'], ['27']);
+        GridSummaryFunctions.verifyColumnSummaries(summaryRow, 2, ['Count'], ['27']);
+        GridSummaryFunctions.verifyColumnSummaries(summaryRow, 3, ['Count'], ['27']);
+        GridSummaryFunctions.verifyColumnSummaries(summaryRow, 4, ['Count'], ['27']);
+        GridSummaryFunctions.verifyColumnSummaries(summaryRow, 5, ['Count'], ['27']);
+        GridSummaryFunctions.verifyColumnSummaries(summaryRow, 6, ['Count'], ['27']);
+    }));
+
     it('filtering - filter a grouped column', fakeAsync(() => {
         const fixture = TestBed.createComponent(ColumnGroupFourLevelTestComponent);
         fixture.detectChanges();
@@ -1275,6 +1300,7 @@ describe('IgxGrid - multi-column headers #grid', () => {
     }));
 
 
+
     it('grouping - verify grouping when there are grouped columns', fakeAsync(/** height/width setter rAF */() => {
         const fixture = TestBed.createComponent(ColumnGroupGroupingTestComponent);
         fixture.detectChanges();

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', () => {