From ff979232266c28ae8c6de58e5a7d613e427bf69b Mon Sep 17 00:00:00 2001 From: MKirova Date: Wed, 11 Mar 2020 20:12:03 +0200 Subject: [PATCH 01/12] feat(Pinning): Pinning + Editing. Using IDs to determine if row is pinned. --- .../src/lib/data-operations/data-util.ts | 11 +++++----- .../src/lib/grids/common/pipes.ts | 4 ++-- .../src/lib/grids/grid-base.directive.ts | 22 +++++++++++-------- .../src/lib/grids/grid/grid.component.html | 1 + .../src/lib/grids/grid/grid.pipes.ts | 2 +- .../src/lib/grids/row.directive.ts | 2 +- .../grid-row-pinning.sample.html | 8 ++++++- .../grid-row-pinning.sample.ts | 4 ++-- 8 files changed, 33 insertions(+), 21 deletions(-) diff --git a/projects/igniteui-angular/src/lib/data-operations/data-util.ts b/projects/igniteui-angular/src/lib/data-operations/data-util.ts index 624c8351da2..487c139991f 100644 --- a/projects/igniteui-angular/src/lib/data-operations/data-util.ts +++ b/projects/igniteui-angular/src/lib/data-operations/data-util.ts @@ -134,7 +134,7 @@ export class DataUtil { * @param deleteRows Should delete rows with DELETE transaction type from data * @returns Provided data collections updated with all provided transactions */ - public static mergeTransactions(data: T[], transactions: Transaction[], primaryKey?: any, deleteRows: boolean = false): T[] { + public static mergeTransactions(data: T[], transactions: Transaction[], primaryKey?: any, deleteRows: boolean = false, addRows: boolean = true): T[] { data.forEach((item: any, index: number) => { const rowId = primaryKey ? item[primaryKey] : item; const transaction = transactions.find(t => t.id === rowId); @@ -153,10 +153,11 @@ export class DataUtil { } }); } - - data.push(...transactions - .filter(t => t.type === TransactionType.ADD) - .map(t => t.newValue)); + if (addRows) { + data.push(...transactions + .filter(t => t.type === TransactionType.ADD) + .map(t => t.newValue)); + } return data; } diff --git a/projects/igniteui-angular/src/lib/grids/common/pipes.ts b/projects/igniteui-angular/src/lib/grids/common/pipes.ts index e990a7a22bf..858385fc04c 100644 --- a/projects/igniteui-angular/src/lib/grids/common/pipes.ts +++ b/projects/igniteui-angular/src/lib/grids/common/pipes.ts @@ -113,14 +113,14 @@ export class IgxGridTransactionPipe implements PipeTransform { constructor(private gridAPI: GridBaseAPIService) { } - transform(collection: any[], id: string, pipeTrigger: number) { + transform(collection: any[], id: string, pipeTrigger: number, addRows = true) { const grid: IgxGridBaseDirective = this.gridAPI.grid; if ( grid.transactions.enabled) { const result = DataUtil.mergeTransactions( cloneArray(collection), grid.transactions.getAggregatedChanges(true), - grid.primaryKey); + grid.primaryKey, false, addRows); return result; } return collection; diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts index d6b4f5e6118..acb6064788c 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts @@ -2465,10 +2465,16 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements * @hidden */ public get pinnedRecords() { - return this._pinnedRecords; + const recs = this._pinnedRecordIDs.map(x => this.gridAPI.get_rec_by_id(x)); + return recs; } - protected _pinnedRecords = []; + protected _pinnedRecordIDs = []; + + public isRecordPinned(rec) { + const id = this.primaryKey ? rec[this.primaryKey] : rec; + return this._pinnedRecordIDs.indexOf(id) !== -1; + } /** * @hidden @@ -4048,8 +4054,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements * @param index The index at which to insert the row in the pinned collection. */ public pinRow(rowID, index?): 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); @@ -4062,7 +4067,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements }; this.onRowPinning.emit(eventArgs); - this.pinnedRecords.splice(eventArgs.insertAtIndex || this.pinnedRecords.length, 0, rec); + this._pinnedRecordIDs.splice(eventArgs.insertAtIndex || this._pinnedRecordIDs.length, 0, rowID); this._pipeTrigger++; if (this.gridAPI.grid) { this.notifyChanges(true); @@ -4080,9 +4085,8 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements * @param rowID The row id - primaryKey value or the data record instance. */ public unpinRow(rowID) { - 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); @@ -4092,7 +4096,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements row: row }; this.onRowPinning.emit(eventArgs); - this.pinnedRecords.splice(index, 1); + this._pinnedRecordIDs.splice(index, 1); this._pipeTrigger++; if (this.gridAPI.grid) { this.cdr.detectChanges(); diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.html b/projects/igniteui-angular/src/lib/grids/grid/grid.component.html index 5069e28fcdb..502205c5507 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.html +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.component.html @@ -110,6 +110,7 @@ class="igx-grid__scroll-on-drag-pinned" [style.left.px]="pinnedWidth"> Allows rows to be pinned to the beginning/end of the grid. +
@@ -16,8 +17,13 @@ + + + + + + [hidden]='c.hidden' [editable]='true'>
diff --git a/src/app/grid-row-pinning/grid-row-pinning.sample.ts b/src/app/grid-row-pinning/grid-row-pinning.sample.ts index b486e6e27c0..abdb041ec63 100644 --- a/src/app/grid-row-pinning/grid-row-pinning.sample.ts +++ b/src/app/grid-row-pinning/grid-row-pinning.sample.ts @@ -1,9 +1,9 @@ import { Component, OnInit, ViewChild } from '@angular/core'; -import { IgxGridComponent, ColumnPinningPosition, RowPinningPosition, IgxGridRowComponent } from 'igniteui-angular'; +import { IgxGridComponent, ColumnPinningPosition, RowPinningPosition, IgxGridRowComponent, IgxTransactionService, IgxGridTransaction } from 'igniteui-angular'; import { IPinningConfig } from 'projects/igniteui-angular/src/lib/grids/common/grid.interface'; @Component({ - providers: [], + providers: [{ provide: IgxGridTransaction, useClass: IgxTransactionService }], selector: 'app-grid-row-pinning-sample', styleUrls: ['grid-row-pinning.sample.css'], templateUrl: 'grid-row-pinning.sample.html' From ebd5ddf9424e1d1f5c4f955cae5e2ad25ce6eaf8 Mon Sep 17 00:00:00 2001 From: MKirova Date: Thu, 12 Mar 2020 17:31:41 +0200 Subject: [PATCH 02/12] chore(*): Using separate pipe for pinned records applied to the full data list. --- .../src/lib/data-operations/data-util.ts | 10 ++++------ .../src/lib/grids/common/pipes.ts | 4 ++-- .../src/lib/grids/grid-base.directive.ts | 15 +++++---------- .../src/lib/grids/grid/grid.component.html | 11 ++++++----- .../src/lib/grids/grid/grid.component.ts | 2 +- .../src/lib/grids/grid/grid.pipes.ts | 8 ++------ .../grid-column-pinning.sample.ts | 6 +++--- .../grid-row-pinning/grid-row-pinning.sample.ts | 2 +- 8 files changed, 24 insertions(+), 34 deletions(-) diff --git a/projects/igniteui-angular/src/lib/data-operations/data-util.ts b/projects/igniteui-angular/src/lib/data-operations/data-util.ts index 487c139991f..3c7f54b1493 100644 --- a/projects/igniteui-angular/src/lib/data-operations/data-util.ts +++ b/projects/igniteui-angular/src/lib/data-operations/data-util.ts @@ -134,7 +134,7 @@ export class DataUtil { * @param deleteRows Should delete rows with DELETE transaction type from data * @returns Provided data collections updated with all provided transactions */ - public static mergeTransactions(data: T[], transactions: Transaction[], primaryKey?: any, deleteRows: boolean = false, addRows: boolean = true): T[] { + public static mergeTransactions(data: T[], transactions: Transaction[], primaryKey?: any, deleteRows: boolean = false): T[] { data.forEach((item: any, index: number) => { const rowId = primaryKey ? item[primaryKey] : item; const transaction = transactions.find(t => t.id === rowId); @@ -153,11 +153,9 @@ export class DataUtil { } }); } - if (addRows) { - data.push(...transactions - .filter(t => t.type === TransactionType.ADD) - .map(t => t.newValue)); - } + data.push(...transactions + .filter(t => t.type === TransactionType.ADD) + .map(t => t.newValue)); return data; } diff --git a/projects/igniteui-angular/src/lib/grids/common/pipes.ts b/projects/igniteui-angular/src/lib/grids/common/pipes.ts index 858385fc04c..cd16afca38c 100644 --- a/projects/igniteui-angular/src/lib/grids/common/pipes.ts +++ b/projects/igniteui-angular/src/lib/grids/common/pipes.ts @@ -113,14 +113,14 @@ export class IgxGridTransactionPipe implements PipeTransform { constructor(private gridAPI: GridBaseAPIService) { } - transform(collection: any[], id: string, pipeTrigger: number, addRows = true) { + transform(collection: any[], id: string, pipeTrigger: number) { const grid: IgxGridBaseDirective = this.gridAPI.grid; if ( grid.transactions.enabled) { const result = DataUtil.mergeTransactions( cloneArray(collection), grid.transactions.getAggregatedChanges(true), - grid.primaryKey, false, addRows); + grid.primaryKey, false); return result; } return collection; diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts index acb6064788c..c28c2f1f780 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts @@ -2460,15 +2460,6 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements */ protected _columnPinning = false; - - /** - * @hidden - */ - public get pinnedRecords() { - const recs = this._pinnedRecordIDs.map(x => this.gridAPI.get_rec_by_id(x)); - return recs; - } - protected _pinnedRecordIDs = []; public isRecordPinned(rec) { @@ -2476,6 +2467,10 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements return this._pinnedRecordIDs.indexOf(id) !== -1; } + public get hasPinnedRecords() { + return this._pinnedRecordIDs.length > 0; + } + /** * @hidden */ @@ -4108,7 +4103,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements get pinnedRowHeight() { const containerHeight = this.pinContainer ? this.pinContainer.nativeElement.clientHeight : 0; // 2px border - return this.pinnedRecords.length > 0 ? containerHeight + 2 : 0; + return this._pinnedRecordIDs.length > 0 ? containerHeight + 2 : 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 index 502205c5507..04ca3ad7116 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.html +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.component.html @@ -109,9 +109,10 @@ [igxColumnMovingDrop]="headerContainer" [attr.droppable]="true" id="left" class="igx-grid__scroll-on-drag-pinned" [style.left.px]="pinnedWidth"> - @@ -119,14 +120,14 @@ -
+
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts index b7a12f78bee..a8d8d2365ea 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts @@ -830,7 +830,7 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType, if (pinned && !this.isRowPinningToTop) { rowIndex = rowIndex + this.dataView.length; } - rowIndex = !pinned && this.isRowPinningToTop ? rowIndex + this.pinnedRecords.length : rowIndex; + rowIndex = !pinned && this.isRowPinningToTop ? rowIndex + this._pinnedRecordIDs.length : rowIndex; if (this.isDetailRecord(rowData)) { const cachedData = this.childDetailTemplates.get(rowData.detailsData); const rowID = this.primaryKey ? rowData.detailsData[this.primaryKey] : this.data.indexOf(rowData.detailsData); diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.pipes.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.pipes.ts index 63cda52525a..e255519d162 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.pipes.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.pipes.ts @@ -162,15 +162,11 @@ export class IgxGridRowPinningPipe implements PipeTransform { constructor(private gridAPI: GridBaseAPIService) {} - public transform(collection: any[] , id: string, pipeTrigger: number) { + public transform(collection: any[] , id: string, isPinned = false, pipeTrigger: number) { const grid = this.gridAPI.grid; - const pinnedRows = grid.pinnedRecords; - if (pinnedRows.length === 0) { - return collection; - } const result = collection.filter((value, index) => { - return !grid.isRecordPinned(value); + return isPinned ? grid.isRecordPinned(value): !grid.isRecordPinned(value); }); return result; } diff --git a/src/app/grid-column-pinning/grid-column-pinning.sample.ts b/src/app/grid-column-pinning/grid-column-pinning.sample.ts index 5d4971c6148..d69dcdcc271 100644 --- a/src/app/grid-column-pinning/grid-column-pinning.sample.ts +++ b/src/app/grid-column-pinning/grid-column-pinning.sample.ts @@ -103,9 +103,9 @@ export class GridColumnPinningSampleComponent implements OnInit { togglePinRow(index) { const rec = this.data[index]; - this.grid1.pinnedRecords.indexOf(rec) === -1 ? - this.grid1.pinRow(this.data[index]) : - this.grid1.unpinRow(this.data[index]) + this.grid1.isRecordPinned(rec) ? + this.grid1.pinRow(rec) : + this.grid1.unpinRow(rec) } } diff --git a/src/app/grid-row-pinning/grid-row-pinning.sample.ts b/src/app/grid-row-pinning/grid-row-pinning.sample.ts index abdb041ec63..24c7b90300d 100644 --- a/src/app/grid-row-pinning/grid-row-pinning.sample.ts +++ b/src/app/grid-row-pinning/grid-row-pinning.sample.ts @@ -83,7 +83,7 @@ export class GridRowPinningSampleComponent implements OnInit { togglePinRow(index) { const rec = this.data[index]; - this.grid1.pinnedRecords.indexOf(rec) === -1 ? + this.grid1.isRecordPinned(rec)? this.grid1.pinRow(this.data[index]) : this.grid1.unpinRow(this.data[index]) } From fc55989788d0644ff9fd554437d0414de6274a68 Mon Sep 17 00:00:00 2001 From: MKirova Date: Thu, 12 Mar 2020 17:37:28 +0200 Subject: [PATCH 03/12] chore(*): End edit when row is pinned/unpinned. --- projects/igniteui-angular/src/lib/grids/grid-base.directive.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts index c28c2f1f780..dacc0803f1c 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts @@ -4062,6 +4062,8 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements }; this.onRowPinning.emit(eventArgs); + this.endEdit(true); + this._pinnedRecordIDs.splice(eventArgs.insertAtIndex || this._pinnedRecordIDs.length, 0, rowID); this._pipeTrigger++; if (this.gridAPI.grid) { @@ -4091,6 +4093,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements row: row }; this.onRowPinning.emit(eventArgs); + this.endEdit(true); this._pinnedRecordIDs.splice(index, 1); this._pipeTrigger++; if (this.gridAPI.grid) { From b06a8cd9b43b5a49b656f0b324e0a6a2068e51d5 Mon Sep 17 00:00:00 2001 From: MKirova Date: Thu, 12 Mar 2020 18:07:41 +0200 Subject: [PATCH 04/12] chore(*): Fixing order and tests. --- .../src/lib/grids/grid-base.directive.ts | 5 +++++ .../src/lib/grids/grid/grid.pipes.ts | 4 ++++ .../src/lib/grids/grid/row-pinning.spec.ts | 16 ++++++++-------- 3 files changed, 17 insertions(+), 8 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts index f372536ea6c..9e785edc1c4 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts @@ -2467,6 +2467,11 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements return this._pinnedRecordIDs.indexOf(id) !== -1; } + public pinRecordIndex(rec) { + const id = this.primaryKey ? rec[this.primaryKey] : rec; + return this._pinnedRecordIDs.indexOf(id); + } + public get hasPinnedRecords() { return this._pinnedRecordIDs.length > 0; } diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.pipes.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.pipes.ts index e255519d162..eb31c5d2d9f 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.pipes.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.pipes.ts @@ -168,6 +168,10 @@ export class IgxGridRowPinningPipe implements PipeTransform { 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)) + } 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 index 5177c0ff894..ad53d28781e 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/row-pinning.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/row-pinning.spec.ts @@ -42,7 +42,7 @@ describe('Row Pinning #grid', () => { grid.pinRow(fix.componentInstance.data[1]); fix.detectChanges(); - expect(grid.pinnedRecords.length).toBe(1); + expect(grid.pinnedRows.length).toBe(1); let pinRowContainer = fix.debugElement.queryAll(By.css(FIXED_ROW_CONTAINER)); expect(pinRowContainer.length).toBe(1); expect(pinRowContainer[0].children.length).toBe(1); @@ -78,7 +78,7 @@ describe('Row Pinning #grid', () => { grid.pinRow(fix.componentInstance.data[1]); fix.detectChanges(); - expect(grid.pinnedRecords.length).toBe(1); + expect(grid.pinnedRows.length).toBe(1); let pinRowContainer = fix.debugElement.queryAll(By.css(FIXED_ROW_CONTAINER)); expect(pinRowContainer.length).toBe(1); expect(pinRowContainer[0].children.length).toBe(1); @@ -138,7 +138,7 @@ describe('Row Pinning #grid', () => { grid.pinRow(fix.componentInstance.data[1]); fix.detectChanges(); - expect(grid.pinnedRecords.length).toBe(1); + expect(grid.pinnedRows.length).toBe(1); let pinRowContainer = fix.debugElement.queryAll(By.css(FIXED_ROW_CONTAINER)); expect(pinRowContainer.length).toBe(1); expect(pinRowContainer[0].children.length).toBe(1); @@ -153,7 +153,7 @@ describe('Row Pinning #grid', () => { grid.unpinRow(fix.componentInstance.data[1]); fix.detectChanges(); - expect(grid.pinnedRecords.length).toBe(0); + expect(grid.pinnedRows.length).toBe(0); pinRowContainer = fix.debugElement.queryAll(By.css(FIXED_ROW_CONTAINER)); expect(pinRowContainer.length).toBe(0); @@ -167,7 +167,7 @@ describe('Row Pinning #grid', () => { row.pin(); fix.detectChanges(); - expect(grid.pinnedRecords.length).toBe(1); + expect(grid.pinnedRows.length).toBe(1); let pinRowContainer = fix.debugElement.queryAll(By.css(FIXED_ROW_CONTAINER)); expect(pinRowContainer.length).toBe(1); expect(pinRowContainer[0].children.length).toBe(1); @@ -181,7 +181,7 @@ describe('Row Pinning #grid', () => { row.unpin(); fix.detectChanges(); - expect(grid.pinnedRecords.length).toBe(0); + expect(grid.pinnedRows.length).toBe(0); pinRowContainer = fix.debugElement.queryAll(By.css(FIXED_ROW_CONTAINER)); expect(pinRowContainer.length).toBe(0); @@ -195,7 +195,7 @@ describe('Row Pinning #grid', () => { row.pinned = true; fix.detectChanges(); - expect(grid.pinnedRecords.length).toBe(1); + expect(grid.pinnedRows.length).toBe(1); let pinRowContainer = fix.debugElement.queryAll(By.css(FIXED_ROW_CONTAINER)); expect(pinRowContainer.length).toBe(1); expect(pinRowContainer[0].children.length).toBe(1); @@ -209,7 +209,7 @@ describe('Row Pinning #grid', () => { row.pinned = false; fix.detectChanges(); - expect(grid.pinnedRecords.length).toBe(0); + expect(grid.pinnedRows.length).toBe(0); pinRowContainer = fix.debugElement.queryAll(By.css(FIXED_ROW_CONTAINER)); expect(pinRowContainer.length).toBe(0); From 251af77e794784b803bc557e1a44d72630c88a10 Mon Sep 17 00:00:00 2001 From: MKirova Date: Thu, 12 Mar 2020 18:09:38 +0200 Subject: [PATCH 05/12] chore(*): Remove redundant changes. --- projects/igniteui-angular/src/lib/data-operations/data-util.ts | 1 + projects/igniteui-angular/src/lib/grids/common/pipes.ts | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/data-operations/data-util.ts b/projects/igniteui-angular/src/lib/data-operations/data-util.ts index 3c7f54b1493..624c8351da2 100644 --- a/projects/igniteui-angular/src/lib/data-operations/data-util.ts +++ b/projects/igniteui-angular/src/lib/data-operations/data-util.ts @@ -153,6 +153,7 @@ export class DataUtil { } }); } + data.push(...transactions .filter(t => t.type === TransactionType.ADD) .map(t => t.newValue)); diff --git a/projects/igniteui-angular/src/lib/grids/common/pipes.ts b/projects/igniteui-angular/src/lib/grids/common/pipes.ts index cd16afca38c..e990a7a22bf 100644 --- a/projects/igniteui-angular/src/lib/grids/common/pipes.ts +++ b/projects/igniteui-angular/src/lib/grids/common/pipes.ts @@ -120,7 +120,7 @@ export class IgxGridTransactionPipe implements PipeTransform { const result = DataUtil.mergeTransactions( cloneArray(collection), grid.transactions.getAggregatedChanges(true), - grid.primaryKey, false); + grid.primaryKey); return result; } return collection; From f1d69b5e3ceda7ae91326fef651b146e353f4882 Mon Sep 17 00:00:00 2001 From: MKirova Date: Thu, 12 Mar 2020 18:12:13 +0200 Subject: [PATCH 06/12] chore(*): Fix lint. --- .../src/lib/grids/grid-base.directive.ts | 40 ++++++++++++------- .../src/lib/grids/grid/grid.pipes.ts | 4 +- 2 files changed, 28 insertions(+), 16 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts index 9e785edc1c4..c7195075bf8 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts @@ -2462,20 +2462,6 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements protected _pinnedRecordIDs = []; - public isRecordPinned(rec) { - const id = this.primaryKey ? rec[this.primaryKey] : rec; - return this._pinnedRecordIDs.indexOf(id) !== -1; - } - - public pinRecordIndex(rec) { - const id = this.primaryKey ? rec[this.primaryKey] : rec; - return this._pinnedRecordIDs.indexOf(id); - } - - public get hasPinnedRecords() { - return this._pinnedRecordIDs.length > 0; - } - /** * @hidden */ @@ -2639,6 +2625,32 @@ 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; + } + private keydownHandler = (event) => { const key = event.key.toLowerCase(); if ((isNavigationKey(key) && event.keyCode !== 32) || key === 'tab' || key === 'pagedown' || key === 'pageup') { diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.pipes.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.pipes.ts index eb31c5d2d9f..469ac47763d 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.pipes.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.pipes.ts @@ -166,11 +166,11 @@ export class IgxGridRowPinningPipe implements PipeTransform { const grid = this.gridAPI.grid; const result = collection.filter((value, index) => { - return isPinned ? grid.isRecordPinned(value): !grid.isRecordPinned(value); + 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)) + result.sort((rec1, rec2) => grid.pinRecordIndex(rec1) - grid.pinRecordIndex(rec2)); } return result; } From ffd73515854f61d4623c102aa349da948928e1b1 Mon Sep 17 00:00:00 2001 From: MKirova Date: Thu, 12 Mar 2020 18:55:53 +0200 Subject: [PATCH 07/12] chore(*): Return original collection if there are no pinned records for unpinned area. --- projects/igniteui-angular/src/lib/grids/grid/grid.pipes.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.pipes.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.pipes.ts index 469ac47763d..7e1240b3f75 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.pipes.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.pipes.ts @@ -165,6 +165,10 @@ export class IgxGridRowPinningPipe implements PipeTransform { public transform(collection: any[] , id: string, isPinned = false, pipeTrigger: number) { const grid = this.gridAPI.grid; + if (!grid.hasPinnedRecords) { + return isPinned ? [] : collection; + } + const result = collection.filter((value, index) => { return isPinned ? grid.isRecordPinned(value) : !grid.isRecordPinned(value); }); From 54acb308fac0404f14f68bc78c1d11e7ad2c5501 Mon Sep 17 00:00:00 2001 From: MKirova Date: Fri, 13 Mar 2020 11:59:47 +0200 Subject: [PATCH 08/12] chore(*): Adding tests. --- .../src/lib/grids/grid/row-pinning.spec.ts | 104 +++++++++++++++++- 1 file changed, 102 insertions(+), 2 deletions(-) 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 index ad53d28781e..cc405e0e2b4 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/row-pinning.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/row-pinning.spec.ts @@ -8,9 +8,12 @@ import { configureTestSuite } from '../../test-utils/configure-suite'; import { ColumnPinningPosition, RowPinningPosition } from '../common/enums'; import { IPinningConfig } from '../common/grid.interface'; import { SampleTestData } from '../../test-utils/sample-test-data.spec'; +import { IgxGridTransaction } from '../tree-grid'; +import { IgxTransactionService } from '../../services'; -describe('Row Pinning #grid', () => { +fdescribe('Row Pinning #grid', () => { const FIXED_ROW_CONTAINER = '.igx-grid__tr--pinned '; + const CELL_CSS_CLASS = '.igx-grid__td'; configureTestSuite(); let fix; let grid: IgxGridComponent; @@ -18,7 +21,8 @@ describe('Row Pinning #grid', () => { beforeAll(async(() => { TestBed.configureTestingModule({ declarations: [ - GridRowPinningComponent + GridRowPinningComponent, + GridRowPinningWithTransactionsComponent ], imports: [ NoopAnimationsModule, @@ -217,6 +221,84 @@ describe('Row Pinning #grid', () => { expect(grid.getRowByIndex(1).rowID).toBe(fix.componentInstance.data[1]); }); }); + + describe(' Editing ', () => { + beforeEach(fakeAsync(() => { + fix = TestBed.createComponent(GridRowPinningWithTransactionsComponent); + fix.detectChanges(); + grid = fix.componentInstance.instance; + tick(); + fix.detectChanges(); + })); + + it('should allow pinning edited/deleted/added row.', () => { + // test with added row + grid.addRow({ 'ID': 'Test', 'CompanyName': 'Test'}); + fix.detectChanges(); + + grid.pinRow('Test'); + fix.detectChanges(); + expect(grid.pinnedRows.length).toBe(1); + let 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('Test'); + + // test with deleted row + grid.deleteRow('ALFKI'); + fix.detectChanges(); + grid.pinRow('ALFKI'); + fix.detectChanges(); + + expect(grid.pinnedRows.length).toBe(2); + pinRowContainer = fix.debugElement.queryAll(By.css(FIXED_ROW_CONTAINER)); + expect(pinRowContainer.length).toBe(1); + expect(pinRowContainer[0].children.length).toBe(2); + expect(pinRowContainer[0].children[0].context.rowID).toBe('Test'); + expect(pinRowContainer[0].children[1].context.rowID).toBe('ALFKI'); + + // test with edited + grid.updateCell('New value', 'ANTON', 'CompanyName'); + fix.detectChanges(); + grid.pinRow('ANTON'); + fix.detectChanges(); + + expect(grid.pinnedRows.length).toBe(3); + pinRowContainer = fix.debugElement.queryAll(By.css(FIXED_ROW_CONTAINER)); + expect(pinRowContainer.length).toBe(1); + expect(pinRowContainer[0].children.length).toBe(3); + expect(pinRowContainer[0].children[2].context.rowID).toBe('ANTON'); + expect(pinRowContainer[0].children[2].context.rowData.CompanyName).toBe('New value'); + }); + + it('should stop editing when edited row is pinned/unpinned.', () => { + grid.getColumnByName('CompanyName').editable = true; + fix.detectChanges(); + let cell = grid.getCellByColumn(0, 'CompanyName'); + let cellDomNumber = fix.debugElement.queryAll(By.css(CELL_CSS_CLASS))[1]; + cellDomNumber.triggerEventHandler('dblclick', {}); + fix.detectChanges(); + + expect(cell.editMode).toBeTruthy(); + + grid.pinRow(cell.row.rowID); + fix.detectChanges(); + + cell = grid.getCellByColumn(0, 'CompanyName'); + expect(cell.editMode).toBeFalsy(); + + cellDomNumber = fix.debugElement.queryAll(By.css(CELL_CSS_CLASS))[1]; + cellDomNumber.triggerEventHandler('dblclick', {}); + fix.detectChanges(); + + expect(cell.editMode).toBeTruthy(); + grid.unpinRow(cell.row.rowID); + fix.detectChanges(); + cell = grid.getCellByColumn(0, 'CompanyName'); + expect(cell.editMode).toBeFalsy(); + }); + + }); }); @Component({ @@ -237,3 +319,21 @@ export class GridRowPinningComponent { @ViewChild(IgxGridComponent, { read: IgxGridComponent, static: true }) public instance: IgxGridComponent; } + + +@Component({ + template: ` + + + `, + providers: [{ provide: IgxGridTransaction, useClass: IgxTransactionService }] +}) +export class GridRowPinningWithTransactionsComponent extends GridRowPinningComponent { + public data = SampleTestData.contactInfoDataFull(); +} From d7a8df6e3a087f043222626fc7df180673c83d66 Mon Sep 17 00:00:00 2001 From: MKirova Date: Fri, 13 Mar 2020 18:21:50 +0200 Subject: [PATCH 09/12] chore(*): Remove fdescribe. --- .../igniteui-angular/src/lib/grids/grid/row-pinning.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 index cc405e0e2b4..34811e31cab 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/row-pinning.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/row-pinning.spec.ts @@ -11,7 +11,7 @@ import { SampleTestData } from '../../test-utils/sample-test-data.spec'; import { IgxGridTransaction } from '../tree-grid'; import { IgxTransactionService } from '../../services'; -fdescribe('Row Pinning #grid', () => { +describe('Row Pinning #grid', () => { const FIXED_ROW_CONTAINER = '.igx-grid__tr--pinned '; const CELL_CSS_CLASS = '.igx-grid__td'; configureTestSuite(); From f361b415594b48ef7ded3d45b60c3cd4fba25971 Mon Sep 17 00:00:00 2001 From: MKirova Date: Thu, 19 Mar 2020 17:58:35 +0200 Subject: [PATCH 10/12] chore(*): Attempt to fix test. --- .../igniteui-angular/src/lib/grids/grid/row-pinning.spec.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) 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 index 34811e31cab..de960987289 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/row-pinning.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/row-pinning.spec.ts @@ -10,6 +10,7 @@ import { IPinningConfig } from '../common/grid.interface'; import { SampleTestData } from '../../test-utils/sample-test-data.spec'; import { IgxGridTransaction } from '../tree-grid'; import { IgxTransactionService } from '../../services'; +import { wait } from '../../test-utils/ui-interactions.spec'; describe('Row Pinning #grid', () => { const FIXED_ROW_CONTAINER = '.igx-grid__tr--pinned '; @@ -231,7 +232,7 @@ describe('Row Pinning #grid', () => { fix.detectChanges(); })); - it('should allow pinning edited/deleted/added row.', () => { + it('should allow pinning edited/deleted/added row.', async() => { // test with added row grid.addRow({ 'ID': 'Test', 'CompanyName': 'Test'}); fix.detectChanges(); @@ -262,6 +263,8 @@ describe('Row Pinning #grid', () => { fix.detectChanges(); grid.pinRow('ANTON'); fix.detectChanges(); + await wait(100); + fix.detectChanges(); expect(grid.pinnedRows.length).toBe(3); pinRowContainer = fix.debugElement.queryAll(By.css(FIXED_ROW_CONTAINER)); From 438986f8e6a7c879b3ae8a7a8d56d4ea504c6baa Mon Sep 17 00:00:00 2001 From: MKirova Date: Thu, 19 Mar 2020 18:20:55 +0200 Subject: [PATCH 11/12] chore(*): Split test in 3. --- .../src/lib/grids/grid/row-pinning.spec.ts | 50 +++++++++---------- 1 file changed, 24 insertions(+), 26 deletions(-) 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 index de960987289..a0ea2eacbaa 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/row-pinning.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/row-pinning.spec.ts @@ -10,7 +10,6 @@ import { IPinningConfig } from '../common/grid.interface'; import { SampleTestData } from '../../test-utils/sample-test-data.spec'; import { IgxGridTransaction } from '../tree-grid'; import { IgxTransactionService } from '../../services'; -import { wait } from '../../test-utils/ui-interactions.spec'; describe('Row Pinning #grid', () => { const FIXED_ROW_CONTAINER = '.igx-grid__tr--pinned '; @@ -223,7 +222,7 @@ describe('Row Pinning #grid', () => { }); }); - describe(' Editing ', () => { + fdescribe(' Editing ', () => { beforeEach(fakeAsync(() => { fix = TestBed.createComponent(GridRowPinningWithTransactionsComponent); fix.detectChanges(); @@ -232,46 +231,45 @@ describe('Row Pinning #grid', () => { fix.detectChanges(); })); - it('should allow pinning edited/deleted/added row.', async() => { - // test with added row - grid.addRow({ 'ID': 'Test', 'CompanyName': 'Test'}); + it('should allow pinning edited row.', () => { + grid.updateCell('New value', 'ANTON', 'CompanyName'); fix.detectChanges(); - - grid.pinRow('Test'); + grid.pinRow('ANTON'); fix.detectChanges(); + expect(grid.pinnedRows.length).toBe(1); - let pinRowContainer = fix.debugElement.queryAll(By.css(FIXED_ROW_CONTAINER)); + 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('Test'); + expect(pinRowContainer[0].children[0].context.rowID).toBe('ANTON'); + expect(pinRowContainer[0].children[0].context.rowData.CompanyName).toBe('New value'); + }); - // test with deleted row + it('should allow pinning deleted row.', () => { grid.deleteRow('ALFKI'); fix.detectChanges(); grid.pinRow('ALFKI'); fix.detectChanges(); - expect(grid.pinnedRows.length).toBe(2); - pinRowContainer = fix.debugElement.queryAll(By.css(FIXED_ROW_CONTAINER)); + 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(2); - expect(pinRowContainer[0].children[0].context.rowID).toBe('Test'); - expect(pinRowContainer[0].children[1].context.rowID).toBe('ALFKI'); + expect(pinRowContainer[0].children.length).toBe(1); + expect(pinRowContainer[0].children[0].context.rowID).toBe('ALFKI'); + }); - // test with edited - grid.updateCell('New value', 'ANTON', 'CompanyName'); - fix.detectChanges(); - grid.pinRow('ANTON'); - fix.detectChanges(); - await wait(100); + it('should allow pinning added row.', () => { + + grid.addRow({ 'ID': 'Test', 'CompanyName': 'Test'}); fix.detectChanges(); - expect(grid.pinnedRows.length).toBe(3); - pinRowContainer = fix.debugElement.queryAll(By.css(FIXED_ROW_CONTAINER)); + grid.pinRow('Test'); + fix.detectChanges(); + 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(3); - expect(pinRowContainer[0].children[2].context.rowID).toBe('ANTON'); - expect(pinRowContainer[0].children[2].context.rowData.CompanyName).toBe('New value'); + expect(pinRowContainer[0].children.length).toBe(1); + expect(pinRowContainer[0].children[0].context.rowID).toBe('Test'); }); it('should stop editing when edited row is pinned/unpinned.', () => { From 6152abb1f0a4e6c719537e4196916b0566f76d9e Mon Sep 17 00:00:00 2001 From: MKirova Date: Thu, 19 Mar 2020 18:29:29 +0200 Subject: [PATCH 12/12] chore(*): Remove fdescribe. --- .../igniteui-angular/src/lib/grids/grid/row-pinning.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 index a0ea2eacbaa..e87f38faba7 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/row-pinning.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/row-pinning.spec.ts @@ -222,7 +222,7 @@ describe('Row Pinning #grid', () => { }); }); - fdescribe(' Editing ', () => { + describe(' Editing ', () => { beforeEach(fakeAsync(() => { fix = TestBed.createComponent(GridRowPinningWithTransactionsComponent); fix.detectChanges();