Merge branch 'master' into iganchev/add-i18n-row-edit-btns-master

Author: Lipata

CHANGELOG.md

@@ -30,6 +30,23 @@ All notable changes for each version of this project will be documented in this
       </ng-template>
     </igx-column>
     ```
+- `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
+    - Added `batchEditing` - an `Input` property for controlling what type of transaction service is provided for the grid.
+    Setting `<igx-grid [batchEditing]="true">` is the same as providing `[{ provide: IgxGridTransaction, useClass: IgxTransactionService }]`. 
+    - **Deprecation** - Providing a transaction service for the grid via `providers: [IgxTransactionService]` is now deprecated and will be removed in a future patch.
+    Instead, use the new `batchEditing` property to control the grid's Transactions.
+
+    ```html
+    <igx-grid #grid [data]="data" [batchEditing]="true">
+        ...
+    </igx-grid>
+    <button igxButton (click)="grid.transactions.undo">Undo</button>
+    ```
+
+- `Transactions`
+    - Added `IgxFlatTransactionFactory` - the singleton service instantiates a new `TransactionService<Transaction, State>` given a `transaction type`.
+    - Added `IgxHierarchicalTransactionFactory` - the singleton service instantiates a new `HierarchicalTransactionService<HierarchicalTransaction, HierarchicalState>` given a `transaction type`.
+    
 - `Toolbar Actions`
     - Exposed a new input property `overlaySettings` for all column actions (`hiding` | `pinning` | `advanced filtering` | `exporter`). Example below:
 

projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss

@@ -673,9 +673,9 @@
     $hierarchical-action-icon: 24px;
 
     $grouparea-padding: (
-        comfortable: rem(8px) rem(24px),
-        cosy: rem(8px) rem(16px),
-        compact: rem(4px) rem(12px)
+        comfortable: 0 rem(24px),
+        cosy: 0 rem(16px),
+        compact: 0 rem(12px)
     );
 
     $grouparea-min-height: (
@@ -2155,6 +2155,11 @@
         &:focus {
             outline-style: none;
         }
+
+        %igx-chip {
+            margin-top: rem(8px);
+            margin-bottom: rem(8px);
+        }
     }
 
     %igx-grid-grouparea__connector {
@@ -2177,11 +2182,21 @@
     %igx-grid-grouparea--cosy {
         min-height: map-get($grouparea-min-height, 'cosy');
         padding: map-get($grouparea-padding, 'cosy');
+
+        %igx-chip {
+            margin-top: rem(8px);
+            margin-bottom: rem(8px);
+        }
     }
 
     %igx-grid-grouparea--compact {
         min-height: map-get($grouparea-min-height, 'compact');
         padding: map-get($grouparea-padding, 'compact');
+
+        %igx-chip {
+            margin-top: rem(4px);
+            margin-bottom: rem(4px);
+        }
     }
 
     %igx-drop-area {

projects/igniteui-angular/src/lib/grids/README.md

@@ -166,6 +166,7 @@ Below is the list of all inputs that the developers may set to configure the gri
 |`data`|Array|The data source for the grid.|
 |`resourceStrings`| IGridResourceStrings | Resource strings of the grid. |
 |`autoGenerate`|boolean|Autogenerate grid's columns, default value is _false_|
+|`batchEditing`|boolean|Toggles batch editing in the grid, default is _false_|
 |`paging`|boolean|Enables the paging feature. Defaults to _false_.|
 |`page`| number | The current page index.|
 |`perPage`|number|Visible items per page, default is 15|

projects/igniteui-angular/src/lib/grids/common/events.ts

@@ -125,6 +125,7 @@ export interface IColumnMovingEventArgs extends IBaseEventArgs {
 export interface IColumnMovingEndEventArgs extends IBaseEventArgs {
     source: IgxColumnComponent;
     target: IgxColumnComponent;
+    cancel: boolean;
 }
 
 export interface IGridKeydownEventArgs extends IBaseEventArgs {

projects/igniteui-angular/src/lib/grids/filtering/excel-style/grid.excel-style-filtering.component.ts

@@ -207,7 +207,7 @@ export class IgxGridExcelStyleFilteringComponent implements OnDestroy {
                 this.cdr.detectChanges();
             });
             this._columnMoved = this.grid.columnMovingEnd.pipe(takeUntil(this.destroy$)).subscribe(() => {
-                this.cdr.detectChanges();
+                this.cdr.markForCheck();
             });
         }
     }

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

@@ -31,7 +31,7 @@ import {
 } from '@angular/core';
 import { resizeObservable } from '../core/utils';
 import 'igniteui-trial-watermark';
-import { Subject, pipe, fromEvent, animationFrameScheduler } from 'rxjs';
+import { Subject, pipe, fromEvent, animationFrameScheduler, merge } from 'rxjs';
 import { takeUntil, first, filter, throttleTime, map, shareReplay, takeWhile } from 'rxjs/operators';
 import { cloneArray, mergeObjects, compareMaps, resolveNestedPath, isObject, PlatformUtil } from '../core/utils';
 import { GridColumnDataType } from '../data-operations/data-util';
@@ -50,7 +50,8 @@ import {
     ConnectedPositioningStrategy,
     ContainerPositionStrategy,
     StateUpdateEvent,
-    TransactionEventOrigin
+    TransactionEventOrigin,
+    Action,
 } from '../services/public_api';
 import { GridBaseAPIService } from './api.service';
 import { IgxGridCellComponent } from './cell.component';
@@ -154,6 +155,7 @@ import { IPageEventArgs } from '../paginator/paginator-interfaces';
 import { IgxPaginatorComponent } from '../paginator/paginator.component';
 import { IgxGridHeaderRowComponent } from './headers/grid-header-row.component';
 import { IgxGridGroupByAreaComponent } from './grouping/grid-group-by-area.component';
+import { IgxFlatTransactionFactory, TRANSACTION_TYPE } from '../services/transaction/transaction-factory.service';
 
 let FAKE_ROW_ID = -1;
 const DEFAULT_ITEMS_PER_PAGE = 15;
@@ -171,6 +173,7 @@ export const IgxGridTransaction = new InjectionToken<string>('IgxGridTransaction
 @Directive()
 export abstract class IgxGridBaseDirective extends DisplayDensityBase implements GridType,
     OnInit, DoCheck, OnDestroy, AfterContentInit, AfterViewInit {
+
     /**
      * Gets/Sets the display time for the row adding snackbar notification.
      *
@@ -2365,6 +2368,31 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         this.notifyChanges();
     }
 
+    /**
+     * Gets/Sets whether the grid has batch editing enabled.
+     * When batch editing is enabled, changes are not made directly to the underlying data.
+     * Instead, they are stored as transactions, which can later be committed w/ the `commit` method.
+     *
+     * @example
+     * ```html
+     * <igx-grid [batchEditing]="true" [data]="someData">
+     * </igx-grid>
+     * ```
+     */
+    @Input()
+    public get batchEditing(): boolean {
+        return this._batchEditing;
+    }
+
+    public set batchEditing(val: boolean) {
+        if (val !== this._batchEditing) {
+            delete this._transactions;
+            this._batchEditing = val;
+            this.switchTransactionService(val);
+            this.subscribeToTransactions();
+        }
+    }
+
     /** @hidden @internal */
     public get pinnedColumnsTextInternal() {
         return this._pinnedColumnsText;
@@ -2374,6 +2402,9 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
      * Get transactions service for the grid.
      */
     public get transactions(): TransactionService<Transaction, State> {
+        if (this._diTransactions && !this.batchEditing) {
+            return this._diTransactions;
+        }
         return this._transactions;
     }
 
@@ -2825,6 +2856,8 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
     protected _init = true;
     protected _cdrRequestRepaint = false;
     protected _userOutletDirective: IgxOverlayOutletDirective;
+    protected _transactions: TransactionService<Transaction, State>;
+    protected _batchEditing = false;
 
     /** @hidden @internal */
     public get paginator() {
@@ -2928,6 +2961,8 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         positionStrategy: this.rowEditPositioningStrategy
     };
 
+    private transactionChange$ = new Subject<void>();
+
     private readonly DRAG_SCROLL_DELTA = 10;
 
     /**
@@ -3056,7 +3091,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         public selectionService: IgxGridSelectionService,
         public colResizingService: IgxColumnResizingService,
         public gridAPI: GridBaseAPIService<IgxGridBaseDirective & GridType>,
-        @Inject(IgxGridTransaction) protected _transactions: TransactionService<Transaction, State>,
+        protected transactionFactory: IgxFlatTransactionFactory,
         private elementRef: ElementRef<HTMLElement>,
         private zone: NgZone,
         @Inject(DOCUMENT) public document: any,
@@ -3070,13 +3105,15 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         public summaryService: IgxGridSummaryService,
         @Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions: IDisplayDensityOptions,
         @Inject(LOCALE_ID) private localeId: string,
-        protected platform: PlatformUtil) {
+        protected platform: PlatformUtil,
+        @Optional() @Inject(IgxGridTransaction) protected _diTransactions?: TransactionService<Transaction, State>) {
         super(_displayDensityOptions);
         this.locale = this.locale || this.localeId;
         this.datePipe = new DatePipe(this.locale);
         this.decimalPipe = new DecimalPipe(this.locale);
         this.currencyPipe = new CurrencyPipe(this.locale);
         this.percentPipe = new PercentPipe(this.locale);
+        this._transactions = this.transactionFactory.create(TRANSACTION_TYPE.None);
         this.cdr.detach();
     }
 
@@ -3289,25 +3326,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
             this.summaryService.clearSummaryCache(args);
         });
 
-        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++;
-            this.notifyChanges();
-        });
+        this.subscribeToTransactions();
 
         this.resizeNotify.pipe(
             destructor,
@@ -3688,6 +3707,8 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
 
         this.destroy$.next(true);
         this.destroy$.complete();
+        this.transactionChange$.next();
+        this.transactionChange$.complete();
         this._destroyed = true;
 
         if (this._advancedFilteringOverlayId) {
@@ -4283,6 +4304,14 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
      * ```
      */
     public moveColumn(column: IgxColumnComponent, target: IgxColumnComponent, pos: DropPosition = DropPosition.AfterDropTarget) {
+        // M.A. May 11th, 2021 #9508 Make the event cancelable
+        const eventArgs: IColumnMovingEndEventArgs = { source: column, target, cancel: false };
+
+        this.columnMovingEnd.emit(eventArgs);
+
+        if (eventArgs.cancel) {
+            return;
+        }
 
         if (column === target || (column.level !== target.level) ||
             (column.topLevelParent !== target.topLevelParent)) {
@@ -4318,8 +4347,6 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
 
         this._moveColumns(column, target, pos);
         this._columnsReordered(column);
-
-        this.columnMovingEnd.emit({ source: column, target });
     }
 
     /**
@@ -5996,6 +6023,40 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         this.crudService.endEdit(commit, event);
     }
 
+    protected switchTransactionService(val: boolean) {
+        if (val) {
+            this._transactions = this.transactionFactory.create(TRANSACTION_TYPE.Base);
+        } else {
+            this._transactions = this.transactionFactory.create(TRANSACTION_TYPE.None);
+        }
+    }
+
+    protected subscribeToTransactions(): void {
+        this.transactionChange$.next();
+        this.transactions.onStateUpdate.pipe(takeUntil(merge(this.destroy$,this.transactionChange$)))
+        .subscribe(this.transactionStatusUpdate.bind(this));
+    }
+
+    protected transactionStatusUpdate(event: StateUpdateEvent) {
+        let actions: Action<Transaction>[] = [];
+        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++;
+        this.notifyChanges();
+    };
+
     protected writeToData(rowIndex: number, value: any) {
         mergeObjects(this.gridAPI.get_all_data()[rowIndex], value);
     }

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

@@ -4,8 +4,6 @@ import { IgxGridFooterComponent } from './grid-footer/grid-footer.component';
 import {
     IgxGridBodyDirective
 } from './grid.common';
-import { IgxGridTransaction } from './grid-base.directive';
-import { IgxBaseTransactionService } from '../services/transaction/base-transaction';
 import {
     IgxRowAddTextDirective,
     IgxRowEditTemplateDirective,
@@ -39,6 +37,7 @@ import {
 } from './grid/grid.directives';
 import { IgxChipsModule } from '../chips/chips.module';
 import { IgxGroupByMetaPipe } from './grouping/group-by-area.directive';
+
 /**
  * @hidden
  */
@@ -113,9 +112,6 @@ import { IgxGroupByMetaPipe } from './grouping/group-by-area.directive';
         IgxPaginatorModule,
         IgxGridSharedModules,
         IgxChipsModule
-    ],
-    providers: [
-        { provide: IgxGridTransaction, useClass: IgxBaseTransactionService }
     ]
 })
 export class IgxGridCommonModule { }

projects/igniteui-angular/src/lib/grids/grid/column-moving.spec.ts

@@ -124,7 +124,7 @@ describe('IgxGrid - Column Moving #grid', () => {
             column.move(2);
 
             columnsList = grid.columnList.toArray();
-            const args = { source: grid.columnList.toArray()[2], target: grid.columnList.toArray()[1] };
+            const args = { source: grid.columnList.toArray()[2], target: grid.columnList.toArray()[1], cancel: false };
             expect(grid.columnMovingEnd.emit).toHaveBeenCalledTimes(1);
             expect(grid.columnMovingEnd.emit).toHaveBeenCalledWith(args);
         });
@@ -456,6 +456,7 @@ describe('IgxGrid - Column Moving #grid', () => {
             expect(fixture.componentInstance.countEnd).toEqual(1);
             expect(fixture.componentInstance.source).toEqual(grid.columnList.toArray()[1]);
             expect(fixture.componentInstance.target).toEqual(grid.columnList.toArray()[0]);
+            expect(fixture.componentInstance.cancel).toBe(false);
         }));
 
         it('Should be able to cancel columnMoving event.', (async () => {
@@ -485,6 +486,35 @@ describe('IgxGrid - Column Moving #grid', () => {
             expect(columnsList[2].field).toEqual('LastName');
         }));
 
+        it('Should be able to cancel columnMovingEnd event.', (async () => {
+            const headers: DebugElement[] = fixture.debugElement.queryAll(By.css(COLUMN_HEADER_CLASS));
+
+            // step 1 - subscribe to the columnMovingEnd event in order to cancel it
+            grid.columnMovingEnd.subscribe((e) => {
+                if (fixture.componentInstance.target.field === 'Name') {
+                    e.cancel = true;
+                }
+            });
+
+            // step 2 - try moving a column
+            const header = headers[0].nativeElement;
+            UIInteractions.simulatePointerEvent('pointerdown', header, 150, 65);
+            await wait();
+            UIInteractions.simulatePointerEvent('pointermove', header, 156, 71);
+            await wait();
+            UIInteractions.simulatePointerEvent('pointermove', header, 330, 75);
+            await wait(50);
+            UIInteractions.simulatePointerEvent('pointerup', header, 330, 75);
+            await wait(50);
+            fixture.detectChanges();
+
+            // step 3 - verify the event was canceled(in componentInstance)
+            const columnsList = grid.columnList.toArray();
+            expect(columnsList[0].field).toEqual('ID');
+            expect(columnsList[1].field).toEqual('Name');
+            expect(columnsList[2].field).toEqual('LastName');
+        }));
+
         it('Should preserve filtering after columns are reordered.', async () => {
             pending('This scenario need to be reworked with new Filtering row');
             fixture.componentInstance.isFilterable = true;