feat(grid): adding ghost rows to flat grid #6640

ChronosSF · ChronosSF · commit 21883b012089 · 2020-04-11T13:44:17.000+03:00
diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts
@@ -6319,6 +6319,13 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         }
     }
 
+    /**
+     * @hidden @internal
+     */
+    public isGhostRecord(record: any): boolean {
+        return record.ghostRecord !== undefined;
+    }
+
     /**
      * Opens the advanced filtering dialog.
      */
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.html b/projects/igniteui-angular/src/lib/grids/grid/grid.component.html
@@ -114,7 +114,7 @@
         <ng-container *ngIf='data
         | gridTransaction:id:pipeTrigger
         | visibleColumns:hasVisibleColumns
-        | rowPinning:id:true:pipeTrigger
+        | gridRowPinning:pipeTrigger
         | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger:true
         | gridSort:sortingExpressions:sortStrategy:id:pipeTrigger:true
         | gridDetails:hasDetails:expansionStates:pipeTrigger as pinnedData'>
@@ -134,12 +134,12 @@
         <ng-template igxGridFor let-rowData [igxGridForOf]="data
         | gridTransaction:id:pipeTrigger
         | visibleColumns:hasVisibleColumns
-        | rowPinning:id:false:pipeTrigger
         | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger
         | gridSort:sortingExpressions:sortStrategy:id:pipeTrigger
         | gridGroupBy:groupingExpressions:groupingExpansionState:groupsExpanded:id:groupsRecords:pipeTrigger
         | gridPaging:page:perPage:id:pipeTrigger
         | gridSummary:hasSummarizedColumns:summaryCalculationMode:summaryPosition:id:pipeTrigger:summaryPipeTrigger
+        | gridGhostRecords:pipeTrigger
         | gridDetails:hasDetails:expansionStates:pipeTrigger"
             let-rowIndex="index" [igxForScrollOrientation]="'vertical'" [igxForScrollContainer]='verticalScroll'
             [igxForContainerSize]='calcHeight'
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts
@@ -853,9 +853,11 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
                 };
             }
         }
+        const isGhost = this.isGhostRecord(rowData);
         return {
-            $implicit: rowData,
+            $implicit: isGhost ? rowData.recordRef : rowData,
             index: rowIndex,
+            disabled: isGhost,
             templateID: this.isGroupByRecord(rowData) ? 'groupRow' : this.isSummaryRow(rowData) ? 'summaryRow' : 'dataRow'
         };
     }
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.module.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.module.ts
@@ -14,7 +14,8 @@ import {
     IgxGridGroupingPipe,
     IgxGridSortingPipe,
     IgxGridFilteringPipe,
-    IgxGridRowPinningPipe
+    IgxGridRowPinningPipe,
+    IgxGridGhostRecordsPipe
 } from './grid.pipes';
 import { IgxGridGroupByRowComponent } from './groupby-row.component';
 import { IgxGridRowComponent } from './grid-row.component';
@@ -45,6 +46,7 @@ import { IgxGridExpandableCellComponent } from './expandable-cell.component';
     IgxGridRowPinningPipe,
     IgxGridSummaryPipe,
     IgxGridDetailsPipe,
+    IgxGridGhostRecordsPipe,
     IgxGridExpandableCellComponent
   ],
   exports: [
@@ -66,6 +68,7 @@ import { IgxGridExpandableCellComponent } from './expandable-cell.component';
     IgxGridRowPinningPipe,
     IgxGridSummaryPipe,
     IgxGridDetailsPipe,
+    IgxGridGhostRecordsPipe,
     IgxGridCommonModule
   ],
   imports: [
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.pipes.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.pipes.ts
@@ -103,10 +103,9 @@ export class IgxGridPagingPipe implements PipeTransform {
         if (!this.gridAPI.grid.paging) {
             return collection;
         }
-        const _perPage = perPage - this.gridAPI.grid.pinnedRecordsCount;
         const state = {
             index: page,
-            recordsPerPage: _perPage
+            recordsPerPage: perPage
         };
         DataUtil.correctPagingState(state, collection.data.length);
 
@@ -157,27 +156,44 @@ export class IgxGridFilteringPipe implements PipeTransform {
  * @hidden
  */
 @Pipe({
-    name: 'rowPinning',
+    name: 'gridRowPinning',
     pure: true
 })
 export class IgxGridRowPinningPipe implements PipeTransform {
 
     constructor(private gridAPI: GridBaseAPIService<IgxGridBaseDirective & GridType>) {}
 
-    public transform(collection: any[] , id: string, isPinned = false, pipeTrigger: number) {
+    public transform(collection: any[]) {
         const grid = this.gridAPI.grid;
 
         if (!grid.hasPinnedRecords) {
-            return isPinned ? [] : collection;
+            return [];
         }
 
-        const result = collection.filter((value, index) => {
-            return  isPinned ? grid.isRecordPinned(value) : !grid.isRecordPinned(value);
-        });
-        if (isPinned) {
-            // pinned records should be ordered as they were pinned.
-            result.sort((rec1, rec2) => grid.pinRecordIndex(rec1) - grid.pinRecordIndex(rec2));
+        // pinned records should be ordered as they were pinned.
+        return collection
+            .filter(value => grid.isRecordPinned(value))
+            .sort((rec1, rec2) => grid.pinRecordIndex(rec1) - grid.pinRecordIndex(rec2));
+    }
+}
+
+@Pipe({
+    name: 'gridGhostRecords',
+    pure: true
+})
+export class IgxGridGhostRecordsPipe implements PipeTransform {
+
+    constructor(private gridAPI: GridBaseAPIService<IgxGridBaseDirective & GridType>) {}
+
+    public transform(collection: any[]) {
+        const grid = this.gridAPI.grid;
+
+        if (!grid.hasPinnedRecords) {
+            return collection;
         }
-        return result;
+
+        return collection.map((rec) => {
+            return grid.isRecordPinned(rec) ? { recordRef: rec, ghostRecord: true} : rec;
+        });
     }
 }
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
@@ -1,4 +1,4 @@
-import { DebugElement, ViewChild, Component } from '@angular/core';
+import { ViewChild, Component } from '@angular/core';
 import { TestBed, async, fakeAsync, tick } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
@@ -360,7 +360,7 @@ describe('Row Pinning #grid', () => {
             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;
+            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);
@@ -370,7 +370,7 @@ describe('Row Pinning #grid', () => {
             expect(pinRowContainer.length).toBe(0);
 
             expect(grid.pinnedRowHeight).toBe(0);
-            expectedHeight = parseInt(grid.height, 10) - grid.pinnedRowHeight - 18 -  grid.theadRow.nativeElement.offsetHeight;
+            expectedHeight = parseInt(grid.height, 10) - grid.pinnedRowHeight - 18 - grid.theadRow.nativeElement.offsetHeight;
             expect(grid.calcHeight - expectedHeight).toBeLessThanOrEqual(1);
         });
 
@@ -397,47 +397,6 @@ describe('Row Pinning #grid', () => {
             expect(gridFilterData[1].ID).toBe('BERGS');
         });
 
-        it('should page through unpinned collection with modified pageSize = pageSize - pinnedRows.lenght.', () => {
-            // pin 2nd row
-            grid.paging = true;
-            grid.perPage = 5;
-            fix.detectChanges();
-            const paginator = fix.debugElement.query(By.directive(IgxPaginatorComponent));
-            expect(paginator.componentInstance.totalPages).toEqual(6);
-
-            grid.getRowByIndex(1).pin();
-            fix.detectChanges();
-
-            expect(grid.pinnedRows.length).toBe(1);
-            let pinRowContainer = fix.debugElement.queryAll(By.css(FIXED_ROW_CONTAINER));
-            expect(pinRowContainer.length).toBe(1);
-            expect(grid.dataView.length).toBe(4);
-            expect(paginator.componentInstance.totalPages).toEqual(6);
-
-            grid.getRowByIndex(3).pin();
-            fix.detectChanges();
-
-            expect(grid.pinnedRows.length).toBe(2);
-            pinRowContainer = fix.debugElement.queryAll(By.css(FIXED_ROW_CONTAINER));
-            expect(pinRowContainer.length).toBe(1);
-            expect(grid.dataView.length).toBe(3);
-            expect(paginator.componentInstance.totalPages).toEqual(5);
-
-            // unpin
-            grid.getRowByIndex(0).unpin();
-            fix.detectChanges();
-
-            grid.getRowByIndex(0).unpin();
-            fix.detectChanges();
-
-            expect(grid.pinnedRows.length).toBe(0);
-            pinRowContainer = fix.debugElement.queryAll(By.css(FIXED_ROW_CONTAINER));
-            expect(pinRowContainer.length).toBe(0);
-
-            expect(grid.dataView.length).toBe(5);
-            expect(paginator.componentInstance.totalPages).toEqual(6);
-        });
-
         it('should apply sorting to both pinned and unpinned rows.', () => {
             grid.getRowByIndex(1).pin();
             grid.getRowByIndex(5).pin();
@@ -458,6 +417,7 @@ describe('Row Pinning #grid', () => {
             expect(grid.getRowByIndex(2).rowID).toBe(fix.componentInstance.data[lastIndex]);
         });
     });
+
     describe('Row pinning with Master Detail View', () => {
         beforeEach(fakeAsync(() => {
             fix = TestBed.createComponent(GridRowPinningWithMDVComponent);
@@ -550,6 +510,62 @@ describe('Row Pinning #grid', () => {
         });
     });
 
+    describe('Paging', () => {
+        let paginator: IgxPaginatorComponent;
+
+        beforeEach(fakeAsync(() => {
+            fix = TestBed.createComponent(GridRowPinningComponent);
+            fix.componentInstance.createSimpleData(12);
+            grid = fix.componentInstance.instance;
+            grid.paging = true;
+            grid.perPage = 5;
+
+            fix.detectChanges();
+            tick();
+
+            paginator = fix.debugElement.query(By.directive(IgxPaginatorComponent)).componentInstance;
+        }));
+
+        it('should correctly apply paging state for grid and paginator when there are pinned rows.', () => {
+            // pin the first row
+            grid.getRowByIndex(0).pin();
+            fix.detectChanges();
+
+            expect(grid.rowList.length).toEqual(6);
+            expect(grid.perPage).toEqual(5);
+            expect(paginator.perPage).toEqual(5);
+            expect(paginator.totalRecords).toEqual(12);
+            expect(paginator.totalPages).toEqual(3);
+
+            // pin the second row
+            grid.getRowByIndex(2).pin();
+            fix.detectChanges();
+
+            expect(grid.rowList.length).toEqual(7);
+            expect(grid.perPage).toEqual(5);
+            expect(paginator.perPage).toEqual(5);
+            expect(paginator.totalRecords).toEqual(12);
+            expect(paginator.totalPages).toEqual(3);
+        });
+
+        it('should have the correct records shown for pages with pinned rows', () => {
+            grid.getRowByIndex(0).pin();
+            grid.getRowByIndex(1).pin();
+            fix.detectChanges();
+
+            let rows = grid.rowList.toArray();
+
+            [1, 2, 1, 2, 3, 4, 5].forEach((x, index) => expect(rows[index].cells.first.value).toEqual(x));
+
+            grid.paginate(2);
+            fix.detectChanges();
+
+            rows = grid.rowList.toArray();
+
+            [1, 2, 11, 12].forEach((x, index) => expect(rows[index].cells.first.value).toEqual(x));
+        });
+    });
+
     describe(' Editing ', () => {
         beforeEach(fakeAsync(() => {
             fix = TestBed.createComponent(GridRowPinningWithTransactionsComponent);
@@ -628,6 +644,7 @@ describe('Row Pinning #grid', () => {
         });
 
     });
+
     describe('Row pinning with MRL', () => {
         beforeEach(fakeAsync(() => {
             fix = TestBed.createComponent(GridRowPinningWithMRLComponent);
@@ -714,6 +731,7 @@ describe('Row Pinning #grid', () => {
             verifyDOMMatchesLayoutSettings(gridUnpinnedRow, fix.componentInstance.colGroups);
         });
     });
+
     describe(' Hiding', () => {
         beforeEach(fakeAsync(() => {
             fix = TestBed.createComponent(GridRowPinningComponent);
@@ -773,11 +791,15 @@ describe('Row Pinning #grid', () => {
     `
 })
 export class GridRowPinningComponent {
-    public data = SampleTestData.contactInfoDataFull();
+    public data: any[] = SampleTestData.contactInfoDataFull();
     public pinningConfig: IPinningConfig = { columns: ColumnPinningPosition.Start, rows: RowPinningPosition.Top };
 
     @ViewChild(IgxGridComponent, { read: IgxGridComponent, static: true })
     public instance: IgxGridComponent;
+
+    public createSimpleData(count: number) {
+        this.data = Array(count).fill({}).map((x, idx) => x = { 'idx': idx + 1 });
+    }
 }
 
 @Component({
@@ -823,7 +845,7 @@ export class GridRowPinningWithMRLComponent extends GridRowPinningComponent {
         </ng-template>
 </igx-grid>`
 })
-export class GridRowPinningWithMDVComponent extends GridRowPinningComponent {}
+export class GridRowPinningWithMDVComponent extends GridRowPinningComponent { }
 
 
 @Component({
@@ -839,4 +861,4 @@ export class GridRowPinningWithMDVComponent extends GridRowPinningComponent {}
     `,
     providers: [{ provide: IgxGridTransaction, useClass: IgxTransactionService }]
 })
-export class GridRowPinningWithTransactionsComponent extends GridRowPinningComponent {}
+export class GridRowPinningWithTransactionsComponent extends GridRowPinningComponent { }
diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html
@@ -95,7 +95,7 @@
             <ng-container *ngIf="data
             | gridTransaction:id:pipeTrigger
             | visibleColumns:hasVisibleColumns
-            | gridHierarchicalRowPinning:true:pipeTrigger
+            | gridRowPinning:pipeTrigger
             | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger:true
             | gridSort:sortingExpressions:sortStrategy:id:pipeTrigger as pinnedData">
                 <div #pinContainer *ngIf='pinnedData.length > 0' class='igx-grid__tr--pinned'
@@ -114,9 +114,9 @@
         | gridTransaction:id:pipeTrigger
         | visibleColumns:hasVisibleColumns
         | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger
-        | gridHierarchicalRowPinning:false:pipeTrigger
         | gridSort:sortingExpressions:sortStrategy:id:pipeTrigger
         | gridHierarchicalPaging:page:perPage:id:pipeTrigger
+        | gridGhostRecords:pipeTrigger
         | gridHierarchical:expansionStates:id:primaryKey:childLayoutKeys:pipeTrigger"
             [igxForScrollOrientation]="'vertical'" [igxForScrollContainer]='verticalScroll'
             [igxForContainerSize]='calcHeight' [igxForItemSize]="renderedRowHeight" [igxForTrackBy]='trackChanges'
diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts
@@ -520,10 +520,6 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirecti
         return record.childGridsData !== undefined;
     }
 
-    public isGhostRecord(record: any): boolean {
-        return record.ghostRecord !== undefined;
-    }
-
     /**
      * @hidden
      */
diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.module.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.module.ts
@@ -2,7 +2,7 @@ import { NgModule } from '@angular/core';
 import { IgxGridModule } from '../grid/grid.module';
 import { IgxHierarchicalGridComponent } from './hierarchical-grid.component';
 import { IgxHierarchicalRowComponent } from './hierarchical-row.component';
-import { IgxGridHierarchicalPipe, IgxGridHierarchicalPagingPipe, IgxGridHierarchicalRowPinning } from './hierarchical-grid.pipes';
+import { IgxGridHierarchicalPipe, IgxGridHierarchicalPagingPipe } from './hierarchical-grid.pipes';
 import { IgxRowIslandComponent } from './row-island.component';
 import { IgxChildGridRowComponent } from './child-grid-row.component';
 import { IgxHierarchicalGridCellComponent } from './hierarchical-cell.component';
@@ -21,8 +21,7 @@ import { IgxHierarchicalGridBaseDirective } from './hierarchical-grid-base.direc
     IgxChildGridRowComponent,
     IgxHierarchicalGridCellComponent,
     IgxGridHierarchicalPipe,
-    IgxGridHierarchicalPagingPipe,
-    IgxGridHierarchicalRowPinning
+    IgxGridHierarchicalPagingPipe
   ],
   exports: [
     IgxGridModule,
diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.pipes.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.pipes.ts

Original file line number	Diff line number	Diff line change
`@@ -6319,6 +6319,13 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements`
`6319`	`6319`	`}`
`6320`	`6320`	`}`
`6321`	`6321`
	`6322`	`+ /**`
	`6323`	`+ * @hidden @internal`
	`6324`	`+ */`
	`6325`	`+ public isGhostRecord(record: any): boolean {`
	`6326`	`+ return record.ghostRecord !== undefined;`
	`6327`	`+ }`
	`6328`	`+`
`6322`	`6329`	`/**`
`6323`	`6330`	`* Opens the advanced filtering dialog.`
`6324`	`6331`	`*/`
Original file line number	Diff line number	Diff line change
`@@ -853,9 +853,11 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,`
`853`	`853`	`};`
`854`	`854`	`}`
`855`	`855`	`}`
	`856`	`+ const isGhost = this.isGhostRecord(rowData);`
`856`	`857`	`return {`
`857`		`- $implicit: rowData,`
	`858`	`+ $implicit: isGhost ? rowData.recordRef : rowData,`
`858`	`859`	`index: rowIndex,`
	`860`	`+ disabled: isGhost,`
`859`	`861`	`templateID: this.isGroupByRecord(rowData) ? 'groupRow' : this.isSummaryRow(rowData) ? 'summaryRow' : 'dataRow'`
`860`	`862`	`};`
`861`	`863`	`}`