Merge branch 'master' into mkirova/fix-pin-issue-treegrid

ChronosSF · web-flow · commit c051787fbd33 · 2020-04-23T19:11:55.000+03:00
diff --git a/projects/igniteui-angular/src/lib/grids/api.service.ts b/projects/igniteui-angular/src/lib/grids/api.service.ts
@@ -34,6 +34,9 @@ export class GridBaseAPIService <T extends IgxGridBaseDirective & GridType> {
     public get_summary_data() {
         const grid = this.grid;
         let data = grid.filteredData;
+        if (data && grid.hasPinnedRecords) {
+           data = grid._filteredUnpinnedData;
+        }
         if (!data) {
             if (grid.transactions.enabled) {
                 data = DataUtil.mergeTransactions(
diff --git a/projects/igniteui-angular/src/lib/grids/columns/column.component.ts b/projects/igniteui-angular/src/lib/grids/columns/column.component.ts
@@ -276,6 +276,7 @@ export class IgxColumnComponent implements AfterContentInit {
                 this.grid.endEdit(false);
                 this.grid.summaryService.resetSummaryHeight();
                 this.grid.filteringService.refreshExpressions();
+                this.grid.filteringService.hideFilteringRowOnColumnVisibilityChange(this);
                 this.grid.notifyChanges();
             }
         }
diff --git a/projects/igniteui-angular/src/lib/grids/common/pipes.ts b/projects/igniteui-angular/src/lib/grids/common/pipes.ts
@@ -238,6 +238,7 @@ export class IgxGridRowPinningPipe implements PipeTransform {
         }
 
         grid.unpinnedRecords = collection;
+
         return collection.map((rec) => {
             return grid.isRecordPinned(rec) ? { recordRef: rec, ghostRecord: true} : rec;
         });
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts b/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts
@@ -97,13 +97,17 @@ export class IgxFilteringService implements OnDestroy {
                     filterCell.updateFilterCellArea();
                 });
             });
+        }
+    }
 
-            this.grid.onColumnVisibilityChanged.pipe(takeUntil(this.destroy$)).subscribe((eventArgs: IColumnVisibilityChangedEventArgs) => {
-                if (this.grid.filteringRow && this.grid.filteringRow.column === eventArgs.column ) {
-                    this.grid.filteringRow.close();
+    /**
+     * Close filtering row if a column is hidden.
+     */
+    public hideFilteringRowOnColumnVisibilityChange(col: IgxColumnComponent) {
+        const filteringRow = this.grid.filteringRow;
 
-                }
-            });
+        if (filteringRow && filteringRow.column && filteringRow.column === col) {
+            filteringRow.close();
         }
     }
 
diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts
@@ -2457,7 +2457,11 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
     protected _filteredSortedPinnedData;
     protected _filteredSortedUnpinnedData;
     protected _filteredPinnedData;
-    protected _filteredUnpinnedData;
+
+    /**
+     * @hidden
+     */
+    public _filteredUnpinnedData;
 
     /**
      * @hidden
@@ -2875,10 +2879,6 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
             this.summaryService.summaryHeight = 0;
             this.notifyChanges(true);
         });
-
-        this.onRowPinning.subscribe(() => {
-            this.summaryService.clearSummaryCache();
-        });
     }
 
     /**
@@ -2932,7 +2932,8 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         if (this.hasPinnedRecords && pinned) {
             this._filteredPinnedData = data || [];
             const filteredUnpinned =  this._filteredUnpinnedData || [];
-            this.filteredData = [... this._filteredPinnedData, ... filteredUnpinned];
+            const filteredData =  [... this._filteredPinnedData, ... filteredUnpinned];
+            this.filteredData =  filteredData.length > 0 ? filteredData : this._filteredUnpinnedData;
         } else if (this.hasPinnedRecords && !pinned) {
             this._filteredUnpinnedData = data;
         } else {
diff --git a/projects/igniteui-angular/src/lib/grids/grid/expandable-cell.component.html b/projects/igniteui-angular/src/lib/grids/grid/expandable-cell.component.html
@@ -1,3 +1,6 @@
+<ng-template #defaultPinnedIndicator>
+    <igx-chip *ngIf="displayPinnedChip" class="igx-grid__td--pinned-chip" [disabled]="true" [displayDensity]="'compact'">{{ grid.resourceStrings.igx_grid_pinned_row_indicator }}</igx-chip>
+</ng-template>
 <ng-template #defaultCell>
     <div igxTextHighlight style="pointer-events: none" [cssClass]="highlightClass" [activeCssClass]="activeHighlightClass" [groupName]="gridID"
         [value]="formatter ? formatter(value) : column.dataType === 'number' ? (value | igxdecimal: grid.locale) : column.dataType === 'date' ? (value | igxdate: grid.locale) : value"
@@ -33,6 +36,8 @@
         </ng-container>
     </div>
 </ng-container>
+<ng-container *ngTemplateOutlet="pinnedIndicatorTemplate; context: context">
+</ng-container>
 <ng-container *ngTemplateOutlet="template; context: context">
 </ng-container>
 <ng-template #defaultExpandedTemplate>
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts
@@ -2138,24 +2138,24 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
         }));
 
         it('Should close filter row when hide the current column', fakeAsync(() => {
-            pending('This issue is failing because of bug #');
             GridFunctions.clickFilterCellChip(fix, 'ProductName');
 
             // Check that the filterRow is opened
-            const filterUIRow = fix.debugElement.query(By.css(FILTER_UI_ROW));
+            let filterUIRow = fix.debugElement.query(By.css(FILTER_UI_ROW));
             expect(filterUIRow).not.toBeNull();
 
             // Add first chip.
             GridFunctions.typeValueInFilterRowInput('a', fix);
             tick(100);
 
             grid.getColumnByName('ProductName').hidden = true;
-            fix.detectChanges();
             tick(100);
+            fix.detectChanges();
 
             // Check that the filterRow is closed
-            expect(fix.debugElement.query(By.css(FILTER_UI_ROW))).toBeNull();
-            expect(grid.rowList.length).toBe(8);
+            filterUIRow = fix.debugElement.query(By.css(FILTER_UI_ROW));
+            expect(filterUIRow).toBeNull();
+            expect(grid.rowList.length).toBe(3, 'filter is not applied');
         }));
 
         it('Should keep existing column filter after hiding another column.', fakeAsync(() => {
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-row-pinning.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-row-pinning.spec.ts
@@ -358,6 +358,23 @@ describe('Row Pinning #grid', () => {
             expect(pinRowContainer[0].children[0].context.rowID).toBe(fix.componentInstance.data[4]);
         });
 
+        it('should calculate global summaries correctly when filtering is applied.', () => {
+            grid.getColumnByName('ID').hasSummary = true;
+            fix.detectChanges();
+            grid.filter('ID', 'BERGS', IgxStringFilteringOperand.instance().condition('contains'), false);
+            fix.detectChanges();
+
+            let summaryRow = GridSummaryFunctions.getRootSummaryRow(fix);
+            GridSummaryFunctions.verifyColumnSummaries(summaryRow, 0, ['Count'], ['1']);
+
+            // pin row
+            grid.getRowByIndex(0).pin();
+            fix.detectChanges();
+
+            summaryRow = GridSummaryFunctions.getRootSummaryRow(fix);
+            GridSummaryFunctions.verifyColumnSummaries(summaryRow, 0, ['Count'], ['1']);
+        });
+
         it('should remove pinned container and recalculate sizes when all pinned records are filtered out.', () => {
             grid.getRowByIndex(1).pin();
             fix.detectChanges();
@@ -456,6 +473,9 @@ describe('Row Pinning #grid', () => {
             expect(grid.expansionStates.get(pinnedRow.rowID)).toBeTruthy();
             // disabled row should have expand icon
             expect(firstRowIconName).toEqual('expand_more');
+            // disabled row should have chip
+            const cell = grid.getRowByIndex(0).cells.first;
+            expect(cell.nativeElement.getElementsByClassName('igx-grid__td--pinned-chip').length).toBe(1);
             // pinned row shouldn't have expand icon
             const hasIconForPinnedRow = pinnedRow.cells.first.nativeElement.querySelector('igx-icon');
             expect(hasIconForPinnedRow).toBeNull();
diff --git a/projects/igniteui-angular/src/lib/grids/state.directive.spec.ts b/projects/igniteui-angular/src/lib/grids/state.directive.spec.ts
@@ -414,6 +414,15 @@ describe('IgxGridState - input properties #grid', () => {
         expect(grid.pinnedRows[1].rowID).toBe(3);
         gridState = state.getState(true, 'rowPinning');
         expect(gridState).toBe(rowPinState);
+
+        grid.getRowByIndex(3).pin();
+
+        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);
     });
 
     it('setState should correctly restore grid cell selection state from string', () => {
diff --git a/projects/igniteui-angular/src/lib/grids/state.directive.ts b/projects/igniteui-angular/src/lib/grids/state.directive.ts
@@ -478,6 +478,8 @@ export class IgxGridStateDirective {
     }
 
     private restoreRowPinning(state: any[]) {
+        // clear current state.
+        this.grid.pinnedRows.forEach(row => row.unpin());
         state.forEach(rowID => this.grid.pinRow(rowID));
     }
 
diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-integration.spec.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-integration.spec.ts
@@ -1467,7 +1467,7 @@ describe('IgxTreeGrid - Integration #tGrid', () => {
 
         });
 
-        it('should add pinned badge in the pinned row instance in the body', () => {
+        it('should add pinned chip in the pinned row instance in the body', () => {
             const rowToPin = treeGrid.getRowByIndex(0);
             const primaryKey = treeGrid.primaryKey;
 
@@ -1645,5 +1645,20 @@ describe('IgxTreeGrid - Integration #tGrid', () => {
                 {ID: 475, Name: 'Michael Langdon'},
             ]);
         });
+
+        it('should remove the pinned chip for filtered out parent', () => {
+            treeGrid.pinRow(147);
+            fix.detectChanges();
+
+            treeGrid.filter('ID', 957, IgxStringFilteringOperand.instance().condition('contains'), false);
+            fix.detectChanges();
+
+            const firstColumnField = treeGrid.columns[0].field;
+            const pinnedChipExpectedPosition = treeGrid.getCellByColumn(1, firstColumnField);
+            const pinnedRow = pinnedChipExpectedPosition.row;
+
+            expect(pinnedChipExpectedPosition.nativeElement.getElementsByClassName('igx-grid__td--pinned-chip').length).toBe(0);
+            expect(pinnedRow.disabled).toBe(false);
+        });
     });
 });
diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.ts
@@ -612,7 +612,7 @@ export class IgxTreeGridComponent extends IgxGridBaseDirective implements GridTy
             $implicit: this.isGhostRecord(rowData) ? rowData.recordRef : rowData,
             index: this.getRowIndex(rowIndex, pinned),
             templateID: this.isSummaryRow(rowData) ? 'summaryRow' : 'dataRow',
-            disabled: this.isGhostRecord(rowData)
+            disabled: this.isGhostRecord(rowData) ? rowData.recordRef.isFilteredOutParent === undefined : false
         };
     }
 
diff --git a/projects/igniteui-angular/src/lib/paginator/paginator.component.ts b/projects/igniteui-angular/src/lib/paginator/paginator.component.ts
@@ -7,7 +7,7 @@ import { IgxSelectModule } from '../select/index';
 import { IgxIconModule } from '../icon/index';
 import { IgxButtonModule } from '../directives/button/button.directive';
 import { IgxRippleModule } from '../directives/ripple/ripple.directive';
-import { IgxInputGroupModule } from '../input-group';
+import { IgxInputGroupModule } from '../input-group/index';
 import { IPaginatorResourceStrings } from '../core/i18n/paginator-resources';
 import { DeprecateProperty } from '../core/deprecateDecorators';
 
diff --git a/src/app/grid-row-pinning/grid-row-pinning.sample.html b/src/app/grid-row-pinning/grid-row-pinning.sample.html
@@ -32,7 +32,7 @@
                 <ng-template igxToolbarCustomContent>
                     <app-grid-search-box [grid]="grid1" [style.width]="'400px'"></app-grid-search-box>
                 </ng-template>
-                <igx-column width='120px' [filterable]='false'>
+                <igx-column width='150px' [filterable]='false'>
                     <ng-template igxCell let-cell="cell" let-val>
                         <igx-icon class="pin-icon" (mousedown)="togglePining(cell.row, $event)"
                         fontSet="filtering-icons" name="{{cell.row.pinned ? 'unpin' : 'pin'}}">
@@ -46,7 +46,7 @@
                 </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'>
+                    [editable]='true' [hasSummary]='true'>
                 </igx-column>
             </igx-grid>
         </div>
@@ -70,7 +70,7 @@
                         <button (click)="hGrid.deleteRow(cell.cellID.rowID)">Delete</button>
                     </ng-template>
                 </igx-column>
-                <igx-column *ngFor="let c of hColumns" [editable]="true" [sortable]="true" [field]="c.field" [header]="c.field" [width]="c.width" [pinned]='c.pinned' [groupable]='c.groupable' >
+                <igx-column *ngFor="let c of hColumns" [hasSummary]='true' [editable]="true" [sortable]="true" [field]="c.field" [header]="c.field" [width]="c.width" [pinned]='c.pinned' [groupable]='c.groupable' >
                 </igx-column>
                 <igx-row-island [key]="'childData'" [autoGenerate]="true" [rowSelectable]='true'  [allowFiltering]='true'  >
                     <igx-row-island [key]="'childData'" [autoGenerate]="true" [rowSelectable]='true' [allowFiltering]='true'></igx-row-island>
@@ -81,7 +81,7 @@
 
         <div class="sample-column">
             <div>igxTreeGrid</div>
-            <igx-tree-grid [pinning]="pinningConfig" #treegrid [allowFiltering]='true' [data]="treeData" primaryKey="employeeID" foreignKey="PID" [rowSelectable]="true"
+            <igx-tree-grid [paging]='true' [pinning]="pinningConfig" #treegrid [allowFiltering]='true' [data]="treeData" primaryKey="employeeID" foreignKey="PID" [rowSelectable]="true"
             [width]="'900px'" [height]="'800px'" [showToolbar]="true"
             [columnHiding]="true" [columnPinning]="true" [exportExcel]="true" [exportCsv]="true" exportText="Export"
            >
@@ -94,7 +94,7 @@
             </igx-column>
             <igx-column *ngFor="let c of treeColumns" [field]="c.field" [dataType]="c.dataType" [header]="c.label"
                 [pinned]="c.pinned" [movable]="c.movable" [groupable]="false" [resizable]="c.resizable" [width]="c.width"
-                [sortable]="true" [filterable]="true" [editable]="true" [hidden]="c.hidden" [hasSummary]="c.hasSummary"
+                [sortable]="true" [filterable]="true" [editable]="true" [hidden]="c.hidden"
                 [minWidth]="c.minWidth" [maxWidth]="c.maxWidth">
             </igx-column>
 

Original file line number	Diff line number	Diff line change
`@@ -276,6 +276,7 @@ export class IgxColumnComponent implements AfterContentInit {`
`276`	`276`	`this.grid.endEdit(false);`
`277`	`277`	`this.grid.summaryService.resetSummaryHeight();`
`278`	`278`	`this.grid.filteringService.refreshExpressions();`
	`279`	`+ this.grid.filteringService.hideFilteringRowOnColumnVisibilityChange(this);`
`279`	`280`	`this.grid.notifyChanges();`
`280`	`281`	`}`
`281`	`282`	`}`
Original file line number	Diff line number	Diff line change
`@@ -238,6 +238,7 @@ export class IgxGridRowPinningPipe implements PipeTransform {`
`238`	`238`	`}`
`239`	`239`
`240`	`240`	`grid.unpinnedRecords = collection;`
	`241`	`+`
`241`	`242`	`return collection.map((rec) => {`
`242`	`243`	`return grid.isRecordPinned(rec) ? { recordRef: rec, ghostRecord: true} : rec;`
`243`	`244`	`});`
Original file line number	Diff line number	Diff line change
`@@ -478,6 +478,8 @@ export class IgxGridStateDirective {`
`478`	`478`	`}`
`479`	`479`
`480`	`480`	`private restoreRowPinning(state: any[]) {`
	`481`	`+ // clear current state.`
	`482`	`+ this.grid.pinnedRows.forEach(row => row.unpin());`
`481`	`483`	`state.forEach(rowID => this.grid.pinRow(rowID));`
`482`	`484`	`}`
`483`	`485`