Skip to content

Commit c87116e

Browse files
skrustevskrustev
committed
refactor(add-row): Clear transactions changes and add fictional row inside dataWithAddedInTransactionRows getter instead. Use inherited IgxAddRow.
1 parent 972a99c commit c87116e

File tree

16 files changed

+108
-102
lines changed

16 files changed

+108
-102
lines changed

‎projects/igniteui-angular/src/lib/data-operations/data-util.ts‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -163,15 +163,9 @@ export class DataUtil {
163163
});
164164
}
165165

166-
transactions
166+
data.push(...transactions
167167
.filter(t => t.type === TransactionType.ADD)
168-
.forEach(t => {
169-
if (t.pending && t.pendingIndex !== null && t.pendingIndex !== undefined) {
170-
data.splice(t.pendingIndex, 0, t.newValue);
171-
} else {
172-
data.push(t.newValue);
173-
}
174-
});
168+
.map(t => t.newValue));
175169

176170
return data;
177171
}

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

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { IgxGridBaseDirective } from './grid-base.directive';
88
import { IgxRowDirective } from './row.directive';
99
import { IFilteringExpressionsTree } from '../data-operations/filtering-expressions-tree';
1010
import { Transaction, TransactionType, State } from '../services/transaction/transaction';
11-
import { IgxCell, IgxGridCRUDService, IgxRow } from './common/crud.service';
11+
import { IgxCell, IgxGridCRUDService, IgxEditRow } from './common/crud.service';
1212
import { GridType } from './common/grid.interface';
1313
import { ColumnType } from './common/column.interface';
1414
import { IGridEditEventArgs, IRowToggleEventArgs } from './common/events';
@@ -150,7 +150,7 @@ export class GridBaseAPIService<T extends IgxGridBaseDirective & GridType> {
150150
}
151151

152152
// TODO: CRUD refactor to not emit editing evts.
153-
public update_row(row: IgxRow, value: any, event?: Event) {
153+
public update_row(row: IgxEditRow, value: any, event?: Event) {
154154
const grid = this.grid;
155155
const selected = grid.selectionService.isRowSelected(row.id);
156156
const rowInEditMode = this.crudService.row;
@@ -253,19 +253,17 @@ export class GridBaseAPIService<T extends IgxGridBaseDirective & GridType> {
253253
return this.grid.filteredData;
254254
}
255255

256-
public addRowToData(rowData: any, parentID?, atIndex?: number) {
256+
public addRowToData(rowData: any, parentID?) {
257257
// Add row goes to transactions and if rowEditable is properly implemented, added rows will go to pending transactions
258258
// If there is a row in edit - > commit and close
259259
const grid = this.grid;
260260

261-
// If no index is provided, add to bottom.
262-
const rowIndex = atIndex != null ? atIndex : grid.dataLength;
263261
if (grid.transactions.enabled) {
264262
const transactionId = grid.primaryKey ? rowData[grid.primaryKey] : rowData;
265-
const transaction: Transaction = { id: transactionId, type: TransactionType.ADD, newValue: rowData, pendingIndex: rowIndex };
263+
const transaction: Transaction = { id: transactionId, type: TransactionType.ADD, newValue: rowData };
266264
grid.transactions.add(transaction);
267265
} else {
268-
grid.data.splice(rowIndex, 0, rowData);
266+
grid.data.push(rowData);
269267
}
270268
}
271269

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

Lines changed: 53 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,10 @@ import { GridType } from './grid.interface';
66
import { Subject } from 'rxjs';
77
import { isEqual } from '../../core/utils';
88

9-
export class IgxRow {
9+
export class IgxEditRow {
1010
public transactionState: any;
1111
public state: any;
1212
public newData: any;
13-
public isAddRow: boolean;
1413

1514
constructor(public id: any, public index: number, public data: any, public grid: IgxGridBaseDirective & GridType) { }
1615

@@ -21,31 +20,57 @@ export class IgxRow {
2120
oldValue: this.data,
2221
cancel: false,
2322
owner: this.grid,
24-
isAddRow: this.isAddRow || false,
2523
event
2624
};
2725
if (includeNewValue) {
28-
args.newValue = this.newData;
26+
args.newValue = this.newData ?? this.data;
2927
}
3028
return args;
3129
}
3230

3331
public createDoneEditEventArgs(cachedRowData: any, event?: Event): IGridEditDoneEventArgs {
3432
const updatedData = this.grid.transactions.enabled ?
3533
this.grid.transactions.getAggregatedValue(this.id, true) : this.grid.gridAPI.getRowData(this.id);
36-
const rowData = updatedData === null ? this.grid.gridAPI.getRowData(this.id) : updatedData;
34+
const rowData = updatedData ?? this.grid.gridAPI.getRowData(this.id);
3735
const args: IGridEditDoneEventArgs = {
3836
rowID: this.id,
3937
rowData,
4038
oldValue: cachedRowData,
4139
newValue: updatedData,
4240
owner: this.grid,
43-
isAddRow: this.isAddRow || false,
4441
event
4542
};
4643

4744
return args;
4845
}
46+
47+
public getClassName() {
48+
return this.constructor.name;
49+
}
50+
}
51+
52+
export class IgxAddRow extends IgxEditRow {
53+
public isAddRow: boolean = true;
54+
55+
public createEditEventArgs(includeNewValue = true, event?: Event): IGridEditEventArgs {
56+
const args = super.createEditEventArgs(includeNewValue, event);
57+
args.oldValue = null;
58+
args.isAddRow = true;
59+
return args;
60+
}
61+
62+
public createDoneEditEventArgs(cachedRowData: any, event?: Event): IGridEditDoneEventArgs {
63+
const args = super.createDoneEditEventArgs(null, event);
64+
args.isAddRow = true;
65+
return args;
66+
}
67+
}
68+
69+
export interface IgxAddRowParent {
70+
rowID: string;
71+
index: number;
72+
asChild: boolean;
73+
isPinned: boolean;
4974
}
5075

5176
export class IgxCell {
@@ -106,16 +131,10 @@ export class IgxCell {
106131
}
107132
}
108133

109-
export interface IgxRowParent {
110-
rowID: string;
111-
index: number;
112-
asChild: boolean;
113-
isPinned: boolean;
114-
}
115134
export class IgxCellCrudState {
116135
public grid: IgxGridBaseDirective & GridType;
117136
public cell: IgxCell | null = null;
118-
public row: IgxRow | null = null;
137+
public row: IgxEditRow | null = null;
119138
public isInCompositionMode = false;
120139
public cancelAddMode = false;
121140

@@ -129,8 +148,8 @@ export class IgxCellCrudState {
129148
cell.rowData ?? cell.row.data, cell.grid);
130149
}
131150

132-
public createRow(cell: IgxCell): IgxRow {
133-
return this.row = new IgxRow(cell.id.rowID, cell.rowIndex, cell.rowData, cell.grid);
151+
public createRow(cell: IgxCell): IgxEditRow {
152+
return this.row = new IgxEditRow(cell.id.rowID, cell.rowIndex, cell.rowData, cell.grid);
134153
}
135154

136155
public sameRow(rowID): boolean {
@@ -229,7 +248,7 @@ export class IgxCellCrudState {
229248
}
230249
}
231250
export class IgxRowCrudState extends IgxCellCrudState {
232-
public row: IgxRow | null = null;
251+
public row: IgxEditRow | null = null;
233252
public closeRowEditingOverlay = new Subject();
234253

235254
private _rowEditingBlocked = false;
@@ -261,8 +280,10 @@ export class IgxRowCrudState extends IgxCellCrudState {
261280
console.warn('The grid must have a `primaryKey` specified when using `rowEditable`!');
262281
}
263282

264-
if (!this.row) {
265-
this.createRow(this.cell);
283+
if (!this.row || !(this.row.getClassName() === IgxEditRow.name)) {
284+
if (!this.row) {
285+
this.createRow(this.cell);
286+
}
266287
const rowArgs = this.row.createEditEventArgs(false, event);
267288

268289
this.grid.rowEditEnter.emit(rowArgs);
@@ -317,9 +338,12 @@ export class IgxRowCrudState extends IgxCellCrudState {
317338
let nonCancelableArgs;
318339
if (!commit) {
319340
this.grid.transactions.endPending(false);
320-
} else {
341+
} else if (this.row.getClassName() === IgxEditRow.name) {
321342
rowEditArgs = this.grid.gridAPI.update_row(this.row, this.row.newData, event);
322343
nonCancelableArgs = this.rowEditDone(rowEditArgs.oldValue, event);
344+
} else {
345+
this.grid.transactions.endPending(false);
346+
this.grid.gridAPI.addRowToData(this.row.newData ?? this.row.data);
323347
}
324348

325349
nonCancelableArgs = this.exitRowEdit(rowEditArgs.oldValue, event);
@@ -359,7 +383,7 @@ export class IgxRowCrudState extends IgxCellCrudState {
359383
}
360384
}
361385

362-
public updateRowEditData(row: IgxRow, value?: any) {
386+
public updateRowEditData(row: IgxEditRow, value?: any) {
363387
const grid = this.grid;
364388

365389
const rowInEditMode = grid.gridAPI.crudService.row;
@@ -378,17 +402,7 @@ export class IgxRowCrudState extends IgxCellCrudState {
378402
}
379403

380404
export class IgxRowAddCrudState extends IgxRowCrudState {
381-
public addRowParent: IgxRowParent = null;
382-
public addRow: IgxRow | null = null;
383-
384-
/**
385-
* @hidden @internal
386-
*/
387-
public createRow(cell: IgxCell): IgxRow {
388-
this.row = super.createRow(cell);
389-
this.row.isAddRow = this.addRow ? this.addRow.id === this.row.id : false;
390-
return this.row;
391-
}
405+
public addRowParent: IgxAddRowParent = null;
392406

393407
/**
394408
* @hidden @internal
@@ -398,7 +412,7 @@ export class IgxRowAddCrudState extends IgxRowCrudState {
398412

399413
const newRec = this.grid.getEmptyRecordObjectFor(parentRow ? parentRow.rowData : null);
400414
const addRowIndex = this.addRowParent.index + 1;
401-
return this.addRow = new IgxRow(newRec[this.primaryKey], addRowIndex, newRec, this.grid);
415+
return this.row = new IgxAddRow(newRec[this.primaryKey], addRowIndex, newRec, this.grid);
402416
}
403417

404418
/**
@@ -423,7 +437,7 @@ export class IgxRowAddCrudState extends IgxRowCrudState {
423437
* @hidden @internal
424438
*/
425439
public endRowTransaction(commit: boolean, event?: Event): IGridEditEventArgs {
426-
if (this.addRow) {
440+
if (this.row && this.row.getClassName() === IgxAddRow.name) {
427441
this.grid.rowAdded.pipe(first()).subscribe((addRowArgs: IRowDataEventArgs) => {
428442
const rowData = addRowArgs.data;
429443
const pinnedIndex = this.grid.pinnedRecords.findIndex(x => x[this.primaryKey] === rowData[this.primaryKey]);
@@ -434,29 +448,13 @@ export class IgxRowAddCrudState extends IgxRowCrudState {
434448
const showIndex = isInView ? -1 : dataIndex;
435449
this.grid.showSnackbarFor(showIndex);
436450
});
437-
438-
this.addRow.newData = this.row.newData;
439451
}
440452

441453
const args = super.endRowTransaction(commit, event);
442454

443-
if (this.addRow) {
444-
this.grid.transactions.endPending(true);
445-
446-
if (commit) {
447-
args.isAddRow = true;
448-
449-
if (!this.grid.transactions.enabled) {
450-
this.grid.gridAPI.addRowToData(this.addRow.newData || this.addRow.data);
451-
}
452-
453-
this.grid.rowAddedNotifier.next(this.addRow.newData || this.addRow.data);
454-
this.grid.rowAdded.emit({ data: this.addRow.newData || this.addRow.data });
455-
} else if (this.grid.transactions.enabled) {
456-
this.grid.transactions.clear(this.addRow.id);
457-
}
458-
459-
this.endAddRow();
455+
this.endAddRow();
456+
if (commit) {
457+
this.grid.rowAdded.emit({ data: args.newValue });
460458
}
461459

462460
return args;
@@ -466,7 +464,6 @@ export class IgxRowAddCrudState extends IgxRowCrudState {
466464
* @hidden @internal
467465
*/
468466
public endAddRow() {
469-
this.addRow = null;
470467
this.addRowParent = null;
471468
this.grid.triggerPipes();
472469
}
@@ -555,17 +552,16 @@ export class IgxGridCRUDService extends IgxRowAddCrudState {
555552
this.createAddRow(parentRow, asChild);
556553

557554
this.grid.transactions.startPending();
558-
this.grid.gridAPI.addRowToData(this.addRow.data, parentRow ? parentRow.rowID : null, this.addRow.index);
559555
if (this.addRowParent.isPinned) {
560556
// If parent is pinned, add the new row to pinned records
561-
(this.grid as any)._pinnedRecordIDs.splice(this.addRow.index, 0, this.addRow.id);
557+
(this.grid as any)._pinnedRecordIDs.splice(this.row.index, 0, this.row.id);
562558
}
563559

564560
this.grid.triggerPipes();
565561
this.grid.notifyChanges(true);
566562

567-
this.grid.navigateTo(this.addRow.index, -1);
568-
const dummyRow = this.grid.gridAPI.get_row_by_index(this.addRow.index);
563+
this.grid.navigateTo(this.row.index, -1);
564+
const dummyRow = this.grid.gridAPI.get_row_by_index(this.row.index);
569565
dummyRow.triggerAddAnimation();
570566
dummyRow.addAnimationEnd.pipe(first()).subscribe(() => {
571567
const cell = dummyRow.cells.find(c => c.editable);

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import {
1818
IgxGridTransactionStatePipe,
1919
IgxColumnFormatterPipe,
2020
IgxSummaryFormatterPipe,
21+
IgxGridAddRowPipe,
2122
IgxHeaderGroupWidthPipe
2223
} from './pipes';
2324

@@ -38,6 +39,7 @@ import {
3839
IgxGridDataMapperPipe,
3940
IgxStringReplacePipe,
4041
IgxGridTransactionStatePipe,
42+
IgxGridAddRowPipe,
4143
IgxColumnFormatterPipe,
4244
IgxSummaryFormatterPipe,
4345
IgxHeaderGroupWidthPipe
@@ -58,6 +60,7 @@ import {
5860
IgxGridDataMapperPipe,
5961
IgxStringReplacePipe,
6062
IgxGridTransactionStatePipe,
63+
IgxGridAddRowPipe,
6164
IgxColumnFormatterPipe,
6265
IgxSummaryFormatterPipe,
6366
IgxHeaderGroupWidthPipe

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

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { IgxColumnComponent } from '../columns/column.component';
88
import { ColumnDisplayOrder } from './enums';
99
import { IgxColumnActionsComponent } from '../column-actions/column-actions.component';
1010
import { IgxSummaryOperand, IgxSummaryResult } from '../grid/public_api';
11+
import { IgxAddRow } from './crud.service';
1112

1213
/**
1314
* @hidden
@@ -124,7 +125,7 @@ export class IgxGridTransactionPipe implements PipeTransform {
124125
if (grid.transactions.enabled) {
125126
const result = DataUtil.mergeTransactions(
126127
cloneArray(collection),
127-
[...grid.transactions.getAggregatedChanges(true), ...grid.transactions.getAggregatedPendingAddChanges(true)],
128+
grid.transactions.getAggregatedChanges(true),
128129
grid.primaryKey);
129130
return result;
130131
}
@@ -319,6 +320,23 @@ export class IgxSummaryFormatterPipe implements PipeTransform {
319320
}
320321
}
321322

323+
@Pipe({ name: 'gridAddRow' })
324+
export class IgxGridAddRowPipe implements PipeTransform {
325+
326+
constructor(private gridAPI: GridBaseAPIService<IgxGridBaseDirective & GridType>) { }
327+
328+
public transform(collection: any, isPinned = false, _pipeTrigger: number) {
329+
const grid = this.gridAPI.grid;
330+
if (!grid.rowEditable || !grid.crudService.row || grid.crudService.row.getClassName() !== IgxAddRow.name ||
331+
!grid.gridAPI.crudService.addRowParent || isPinned !== grid.gridAPI.crudService.addRowParent.isPinned) {
332+
return collection;
333+
}
334+
const copy = collection.slice(0);
335+
const row = grid.gridAPI.getRowData(grid.crudService.row.id);
336+
copy.splice(grid.crudService.row.index, 0, row);
337+
return copy;
338+
}
339+
}
322340

323341
@Pipe({ name: 'igxHeaderGroupWidth' })
324342
export class IgxHeaderGroupWidthPipe implements PipeTransform {

0 commit comments

Comments
 (0)