Merge branch 'master' into astaev/issue6260-master

Author: DiyanDimitrov

CHANGELOG.md

@@ -15,6 +15,7 @@ All notable changes for each version of this project will be documented in this
     - `IgxMonthPickerBase` -> `IgxMonthPickerBaseDirective`
 
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
+    - **Breaking Change** - Hierarchical grid children no longer use the same `IgxTransactionService` instance and transaction handling should be modified to address each grid's transactions separately.
     - **Behavioral Change** - Pinning columns is no longer automatically prevented when the pinning area would exceed the size of the grid.
     - `igxGridState` directive added to make it easy for developers to save and restore the grid state. The directive exposes the `getState` and `setState` methods to save/restore the state and an `options` input property to exclude features.
 - `IgxCarousel`:

projects/igniteui-angular/src/lib/carousel/carousel.component.ts

@@ -21,12 +21,12 @@ import {
     Injectable
 } from '@angular/core';
 import { IgxIconModule } from '../icon/index';
-import { IBaseEventArgs } from '../core/utils';
+import { IBaseEventArgs, PlatformUtil } from '../core/utils';
 import { Subject, merge } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { IgxCarouselIndicatorDirective, IgxCarouselNextButtonDirective, IgxCarouselPrevButtonDirective } from './carousel.directives';
 import { useAnimation, AnimationBuilder, AnimationPlayer, AnimationReferenceMetadata } from '@angular/animations';
-import { slideInLeft, fadeIn, rotateInCenter } from '../animations/main';
+import { slideInLeft, fadeIn } from '../animations/main';
 import { IgxSlideComponent, Direction } from './slide.component';
 import { ICarouselResourceStrings } from '../core/i18n/carousel-resources';
 import { CurrentResourceStrings } from '../core/i18n/resources';
@@ -436,7 +436,8 @@ export class IgxCarouselComponent implements OnDestroy, AfterContentInit {
     private animationPosition = 0;
     private newDuration = 0;
 
-    constructor(private element: ElementRef, private iterableDiffers: IterableDiffers, private builder: AnimationBuilder) {
+    constructor(private element: ElementRef, private iterableDiffers: IterableDiffers,
+            private builder: AnimationBuilder, private platformUtil: PlatformUtil) {
         this.differ = this.iterableDiffers.find([]).create(null);
     }
 
@@ -887,7 +888,7 @@ export class IgxCarouselComponent implements OnDestroy, AfterContentInit {
     private restartInterval() {
         this.resetInterval();
 
-        if (!isNaN(this.interval) && this.interval > 0) {
+        if (!isNaN(this.interval) && this.interval > 0 && this.platformUtil.isBrowser) {
             this.lastInterval = setInterval(() => {
                 const tick = +this.interval;
                 if (this.playing && this.total && !isNaN(tick) && tick > 0) {

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

@@ -330,7 +330,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
     }
 
     /**
-     * Emitted before filtering is performed.
+     * Emitted after filtering is performed.
      * Returns the filtering expressions tree of the column for which filtering was performed.
      * ```typescript
      * filteringExprTreeChange(event: IFilteringExpressionsTree){
@@ -347,7 +347,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
     public filteringExpressionsTreeChange = new EventEmitter<IFilteringExpressionsTree>();
 
     /**
-     * Emitted before advanced filtering is performed.
+     * Emitted after advanced filtering is performed.
      * Returns the advanced filtering expressions tree.
      * ```typescript
      * advancedFilteringExprTreeChange(event: IFilteringExpressionsTree){

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

@@ -19,7 +19,7 @@ import { IgxRowIslandComponent } from './row-island.component';
 import { IgxFilteringService } from '../filtering/grid-filtering.service';
 import { IDisplayDensityOptions, DisplayDensityToken } from '../../core/displayDensity';
 import { IgxSummaryOperand } from '../summaries/grid-summary';
-import { IgxHierarchicalTransactionService, IgxOverlayService } from '../../services/index';
+import { IgxOverlayService, IgxTransactionService, Transaction, TransactionService, State } from '../../services/index';
 import { DOCUMENT } from '@angular/common';
 import { IgxHierarchicalGridNavigationService } from './hierarchical-grid-navigation.service';
 import { IgxGridSummaryService } from '../summaries/grid-summary.service';
@@ -36,7 +36,7 @@ export const IgxHierarchicalTransactionServiceFactory = {
 };
 
 export function hierarchicalTransactionServiceFactory() {
-    return () => new IgxHierarchicalTransactionService();
+    return new IgxTransactionService();
 }
 
 export interface IPathSegment {
@@ -126,7 +126,7 @@ export class IgxHierarchicalGridBaseDirective extends IgxGridBaseDirective {
         crudService: IgxGridCRUDService,
         public colResizingService: IgxColumnResizingService,
         gridAPI: GridBaseAPIService<IgxGridBaseDirective & GridType>,
-        @Inject(IgxGridTransaction) protected transactionFactory: any,
+        @Inject(IgxGridTransaction) protected transactionFactory: TransactionService<Transaction, State>,
         elementRef: ElementRef,
         zone: NgZone,
         @Inject(DOCUMENT) public document,
@@ -144,7 +144,7 @@ export class IgxHierarchicalGridBaseDirective extends IgxGridBaseDirective {
             crudService,
             colResizingService,
             gridAPI,
-            typeof transactionFactory === 'function' ? transactionFactory() : transactionFactory,
+            transactionFactory,
             elementRef,
             zone,
             document,

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

@@ -10,38 +10,29 @@ import {
     QueryList,
     ContentChildren,
     ElementRef,
-    NgZone,
-    ChangeDetectorRef,
-    IterableDiffers,
-    ViewContainerRef,
-    Inject,
-    ComponentFactoryResolver,
     AfterViewInit,
     AfterContentInit,
-    Optional,
     OnInit,
     OnDestroy,
     DoCheck,
     EventEmitter,
     Output
 } from '@angular/core';
-import { IgxGridBaseDirective, IgxGridTransaction } from '../grid-base.directive';
+import { IgxGridBaseDirective } from '../grid-base.directive';
 import { GridBaseAPIService } from '../api.service';
 import { IgxHierarchicalGridAPIService } from './hierarchical-grid-api.service';
 import { IgxRowIslandComponent } from './row-island.component';
 import { IgxChildGridRowComponent } from './child-grid-row.component';
 import { IgxFilteringService } from '../filtering/grid-filtering.service';
-import { IDisplayDensityOptions, DisplayDensityToken, DisplayDensity } from '../../core/displayDensity';
+import { DisplayDensity } from '../../core/displayDensity';
 import { IgxColumnComponent, } from '../columns/column.component';
-import { DOCUMENT } from '@angular/common';
 import { IgxHierarchicalGridNavigationService } from './hierarchical-grid-navigation.service';
 import { IgxGridSummaryService } from '../summaries/grid-summary.service';
 import { IgxHierarchicalGridBaseDirective } from './hierarchical-grid-base.directive';
 import { takeUntil } from 'rxjs/operators';
 import { IgxTemplateOutletDirective } from '../../directives/template-outlet/template_outlet.directive';
 import { IgxGridSelectionService, IgxGridCRUDService } from '../selection/selection.service';
-import { IgxOverlayService } from '../../services/index';
-import { IgxColumnResizingService } from '../resizing/resizing.service';
+import { IgxTransactionService } from '../../services/index';
 import { IgxForOfSyncService, IgxForOfScrollSyncService } from '../../directives/for-of/for_of.sync.service';
 import { GridType } from '../common/grid.interface';
 import { IgxRowIslandAPIService } from './row-island-api.service';
@@ -310,53 +301,14 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirecti
     private scrollTop = 0;
     private scrollLeft = 0;
 
-    protected _transactions: any;
-
-    constructor(
-        public selectionService: IgxGridSelectionService,
-        crudService: IgxGridCRUDService,
-        public colResizingService: IgxColumnResizingService,
-        gridAPI: GridBaseAPIService<IgxGridBaseDirective & GridType>,
-        @Inject(IgxGridTransaction) protected transactionFactory: any,
-        elementRef: ElementRef,
-        zone: NgZone,
-        @Inject(DOCUMENT) public document,
-        cdr: ChangeDetectorRef,
-        resolver: ComponentFactoryResolver,
-        differs: IterableDiffers,
-        viewRef: ViewContainerRef,
-        navigation: IgxHierarchicalGridNavigationService,
-        filteringService: IgxFilteringService,
-        @Inject(IgxOverlayService) protected overlayService: IgxOverlayService,
-        public summaryService: IgxGridSummaryService,
-        @Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions: IDisplayDensityOptions) {
-        super(
-            selectionService,
-            crudService,
-            colResizingService,
-            gridAPI,
-            typeof transactionFactory === 'function' ? transactionFactory() : transactionFactory,
-            elementRef,
-            zone,
-            document,
-            cdr,
-            resolver,
-            differs,
-            viewRef,
-            navigation,
-            filteringService,
-            overlayService,
-            summaryService,
-            _displayDensityOptions);
-        this.hgridAPI = <IgxHierarchicalGridAPIService>gridAPI;
-    }
-
-
     /**
      * @hidden
      */
     ngOnInit() {
-        this._transactions = this.parentIsland ? this.parentIsland.transactions : this._transactions;
+        if (this._transactions instanceof IgxTransactionService) {
+            // transaction service cannot be injected in a derived class in a factory manner
+            this._transactions = new IgxTransactionService();
+        }
         super.ngOnInit();
     }
 

projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.integration.spec.ts

@@ -142,8 +142,8 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => {
             fixture.detectChanges();
             // test instances
             expect(firstLayoutInstances.length).toEqual(2);
-            expect(hierarchicalGrid.transactions).not.toEqual(firstLayoutInstances[0].transactions);
-            expect(firstLayoutInstances[0].transactions).toEqual(firstLayoutInstances[1].transactions);
+            expect(hierarchicalGrid.transactions).not.toBe(firstLayoutInstances[0].transactions);
+            expect(firstLayoutInstances[0].transactions).not.toBe(firstLayoutInstances[1].transactions);
         }));
 
         it('should contain all transactions for a row island', fakeAsync(/** row toggle rAF */() => {
@@ -160,7 +160,8 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => {
             firstLayoutInstances[0].updateRow({ ProductName: 'Changed' }, '00');
             firstLayoutInstances[1].updateRow({ ProductName: 'Changed' }, '10');
             expect(hierarchicalGrid.transactions.getTransactionLog().length).toEqual(0);
-            expect(fixture.componentInstance.rowIsland.transactions.getTransactionLog().length).toEqual(2);
+            expect(firstLayoutInstances[0].transactions.getTransactionLog().length).toEqual(1);
+            expect(fixture.componentInstance.rowIsland.transactions.getTransactionLog().length).toEqual(0);
         }));
 
         it('should remove expand indicator for uncommitted added rows', (async () => {

projects/igniteui-angular/src/lib/grids/hierarchical-grid/row-island.component.ts

@@ -166,15 +166,6 @@ export class IgxRowIslandComponent extends IgxHierarchicalGridBaseDirective
         return lvl + 1;
     }
 
-    /**
-     * Get transactions service for the children grid components.
-     * @experimental @hidden
-     */
-    get transactions(): TransactionService<Transaction, State> {
-        const grids = this.rowIslandAPI.getChildGrids();
-        return grids.length ? grids[0].transactions : this._transactions;
-    }
-
     /**
      * @hidden
      */

projects/igniteui-angular/src/lib/grids/state.directive.spec.ts

@@ -14,8 +14,11 @@ import { IgxBooleanFilteringOperand } from '../data-operations/filtering-conditi
 import { IGroupingState } from '../data-operations/groupby-state.interface';
 import { IGroupByExpandState } from '../data-operations/groupby-expand-state.interface';
 import { GridSelectionMode } from './common/enums';
+import { configureTestSuite } from '../test-utils/configure-suite';
 
 describe('IgxGridState - input properties #grid', () => {
+    configureTestSuite();
+
     beforeEach(async(() => {
         TestBed.configureTestingModule({
             declarations: [

src/app/hierarchical-grid-updating/hierarchical-grid-updating.sample.html

@@ -1,7 +1,8 @@
 <button igxButton="raised" (click)="addRow()">Add Row Parent</button>
-<button igxButton="raised" (click)="deleteRow()">Delete Row Parent</button>
+<button igxButton="raised" (click)="deleteRow()">Delete Row Child 1</button>
 <button igxButton="raised" (click)="logTransactionsMain()">Parent Transactions</button>
 <button igxButton="raised" (click)="logTransactionsIsland1()">RI1 Transactions</button>
+<button igxButton="raised" (click)="commitTransactionsIsland1()">Commit R1 Transactions</button>
 <div class="wrapper">
         <igx-hierarchical-grid #grid1 [data]="remoteData" [rowEditable]="true" [primaryKey]="'CustomerID'" [autoGenerate]="false"
                 [height]="'800px'" [width]="'100%'" #hGrid>
@@ -11,10 +12,9 @@
                 <igx-column field="ContactTitle"></igx-column>
                 <igx-column field="Country"></igx-column>
                 <igx-column field="Phone"></igx-column>
-                <igx-row-island #rowIsland1 [key]="'Orders'" [primaryKey]="'MyID'" [autoGenerate]="false"
+                <igx-row-island #rowIsland1 [key]="'Orders'" [primaryKey]="'OrderID'" [autoGenerate]="false"
                         [rowSelectable]='isRowSelectable' (onGridCreated)="gridCreated($event, rowIsland1)"
                         [rowEditable]="true">
-                        <igx-column field="MyID"></igx-column>
                         <igx-column field="OrderID"></igx-column>
                         <igx-column field="OrderDate" [dataType]='"date"'></igx-column>
                         <igx-column field="ShipCountry"></igx-column>

src/app/hierarchical-grid-updating/hierarchical-grid-updating.sample.ts

@@ -3,9 +3,7 @@ import {
     IgxRowIslandComponent,
     IgxHierarchicalGridComponent,
     IGridCreatedEventArgs,
-    IgxHierarchicalTransactionServiceFactory,
-    IgxHierarchicalTransactionService,
-    IgxGridTransaction
+    IgxHierarchicalTransactionServiceFactory
 } from 'igniteui-angular';
 import { RemoteService } from '../shared/remote.service';
 
@@ -96,7 +94,8 @@ export class HierarchicalGridUpdatingSampleComponent implements AfterViewInit {
     }
 
     deleteRow() {
-        this.hGrid.deleteRow('ALFKI');
+        const grid = this.rowIsland1.hgridAPI.getChildGrids()[0];
+        grid.deleteRow(grid.data[0]['OrderID']);
     }
 
     logTransactionsMain() {
@@ -107,4 +106,10 @@ export class HierarchicalGridUpdatingSampleComponent implements AfterViewInit {
         console.log(this.rowIsland1.transactions.getTransactionLog());
     }
 
+    commitTransactionsIsland1() {
+        this.rowIsland1.rowIslandAPI.getChildGrids().forEach((grid: IgxHierarchicalGridComponent) => {
+            grid.transactions.commit(grid.data);
+        });
+    }
+
 }