Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(igxGrid): Execute column notifyOnChanges after move on next detec… #11179

Merged
merged 9 commits into from
Mar 15, 2022
Merged

fix(igxGrid): Execute column notifyOnChanges after move on next detec… #11179

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
d4d945f
fix(igxGrid): Execute column notifyOnChanges after move on next detec…
Mar 7, 2022
e5e3de4
chore(*): Fix timing in tests with fake async.
Mar 10, 2022
569a100
chore(*): Update more tests.
Mar 10, 2022
de19ebb
chore(*): Fix test timing.
Mar 10, 2022
d3939ee
chore(*): Fix test timing.
Mar 10, 2022
77fb7c4
chore(*): Update test timing.
Mar 10, 2022
6f0c0a3
Merge branch 'master' into mkirova/fix-11116
3phase Mar 11, 2022
26238ea
Merge branch 'master' into mkirova/fix-11116
3phase Mar 11, 2022
682ee0e
Merge branch '13.1.x' into mkirova/fix-11116
dkamburov Mar 15, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 8 additions & 6 deletions projects/igniteui-angular/src/lib/grids/grid-base.directive.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6220,12 +6220,14 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
* @hidden
*/
protected _moveColumns(from: IgxColumnComponent, to: IgxColumnComponent, pos: DropPosition) {
const list = this.columnList.toArray();
this._reorderColumns(from, to, pos, list);
const newList = this._resetColumnList(list);
this.columnList.reset(newList);
this.columnList.notifyOnChanges();
this._columns = this.columnList.toArray();
Promise.resolve().then(() => {
const list = this.columnList.toArray();
this._reorderColumns(from, to, pos, list);
const newList = this._resetColumnList(list);
this.columnList.reset(newList);
this.columnList.notifyOnChanges();
this._columns = this.columnList.toArray();
});
}

/**
Expand Down
64 changes: 51 additions & 13 deletions projects/igniteui-angular/src/lib/grids/grid/column-group.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -996,7 +996,7 @@ describe('IgxGrid - multi-column headers #grid', () => {
expect(grid.getCellByColumn(0, 'City').value).toEqual('Berlin');
});

it('Should pin column groups using indexes correctly.', () => {
it('Should pin column groups using indexes correctly.', fakeAsync(() => {
fixture = TestBed.createComponent(StegosaurusGridComponent);
fixture.detectChanges();
const ci = fixture.componentInstance;
Expand All @@ -1018,6 +1018,7 @@ describe('IgxGrid - multi-column headers #grid', () => {

// unpinning with index
expect(grid.unpinColumn(ci.genInfoColGroup, 2)).toBe(true);
tick();
fixture.detectChanges();
const postUnpinningColList = [ci.idCol].concat(ci.postalCodeColList).concat(ci.cityColList)
.concat(ci.countryColList).concat(ci.regionColList).concat(ci.genInfoColList)
Expand All @@ -1027,18 +1028,21 @@ describe('IgxGrid - multi-column headers #grid', () => {

// pinning to non-existent index
expect(grid.pinColumn(ci.genInfoColGroup, 15)).toBe(false);
tick();
fixture.detectChanges();
testColumnsVisibleIndexes(postUnpinningColList);
testColumnPinning(ci.genInfoColGroup, false);

// pinning to negative index
expect(grid.pinColumn(ci.genInfoColGroup, -15)).toBe(false);
tick();
fixture.detectChanges();
testColumnsVisibleIndexes(postUnpinningColList);
testColumnPinning(ci.genInfoColGroup, false);

// pinning with index
expect(grid.pinColumn(ci.genInfoColGroup, 2)).toBe(true);
tick();
fixture.detectChanges();
const postPinningColList = [ci.idCol].concat(ci.postalCodeColList).concat(ci.genInfoColList)
.concat(ci.cityColList).concat(ci.countryColList).concat(ci.regionColList)
Expand All @@ -1048,14 +1052,18 @@ describe('IgxGrid - multi-column headers #grid', () => {

// unpinning to non-existent index
expect(grid.unpinColumn(ci.genInfoColGroup, 15)).toBe(false);
tick();
fixture.detectChanges();
testColumnsVisibleIndexes(postPinningColList);
testColumnPinning(ci.genInfoColGroup, true);

// unpinning to negative index
expect(grid.unpinColumn(ci.genInfoColGroup, -15)).toBe(false);
tick();
fixture.detectChanges();
testColumnsVisibleIndexes(postPinningColList);
testColumnPinning(ci.genInfoColGroup, true);
});
}));

it('Should initially pin the whole group when one column of the group is pinned', () => {
fixture = TestBed.createComponent(ThreeGroupsThreeColumnsGridComponent);
Expand All @@ -1074,7 +1082,7 @@ describe('IgxGrid - multi-column headers #grid', () => {
grid = fixture.componentInstance.grid;
}));

it('Should not allow moving group to another level via API.', () => {
it('Should not allow moving group to another level via API.', fakeAsync(() => {
expect(grid.pinnedColumns.length).toEqual(0);
expect(grid.unpinnedColumns.length).toEqual(16);
expect(grid.rowList.first.cells.first.value).toMatch('ALFKI');
Expand All @@ -1095,6 +1103,7 @@ describe('IgxGrid - multi-column headers #grid', () => {
// Try to move a group column to pinned area, where there is non group column
const contName = grid.getColumnByName('ContactName');
grid.moveColumn(contName, colID);
tick();
fixture.detectChanges();

// pinning should be unsuccesfull !
Expand Down Expand Up @@ -1123,18 +1132,22 @@ describe('IgxGrid - multi-column headers #grid', () => {
const contTitle = grid.getColumnByName('ContactTitle');

grid.moveColumn(colID, genGroup);
tick();
fixture.detectChanges();
grid.moveColumn(compName, persDetails);
grid.moveColumn(contName, contTitle);
tick();
fixture.detectChanges();
grid.moveColumn(contName, contTitle);
tick();
fixture.detectChanges();

expect(grid.rowList.first.cells.first.value).toMatch('Sales Representative');
expect(grid.rowList.first.cells.toArray()[1].value).toMatch('Maria Anders');
expect(grid.rowList.first.cells.toArray()[2].value).toMatch('Alfreds Futterkiste');
expect(grid.rowList.first.cells.toArray()[3].value).toMatch('ALFKI');
});
}));

it('Should move column group correctly. One level column groups.', () => {
it('Should move column group correctly. One level column groups.', fakeAsync(() => {
fixture = TestBed.createComponent(ThreeGroupsThreeColumnsGridComponent);
fixture.detectChanges();
const ci = fixture.componentInstance;
Expand All @@ -1148,36 +1161,42 @@ describe('IgxGrid - multi-column headers #grid', () => {

// moving last to be first
grid.moveColumn(ci.contactInfoColGroup, ci.genInfoColGroup, DropPosition.BeforeDropTarget);
tick();
fixture.detectChanges();
testColumnsOrder(contactInfoCols.concat(genInfoCols).concat(locCols));

// moving first to be last
grid.moveColumn(ci.contactInfoColGroup, ci.locationColGroup);
tick();
fixture.detectChanges();
testColumnsOrder(genInfoCols.concat(locCols).concat(contactInfoCols));

// moving inner to be last
grid.moveColumn(ci.locationColGroup, ci.contactInfoColGroup);
tick();
fixture.detectChanges();
testColumnsOrder(genInfoCols.concat(contactInfoCols).concat(locCols));

// moving inner to be first
grid.moveColumn(ci.contactInfoColGroup, ci.genInfoColGroup, DropPosition.BeforeDropTarget);
tick();
fixture.detectChanges();
testColumnsOrder(contactInfoCols.concat(genInfoCols).concat(locCols));

// moving to the same spot, no change expected
grid.moveColumn(ci.genInfoColGroup, ci.genInfoColGroup);
tick();
fixture.detectChanges();
testColumnsOrder(contactInfoCols.concat(genInfoCols).concat(locCols));

// moving column group to the place of a column, no change expected
grid.moveColumn(ci.genInfoColGroup, ci.countryCol);
tick();
fixture.detectChanges();
testColumnsOrder(contactInfoCols.concat(genInfoCols).concat(locCols));
});
}));

it('Should move columns within column groups. One level column groups.', () => {
it('Should move columns within column groups. One level column groups.', fakeAsync(() => {
fixture = TestBed.createComponent(ThreeGroupsThreeColumnsGridComponent);
fixture.detectChanges();
const ci = fixture.componentInstance;
Expand All @@ -1188,90 +1207,105 @@ describe('IgxGrid - multi-column headers #grid', () => {

// moving last to be first
grid.moveColumn(ci.postalCodeCol, ci.phoneCol, DropPosition.BeforeDropTarget);
tick();
fixture.detectChanges();
testColumnsOrder(genInfoAndLocCols.concat([ci.contactInfoColGroup,
ci.postalCodeCol, ci.phoneCol, ci.faxCol]));

// moving first to be last
grid.moveColumn(ci.postalCodeCol, ci.faxCol);
tick();
fixture.detectChanges();
testColumnsOrder(genInfoAndLocCols.concat([ci.contactInfoColGroup,
ci.phoneCol, ci.faxCol, ci.postalCodeCol]));

// moving inner to be last
grid.moveColumn(ci.faxCol, ci.postalCodeCol);
tick();
fixture.detectChanges();
testColumnsOrder(genInfoAndLocCols.concat([ci.contactInfoColGroup,
ci.phoneCol, ci.postalCodeCol, ci.faxCol]));

// moving inner to be first
grid.moveColumn(ci.postalCodeCol, ci.phoneCol, DropPosition.BeforeDropTarget);
tick();
fixture.detectChanges();
testColumnsOrder(genInfoAndLocCols.concat([ci.contactInfoColGroup,
ci.postalCodeCol, ci.phoneCol, ci.faxCol]));

// moving to the sample spot, no change expected
grid.moveColumn(ci.postalCodeCol, ci.postalCodeCol);
tick();
fixture.detectChanges();
testColumnsOrder(genInfoAndLocCols.concat([ci.contactInfoColGroup,
ci.postalCodeCol, ci.phoneCol, ci.faxCol]));

// moving column to the place of its column group, no change expected
grid.moveColumn(ci.postalCodeCol, ci.contactInfoColGroup);
tick();
fixture.detectChanges();
testColumnsOrder(genInfoAndLocCols.concat([ci.contactInfoColGroup,
ci.postalCodeCol, ci.phoneCol, ci.faxCol]));

//// moving column to the place of a column group, no change expected
grid.moveColumn(ci.postalCodeCol, ci.genInfoColGroup);
tick();
fixture.detectChanges();
testColumnsOrder(genInfoAndLocCols.concat([ci.contactInfoColGroup,
ci.postalCodeCol, ci.phoneCol, ci.faxCol]));
});
}));

it('Should move columns and groups. Two level column groups.', () => {
it('Should move columns and groups. Two level column groups.', fakeAsync(() => {
fixture = TestBed.createComponent(NestedColGroupsGridComponent);
fixture.detectChanges();
const ci = fixture.componentInstance;
grid = ci.grid;

// moving a two-level col
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, DropPosition.BeforeDropTarget);
tick();
fixture.detectChanges();
const colsOrder = [ci.cityCol, ci.contactInfoColGroup, ci.phoneCol,
ci.locationColGroup, ci.countryCol, ci.genInfoColGroup, ci.companyNameCol];
testColumnsOrder(colsOrder);

// moving between different groups, hould stay the same
grid.moveColumn(ci.locationColGroup, ci.companyNameCol);
tick();
fixture.detectChanges();
testColumnsOrder(colsOrder);

// moving between different levels, should stay the same
grid.moveColumn(ci.countryCol, ci.phoneCol);
tick();
fixture.detectChanges();
testColumnsOrder(colsOrder);

// moving between different levels, should stay the same
grid.moveColumn(ci.cityCol, ci.phoneCol);
tick();
fixture.detectChanges();
testColumnsOrder(colsOrder);

grid.moveColumn(ci.genInfoColGroup, ci.companyNameCol);
tick();
fixture.detectChanges();
testColumnsOrder(colsOrder);

grid.moveColumn(ci.locationColGroup, ci.contactInfoColGroup);
tick();
fixture.detectChanges();
testColumnsOrder(colsOrder);
});
}));

it('Should move columns and groups. Pinning enabled.', () => {
it('Should move columns and groups. Pinning enabled.', fakeAsync(() => {
fixture = TestBed.createComponent(StegosaurusGridComponent);
fixture.detectChanges();
const ci = fixture.componentInstance;
Expand All @@ -1287,6 +1321,7 @@ describe('IgxGrid - multi-column headers #grid', () => {

// moving group from unpinned to pinned
ci.grid.moveColumn(ci.phoneColGroup, ci.idCol, DropPosition.BeforeDropTarget);
tick();
fixture.detectChanges();
let postMovingOrder = ci.phoneColList.concat([ci.idCol]).concat(ci.genInfoColList)
.concat(ci.postalCodeColList).concat(ci.cityColList).concat(ci.countryColList)
Expand All @@ -1297,13 +1332,15 @@ describe('IgxGrid - multi-column headers #grid', () => {

// moving sub group to different parent, should not be allowed
ci.grid.moveColumn(ci.pDetailsColGroup, ci.regionCol);
tick();
fixture.detectChanges();
testColumnsVisibleIndexes(postMovingOrder);
testColumnPinning(ci.pDetailsColGroup, true);
testColumnPinning(ci.regionCol, false);

// moving pinned group as firstly unpinned
ci.grid.moveColumn(ci.idCol, ci.cityColGroup);
tick();
fixture.detectChanges();
ci.idCol.pinned = false;
fixture.detectChanges();
Expand All @@ -1317,11 +1354,12 @@ describe('IgxGrid - multi-column headers #grid', () => {

// moving column to different parent, shound not be allowed
ci.grid.moveColumn(ci.postalCodeCol, ci.cityCol);
tick();
fixture.detectChanges();
testColumnsVisibleIndexes(postMovingOrder);
testColumnPinning(ci.postalCodeCol, true);
testColumnPinning(ci.cityCol, true);
});
}));
});

describe('Features integration tests: ', () => {
Expand Down
Loading