Merge pull request #7574 from IgniteUI/pbozhinov/fix-5673-10

Deselect Row on Transaction Redo

Author: ChronosSF

CHANGELOG.md

@@ -1,18 +1,19 @@
 # Ignite UI for Angular Change Log
 
 All notable changes for each version of this project will be documented in this file.
-## 10.0.0
-
-### New Features
-
-- `IgxGrid`
-    - `showGroupArea` input is added, which can be used to enable/disable the group area row.
 
-## 10.0
+## 10.0.0
 
 ### General
 - `igx-select`, `igx-combo`, `igx-drop-down`
 - **Behavioral Change** - The select, combo, and dropdown items now have display block and text-overflow ellipsis enabled by default.
+- `IgxTransaction` - The `onStateUpdate` now emits with information of its origin. The emitted value is of type `StateUpdateEvent`, which has two properties:
+    - `origin` - it can vary within the values of the `TransactionEventOrigin` interface; 
+    - `actions` - contains information about the transactions, that caused the emission of the event.
+
+### New Features
+- `IgxGrid`
+    - `showGroupArea` input is added, which can be used to enable/disable the group area row.
 
 ## 9.1.1
 

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

@@ -46,7 +46,9 @@ import {
     OverlaySettings,
     PositionSettings,
     ConnectedPositioningStrategy,
-    ContainerPositionStrategy
+    ContainerPositionStrategy,
+    StateUpdateEvent,
+    TransactionEventOrigin
 } from '../services/public_api';
 import { GridBaseAPIService } from './api.service';
 import { IgxGridCellComponent } from './cell.component';
@@ -2856,7 +2858,20 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
             this.summaryService.clearSummaryCache(args);
         });
 
-        this.transactions.onStateUpdate.pipe(destructor).subscribe(() => {
+        this.transactions.onStateUpdate.pipe(destructor).subscribe((event: StateUpdateEvent) => {
+            let actions = [];
+            if (event.origin === TransactionEventOrigin.REDO) {
+                actions = event.actions ? event.actions.filter(x => x.transaction.type === TransactionType.DELETE) : [];
+            } else if (event.origin === TransactionEventOrigin.UNDO) {
+                actions = event.actions ? event.actions.filter(x => x.transaction.type === TransactionType.ADD) : [];
+            }
+            if (actions.length > 0) {
+                for (const action of actions) {
+                    if (this.selectionService.isRowSelected(action.transaction.id)) {
+                        this.selectionService.deselectRow(action.transaction.id);
+                    }
+                }
+            }
             this.selectionService.clearHeaderCBState();
             this.summaryService.clearSummaryCache();
             this._pipeTrigger++;

projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-selection.spec.ts

@@ -490,7 +490,6 @@ describe('IgxTreeGrid - Selection #tGrid', () => {
         }));
 
         it('should deselect row when delete its parent', () => {
-            pending('Related to the bug #5673');
             treeGrid.selectRows([treeGrid.getRowByIndex(3).rowID, treeGrid.getRowByIndex(5).rowID], true);
             fix.detectChanges();
 
@@ -506,8 +505,8 @@ describe('IgxTreeGrid - Selection #tGrid', () => {
             expect(treeGrid.selectedRows()).toEqual([]);
 
             // try to select deleted row
-            TreeGridFunctions.clickRowSelectionCheckbox(fix, 0);
-            UIInteractions.simulateClickEvent(treeGrid.getRowByIndex(3).nativeElement);
+            UIInteractions.simulateClickEvent(treeGrid.getRowByIndex(0).nativeElement);
+            TreeGridFunctions.clickRowSelectionCheckbox(fix, 3);
             TreeGridFunctions.clickRowSelectionCheckbox(fix, 5);
             fix.detectChanges();
 
@@ -522,8 +521,8 @@ describe('IgxTreeGrid - Selection #tGrid', () => {
             fix.detectChanges();
 
             // select rows
-            TreeGridFunctions.clickRowSelectionCheckbox(fix, 0);
-            UIInteractions.simulateClickEvent(treeGrid.getRowByIndex(3).nativeElement);
+            UIInteractions.simulateClickEvent(treeGrid.getRowByIndex(0).nativeElement);
+            TreeGridFunctions.clickRowSelectionCheckbox(fix, 3);
             TreeGridFunctions.clickRowSelectionCheckbox(fix, 5);
             fix.detectChanges();
 
@@ -579,7 +578,6 @@ describe('IgxTreeGrid - Selection #tGrid', () => {
         });
 
         it('should have correct header checkbox when add a row', () => {
-            pending('Related to the bug #5673');
             treeGrid.selectAllRows();
             fix.detectChanges();
 
@@ -600,7 +598,6 @@ describe('IgxTreeGrid - Selection #tGrid', () => {
         });
 
         it('should have correct header checkbox when add a row and undo transaction', fakeAsync(() => {
-            pending('Related to the bug #5673');
             treeGrid.addRow({ ID: 13, Name: 'Michael Cooper', Age: 33, OnPTO: false }, 317);
             tick();
             fix.detectChanges();

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

@@ -17,7 +17,13 @@ import { IgxGridBaseDirective } from '../grid-base.directive';
 import { GridBaseAPIService } from '../api.service';
 import { ITreeGridRecord } from './tree-grid.interfaces';
 import { IRowToggleEventArgs } from '../common/events';
-import { HierarchicalTransaction, HierarchicalState, TransactionType } from '../../services/transaction/transaction';
+import {
+    HierarchicalTransaction,
+    HierarchicalState,
+    TransactionType,
+    TransactionEventOrigin,
+    StateUpdateEvent
+} from '../../services/transaction/transaction';
 import { IgxHierarchicalTransactionService } from '../../services/public_api';
 import { IgxFilteringService } from '../filtering/grid-filtering.service';
 import { IgxGridSummaryService } from '../summaries/grid-summary.service';
@@ -30,6 +36,7 @@ import { IgxGridNavigationService } from '../grid-navigation.service';
 import { GridType } from '../common/grid.interface';
 import { IgxColumnComponent } from '../columns/column.component';
 import { IgxRowIslandAPIService } from '../hierarchical-grid/row-island-api.service';
+import { IgxTreeGridRowComponent } from './tree-grid-row.component';
 
 let NEXT_ID = 0;
 
@@ -345,6 +352,20 @@ export class IgxTreeGridComponent extends IgxGridBaseDirective implements GridTy
         this.onRowToggle.pipe(takeUntil(this.destroy$)).subscribe((args) => {
             this.loadChildrenOnRowExpansion(args);
         });
+
+        this.transactions.onStateUpdate.pipe(takeUntil<any>(this.destroy$)).subscribe((event: StateUpdateEvent) => {
+            let actions = [];
+            if (event.origin === TransactionEventOrigin.REDO) {
+                actions = event.actions ? event.actions.filter(x => x.transaction.type === TransactionType.DELETE) : [];
+            } else if (event.origin === TransactionEventOrigin.UNDO) {
+                actions = event.actions ? event.actions.filter(x => x.transaction.type === TransactionType.ADD) : [];
+            }
+            if (actions.length) {
+                for (const action of actions) {
+                    this.deselectChildren(action.transaction.id);
+                }
+            }
+        });
     }
 
     ngDoCheck() {
@@ -663,4 +684,20 @@ export class IgxTreeGridComponent extends IgxGridBaseDirective implements GridTy
         }
         super.initColumns(collection, cb);
     }
+
+    /**
+     * @description A recursive way to deselect all selected children of a given record
+     * @param recordID ID of the record whose children to deselect
+     * @hidden
+     * @internal
+     */
+    private deselectChildren(recordID): void {
+        const selectedChildren = [];
+        const rowToDeselect = (this.getRowByKey(recordID) as IgxTreeGridRowComponent).treeRow;
+        this.selectionService.deselectRow(recordID);
+        this._gridAPI.get_selected_children(rowToDeselect, selectedChildren);
+        if (selectedChildren.length > 0) {
+            selectedChildren.forEach(x => this.deselectChildren(x));
+        }
+    }
 }

projects/igniteui-angular/src/lib/services/transaction/base-transaction.ts

@@ -1,4 +1,4 @@
-import { TransactionService, Transaction, State } from './transaction';
+import { TransactionService, Transaction, State, StateUpdateEvent } from './transaction';
 import { EventEmitter, Injectable } from '@angular/core';
 import { isObject, mergeObjects, cloneValue } from '../../core/utils';
 
@@ -32,7 +32,7 @@ export class IgxBaseTransactionService<T extends Transaction, S extends State> i
     /**
      * @inheritdoc
      */
-    public onStateUpdate = new EventEmitter<void>();
+    public onStateUpdate = new EventEmitter<StateUpdateEvent>();
 
     /**
      * @inheritdoc

projects/igniteui-angular/src/lib/services/transaction/igx-transaction.ts

@@ -1,13 +1,13 @@
-import { Transaction, State, TransactionType } from './transaction';
+import { Transaction, State, TransactionType, StateUpdateEvent, TransactionEventOrigin, Action } from './transaction';
 import { IgxBaseTransactionService } from './base-transaction';
 import { EventEmitter, Injectable } from '@angular/core';
 import { isObject, mergeObjects, cloneValue } from '../../core/utils';
 
 @Injectable()
 export class IgxTransactionService<T extends Transaction, S extends State> extends IgxBaseTransactionService<T, S> {
     protected _transactions: T[] = [];
-    protected _redoStack: { transaction: T, recordRef: any }[][] = [];
-    protected _undoStack: { transaction: T, recordRef: any }[][] = [];
+    protected _redoStack: Action<T>[][] = [];
+    protected _undoStack: Action<T>[][] = [];
     protected _states: Map<any, S> = new Map();
 
     /**
@@ -27,7 +27,7 @@ export class IgxTransactionService<T extends Transaction, S extends State> exten
     /**
      * @inheritdoc
      */
-    public onStateUpdate = new EventEmitter<void>();
+    public onStateUpdate = new EventEmitter<StateUpdateEvent>();
 
     /**
      * @inheritdoc
@@ -45,9 +45,10 @@ export class IgxTransactionService<T extends Transaction, S extends State> exten
         transactions.push(transaction);
 
         if (!this._isPending) {
-            this._undoStack.push([{ transaction, recordRef }]);
+            const actions = [{ transaction, recordRef }];
+            this._undoStack.push(actions);
             this._redoStack = [];
-            this.onStateUpdate.emit();
+            this.onStateUpdate.emit({ origin: TransactionEventOrigin.ADD, actions });
         }
     }
 
@@ -115,7 +116,7 @@ export class IgxTransactionService<T extends Transaction, S extends State> exten
     public endPending(commit: boolean): void {
         this._isPending = false;
         if (commit) {
-            const actions: { transaction: T, recordRef: any }[] = [];
+            const actions: Action<T>[] = [];
             // don't use addTransaction due to custom undo handling
             for (const transaction of this._pendingTransactions) {
                 const pendingState = this._pendingStates.get(transaction.id);
@@ -127,7 +128,7 @@ export class IgxTransactionService<T extends Transaction, S extends State> exten
             this._undoStack.push(actions);
             this._redoStack = [];
 
-            this.onStateUpdate.emit();
+            this.onStateUpdate.emit({ origin: TransactionEventOrigin.END, actions});
         }
         super.endPending(commit);
     }
@@ -167,7 +168,7 @@ export class IgxTransactionService<T extends Transaction, S extends State> exten
             this._undoStack = [];
         }
         this._redoStack = [];
-        this.onStateUpdate.emit();
+        this.onStateUpdate.emit({ origin: TransactionEventOrigin.CLEAR, actions: []});
     }
 
     /**
@@ -178,7 +179,7 @@ export class IgxTransactionService<T extends Transaction, S extends State> exten
             return;
         }
 
-        const lastActions: { transaction: T, recordRef: any }[] = this._undoStack.pop();
+        const lastActions: Action<T>[] = this._undoStack.pop();
         this._transactions.splice(this._transactions.length - lastActions.length);
         this._redoStack.push(lastActions);
 
@@ -189,23 +190,23 @@ export class IgxTransactionService<T extends Transaction, S extends State> exten
             }
         }
 
-        this.onStateUpdate.emit();
+        this.onStateUpdate.emit({ origin: TransactionEventOrigin.UNDO, actions: lastActions });
     }
 
     /**
      * @inheritdoc
      */
     public redo(): void {
         if (this._redoStack.length > 0) {
-            let actions: { transaction: T, recordRef: any, useInUndo?: boolean }[];
+            let actions: Action<T>[];
             actions = this._redoStack.pop();
             for (const action of actions) {
                 this.updateState(this._states, action.transaction, action.recordRef);
                 this._transactions.push(action.transaction);
             }
 
             this._undoStack.push(actions);
-            this.onStateUpdate.emit();
+            this.onStateUpdate.emit({ origin: TransactionEventOrigin.REDO, actions });
         }
     }
 

projects/igniteui-angular/src/lib/services/transaction/transaction.ts

@@ -1,11 +1,20 @@
 import { EventEmitter } from '@angular/core';
+import { ThrowStmt } from '@angular/compiler';
 
 export enum TransactionType {
     ADD = 'add',
     DELETE = 'delete',
     UPDATE = 'update'
 }
 
+export enum TransactionEventOrigin {
+    UNDO = 'undo',
+    REDO = 'redo',
+    CLEAR = 'clear',
+    ADD = 'add',
+    END = 'endPending'
+}
+
 export interface Transaction {
     id: any;
     type: TransactionType;
@@ -26,6 +35,16 @@ export interface State {
     type: TransactionType;
 }
 
+export interface Action<T extends Transaction> {
+    transaction: T;
+    recordRef: any;
+}
+
+export interface StateUpdateEvent {
+    origin: TransactionEventOrigin;
+    actions: Action<Transaction>[];
+}
+
 /**
  * @experimental
  * @hidden
@@ -43,7 +62,7 @@ export interface TransactionService<T extends Transaction, S extends State> {
     /**
      * Event fired when transaction state has changed - add transaction, commit all transactions, undo and redo
      */
-    onStateUpdate?: EventEmitter<void>;
+    onStateUpdate?: EventEmitter<StateUpdateEvent>;
 
     /**
      * @returns if there are any transactions in the Undo stack