Skip to content

Commit 3f64484

Browse files
skrustevskrustev
committed
refactor(add-row): General fixes to changes related to add row mechanics.
1 parent 4a7e612 commit 3f64484

File tree

11 files changed

+98
-42
lines changed

11 files changed

+98
-42
lines changed

‎projects/igniteui-angular/src/lib/grids/common/crud.service.ts‎

Lines changed: 21 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ export class IgxEditRow {
2020
oldValue: this.data,
2121
cancel: false,
2222
owner: this.grid,
23+
isAddRow: false,
2324
event
2425
};
2526
if (includeNewValue) {
@@ -38,6 +39,7 @@ export class IgxEditRow {
3839
oldValue: cachedRowData,
3940
newValue: updatedData,
4041
owner: this.grid,
42+
isAddRow: false,
4143
event
4244
};
4345

@@ -52,6 +54,14 @@ export class IgxEditRow {
5254
export class IgxAddRow extends IgxEditRow {
5355
public isAddRow = true;
5456

57+
constructor(public id: any,
58+
public index: number,
59+
public data: any,
60+
public recordRef: any,
61+
public grid: IgxGridBaseDirective & GridType) {
62+
super(id, index, data, grid);
63+
}
64+
5565
public createEditEventArgs(includeNewValue = true, event?: Event): IGridEditEventArgs {
5666
const args = super.createEditEventArgs(includeNewValue, event);
5767
args.oldValue = null;
@@ -343,7 +353,9 @@ export class IgxRowCrudState extends IgxCellCrudState {
343353
nonCancelableArgs = this.rowEditDone(rowEditArgs.oldValue, event);
344354
} else {
345355
this.grid.transactions.endPending(false);
346-
this.grid.gridAPI.addRowToData(this.row.newData ?? this.row.data);
356+
const parentId = this.getParentRowId();
357+
this.grid.gridAPI.addRowToData(this.row.newData ?? this.row.data, parentId);
358+
nonCancelableArgs = this.rowEditDone(null, event);
347359
}
348360

349361
nonCancelableArgs = this.exitRowEdit(rowEditArgs.oldValue, event);
@@ -399,6 +411,9 @@ export class IgxRowCrudState extends IgxCellCrudState {
399411
}
400412
}
401413

414+
protected getParentRowId() {
415+
return null;
416+
}
402417
}
403418

404419
export class IgxRowAddCrudState extends IgxRowCrudState {
@@ -410,9 +425,9 @@ export class IgxRowAddCrudState extends IgxRowCrudState {
410425
public createAddRow(parentRow: IgxRowDirective<IgxGridBaseDirective & GridType>, asChild?: boolean) {
411426
this.createAddRowParent(parentRow, asChild);
412427

413-
const newRec = this.grid.getEmptyRecordObjectFor(parentRow ? parentRow.rowData : null);
428+
const newRec = this.grid.getEmptyRecordObjectFor(parentRow);
414429
const addRowIndex = this.addRowParent.index + 1;
415-
return this.row = new IgxAddRow(newRec[this.primaryKey], addRowIndex, newRec, this.grid);
430+
return this.row = new IgxAddRow(newRec.rowID, addRowIndex, newRec.data, newRec.recordRef, this.grid);
416431
}
417432

418433
/**
@@ -424,7 +439,7 @@ export class IgxRowAddCrudState extends IgxRowCrudState {
424439

425440
const isInPinnedArea = this.grid.isRecordPinnedByViewIndex(rowIndex);
426441
const pinIndex = this.grid.pinnedRecords.findIndex(x => x[this.primaryKey] === rowId);
427-
const unpinIndex = this.grid.unpinnedRecords.findIndex(x => x[this.primaryKey] === rowId);
442+
const unpinIndex = this.grid.getUnpinnedIndexById(rowId);
428443
this.addRowParent = {
429444
rowID: rowId,
430445
index: isInPinnedArea ? pinIndex : unpinIndex,
@@ -454,6 +469,7 @@ export class IgxRowAddCrudState extends IgxRowCrudState {
454469

455470
this.endAddRow();
456471
if (commit) {
472+
this.grid.rowAddedNotifier.next({ data: args.newValue });
457473
this.grid.rowAdded.emit({ data: args.newValue });
458474
}
459475

@@ -477,7 +493,7 @@ export class IgxRowAddCrudState extends IgxRowCrudState {
477493
return this.grid.dataView.findIndex(data => data[this.primaryKey] === rec[this.primaryKey]);
478494
}
479495

480-
protected _getParentRecordId() {
496+
protected getParentRowId() {
481497
if (this.addRowParent.asChild) {
482498
return this.addRowParent.asChild ? this.addRowParent.rowID : undefined;;
483499
} else if (this.addRowParent.rowID !== null && this.addRowParent.rowID !== undefined) {

‎projects/igniteui-angular/src/lib/grids/common/pipes.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -332,8 +332,8 @@ export class IgxGridAddRowPipe implements PipeTransform {
332332
return collection;
333333
}
334334
const copy = collection.slice(0);
335-
const row = grid.gridAPI.getRowData(grid.crudService.row.id);
336-
copy.splice(grid.crudService.row.index, 0, row);
335+
const rec = (grid.crudService.row as IgxAddRow).recordRef;
336+
copy.splice(grid.crudService.row.index, 0, rec);
337337
return copy;
338338
}
339339
}

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

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5859,11 +5859,15 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
58595859
}
58605860
}
58615861

5862-
public getEmptyRecordObjectFor(rec) {
5863-
const row = { ...rec };
5862+
/**
5863+
* @hidden @internal
5864+
*/
5865+
public getEmptyRecordObjectFor(inRow: IgxRowDirective<IgxGridBaseDirective & GridType>) {
5866+
const row = { ...inRow.rowData };
58645867
Object.keys(row).forEach(key => row[key] = undefined);
5865-
row[this.primaryKey] = this.generateRowID();
5866-
return row;
5868+
const id = this.generateRowID();
5869+
row[this.primaryKey] = id;
5870+
return { rowID: id, data: row, recordRef: row };
58675871
}
58685872

58695873
/**
@@ -5899,6 +5903,13 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
58995903
}
59005904
}
59015905

5906+
/**
5907+
* @hidden
5908+
*/
5909+
public getUnpinnedIndexById(id) {
5910+
return this.unpinnedRecords.findIndex(x => x[this.primaryKey] === id);
5911+
}
5912+
59025913
/**
59035914
* Finishes the row transactions on the current row.
59045915
*
@@ -5954,10 +5965,6 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
59545965
mergeObjects(this.gridAPI.get_all_data()[rowIndex], value);
59555966
}
59565967

5957-
protected getUnpinnedIndexById(id) {
5958-
return this.unpinnedRecords.findIndex(x => x[this.primaryKey] === id);
5959-
}
5960-
59615968
protected _restoreVirtState(row) {
59625969
// check virtualization state of data record added from cache
59635970
// in case state is no longer valid - update it.

‎projects/igniteui-angular/src/lib/grids/grid/grid-row-editing.spec.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1105,7 +1105,7 @@ describe('IgxGrid - Row Editing #grid', () => {
11051105
row.delete();
11061106
fix.detectChanges();
11071107
expect(grid.rowEditingOverlay.collapsed).toBeTruthy();
1108-
expect(grid.gridAPI.crudService.endEdit).toHaveBeenCalledTimes(1);
1108+
expect(grid.gridAPI.crudService.endEdit).toHaveBeenCalledTimes(2);
11091109
expect(grid.gridAPI.crudService.endEdit).toHaveBeenCalledWith(true);
11101110
});
11111111
});
@@ -2090,7 +2090,7 @@ describe('IgxGrid - Row Editing #grid', () => {
20902090

20912091
fix.componentInstance.buttons.last.element.nativeElement.click();
20922092
expect(grid.gridAPI.crudService.endEdit).toHaveBeenCalled();
2093-
expect(grid.gridAPI.crudService.endEdit).toHaveBeenCalledTimes(1);
2093+
expect(grid.gridAPI.crudService.endEdit).toHaveBeenCalledTimes(2);
20942094
}));
20952095

20962096
it('Empty template', fakeAsync(/** height/width setter rAF */() => {
@@ -2176,7 +2176,7 @@ describe('IgxGrid - Row Editing #grid', () => {
21762176
oldValue: row.rowData,
21772177
newValue: Object.assign({}, row.rowData, { ProductName: newCellValue }),
21782178
owner: grid,
2179-
isAddRow: row.addRow,
2179+
isAddRow: row.addRowUI,
21802180
event: jasmine.anything() as any
21812181
};
21822182

‎projects/igniteui-angular/src/lib/grids/grid/grid.component.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -49,8 +49,8 @@
4949
<ng-container *ngIf='data
5050
| gridTransaction:id:pipeTrigger
5151
| visibleColumns:hasVisibleColumns
52-
| gridAddRow:true:pipeTrigger
5352
| gridRowPinning:id:true:pipeTrigger
53+
| gridAddRow:true:pipeTrigger
5454
| gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger:true
5555
| gridSort:sortingExpressions:sortStrategy:id:pipeTrigger:true as pinnedData'>
5656
<div #pinContainer *ngIf='pinnedData.length > 0'
@@ -75,8 +75,8 @@
7575
| gridPaging:paginator?.page:paginator?.perPage:id:pipeTrigger
7676
| gridSummary:hasSummarizedColumns:summaryCalculationMode:summaryPosition:id:showSummaryOnCollapse:pipeTrigger:summaryPipeTrigger
7777
| gridDetails:hasDetails:expansionStates:pipeTrigger
78-
| gridAddRow:false:pipeTrigger
79-
| gridRowPinning:id:false:pipeTrigger"
78+
| gridRowPinning:id:false:pipeTrigger
79+
| gridAddRow:false:pipeTrigger"
8080
let-rowIndex="index" [igxForScrollOrientation]="'vertical'" [igxForScrollContainer]='verticalScroll'
8181
[igxForContainerSize]='calcHeight'
8282
[igxForItemSize]="hasColumnLayouts ? rowHeight * multiRowLayoutRowSize + 1 : renderedRowHeight"

‎projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,8 +31,8 @@
3131
<ng-container *ngIf="data
3232
| gridTransaction:id:pipeTrigger
3333
| visibleColumns:hasVisibleColumns
34-
| gridAddRow:true:pipeTrigger
3534
| gridRowPinning:id:true:pipeTrigger
35+
| gridAddRow:true:pipeTrigger
3636
| gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger:true
3737
| gridSort:sortingExpressions:sortStrategy:id:pipeTrigger:true as pinnedData">
3838
<div #pinContainer *ngIf='pinnedData.length > 0' class='igx-grid__tr--pinned'
@@ -54,8 +54,8 @@
5454
| gridSort:sortingExpressions:sortStrategy:id:pipeTrigger
5555
| gridHierarchicalPaging:paginator?.page:paginator?.perPage:id:pipeTrigger
5656
| gridHierarchical:expansionStates:id:primaryKey:childLayoutKeys:pipeTrigger
57-
| gridAddRow:false:pipeTrigger
58-
| gridRowPinning:id:false:pipeTrigger"
57+
| gridRowPinning:id:false:pipeTrigger
58+
| gridAddRow:false:pipeTrigger"
5959
[igxForScrollOrientation]="'vertical'" [igxForScrollContainer]='verticalScroll'
6060
[igxForContainerSize]='calcHeight' [igxForItemSize]="renderedRowHeight" [igxForTrackBy]='trackChanges'
6161
#verticalScrollContainer (chunkPreload)="dataLoading($event)">

‎projects/igniteui-angular/src/lib/grids/row.directive.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -139,7 +139,7 @@ export class IgxRowDirective<T extends IgxGridBaseDirective & GridType> implemen
139139
}
140140

141141
public get addRowUI(): any {
142-
return this.grid.crudService.row &&
142+
return !!this.grid.crudService.row &&
143143
this.grid.crudService.row.getClassName() === IgxAddRow.name &&
144144
this.grid.crudService.row.id === this.rowID;
145145
}

‎projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -31,8 +31,8 @@
3131
| treeGridTransaction:pipeTrigger
3232
| visibleColumns:hasVisibleColumns
3333
| treeGridNormalizeRecord:pipeTrigger
34-
| gridAddRow:true:pipeTrigger
3534
| gridRowPinning:id:true:pipeTrigger
35+
| treeGridAddRow:true:pipeTrigger
3636
| treeGridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:pipeTrigger:filteringPipeTrigger:true
3737
| treeGridSorting:sortingExpressions:sortStrategy:pipeTrigger:true as pinnedData'>
3838
<div #pinContainer *ngIf='pinnedData.length > 0'
@@ -58,8 +58,8 @@
5858
| treeGridFlattening:expansionDepth:expansionStates:pipeTrigger
5959
| treeGridPaging:paginator?.page:paginator?.perPage:pipeTrigger
6060
| treeGridSummary:hasSummarizedColumns:summaryCalculationMode:summaryPosition:showSummaryOnCollapse:pipeTrigger:summaryPipeTrigger
61-
| gridAddRow:false:pipeTrigger
62-
| gridRowPinning:id:false:pipeTrigger"
61+
| gridRowPinning:id:false:pipeTrigger
62+
| treeGridAddRow:false:pipeTrigger"
6363
let-rowIndex="index" [igxForScrollOrientation]="'vertical'" [igxForScrollContainer]='verticalScroll'
6464
[igxForContainerSize]='calcHeight' [igxForItemSize]="renderedRowHeight" #verticalScrollContainer>
6565
<ng-template [igxTemplateOutlet]='isSummaryRow(rowData) ? summary_template : record_template'
@@ -73,7 +73,7 @@
7373
</igx-tree-grid-row>
7474
</ng-template>
7575
<ng-template #pinned_record_template let-rowIndex="index" let-rowData>
76-
<igx-tree-grid-row [gridID]="id" [index]="rowIndex" #row #pinnedRow>
76+
<igx-tree-grid-row [gridID]="id" [index]="rowIndex" [treeRow]="rowData" #row #pinnedRow>
7777
</igx-tree-grid-row>
7878
</ng-template>
7979
<ng-template #summary_template let-rowIndex="index" let-rowData>

‎projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.ts‎

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ import { IgxTreeGridSelectionService } from './tree-grid-selection.service';
4949
import { GridInstanceType, GridSelectionMode } from '../common/enums';
5050
import { IgxSummaryRow, IgxTreeGridRow } from '../grid-public-row';
5151
import { RowType } from '../common/row.interface';
52-
import { IgxGridCRUDService } from '../common/crud.service';
52+
import { IgxAddRow, IgxGridCRUDService } from '../common/crud.service';
5353
import { IgxTreeGridGroupByAreaComponent } from '../grouping/tree-grid-group-by-area.component';
5454
import { IgxGridCell } from '../grid-public-cell';
5555
import { CellType } from '../common/cell.interface';
@@ -656,14 +656,18 @@ export class IgxTreeGridComponent extends IgxGridBaseDirective implements GridTy
656656
return this.extractDataFromSelection(source, formatters, headers);
657657
}
658658

659-
public getEmptyRecordObjectFor(rec) {
660-
const row = { ...rec };
661-
const data = rec || {};
659+
/**
660+
* @hidden @internal
661+
*/
662+
public getEmptyRecordObjectFor(inTreeRow) {
663+
const treeRowRec = inTreeRow?.treeRow || null;
664+
const row = { ...treeRowRec };
665+
const data = treeRowRec?.data || {};
662666
row.data = { ...data };
663667
Object.keys(row.data).forEach(key => {
664668
// persist foreign key if one is set.
665669
if (this.foreignKey && key === this.foreignKey) {
666-
row.data[key] = rec.data[key];
670+
row.data[key] = treeRowRec.data[key];
667671
} else {
668672
row.data[key] = undefined;
669673
}
@@ -677,7 +681,7 @@ export class IgxTreeGridComponent extends IgxGridBaseDirective implements GridTy
677681
}
678682
row.rowID = id;
679683
row.data[this.primaryKey] = id;
680-
return row;
684+
return { rowID: id, data: row.data, recordRef: row };
681685
}
682686

683687
/** @hidden */
@@ -821,6 +825,11 @@ export class IgxTreeGridComponent extends IgxGridBaseDirective implements GridTy
821825
return record.rowID !== undefined && record.data;
822826
}
823827

828+
/** @hidden */
829+
public getUnpinnedIndexById(id) {
830+
return this.unpinnedRecords.findIndex(x => x.data[this.primaryKey] === id);
831+
}
832+
824833
/**
825834
* @hidden
826835
*/
@@ -884,10 +893,6 @@ export class IgxTreeGridComponent extends IgxGridBaseDirective implements GridTy
884893
return this.dataView.findIndex(x => x.data[this.primaryKey] === rec[this.primaryKey]);
885894
}
886895

887-
protected getUnpinnedIndexById(id) {
888-
return this.unpinnedRecords.findIndex(x => x.data[this.primaryKey] === id);
889-
}
890-
891896
/**
892897
* @hidden @internal
893898
*/

‎projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.module.ts‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
22
import { IgxTreeGridComponent } from './tree-grid.component';
33
import { IgxTreeGridRowComponent } from './tree-grid-row.component';
44
import { IgxGridCommonModule } from '../grid-common.module';
5-
import { IgxTreeGridHierarchizingPipe, IgxTreeGridNormalizeRecordsPipe } from './tree-grid.pipes';
5+
import { IgxTreeGridHierarchizingPipe, IgxTreeGridNormalizeRecordsPipe, IgxTreeGridAddRowPipe } from './tree-grid.pipes';
66
import { IgxTreeGridFlatteningPipe, IgxTreeGridSortingPipe, IgxTreeGridPagingPipe, IgxTreeGridTransactionPipe } from './tree-grid.pipes';
77
import { IgxTreeGridCellComponent } from './tree-cell.component';
88
import { IgxTreeGridFilteringPipe } from './tree-grid.filtering.pipe';
@@ -28,7 +28,8 @@ import { IgxTreeGridGroupByAreaComponent } from '../grouping/tree-grid-group-by-
2828
IgxRowLoadingIndicatorTemplateDirective,
2929
IgxTreeGridNormalizeRecordsPipe,
3030
IgxTreeGridGroupingPipe,
31-
IgxTreeGridGroupByAreaComponent
31+
IgxTreeGridGroupByAreaComponent,
32+
IgxTreeGridAddRowPipe
3233
],
3334
exports: [
3435
IgxTreeGridComponent,
@@ -37,7 +38,8 @@ import { IgxTreeGridGroupByAreaComponent } from '../grouping/tree-grid-group-by-
3738
IgxRowLoadingIndicatorTemplateDirective,
3839
IgxGridCommonModule,
3940
IgxTreeGridGroupingPipe,
40-
IgxTreeGridGroupByAreaComponent
41+
IgxTreeGridGroupByAreaComponent,
42+
IgxTreeGridAddRowPipe
4143
],
4244
imports: [
4345
IgxGridCommonModule,

0 commit comments

Comments
 (0)