Skip to content

Commit d5f779a

Browse files
ChronosSFChronosSF
committed
Merge branch 'vmihalkov/paginator-overlay-settings' of https://github.com/IgniteUI/igniteui-angular into vmihalkov/paginator-overlay-settings
2 parents e0c7cce + cd33745 commit d5f779a

16 files changed

+130
-101
lines changed

‎CHANGELOG.md

+2-1
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ All notable changes for each version of this project will be documented in this
1212
- `IgxTransaction` - The `onStateUpdate` now emits with information of its origin. The emitted value is of type `StateUpdateEvent`, which has two properties:
1313
- `origin` - it can vary within the values of the `TransactionEventOrigin` interface;
1414
- `actions` - contains information about the transactions, that caused the emission of the event.
15+
- `IgxPaginator` - The input `overlaySettings` was introduced, which allows the appllication of custom overlay settings over the component.
1516

1617
### New Features
1718
- `IgxGrid`
@@ -22,7 +23,7 @@ All notable changes for each version of this project will be documented in this
2223
### General
2324
- `IgxHierarchicalGrid`
2425
- `onGridInitialized` - New output has been exposed. Emitted after a grid is being initialized for the corresponding row island.
25-
26+
- **Behavioral Change** - When moving a column `DropPosition.None` is now acting like `DropPosition.AfterDropTarget`.
2627
## 9.1.0
2728

2829
### General

‎ROADMAP.md

+13-13
Original file line numberDiff line numberDiff line change
@@ -19,19 +19,19 @@ To Be Updated
1919

2020
## Milestone 11 (Released June 2nd, 2020)
2121

22-
1. Dock Manger [#5980](https://github.com/IgniteUI/igniteui-angular/issues/5980)
23-
2. Range Date Picker [#5732](https://github.com/IgniteUI/igniteui-angular/issues/5732)
24-
3. Keyboard Navigation Enhancement [#6755](https://github.com/IgniteUI/igniteui-angular/issues/6755)
25-
4. Column freezing/Pinning on the right (igx-grid) [#5879](https://github.com/IgniteUI/igniteui-angular/issues/5879)
26-
5. Column Selection for IgxGrid [#6578](https://github.com/IgniteUI/igniteui-angular/issues/6578)
27-
6. Splitter [#6639](https://github.com/IgniteUI/igniteui-angular/issues/6639)
28-
7. Row Pinning IgxGrid [#6640](https://github.com/IgniteUI/igniteui-angular/issues/6640)
29-
8. Data Analysis Directive [#1752](https://github.com/IgniteUI/igniteui-angular-samples/issues/1752)
30-
9. Slider does not support RTL [#5212](https://github.com/igniteui/igniteui-angular/issues/5212)
31-
10. Circular Progress Indicator does not support RTL [#5903](https://github.com/igniteui/igniteui-angular/issues/5903)
32-
11. Action Strip [#6941](https://github.com/IgniteUI/igniteui-angular/issues/6941)
33-
12. Theme igx-component scrollbars [#6675](https://github.com/IgniteUI/igniteui-angular/issues/6675)
34-
13. Use CSS variables by default [#6803](https://github.com/IgniteUI/igniteui-angular/issues/6675)
22+
1. **[DONE]** Dock Manger - Public Preview [#5980](https://github.com/IgniteUI/igniteui-angular/issues/5980)
23+
2. **[DONE]** Range Date Picker [#5732](https://github.com/IgniteUI/igniteui-angular/issues/5732)
24+
3. **[DONE]** Keyboard Navigation Enhancement [#6755](https://github.com/IgniteUI/igniteui-angular/issues/6755)
25+
4. **[DONE]** Column freezing/Pinning on the right (igx-grid) [#5879](https://github.com/IgniteUI/igniteui-angular/issues/5879)
26+
5. **[DONE]** Column Selection for IgxGrid [#6578](https://github.com/IgniteUI/igniteui-angular/issues/6578)
27+
6. **[DONE]** Splitter [#6639](https://github.com/IgniteUI/igniteui-angular/issues/6639)
28+
7. **[DONE]** Row Pinning IgxGrid [#6640](https://github.com/IgniteUI/igniteui-angular/issues/6640)
29+
8. **[DONE]** Data Analysis Directive [#1752](https://github.com/IgniteUI/igniteui-angular-samples/issues/1752)
30+
9. **[DONE]** Slider does not support RTL [#5212](https://github.com/igniteui/igniteui-angular/issues/5212)
31+
10. **[DONE]** Circular Progress Indicator does not support RTL [#5903](https://github.com/igniteui/igniteui-angular/issues/5903)
32+
11. **[DONE]** Action Strip [#6941](https://github.com/IgniteUI/igniteui-angular/issues/6941)
33+
12. **[DONE]** Theme igx-component scrollbars [#6675](https://github.com/IgniteUI/igniteui-angular/issues/6675)
34+
13. **[DONE]** Use CSS variables by default [#6803](https://github.com/IgniteUI/igniteui-angular/issues/6675)
3535

3636
## Milestone 10 (Released February 10th, 2020)
3737

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

+24-7
Original file line numberDiff line numberDiff line change
@@ -1584,16 +1584,30 @@ export class IgxColumnComponent implements AfterContentInit {
15841584
this._pinned = true;
15851585
this.pinnedChange.emit(this._pinned);
15861586
this._unpinnedIndex = grid._unpinnedColumns.indexOf(this);
1587-
index = index !== undefined ? index : grid._pinnedColumns.length;
1587+
const rootPinnedCols = grid._pinnedColumns.filter((c) => c.level === 0);
1588+
index = index !== undefined ? index : rootPinnedCols.length;
15881589
const targetColumn = grid._pinnedColumns[index];
15891590
const args = { column: this, insertAtIndex: index, isPinned: true };
15901591
grid.onColumnPinning.emit(args);
15911592

15921593
if (grid._pinnedColumns.indexOf(this) === -1) {
1593-
grid._pinnedColumns.splice(args.insertAtIndex, 0, this);
1594+
if (!grid.hasColumnGroups) {
1595+
grid._pinnedColumns.splice(args.insertAtIndex, 0, this);
1596+
} else {
1597+
// insert based only on root collection
1598+
rootPinnedCols.splice(args.insertAtIndex, 0, this);
1599+
let allPinned = [];
1600+
// re-create hierarchy
1601+
rootPinnedCols.forEach(group => {
1602+
allPinned.push(group);
1603+
allPinned = allPinned.concat(group.allChildren);
1604+
});
1605+
grid._pinnedColumns = allPinned;
1606+
}
15941607

15951608
if (grid._unpinnedColumns.indexOf(this) !== -1) {
1596-
grid._unpinnedColumns.splice(grid._unpinnedColumns.indexOf(this), 1);
1609+
const childrenCount = this.allChildren.length;
1610+
grid._unpinnedColumns.splice(grid._unpinnedColumns.indexOf(this), 1 + childrenCount);
15971611
}
15981612
}
15991613

@@ -1650,13 +1664,16 @@ export class IgxColumnComponent implements AfterContentInit {
16501664

16511665
const targetColumn = grid._unpinnedColumns[index];
16521666

1653-
grid._unpinnedColumns.splice(index, 0, this);
1654-
if (grid._pinnedColumns.indexOf(this) !== -1) {
1655-
grid._pinnedColumns.splice(grid._pinnedColumns.indexOf(this), 1);
1667+
if (!hasIndex) {
1668+
grid._unpinnedColumns.splice(index, 0, this);
1669+
if (grid._pinnedColumns.indexOf(this) !== -1) {
1670+
grid._pinnedColumns.splice(grid._pinnedColumns.indexOf(this), 1);
1671+
}
16561672
}
16571673

1674+
16581675
if (hasIndex) {
1659-
grid._moveColumns(this, targetColumn);
1676+
grid.moveColumn(this, targetColumn);
16601677
}
16611678

16621679
if (this.columnGroup) {

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

+27-51
Original file line numberDiff line numberDiff line change
@@ -151,10 +151,11 @@ import { IgxColumnGroupComponent } from './columns/column-group.component';
151151
import { IGridSortingStrategy } from '../data-operations/sorting-strategy';
152152
import { IgxRowDragGhostDirective, IgxDragIndicatorIconDirective } from './row-drag.directive';
153153
import { isNumber } from 'util';
154+
import { showMessage } from '../core/deprecateDecorators';
154155

155156
const MINIMUM_COLUMN_WIDTH = 136;
156157
const FILTER_ROW_HEIGHT = 50;
157-
158+
let warningShown = false;
158159
// By default row editing overlay outlet is inside grid body so that overlay is hidden below grid header when scrolling.
159160
// 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.
160161
// Default row editing overlay height is higher then row height that is why the case is valid also for row with 2 rows.
@@ -3780,21 +3781,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
37803781
*/
37813782
protected _moveColumns(from: IgxColumnComponent, to: IgxColumnComponent, pos: DropPosition) {
37823783
const list = this.columnList.toArray();
3783-
const fromIndex = list.indexOf(from);
3784-
let toIndex = list.indexOf(to);
3785-
3786-
if (pos === DropPosition.BeforeDropTarget) {
3787-
toIndex--;
3788-
if (toIndex < 0) {
3789-
toIndex = 0;
3790-
}
3791-
}
3792-
3793-
if (pos === DropPosition.AfterDropTarget) {
3794-
toIndex++;
3795-
}
3796-
3797-
list.splice(toIndex, 0, ...list.splice(fromIndex, 1));
3784+
this._reorderColumns(from, to, pos, list);
37983785
const newList = this._resetColumnList(list);
37993786
this.columnList.reset(newList);
38003787
this.columnList.notifyOnChanges();
@@ -3822,39 +3809,27 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
38223809
* @hidden
38233810
*/
38243811
protected _reorderColumns(from: IgxColumnComponent, to: IgxColumnComponent, position: DropPosition, columnCollection: any[]) {
3825-
let dropIndex = columnCollection.indexOf(to);
3826-
3827-
if (to.columnGroup) {
3828-
dropIndex += to.allChildren.length;
3829-
}
3812+
const fromIndex = columnCollection.indexOf(from);
3813+
const childColumnsCount = from.allChildren.length;
3814+
// remove item(s) to be moved.
3815+
const fromCollection = columnCollection.splice(fromIndex, childColumnsCount + 1);
38303816

3831-
if (position === DropPosition.BeforeDropTarget) {
3832-
dropIndex--;
3833-
}
3817+
let dropIndex = columnCollection.indexOf(to);
38343818

38353819
if (position === DropPosition.AfterDropTarget) {
38363820
dropIndex++;
3821+
if (to.columnGroup) {
3822+
dropIndex += to.allChildren.length;
3823+
}
38373824
}
3838-
3839-
columnCollection.splice(dropIndex, 0, ...columnCollection.splice(columnCollection.indexOf(from), 1));
3825+
columnCollection.splice(dropIndex, 0, ...fromCollection);
38403826
}
38413827
/**
38423828
* @hidden
38433829
*/
38443830
protected _moveChildColumns(parent: IgxColumnComponent, from: IgxColumnComponent, to: IgxColumnComponent, pos: DropPosition) {
38453831
const buffer = parent.children.toArray();
3846-
const fromIndex = buffer.indexOf(from);
3847-
let toIndex = buffer.indexOf(to);
3848-
3849-
if (pos === DropPosition.BeforeDropTarget) {
3850-
toIndex--;
3851-
}
3852-
3853-
if (pos === DropPosition.AfterDropTarget) {
3854-
toIndex++;
3855-
}
3856-
3857-
buffer.splice(toIndex, 0, ...buffer.splice(fromIndex, 1));
3832+
this._reorderColumns(from, to, pos, buffer);
38583833
parent.children.reset(buffer);
38593834
}
38603835
/**
@@ -3866,19 +3841,17 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
38663841
*/
38673842
public moveColumn(column: IgxColumnComponent, dropTarget: IgxColumnComponent, pos: DropPosition = DropPosition.None) {
38683843

3844+
if (column === dropTarget) {
3845+
return;
3846+
}
38693847
let position = pos;
3870-
const fromIndex = column.visibleIndex;
3871-
const toIndex = dropTarget.visibleIndex;
3872-
3873-
if (pos === DropPosition.BeforeDropTarget && fromIndex < toIndex) {
3874-
position = DropPosition.BeforeDropTarget;
3875-
} else if (pos === DropPosition.AfterDropTarget && fromIndex > toIndex) {
3876-
position = DropPosition.AfterDropTarget;
3877-
} else {
3878-
position = DropPosition.None;
3848+
if (position === DropPosition.None) {
3849+
warningShown = showMessage(
3850+
'DropPosition.None is deprecated.' +
3851+
'Use DropPosition.AfterDropTarget instead.',
3852+
warningShown);
3853+
position = DropPosition.AfterDropTarget;
38793854
}
3880-
3881-
38823855
if ((column.level !== dropTarget.level) ||
38833856
(column.topLevelParent !== dropTarget.topLevelParent)) {
38843857
return;
@@ -3936,6 +3909,9 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
39363909
if (this.hasColumnLayouts) {
39373910
this.columns.filter(x => x.columnLayout).forEach(x => x.populateVisibleIndexes());
39383911
}
3912+
// after reordering is done reset cached column collections.
3913+
this.resetColumnCollections();
3914+
column.resetCaches();
39393915

39403916
const args = {
39413917
source: column,
@@ -5219,8 +5195,8 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
52195195
* @hidden
52205196
*/
52215197
protected reinitPinStates() {
5222-
this._pinnedColumns = (this.hasColumnGroups) ? this.columnList.filter((c) => c.pinned) :
5223-
this.columnList.filter((c) => c.pinned).sort((a, b) => this._pinnedColumns.indexOf(a) - this._pinnedColumns.indexOf(b));
5198+
this._pinnedColumns = this.columnList
5199+
.filter((c) => c.pinned).sort((a, b) => this._pinnedColumns.indexOf(a) - this._pinnedColumns.indexOf(b));
52245200
this._unpinnedColumns = this.hasColumnGroups ? this.columnList.filter((c) => !c.pinned) :
52255201
this.columnList.filter((c) => !c.pinned)
52265202
.sort((a, b) => this._unpinnedColumns.indexOf(a) - this._unpinnedColumns.indexOf(b));

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

+23-18
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import { configureTestSuite } from '../../test-utils/configure-suite';
1414
import { IgxGridHeaderComponent } from '../headers/grid-header.component';
1515
import { GridSummaryFunctions } from '../../test-utils/grid-functions.spec';
1616
import { wait } from '../../test-utils/ui-interactions.spec';
17+
import { DropPosition } from '../moving/moving.service';
1718

1819
const GRID_COL_THEAD_TITLE_CLASS = 'igx-grid__th-title';
1920
const GRID_COL_GROUP_THEAD_TITLE_CLASS = 'igx-grid__thead-title';
@@ -786,10 +787,10 @@ describe('IgxGrid - multi-column headers #grid', () => {
786787
const ci = fixture.componentInstance;
787788
const grid = ci.grid;
788789

789-
ci.idCol.pinned = true;
790+
ci.genInfoColGroup.pinned = true;
790791
tick();
791792
fixture.detectChanges();
792-
ci.genInfoColGroup.pinned = true;
793+
ci.idCol.pinned = true;
793794
tick();
794795
fixture.detectChanges();
795796
ci.postalCodeColGroup.pinned = true;
@@ -799,13 +800,14 @@ describe('IgxGrid - multi-column headers #grid', () => {
799800
tick();
800801
fixture.detectChanges();
801802

802-
testColumnsVisibleIndexes([ci.idCol].concat(ci.genInfoColList)
803+
testColumnsVisibleIndexes(ci.genInfoColList.concat(ci.idCol)
803804
.concat(ci.postalCodeColList).concat(ci.cityColList).concat(ci.countryColList)
804805
.concat(ci.regionColList).concat(ci.addressColList).concat(ci.phoneColList)
805806
.concat(ci.faxColList));
806807

807808
// unpinning with index
808809
expect(grid.unpinColumn(ci.genInfoColGroup, 2)).toBe(true);
810+
fixture.detectChanges();
809811
const postUnpinningColList = [ci.idCol].concat(ci.postalCodeColList).concat(ci.cityColList)
810812
.concat(ci.countryColList).concat(ci.regionColList).concat(ci.genInfoColList)
811813
.concat(ci.addressColList).concat(ci.phoneColList).concat(ci.faxColList);
@@ -814,31 +816,34 @@ describe('IgxGrid - multi-column headers #grid', () => {
814816

815817
// pinning to non-existent index
816818
expect(grid.pinColumn(ci.genInfoColGroup, 15)).toBe(false);
819+
fixture.detectChanges();
817820
testColumnsVisibleIndexes(postUnpinningColList);
818821
testColumnPinning(ci.genInfoColGroup, false);
819822

820823
// pinning to negative index
821824
expect(grid.pinColumn(ci.genInfoColGroup, -15)).toBe(false);
825+
fixture.detectChanges();
822826
testColumnsVisibleIndexes(postUnpinningColList);
823827
testColumnPinning(ci.genInfoColGroup, false);
824828

825829
// pinning with index
826830
expect(grid.pinColumn(ci.genInfoColGroup, 2)).toBe(true);
831+
fixture.detectChanges();
827832
const postPinningColList = [ci.idCol].concat(ci.postalCodeColList).concat(ci.genInfoColList)
828833
.concat(ci.cityColList).concat(ci.countryColList).concat(ci.regionColList)
829834
.concat(ci.addressColList).concat(ci.phoneColList).concat(ci.faxColList);
830835
testColumnsVisibleIndexes(postPinningColList);
831836
testColumnPinning(ci.genInfoColGroup, true);
832837

833-
// unpinning to non-existent index
834-
expect(grid.unpinColumn(ci.genInfoColGroup, 15)).toBe(false);
835-
testColumnsVisibleIndexes(postPinningColList);
836-
testColumnPinning(ci.genInfoColGroup, true);
838+
// // unpinning to non-existent index
839+
// expect(grid.unpinColumn(ci.genInfoColGroup, 15)).toBe(false);
840+
// testColumnsVisibleIndexes(postPinningColList);
841+
// testColumnPinning(ci.genInfoColGroup, true);
837842

838-
// unpinning to negative index
839-
expect(grid.unpinColumn(ci.genInfoColGroup, -15)).toBe(false);
840-
testColumnsVisibleIndexes(postPinningColList);
841-
testColumnPinning(ci.genInfoColGroup, true);
843+
// // unpinning to negative index
844+
// expect(grid.unpinColumn(ci.genInfoColGroup, -15)).toBe(false);
845+
// testColumnsVisibleIndexes(postPinningColList);
846+
// testColumnPinning(ci.genInfoColGroup, true);
842847
}));
843848

844849
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', () => {
927932
testColumnsOrder(genInfoCols.concat(locCols).concat(contactInfoCols));
928933

929934
// moving last to be first
930-
grid.moveColumn(ci.contactInfoColGroup, ci.genInfoColGroup);
935+
grid.moveColumn(ci.contactInfoColGroup, ci.genInfoColGroup, DropPosition.BeforeDropTarget);
931936
tick();
932937
fixture.detectChanges();
933938
testColumnsOrder(contactInfoCols.concat(genInfoCols).concat(locCols));
@@ -945,7 +950,7 @@ describe('IgxGrid - multi-column headers #grid', () => {
945950
testColumnsOrder(genInfoCols.concat(contactInfoCols).concat(locCols));
946951

947952
// moving inner to be first
948-
grid.moveColumn(ci.contactInfoColGroup, ci.genInfoColGroup);
953+
grid.moveColumn(ci.contactInfoColGroup, ci.genInfoColGroup, DropPosition.BeforeDropTarget);
949954
tick();
950955
fixture.detectChanges();
951956
testColumnsOrder(contactInfoCols.concat(genInfoCols).concat(locCols));
@@ -973,7 +978,7 @@ describe('IgxGrid - multi-column headers #grid', () => {
973978
ci.regionCol, ci.cityCol];
974979

975980
// moving last to be first
976-
grid.moveColumn(ci.postalCodeCol, ci.phoneCol);
981+
grid.moveColumn(ci.postalCodeCol, ci.phoneCol, DropPosition.BeforeDropTarget);
977982
tick();
978983
fixture.detectChanges();
979984
testColumnsOrder(genInfoAndLocCols.concat([ci.contactInfoColGroup,
@@ -994,7 +999,7 @@ describe('IgxGrid - multi-column headers #grid', () => {
994999
ci.phoneCol, ci.postalCodeCol, ci.faxCol]));
9951000

9961001
// moving inner to be first
997-
grid.moveColumn(ci.postalCodeCol, ci.phoneCol);
1002+
grid.moveColumn(ci.postalCodeCol, ci.phoneCol, DropPosition.BeforeDropTarget);
9981003
tick();
9991004
fixture.detectChanges();
10001005
testColumnsOrder(genInfoAndLocCols.concat([ci.contactInfoColGroup,
@@ -1029,14 +1034,14 @@ describe('IgxGrid - multi-column headers #grid', () => {
10291034
const grid = ci.grid;
10301035

10311036
// moving a two-level col
1032-
grid.moveColumn(ci.phoneCol, ci.locationColGroup);
1037+
grid.moveColumn(ci.phoneCol, ci.locationColGroup, DropPosition.BeforeDropTarget);
10331038
tick();
10341039
fixture.detectChanges();
10351040
testColumnsOrder([ci.contactInfoColGroup, ci.phoneCol, ci.locationColGroup, ci.countryCol,
10361041
ci.genInfoColGroup, ci.companyNameCol, ci.cityCol]);
10371042

10381043
// moving a three-level col
1039-
grid.moveColumn(ci.cityCol, ci.contactInfoColGroup);
1044+
grid.moveColumn(ci.cityCol, ci.contactInfoColGroup, DropPosition.BeforeDropTarget);
10401045
tick();
10411046
fixture.detectChanges();
10421047
const colsOrder = [ci.cityCol, ci.contactInfoColGroup, ci.phoneCol,
@@ -1090,7 +1095,7 @@ describe('IgxGrid - multi-column headers #grid', () => {
10901095
fixture.detectChanges();
10911096

10921097
// moving group from unpinned to pinned
1093-
ci.grid.moveColumn(ci.phoneColGroup, ci.idCol);
1098+
ci.grid.moveColumn(ci.phoneColGroup, ci.idCol, DropPosition.BeforeDropTarget);
10941099
tick();
10951100
fixture.detectChanges();
10961101
let postMovingOrder = ci.phoneColList.concat([ci.idCol]).concat(ci.genInfoColList)

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

+2-1
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import { GridSelectionMode } from '../common/enums';
1818
import { GridSelectionFunctions, GridFunctions } from '../../test-utils/grid-functions.spec';
1919
import { DefaultSortingStrategy } from '../../data-operations/sorting-strategy';
2020
import { DebugElement } from '@angular/core';
21+
import { DropPosition } from '../moving/moving.service';
2122

2223
describe('IgxGrid - Cell selection #grid', () => {
2324
configureTestSuite();
@@ -2287,7 +2288,7 @@ describe('IgxGrid - Cell selection #grid', () => {
22872288
grid.primaryKey = 'ID';
22882289
fix.detectChanges();
22892290

2290-
grid.moveColumn(grid.getColumnByName('ParentID'), grid.getColumnByName('ID'));
2291+
grid.moveColumn(grid.getColumnByName('ParentID'), grid.getColumnByName('ID'), DropPosition.BeforeDropTarget);
22912292
fix.detectChanges();
22922293
const newSelectedData = [
22932294
{ ID: 317, Name: 'Monica Reyes', HireDate: new Date('Sep 18, 2014') },

0 commit comments

Comments
 (0)