Merge pull request #6884 from IgniteUI/mkirova/row-pinning-filtering

ChronosSF · web-flow · commit ab91892a09d3 · 2020-03-21T14:47:19.000+02:00
Row pinning and filtering intergration
diff --git a/projects/igniteui-angular/src/lib/grids/api.service.ts b/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);
diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts
@@ -1747,8 +1747,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
@@ -2410,6 +2410,9 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
      */
     protected destroy$ = new Subject<any>();
 
+    protected _filteredPinnedData;
+    protected _filteredUnpinnedData;
+
     /**
      * @hidden
      */
@@ -2865,6 +2868,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
@@ -2956,6 +2970,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();
+            }
+        });
     }
 
     /**
@@ -4140,8 +4160,9 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
     }
 
     get pinnedRowHeight() {
-        const containerHeight = this.pinContainer ? this.pinContainer.nativeElement.offsetHeight : 0;
-        return this._pinnedRecordIDs.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() {
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.html b/projects/igniteui-angular/src/lib/grids/grid/grid.component.html
@@ -108,22 +108,29 @@
         <span *ngIf="hasMovableColumns && draggedColumn && pinnedColumns.length > 0"
             [igxColumnMovingDrop]="headerContainer" [attr.droppable]="true" id="left"
             class="igx-grid__scroll-on-drag-pinned" [style.left.px]="pinnedWidth"></span>
-        <ng-template #pinnedRecordsTemplate>
-            <ng-container *ngFor="let rowData of data
-                | gridTransaction:id:pipeTrigger
-                | visibleColumns:hasVisibleColumns
-                | rowPinning:id:true:pipeTrigger
-                | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger
-                | gridSort:sortingExpressions:sortStrategy:id:pipeTrigger
-                | gridDetails:hasDetails:expansionStates:pipeTrigger; let rowIndex = index">
-                <ng-container *ngTemplateOutlet="getRowTemplate(rowData); context: getContext(rowData, rowIndex, true)">
+    <ng-container *ngTemplateOutlet="hasPinnedRecords && isRowPinningToTop ? pinnedRecordsTemplate : null">
+    </ng-container>
+    <ng-template #pinnedRecordsTemplate>
+        <ng-container *ngIf='data
+        | gridTransaction:id:pipeTrigger
+        | visibleColumns:hasVisibleColumns
+        | rowPinning:id:true:pipeTrigger
+        | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger:true
+        | gridSort:sortingExpressions:sortStrategy:id:pipeTrigger
+        | gridDetails:hasDetails:expansionStates:pipeTrigger as pinnedData'>
+            <div #pinContainer *ngIf='pinnedData.length > 0' 
+                [ngClass]="{
+                    'igx-grid__tr--pinned-bottom':  !isRowPinningToTop,
+                    'igx-grid__tr--pinned-top': isRowPinningToTop
+                }"
+                class='igx-grid__tr--pinned' [style.bottom.px]=' !isRowPinningToTop ? pinnedBottom : null'>
+                <ng-container *ngFor="let rowData of pinnedData; let rowIndex = index">
+                    <ng-container *ngTemplateOutlet="getRowTemplate(rowData); context: getContext(rowData, rowIndex, true)">
+                    </ng-container>
                 </ng-container>
-            </ng-container>
-        </ng-template>
-        <div #pinContainer *ngIf='hasPinnedRecords && isRowPinningToTop' class='igx-grid__tr--pinned igx-grid__tr--pinned-top'>
-            <ng-container *ngTemplateOutlet="pinnedRecordsTemplate">
-            </ng-container>  
-        </div>
+            </div>
+        </ng-container>
+    </ng-template>
         <ng-template igxGridFor let-rowData [igxGridForOf]="data
         | gridTransaction:id:pipeTrigger
         | visibleColumns:hasVisibleColumns
@@ -148,10 +155,8 @@
                 (onBeforeViewDetach)='viewDetachHandler($event)'>
             </ng-template>
         </ng-template>
-        <div #pinContainer *ngIf='hasPinnedRecords && !isRowPinningToTop' class='igx-grid__tr--pinned igx-grid__tr--pinned-bottom' [style.bottom.px]='pinnedBottom'>
-            <ng-container *ngTemplateOutlet="pinnedRecordsTemplate">
-            </ng-container>   
-        </div>
+        <ng-container *ngTemplateOutlet="hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null">
+        </ng-container>
         <ng-template #record_template let-rowIndex="index" let-rowData>
             <igx-grid-row [gridID]="id" [index]="rowIndex" [rowData]="rowData" #row>
             </igx-grid-row>
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.pipes.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.pipes.ts
@@ -135,7 +135,7 @@ export class IgxGridFilteringPipe implements PipeTransform {
 
     public transform(collection: any[], expressionsTree: IFilteringExpressionsTree,
         filterStrategy: IFilteringStrategy,
-        advancedExpressionsTree: IFilteringExpressionsTree, id: string, pipeTrigger: number, filteringPipeTrigger: number) {
+        advancedExpressionsTree: IFilteringExpressionsTree, id: string, pipeTrigger: number, filteringPipeTrigger: number, pinned?) {
         const grid = this.gridAPI.grid;
         const state = {
             expressionsTree: expressionsTree,
@@ -148,7 +148,7 @@ export class IgxGridFilteringPipe implements PipeTransform {
         }
 
         const result = DataUtil.filter(cloneArray(collection), state);
-        grid.filteredData = result;
+        grid.setFilterData(result, pinned);
         return result;
     }
 }
diff --git a/projects/igniteui-angular/src/lib/grids/grid/row-pinning.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/row-pinning.spec.ts
@@ -13,6 +13,7 @@ import { GridFunctions } from '../../test-utils/grid-functions.spec';
 import { SortingDirection } from '../../data-operations/sorting-expression.interface';
 import { IgxGridTransaction } from '../tree-grid';
 import { IgxTransactionService } from '../../services';
+import { IgxStringFilteringOperand } from '../../data-operations/filtering-condition';
 
 describe('Row Pinning #grid', () => {
     const FIXED_ROW_CONTAINER = '.igx-grid__tr--pinned ';
@@ -226,7 +227,20 @@ describe('Row Pinning #grid', () => {
             expect(grid.getRowByIndex(1).rowID).toBe(fix.componentInstance.data[1]);
         });
 
+        it('should allow pinning onInit', () => {
+            expect(() => {
+                fix = TestBed.createComponent(GridRowPinningComponent);
+                grid = fix.componentInstance.instance;
+                grid.pinRow(fix.componentInstance.data[1]);
+                fix.detectChanges();
+            }).not.toThrow();
+            expect(grid.pinnedRows.length).toBe(1);
+            expect(grid.getRowByIndex(0).rowID).toBe(fix.componentInstance.data[1]);
+        });
+
         it('should pin rows when columns are grouped.', () => {
+            grid.height = '550px';
+            fix.detectChanges();
             // pin 1st and 2nd data row
             grid.pinRow(fix.componentInstance.data[0]);
             grid.pinRow(fix.componentInstance.data[1]);
@@ -258,6 +272,68 @@ describe('Row Pinning #grid', () => {
             expect(groupRows[0].groupRow.records[0].ID).toEqual('BLAUS');
         });
 
+        it('should apply filtering to both pinned and unpinned rows.', () => {
+            grid.getRowByIndex(1).pin();
+            fix.detectChanges();
+            grid.getRowByIndex(5).pin();
+            fix.detectChanges();
+
+            let pinRowContainer = fix.debugElement.queryAll(By.css(FIXED_ROW_CONTAINER));
+            expect(pinRowContainer[0].children.length).toBe(2);
+            expect(pinRowContainer[0].children[0].context.rowID).toBe(fix.componentInstance.data[1]);
+            expect(pinRowContainer[0].children[1].context.rowID).toBe(fix.componentInstance.data[5]);
+
+            grid.filter('ID', 'B', IgxStringFilteringOperand.instance().condition('contains'), false);
+            fix.detectChanges();
+
+            pinRowContainer = fix.debugElement.queryAll(By.css(FIXED_ROW_CONTAINER));
+            expect(pinRowContainer[0].children.length).toBe(1);
+            expect(pinRowContainer[0].children[0].context.rowID).toBe(fix.componentInstance.data[5]);
+        });
+
+        it('should remove pinned container and recalculate sizes when all pinned records are filtered out.', () => {
+            grid.getRowByIndex(1).pin();
+            fix.detectChanges();
+            let pinRowContainer = fix.debugElement.queryAll(By.css(FIXED_ROW_CONTAINER));
+            expect(pinRowContainer.length).toBe(1);
+
+            let expectedHeight = parseInt(grid.height, 10) - grid.pinnedRowHeight - 18 -  grid.theadRow.nativeElement.offsetHeight;
+            expect(grid.calcHeight - expectedHeight).toBeLessThanOrEqual(1);
+
+            grid.filter('ID', 'B', IgxStringFilteringOperand.instance().condition('startsWith'), false);
+            fix.detectChanges();
+
+            pinRowContainer = fix.debugElement.queryAll(By.css(FIXED_ROW_CONTAINER));
+            expect(pinRowContainer.length).toBe(0);
+
+            expect(grid.pinnedRowHeight).toBe(0);
+            expectedHeight = parseInt(grid.height, 10) - grid.pinnedRowHeight - 18 -  grid.theadRow.nativeElement.offsetHeight;
+            expect(grid.calcHeight - expectedHeight).toBeLessThanOrEqual(1);
+        });
+
+        it('should return correct filterData collection.', () => {
+            grid.getRowByIndex(1).pin();
+            fix.detectChanges();
+            grid.getRowByIndex(5).pin();
+            fix.detectChanges();
+
+            grid.filter('ID', 'B', IgxStringFilteringOperand.instance().condition('contains'), false);
+            fix.detectChanges();
+
+            let gridFilterData = grid.filteredData;
+            expect(gridFilterData.length).toBe(7);
+            expect(gridFilterData[0].ID).toBe('BLAUS');
+            expect(gridFilterData[1].ID).toBe('BERGS');
+
+            fix.componentInstance.pinningConfig = { columns: ColumnPinningPosition.Start, rows: RowPinningPosition.Bottom };
+            fix.detectChanges();
+
+            gridFilterData = grid.filteredData;
+            expect(gridFilterData.length).toBe(7);
+            expect(gridFilterData[0].ID).toBe('BLAUS');
+            expect(gridFilterData[1].ID).toBe('BERGS');
+        });
+
         it('should apply sorting to both pinned and unpinned rows.', () => {
             grid.getRowByIndex(1).pin();
             grid.getRowByIndex(5).pin();
@@ -482,6 +558,7 @@ describe('Row Pinning #grid', () => {
 @Component({
     template: `
         <igx-grid
+            [allowFiltering]='true'
             [pinning]='pinningConfig'
             [width]='"800px"'
             [height]='"500px"'

Original file line number	Diff line number	Diff line change
`@@ -86,6 +86,9 @@ export class GridBaseAPIService <T extends IgxGridBaseDirective & GridType> {`
`86`	`86`	`}`
`87`	`87`
`88`	`88`	`public get_row_by_key(rowSelector: any): IgxRowDirective<IgxGridBaseDirective & GridType> {`
	`89`	`+ if (!this.grid) {`
	`90`	`+ return null;`
	`91`	`+ }`
`89`	`92`	`const primaryKey = this.grid.primaryKey;`
`90`	`93`	`if (primaryKey !== undefined && primaryKey !== null) {`
`91`	`94`	`return this.grid.dataRowList.find((row) => row.rowData[primaryKey] === rowSelector);`
Original file line number	Diff line number	Diff line change
`@@ -135,7 +135,7 @@ export class IgxGridFilteringPipe implements PipeTransform {`
`135`	`135`
`136`	`136`	`public transform(collection: any[], expressionsTree: IFilteringExpressionsTree,`
`137`	`137`	`filterStrategy: IFilteringStrategy,`
`138`		`- advancedExpressionsTree: IFilteringExpressionsTree, id: string, pipeTrigger: number, filteringPipeTrigger: number) {`
	`138`	`+ advancedExpressionsTree: IFilteringExpressionsTree, id: string, pipeTrigger: number, filteringPipeTrigger: number, pinned?) {`
`139`	`139`	`const grid = this.gridAPI.grid;`
`140`	`140`	`const state = {`
`141`	`141`	`expressionsTree: expressionsTree,`
`@@ -148,7 +148,7 @@ export class IgxGridFilteringPipe implements PipeTransform {`
`148`	`148`	`}`
`149`	`149`
`150`	`150`	`const result = DataUtil.filter(cloneArray(collection), state);`
`151`		`- grid.filteredData = result;`
	`151`	`+ grid.setFilterData(result, pinned);`
`152`	`152`	`return result;`
`153`	`153`	`}`
`154`	`154`	`}`