Merge branch 'mkirova/fix-4990-8.2.x' of https://github.com/IgniteUI/igniteui-angular.git

MKirova · MKirova · commit a91e252d45a3 · 2020-01-06T17:57:51.000+02:00
diff --git a/projects/igniteui-angular/src/lib/core/grid-selection.ts b/projects/igniteui-angular/src/lib/core/grid-selection.ts
@@ -1,5 +1,6 @@
 import { Injectable, EventEmitter, NgZone } from '@angular/core';
-import { IGridEditEventArgs } from '../grids/grid-base.component';
+import { IGridEditEventArgs, IgxGridBaseComponent } from '../grids/grid-base.component';
+import { FilteringExpressionsTree } from '../data-operations/filtering-expressions-tree';
 
 export interface GridSelectionRange {
     rowStart: number;
@@ -688,7 +689,9 @@ export class IgxGridSelectionService {
     }
 
     private isFilteringApplied(): boolean {
-        return this.grid.filteringExpressionsTree.filteringOperands.length > 0;
+        const grid = this.grid as IgxGridBaseComponent;
+        return !FilteringExpressionsTree.empty(grid.filteringExpressionsTree) ||
+        !FilteringExpressionsTree.empty(grid.advancedFilteringExpressionsTree);
     }
 
     private isRowDeleted(rowID): boolean {
diff --git a/projects/igniteui-angular/src/lib/directives/template-outlet/template_outlet.directive.ts b/projects/igniteui-angular/src/lib/directives/template-outlet/template_outlet.directive.ts
@@ -32,6 +32,9 @@ export class IgxTemplateOutletDirective implements OnChanges {
     @Output()
     public onCachedViewLoaded = new EventEmitter<ICachedViewLoadedEventArgs>();
 
+    @Output()
+    public onBeforeViewDetach = new EventEmitter<IViewChangeEventArgs>();
+
     constructor(public _viewContainerRef: ViewContainerRef, private _zone: NgZone, public cdr: ChangeDetectorRef) {
     }
 
@@ -65,6 +68,7 @@ export class IgxTemplateOutletDirective implements OnChanges {
     private _recreateView() {
         // detach old and create new
         if (this._viewRef) {
+            this.onBeforeViewDetach.emit({ owner: this, view: this._viewRef, context: this.igxTemplateOutletContext });
             this._viewContainerRef.detach(this._viewContainerRef.indexOf(this._viewRef));
         }
         if (this.igxTemplateOutlet) {
@@ -91,9 +95,11 @@ export class IgxTemplateOutletDirective implements OnChanges {
         if (view !== this._viewRef) {
             if (owner._viewContainerRef.indexOf(view) !== -1) {
                 // detach in case view it is attached somewhere else at the moment.
+                this.onBeforeViewDetach.emit({ owner: this, view: this._viewRef, context: this.igxTemplateOutletContext });
                 owner._viewContainerRef.detach(owner._viewContainerRef.indexOf(view));
             }
             if (this._viewRef && this._viewContainerRef.indexOf(this._viewRef) !== -1) {
+                this.onBeforeViewDetach.emit({ owner: this, view: this._viewRef, context: this.igxTemplateOutletContext });
                 this._viewContainerRef.detach(this._viewContainerRef.indexOf(this._viewRef));
             }
             this._viewRef = view;
@@ -111,6 +117,7 @@ export class IgxTemplateOutletDirective implements OnChanges {
         // if view exists, but template has been changed and there is a view in the cache with the related template
         // then detach old view and insert the stored one with the matching template
         // after that update its context.
+        this.onBeforeViewDetach.emit({ owner: this, view: this._viewRef, context: this.igxTemplateOutletContext });
         this._viewContainerRef.detach(this._viewContainerRef.indexOf(this._viewRef));
         this._viewRef = cachedView;
         const oldContext = this._cloneContext(cachedView.context);
diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts
@@ -2072,7 +2072,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
      * @hidden
      */
     public get parentRowOutletDirective() {
-        return null;
+        return this.outletDirective;
     }
 
     /**
@@ -6048,6 +6048,20 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
         return this.cellSelection !== GridSelectionMode.none;
     }
 
+    /** @hidden */
+    public viewDetachHandler(args: ICachedViewLoadedEventArgs) {
+        const context = args.view.context;
+        if (context['templateID'] === 'dataRow') {
+            // some browsers (like FireFox and Edge) do not trigger onBlur when the focused element is detached from DOM
+            // hence we need to trigger it manually when cell is detached.
+            const row = this.getRowByIndex(context.index);
+            const focusedCell = row.cells.find(x => x.focused);
+            if (focusedCell) {
+                focusedCell.onBlur();
+            }
+        }
+    }
+
     /**
      * @hidden
      */
diff --git a/projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts b/projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts
@@ -167,23 +167,34 @@ export class IgxGridNavigationService {
     }
 
     public movePreviousEditable(rowIndex: number, currentColumnVisibleIndex: number) {
-        const prevEditableColumnIndex = this.findNextEditable(MoveDirection.LEFT, currentColumnVisibleIndex - 1);
-        if (prevEditableColumnIndex === -1 && this.grid.rowEditTabs.length) {
-            //  TODO: make gridAPI visible for internal use and remove cast to any
-            (this.grid as any).gridAPI.submit_value();
-            this.grid.rowEditTabs.last.element.nativeElement.focus();
-            return;
+        let prevEditableColumnIndex = this.findNextEditable(MoveDirection.LEFT, currentColumnVisibleIndex - 1);
+        if (prevEditableColumnIndex === -1) {
+            if (this.grid.rowEditTabs.length) {
+                //  TODO: make gridAPI visible for internal use and remove cast to any
+                (this.grid as any).gridAPI.submit_value();
+                this.grid.rowEditTabs.last.element.nativeElement.focus();
+                return;
+            } else {
+                // In case when row edit template is empty select last editable cell
+                prevEditableColumnIndex = this.grid.lastEditableColumnIndex;
+            }
+
         }
         this.focusEditableTarget(rowIndex, prevEditableColumnIndex);
     }
 
     public moveNextEditable(rowIndex: number, currentColumnVisibleIndex: number) {
-        const nextEditableColumnIndex = this.findNextEditable(MoveDirection.RIGHT, currentColumnVisibleIndex + 1);
-        if (nextEditableColumnIndex === -1 && this.grid.rowEditTabs.length) {
-            //  TODO: make gridAPI visible for internal use and remove cast to any
-            (this.grid as any).gridAPI.submit_value();
-            this.grid.rowEditTabs.first.element.nativeElement.focus();
-            return;
+        let nextEditableColumnIndex = this.findNextEditable(MoveDirection.RIGHT, currentColumnVisibleIndex + 1);
+        if (nextEditableColumnIndex === -1) {
+            if ( this.grid.rowEditTabs.length) {
+                 //  TODO: make gridAPI visible for internal use and remove cast to any
+                (this.grid as any).gridAPI.submit_value();
+                this.grid.rowEditTabs.first.element.nativeElement.focus();
+                return;
+            } else {
+                // In case when row edit template is empty select first editable cell
+                nextEditableColumnIndex = this.grid.firstEditableColumnIndex;
+            }
         }
         this.focusEditableTarget(rowIndex, nextEditableColumnIndex);
     }
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts
@@ -1251,14 +1251,15 @@ describe('IgxGrid - Filtering actions #grid', () => {
         fix.detectChanges();
 
         const firstMonth = calendar.querySelector('.igx-calendar__month');
+        const firstMonthText = (firstMonth as HTMLElement).innerText;
         firstMonth.dispatchEvent(new Event('click'));
         tick();
         fix.detectChanges();
 
         calendar = outlet.getElementsByClassName('igx-calendar')[0];
         const month = calendar.querySelector('.igx-calendar-picker__date');
 
-        expect(month.innerHTML.trim()).toEqual('Jan');
+        expect(month.innerHTML.trim()).toEqual(firstMonthText);
     }));
 
     it('Should correctly select year from year view datepicker/calendar component', fakeAsync(() => {
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-row-editing.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-row-editing.spec.ts
@@ -23,7 +23,8 @@ import {
     IgxGridWithEditingAndFeaturesComponent,
     IgxGridRowEditingWithoutEditableColumnsComponent,
     IgxGridCustomOverlayComponent,
-    IgxGridRowEditingWithFeaturesComponent
+    IgxGridRowEditingWithFeaturesComponent,
+    IgxGridEmptyRowEditTemplateComponent
 } from '../../test-utils/grid-samples.spec';
 import { IgxGridTestComponent } from './grid.component.spec';
 
@@ -45,7 +46,8 @@ describe('IgxGrid - Row Editing #grid', () => {
                 IgxGridRowEditingWithoutEditableColumnsComponent,
                 IgxGridTestComponent,
                 IgxGridCustomOverlayComponent,
-                IgxGridRowEditingWithFeaturesComponent
+                IgxGridRowEditingWithFeaturesComponent,
+                IgxGridEmptyRowEditTemplateComponent
             ],
             imports: [
                 NoopAnimationsModule, IgxGridModule]
@@ -1912,7 +1914,7 @@ describe('IgxGrid - Row Editing #grid', () => {
 
             expect(parseInt(GridFunctions.getRowEditingBannerText(fix), 10)).toEqual(0);
             fix.componentInstance.cellInEditMode.editValue = 'Spiro';
-            fix.componentInstance.moveNext(true);
+            UIInteractions.triggerKeyDownWithBlur('tab', cell.nativeElement, true);
             tick(16);
             fix.detectChanges();
 
@@ -1923,6 +1925,41 @@ describe('IgxGrid - Row Editing #grid', () => {
             expect(grid.endEdit).toHaveBeenCalled();
             expect(grid.endEdit).toHaveBeenCalledTimes(1);
         }));
+
+        it('Empty template', fakeAsync(() => {
+            const fix = TestBed.createComponent(IgxGridEmptyRowEditTemplateComponent);
+            fix.detectChanges();
+            tick(16);
+
+            const grid = fix.componentInstance.grid;
+            let cell = grid.getCellByColumn(0, 'ProductName');
+            UIInteractions.triggerKeyDownEvtUponElem('f2', cell.nativeElement, true);
+
+            fix.detectChanges();
+            tick(16);
+
+            cell.editValue = 'Spiro';
+            UIInteractions.triggerKeyDownEvtUponElem('tab', cell.nativeElement, true);
+
+            fix.detectChanges();
+            tick(16);
+            fix.detectChanges();
+            tick(16);
+
+            expect(cell.editMode).toBe(false);
+            cell = grid.getCellByColumn(0, 'ReorderLevel');
+            expect(cell.editMode).toBe(true);
+
+            UIInteractions.triggerKeyDownEvtUponElem('tab', cell.nativeElement, true, false, true);
+            fix.detectChanges();
+            tick(16);
+            fix.detectChanges();
+            tick(16);
+
+            expect(cell.editMode).toBe(false);
+            cell = grid.getCellByColumn(0, 'ProductName');
+            expect(cell.editMode).toBe(true);
+        }));
     });
 
     describe('Transaction', () => {
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-row-selection.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-row-selection.spec.ts
@@ -19,6 +19,8 @@ import { GridFunctions, GridSelectionFunctions } from '../../test-utils/grid-fun
 import { SampleTestData } from '../../test-utils/sample-test-data.spec';
 import { GridSelectionMode } from '../common/enums';
 import { IgxRowSelectorsModule } from '../igx-row-selectors.module';
+import { FilteringExpressionsTree } from '../../data-operations/filtering-expressions-tree';
+import { FilteringLogic } from '../../data-operations/filtering-expression.interface';
 
 const DEBOUNCETIME = 30;
 
@@ -1671,6 +1673,38 @@ describe('IgxGrid - Row Selection #grid', () => {
             expect(grid.getRowByIndex(1).selected).toBeTruthy();
             expect(grid.onRowSelectionChange.emit).toHaveBeenCalledTimes(6);
         }));
+
+        it('Should select only filtered records', fakeAsync(() => {
+            grid.height = '1100px';
+            const tree = new FilteringExpressionsTree(FilteringLogic.And);
+            tree.filteringOperands.push({
+                fieldName: 'UnitsInStock',
+                searchVal: 0,
+                condition: IgxNumberFilteringOperand.instance().condition('greaterThan'),
+            });
+            tree.filteringOperands.push({
+                fieldName: 'ProductName',
+                searchVal: 'a',
+                condition: IgxStringFilteringOperand.instance().condition('contains'),
+                ignoreCase: true
+            });
+            grid.advancedFilteringExpressionsTree = tree;
+            GridSelectionFunctions.headerCheckboxClick(grid);
+            fix.detectChanges();
+            tick();
+
+            expect(grid.rowList.length).toBe(9);
+            expect(grid.selectedRows().length).toBe(9);
+            GridSelectionFunctions.verifyHeaderRowCheckboxState(grid, true, false);
+
+            grid.advancedFilteringExpressionsTree = null;
+            fix.detectChanges();
+            tick();
+
+            expect(grid.rowList.length).toBe(19);
+            expect(grid.selectedRows().length).toBe(9);
+            GridSelectionFunctions.verifyHeaderRowCheckboxState(grid, false, true);
+        }));
     });
 
     describe('Integration with CRUD and transactions', () => {
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.html b/projects/igniteui-angular/src/lib/grids/grid/grid.component.html
@@ -131,7 +131,8 @@
             <ng-template
                 [igxTemplateOutlet]='isGroupByRecord(rowData) ? group_template : isSummaryRow(rowData) ? summary_template : record_template'
                 [igxTemplateOutletContext]='getContext(rowData, rowIndex)'
-                (onCachedViewLoaded)='cachedViewLoaded($event)'>
+                (onCachedViewLoaded)='cachedViewLoaded($event)'
+                (onBeforeViewDetach)='viewDetachHandler($event)' >
             </ng-template>
         </ng-template>
         <ng-container *ngTemplateOutlet="template"></ng-container>
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts
@@ -2565,6 +2565,7 @@ describe('IgxGrid - GroupBy #grid', () => {
     it('should apply custom comparer function when grouping by dragging a column into the group area', async () => {
         const fix = TestBed.createComponent(GroupableGridComponent);
         const grid = fix.componentInstance.instance;
+        const year =  new Date().getFullYear().toString();
         fix.detectChanges();
         await wait();
 
@@ -2604,7 +2605,7 @@ describe('IgxGrid - GroupBy #grid', () => {
         expect(grid.groupsRecords.length).toEqual(2);
         expect(grid.groupsRecords[1].records.length).toEqual(6);
         for (let i = 0; i < grid.groupsRecords[1].records.length; i++) {
-            expect(grid.groupsRecords[1].records[i].ReleaseDate.getFullYear().toString()).toEqual('2019');
+            expect(grid.groupsRecords[1].records[i].ReleaseDate.getFullYear().toString()).toEqual(year);
         }
     });
 
diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html
@@ -93,7 +93,7 @@
             <ng-template
                 [igxTemplateOutlet]='(isHierarchicalRecord(rowData) ? hierarchical_record_template : (isChildGridRecord(rowData) && isExpanded(rowData) ? child_record_template : hierarchical_record_template))'
                 [igxTemplateOutletContext]='getContext(rowData)' (onViewCreated)='viewCreatedHandler($event)'
-                (onViewMoved)='viewMovedHandler($event)' (onCachedViewLoaded)='cachedViewLoaded($event)'></ng-template>
+                (onViewMoved)='viewMovedHandler($event)' (onCachedViewLoaded)='cachedViewLoaded($event)' (onBeforeViewDetach)='viewDetachHandler($event)'></ng-template>
             <!-- <ng-container *igxTemplateOutlet="(isHierarchicalRecord(rowData) ? hierarchical_record_template : (isChildGridRecord(rowData) && isExpanded(rowData) ? child_record_template : hierarchical_record_template)); context: getContext(rowData)"></ng-container> -->
         </ng-template>
         <ng-template #hierarchical_record_template let-rowIndex="index" let-rowData>
diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts
@@ -446,13 +446,6 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseCompone
         return this.rootGrid._outletDirective;
     }
 
-    /**
-     * @hidden
-     */
-    public get parentRowOutletDirective() {
-        return this === this.rootGrid ? null : this.rootGrid.rowEditingOutletDirective;
-    }
-
     /**
      * @hidden
      */
diff --git a/projects/igniteui-angular/src/lib/grids/row-drag.directive.ts b/projects/igniteui-angular/src/lib/grids/row-drag.directive.ts
@@ -4,6 +4,7 @@ import { IRowDragEndEventArgs, IRowDragStartEventArgs } from './grid-base.compon
 import { KEYS } from '../core/utils';
 import { fromEvent, Subscription } from 'rxjs';
 import { IgxRowComponent, IgxGridBaseComponent, IGridDataBindable } from './grid';
+import { IgxHierarchicalRowComponent } from './hierarchical-grid/hierarchical-row.component';
 
 
 const ghostBackgroundClass = 'igx-grid__tr--ghost';
@@ -106,6 +107,15 @@ export class IgxRowDragDirective extends IgxDragDirective implements OnDestroy {
         };
         super.createGhost(pageX, pageY, this.row.nativeElement);
 
+        // check if there is an expander icon and create the ghost at the corresponding position
+        if (this.isHierarchicalGrid) {
+            const row = this.row as IgxHierarchicalRowComponent;
+            if (row.expander) {
+                const expanderWidth = row.expander.nativeElement.getBoundingClientRect().width;
+                this._ghostHostX += expanderWidth;
+            }
+        }
+
         const ghost = this.ghostElement;
 
         const gridRect = this.row.grid.nativeElement.getBoundingClientRect();
@@ -144,6 +154,10 @@ export class IgxRowDragDirective extends IgxDragDirective implements OnDestroy {
         }
         this.endDragging();
     }
+
+    private get isHierarchicalGrid() {
+        return this.row.grid.nativeElement.tagName.toLowerCase() === 'igx-hierarchical-grid';
+    }
 }
 
 /**
diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html
@@ -95,7 +95,8 @@
 
             <ng-template [igxTemplateOutlet]='isSummaryRow(rowData) ? summary_template : record_template'
                 [igxTemplateOutletContext]='getContext(rowData, rowIndex)'
-                (onCachedViewLoaded)='cachedViewLoaded($event)'>
+                (onCachedViewLoaded)='cachedViewLoaded($event)'
+                (onBeforeViewDetach)='viewDetachHandler($event)'>
             </ng-template>
         </ng-template>
         <ng-container *ngTemplateOutlet="template"></ng-container>
diff --git a/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts b/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts
@@ -1419,6 +1419,22 @@ export class IgxGridCustomOverlayComponent extends BasicGridComponent {
     }
 }
 
+@Component({
+    template: `
+    <igx-grid #grid [data]="data" [primaryKey]="'ProductID'" width="700px" height="400px" [rowEditable]="true">
+        <igx-column field="ProductID" header="Product ID"></igx-column>
+        <igx-column field="ReorderLevel" header="Reorder Lever" [dataType]="'number'" [editable]="true" width="100px"></igx-column>
+        <igx-column field="ProductName" header="Product Name" [dataType]="'string'" width="150px"></igx-column>
+        <igx-column field="OrderDate" header="Order Date" [dataType]="'date'" width="150px" [editable]="false"></igx-column>
+        <ng-template igxRowEdit >
+        </ng-template>
+    </igx-grid>
+    `
+})
+export class IgxGridEmptyRowEditTemplateComponent extends BasicGridComponent {
+    public data = SampleTestData.foodProductData();
+}
+
 @Component({
     template: `
     <igx-grid #grid [data]="data" [primaryKey]="'ProductID'" width="900px" height="900px" [rowEditable]="true"
