Merge branch 'master' into iganchev/select-implement-hint

Author: Lipata

CHANGELOG.md

@@ -5,8 +5,10 @@ All notable changes for each version of this project will be documented in this
 ## 10.0.0
 
 ### General
+- `igxGrid`
+    - **Behavioral Change** - Group rows now display the group column's header name instead of field when one is available.
 - `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.
+    - **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.
@@ -23,7 +25,7 @@ All notable changes for each version of this project will be documented in this
 ### General
 - `IgxHierarchicalGrid`
     - `onGridInitialized` - New output has been exposed. Emitted after a grid is being initialized for the corresponding row island.
-
+-  **Behavioral Change** - When moving a column `DropPosition.None` is now acting like `DropPosition.AfterDropTarget`.
 ## 9.1.0
 
 ### General

projects/igniteui-angular/src/lib/data-operations/groupby-record.interface.ts

@@ -1,4 +1,5 @@
 import { ISortingExpression } from './sorting-expression.interface';
+import { IgxColumnComponent } from '../grids/columns/column.component';
 
 /**
  * @hidden
@@ -13,4 +14,5 @@ export interface IGroupByRecord {
     groupParent: IGroupByRecord;
     groups?: IGroupByRecord[];
     height: number;
+    column?: IgxColumnComponent;
  }

projects/igniteui-angular/src/lib/data-operations/sorting-strategy.ts

@@ -160,14 +160,16 @@ export class IgxSorting implements IGridSortingStrategy {
         let result = [];
         while (i < data.length) {
             const group = this.groupedRecordsByExpression(data, i, expressions[level]);
+            const column = grid ? grid.getColumnByName(expressions[level].fieldName) : null;
             const groupRow: IGroupByRecord = {
                 expression: expressions[level],
                 level,
                 records: cloneArray(group),
                 value: group[0][expressions[level].fieldName],
                 groupParent: parent,
                 groups: [],
-                height: grid ? grid.renderedRowHeight : null
+                height: grid ? grid.renderedRowHeight : null,
+                column: column
             };
             if (parent) {
                 parent.groups.push(groupRow);

projects/igniteui-angular/src/lib/grids/columns/column.component.ts

@@ -1584,16 +1584,30 @@ export class IgxColumnComponent implements AfterContentInit {
         this._pinned = true;
         this.pinnedChange.emit(this._pinned);
         this._unpinnedIndex = grid._unpinnedColumns.indexOf(this);
-        index = index !== undefined ? index : grid._pinnedColumns.length;
+        const rootPinnedCols = grid._pinnedColumns.filter((c) => c.level === 0);
+        index = index !== undefined ? index : rootPinnedCols.length;
         const targetColumn = grid._pinnedColumns[index];
         const args = { column: this, insertAtIndex: index, isPinned: true };
         grid.onColumnPinning.emit(args);
 
         if (grid._pinnedColumns.indexOf(this) === -1) {
-            grid._pinnedColumns.splice(args.insertAtIndex, 0, this);
+            if (!grid.hasColumnGroups) {
+                grid._pinnedColumns.splice(args.insertAtIndex, 0, this);
+            } else {
+                // insert based only on root collection
+                rootPinnedCols.splice(args.insertAtIndex, 0, this);
+                let allPinned = [];
+                // re-create hierarchy
+                rootPinnedCols.forEach(group => {
+                    allPinned.push(group);
+                    allPinned = allPinned.concat(group.allChildren);
+                });
+                grid._pinnedColumns = allPinned;
+            }
 
             if (grid._unpinnedColumns.indexOf(this) !== -1) {
-                grid._unpinnedColumns.splice(grid._unpinnedColumns.indexOf(this), 1);
+                const childrenCount = this.allChildren.length;
+                grid._unpinnedColumns.splice(grid._unpinnedColumns.indexOf(this), 1 + childrenCount);
             }
         }
 
@@ -1650,13 +1664,16 @@ export class IgxColumnComponent implements AfterContentInit {
 
         const targetColumn = grid._unpinnedColumns[index];
 
-        grid._unpinnedColumns.splice(index, 0, this);
-        if (grid._pinnedColumns.indexOf(this) !== -1) {
-            grid._pinnedColumns.splice(grid._pinnedColumns.indexOf(this), 1);
+        if (!hasIndex) {
+            grid._unpinnedColumns.splice(index, 0, this);
+            if (grid._pinnedColumns.indexOf(this) !== -1) {
+                grid._pinnedColumns.splice(grid._pinnedColumns.indexOf(this), 1);
+            }
         }
 
+
         if (hasIndex) {
-            grid._moveColumns(this, targetColumn);
+            grid.moveColumn(this, targetColumn);
         }
 
         if (this.columnGroup) {

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

@@ -151,10 +151,11 @@ import { IgxColumnGroupComponent } from './columns/column-group.component';
 import { IGridSortingStrategy } from '../data-operations/sorting-strategy';
 import { IgxRowDragGhostDirective, IgxDragIndicatorIconDirective } from './row-drag.directive';
 import { isNumber } from 'util';
+import { showMessage } from '../core/deprecateDecorators';
 
 const MINIMUM_COLUMN_WIDTH = 136;
 const FILTER_ROW_HEIGHT = 50;
-
+let warningShown = false;
 // By default row editing overlay outlet is inside grid body so that overlay is hidden below grid header when scrolling.
 // In cases when grid has 1-2 rows there isn't enough space in grid body and row editing overlay should be shown above header.
 // Default row editing overlay height is higher then row height that is why the case is valid also for row with 2 rows.
@@ -3773,21 +3774,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
      */
     protected _moveColumns(from: IgxColumnComponent, to: IgxColumnComponent, pos: DropPosition) {
         const list = this.columnList.toArray();
-        const fromIndex = list.indexOf(from);
-        let toIndex = list.indexOf(to);
-
-        if (pos === DropPosition.BeforeDropTarget) {
-            toIndex--;
-            if (toIndex < 0) {
-                toIndex = 0;
-            }
-        }
-
-        if (pos === DropPosition.AfterDropTarget) {
-            toIndex++;
-        }
-
-        list.splice(toIndex, 0, ...list.splice(fromIndex, 1));
+        this._reorderColumns(from, to, pos, list);
         const newList = this._resetColumnList(list);
         this.columnList.reset(newList);
         this.columnList.notifyOnChanges();
@@ -3815,39 +3802,27 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
      * @hidden
      */
     protected _reorderColumns(from: IgxColumnComponent, to: IgxColumnComponent, position: DropPosition, columnCollection: any[]) {
-        let dropIndex = columnCollection.indexOf(to);
-
-        if (to.columnGroup) {
-            dropIndex += to.allChildren.length;
-        }
+        const fromIndex = columnCollection.indexOf(from);
+        const childColumnsCount = from.allChildren.length;
+        // remove item(s) to be moved.
+        const fromCollection = columnCollection.splice(fromIndex, childColumnsCount + 1);
 
-        if (position === DropPosition.BeforeDropTarget) {
-            dropIndex--;
-        }
+        let dropIndex = columnCollection.indexOf(to);
 
         if (position === DropPosition.AfterDropTarget) {
             dropIndex++;
+            if (to.columnGroup) {
+                dropIndex += to.allChildren.length;
+            }
         }
-
-        columnCollection.splice(dropIndex, 0, ...columnCollection.splice(columnCollection.indexOf(from), 1));
+        columnCollection.splice(dropIndex, 0, ...fromCollection);
     }
     /**
      * @hidden
      */
     protected _moveChildColumns(parent: IgxColumnComponent, from: IgxColumnComponent, to: IgxColumnComponent, pos: DropPosition) {
         const buffer = parent.children.toArray();
-        const fromIndex = buffer.indexOf(from);
-        let toIndex = buffer.indexOf(to);
-
-        if (pos === DropPosition.BeforeDropTarget) {
-            toIndex--;
-        }
-
-        if (pos === DropPosition.AfterDropTarget) {
-            toIndex++;
-        }
-
-        buffer.splice(toIndex, 0, ...buffer.splice(fromIndex, 1));
+        this._reorderColumns(from, to, pos, buffer);
         parent.children.reset(buffer);
     }
     /**
@@ -3859,19 +3834,17 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
      */
     public moveColumn(column: IgxColumnComponent, dropTarget: IgxColumnComponent, pos: DropPosition = DropPosition.None) {
 
+        if (column === dropTarget) {
+            return;
+        }
         let position = pos;
-        const fromIndex = column.visibleIndex;
-        const toIndex = dropTarget.visibleIndex;
-
-        if (pos === DropPosition.BeforeDropTarget && fromIndex < toIndex) {
-            position = DropPosition.BeforeDropTarget;
-        } else if (pos === DropPosition.AfterDropTarget && fromIndex > toIndex) {
-            position = DropPosition.AfterDropTarget;
-        } else {
-            position = DropPosition.None;
+        if (position === DropPosition.None) {
+            warningShown = showMessage(
+                'DropPosition.None is deprecated.' +
+                'Use DropPosition.AfterDropTarget instead.',
+                warningShown);
+            position =  DropPosition.AfterDropTarget;
         }
-
-
         if ((column.level !== dropTarget.level) ||
             (column.topLevelParent !== dropTarget.topLevelParent)) {
             return;
@@ -3929,6 +3902,9 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         if (this.hasColumnLayouts) {
             this.columns.filter(x => x.columnLayout).forEach(x => x.populateVisibleIndexes());
         }
+        // after reordering is done reset cached column collections.
+        this.resetColumnCollections();
+        column.resetCaches();
 
         const args = {
             source: column,
@@ -5212,8 +5188,8 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
      * @hidden
      */
     protected reinitPinStates() {
-        this._pinnedColumns = (this.hasColumnGroups) ? this.columnList.filter((c) => c.pinned) :
-            this.columnList.filter((c) => c.pinned).sort((a, b) => this._pinnedColumns.indexOf(a) - this._pinnedColumns.indexOf(b));
+        this._pinnedColumns = this.columnList
+        .filter((c) => c.pinned).sort((a, b) => this._pinnedColumns.indexOf(a) - this._pinnedColumns.indexOf(b));
         this._unpinnedColumns = this.hasColumnGroups ? this.columnList.filter((c) => !c.pinned) :
             this.columnList.filter((c) => !c.pinned)
                 .sort((a, b) => this._unpinnedColumns.indexOf(a) - this._unpinnedColumns.indexOf(b));

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

@@ -14,6 +14,7 @@ import { configureTestSuite } from '../../test-utils/configure-suite';
 import { IgxGridHeaderComponent } from '../headers/grid-header.component';
 import { GridSummaryFunctions } from '../../test-utils/grid-functions.spec';
 import { wait } from '../../test-utils/ui-interactions.spec';
+import { DropPosition } from '../moving/moving.service';
 
 const GRID_COL_THEAD_TITLE_CLASS = 'igx-grid__th-title';
 const GRID_COL_GROUP_THEAD_TITLE_CLASS = 'igx-grid__thead-title';
@@ -786,10 +787,10 @@ describe('IgxGrid - multi-column headers #grid', () => {
         const ci = fixture.componentInstance;
         const grid = ci.grid;
 
-        ci.idCol.pinned = true;
+        ci.genInfoColGroup.pinned = true;
         tick();
         fixture.detectChanges();
-        ci.genInfoColGroup.pinned = true;
+        ci.idCol.pinned = true;
         tick();
         fixture.detectChanges();
         ci.postalCodeColGroup.pinned = true;
@@ -799,13 +800,14 @@ describe('IgxGrid - multi-column headers #grid', () => {
         tick();
         fixture.detectChanges();
 
-        testColumnsVisibleIndexes([ci.idCol].concat(ci.genInfoColList)
+        testColumnsVisibleIndexes(ci.genInfoColList.concat(ci.idCol)
             .concat(ci.postalCodeColList).concat(ci.cityColList).concat(ci.countryColList)
             .concat(ci.regionColList).concat(ci.addressColList).concat(ci.phoneColList)
             .concat(ci.faxColList));
 
         // unpinning with index
         expect(grid.unpinColumn(ci.genInfoColGroup, 2)).toBe(true);
+        fixture.detectChanges();
         const postUnpinningColList = [ci.idCol].concat(ci.postalCodeColList).concat(ci.cityColList)
             .concat(ci.countryColList).concat(ci.regionColList).concat(ci.genInfoColList)
             .concat(ci.addressColList).concat(ci.phoneColList).concat(ci.faxColList);
@@ -814,31 +816,34 @@ describe('IgxGrid - multi-column headers #grid', () => {
 
         // pinning to non-existent index
         expect(grid.pinColumn(ci.genInfoColGroup, 15)).toBe(false);
+        fixture.detectChanges();
         testColumnsVisibleIndexes(postUnpinningColList);
         testColumnPinning(ci.genInfoColGroup, false);
 
         // pinning to negative index
         expect(grid.pinColumn(ci.genInfoColGroup, -15)).toBe(false);
+        fixture.detectChanges();
         testColumnsVisibleIndexes(postUnpinningColList);
         testColumnPinning(ci.genInfoColGroup, false);
 
         // pinning with index
         expect(grid.pinColumn(ci.genInfoColGroup, 2)).toBe(true);
+        fixture.detectChanges();
         const postPinningColList = [ci.idCol].concat(ci.postalCodeColList).concat(ci.genInfoColList)
             .concat(ci.cityColList).concat(ci.countryColList).concat(ci.regionColList)
             .concat(ci.addressColList).concat(ci.phoneColList).concat(ci.faxColList);
         testColumnsVisibleIndexes(postPinningColList);
         testColumnPinning(ci.genInfoColGroup, true);
 
-        // unpinning to non-existent index
-        expect(grid.unpinColumn(ci.genInfoColGroup, 15)).toBe(false);
-        testColumnsVisibleIndexes(postPinningColList);
-        testColumnPinning(ci.genInfoColGroup, true);
+        // // unpinning to non-existent index
+        // expect(grid.unpinColumn(ci.genInfoColGroup, 15)).toBe(false);
+        // testColumnsVisibleIndexes(postPinningColList);
+        // testColumnPinning(ci.genInfoColGroup, true);
 
-        // unpinning to negative index
-        expect(grid.unpinColumn(ci.genInfoColGroup, -15)).toBe(false);
-        testColumnsVisibleIndexes(postPinningColList);
-        testColumnPinning(ci.genInfoColGroup, true);
+        // // unpinning to negative index
+        // expect(grid.unpinColumn(ci.genInfoColGroup, -15)).toBe(false);
+        // testColumnsVisibleIndexes(postPinningColList);
+        // testColumnPinning(ci.genInfoColGroup, true);
     }));
 
     it('Should initially pin the whole group when one column of the group is pinned', fakeAsync(() => {
@@ -927,7 +932,7 @@ describe('IgxGrid - multi-column headers #grid', () => {
         testColumnsOrder(genInfoCols.concat(locCols).concat(contactInfoCols));
 
         // moving last to be first
-        grid.moveColumn(ci.contactInfoColGroup, ci.genInfoColGroup);
+        grid.moveColumn(ci.contactInfoColGroup, ci.genInfoColGroup, DropPosition.BeforeDropTarget);
         tick();
         fixture.detectChanges();
         testColumnsOrder(contactInfoCols.concat(genInfoCols).concat(locCols));
@@ -945,7 +950,7 @@ describe('IgxGrid - multi-column headers #grid', () => {
         testColumnsOrder(genInfoCols.concat(contactInfoCols).concat(locCols));
 
         // moving inner to be first
-        grid.moveColumn(ci.contactInfoColGroup, ci.genInfoColGroup);
+        grid.moveColumn(ci.contactInfoColGroup, ci.genInfoColGroup, DropPosition.BeforeDropTarget);
         tick();
         fixture.detectChanges();
         testColumnsOrder(contactInfoCols.concat(genInfoCols).concat(locCols));
@@ -973,7 +978,7 @@ describe('IgxGrid - multi-column headers #grid', () => {
         ci.regionCol, ci.cityCol];
 
         // moving last to be first
-        grid.moveColumn(ci.postalCodeCol, ci.phoneCol);
+        grid.moveColumn(ci.postalCodeCol, ci.phoneCol, DropPosition.BeforeDropTarget);
         tick();
         fixture.detectChanges();
         testColumnsOrder(genInfoAndLocCols.concat([ci.contactInfoColGroup,
@@ -994,7 +999,7 @@ describe('IgxGrid - multi-column headers #grid', () => {
         ci.phoneCol, ci.postalCodeCol, ci.faxCol]));
 
         // moving inner to be first
-        grid.moveColumn(ci.postalCodeCol, ci.phoneCol);
+        grid.moveColumn(ci.postalCodeCol, ci.phoneCol, DropPosition.BeforeDropTarget);
         tick();
         fixture.detectChanges();
         testColumnsOrder(genInfoAndLocCols.concat([ci.contactInfoColGroup,
@@ -1029,14 +1034,14 @@ describe('IgxGrid - multi-column headers #grid', () => {
         const grid = ci.grid;
 
         // moving a two-level col
-        grid.moveColumn(ci.phoneCol, ci.locationColGroup);
+        grid.moveColumn(ci.phoneCol, ci.locationColGroup, DropPosition.BeforeDropTarget);
         tick();
         fixture.detectChanges();
         testColumnsOrder([ci.contactInfoColGroup, ci.phoneCol, ci.locationColGroup, ci.countryCol,
         ci.genInfoColGroup, ci.companyNameCol, ci.cityCol]);
 
         // moving a three-level col
-        grid.moveColumn(ci.cityCol, ci.contactInfoColGroup);
+        grid.moveColumn(ci.cityCol, ci.contactInfoColGroup, DropPosition.BeforeDropTarget);
         tick();
         fixture.detectChanges();
         const colsOrder = [ci.cityCol, ci.contactInfoColGroup, ci.phoneCol,
@@ -1090,7 +1095,7 @@ describe('IgxGrid - multi-column headers #grid', () => {
         fixture.detectChanges();
 
         // moving group from unpinned to pinned
-        ci.grid.moveColumn(ci.phoneColGroup, ci.idCol);
+        ci.grid.moveColumn(ci.phoneColGroup, ci.idCol, DropPosition.BeforeDropTarget);
         tick();
         fixture.detectChanges();
         let postMovingOrder = ci.phoneColList.concat([ci.idCol]).concat(ci.genInfoColList)