Skip to content

Commit

Permalink
Grid groupBy: correctly restore groups expansion state and properly e…
Browse files Browse the repository at this point in the history 
…xpand/collapse date/time groups after - master (#14641)

* test(grid-groupBy): groups expansion state restore and expand/collapse

* fix(state-dir): parse date values when restoring hierarchy expansion
  • Loading branch information
@ddaribo
ddaribo authored Aug 30, 2024
1 parent 648b747 commit de30c5d
Show file tree
Hide file tree
Showing 3 changed files with 167 additions and 5 deletions.
159 changes: 157 additions & 2 deletions projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { Component, ViewChild, TemplateRef, QueryList } from '@angular/core';
import { formatNumber } from '@angular/common'
import { fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing';
import { ComponentFixture, fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { IgxStringFilteringOperand } from '../../data-operations/filtering-condition';
Expand All @@ -23,7 +23,7 @@ import { IgxPaginatorComponent } from '../../paginator/paginator.component';
import { NgFor, NgIf } from '@angular/common';
import { IgxCheckboxComponent } from '../../checkbox/checkbox.component';
import { IgxGroupByRowSelectorDirective } from '../selection/row-selectors';
import { IgxGrouping } from '../public_api';
import { IgxGridStateDirective, IgxGrouping } from '../public_api';

describe('IgxGrid - GroupBy #grid', () => {

Expand All @@ -46,6 +46,7 @@ describe('IgxGrid - GroupBy #grid', () => {
GridGroupByRowCustomSelectorsComponent,
GridGroupByCaseSensitiveComponent,
GridGroupByTestDateTimeDataComponent,
GridGroupByStateComponent,
MultiColumnHeadersWithGroupingComponent
]
});
Expand Down Expand Up @@ -3800,6 +3801,137 @@ describe('IgxGrid - GroupBy #grid', () => {
}
});

describe('GroupBy with state directive', () => {
let fix: ComponentFixture<GridGroupByStateComponent>;
let state: IgxGridStateDirective;
let grid: IgxGridComponent;

beforeEach(fakeAsync(() => {
fix = TestBed.createComponent(GridGroupByStateComponent);
fix.detectChanges();
grid = fix.componentInstance.grid;
state = fix.componentInstance.state;
}));

it('should restore date/time columns groupBy expansion state and expand/collapse hierarchies correctly - issue #14619', fakeAsync(() => {
grid.groupBy({
fieldName: 'DateField', dir: SortingDirection.Asc, ignoreCase: false
});
fix.detectChanges();

const groupRows = grid.groupsRowList.toArray();
expect(groupRows.length).toEqual(3);
expect(groupRows[0].expanded).toEqual(true);

grid.toggleGroup(groupRows[0].groupRow);
fix.detectChanges();

expect(groupRows[0].expanded).toEqual(false);
expect(groupRows[1].expanded).toEqual(true);
expect(groupRows[2].expanded).toEqual(true);

const gridGroupByState = state.getState(true, 'groupBy');

expect(grid.groupsExpanded).toBe(true);
grid.toggleAllGroupRows();
fix.detectChanges();

groupRows.forEach(gr => expect(gr.expanded).toEqual(false));

state.setState(gridGroupByState, "groupBy");
fix.detectChanges();

expect(groupRows[0].expanded).toEqual(false);
expect(groupRows[1].expanded).toEqual(true);
expect(groupRows[2].expanded).toEqual(true);

// check that toggling a single group row does not affect the others
grid.toggleGroup(groupRows[1].groupRow);
fix.detectChanges();

expect(groupRows[0].expanded).toEqual(false);
expect(groupRows[1].expanded).toEqual(false);
expect(groupRows[2].expanded).toEqual(true);
}));

it('should restore date/time columns groupBy expansion state in nested hierarchies correctly - issue #14619', fakeAsync(() => {
grid.groupBy([{
fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: false
}, {
fieldName: 'DateField', dir: SortingDirection.Asc, ignoreCase: false
}]);
fix.detectChanges();

let groupRows = grid.groupsRowList.toArray();
expect(groupRows.length).toEqual(9);
expect(groupRows[4].groupRow.records.length).toEqual(2);

grid.toggleGroup(groupRows[5].groupRow);
fix.detectChanges();

const gridGroupByState = state.getState(true, 'groupBy');

grid.toggleGroup(groupRows[6].groupRow);
fix.detectChanges();

groupRows = grid.groupsRowList.toArray();
expect(groupRows[5].expanded).toEqual(false);
expect(groupRows[6].expanded).toEqual(false);

state.setState(gridGroupByState, "groupBy");
fix.detectChanges();

expect(groupRows[5].expanded).toEqual(false);
expect(groupRows[6].expanded).toEqual(true);

// check that toggling a single group row in the hierarchy does not affect the others
grid.toggleGroup(groupRows[6].groupRow);
fix.detectChanges();

expect(groupRows[5].expanded).toEqual(false);
expect(groupRows[6].expanded).toEqual(false);

grid.toggleGroup(groupRows[5].groupRow);
fix.detectChanges();

expect(groupRows[5].expanded).toEqual(true);
expect(groupRows[6].expanded).toEqual(false);
}));

it('should properly restore groupBy expansion state that was saved before the grid groupsExpanded property has changed', fakeAsync(() => {
grid.groupBy({
fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: false
});
fix.detectChanges();

grid.toggleAllGroupRows();
fix.detectChanges();

let groupRows = grid.groupsRowList.toArray();
groupRows.forEach(gr => expect(gr.expanded).toEqual(false));

grid.toggleGroup(groupRows[1].groupRow);
expect(groupRows[1].expanded).toEqual(true);

const gridGroupByState = state.getState(true, 'groupBy');

expect(grid.groupsExpanded).toBe(false);
grid.toggleAllGroupRows();
fix.detectChanges();

expect(grid.groupsExpanded).toBe(true);

state.setState(gridGroupByState, "groupBy");
fix.detectChanges();

groupRows = grid.groupsRowList.toArray();
expect(groupRows[0].expanded).toEqual(false);
expect(groupRows[1].expanded).toEqual(true);
expect(groupRows[2].expanded).toEqual(false);
expect(groupRows[3].expanded).toEqual(false);
}));
});

const clickAndSendInputElementValue = (element, text, fix) => {
element.nativeElement.value = text;
element.nativeElement.dispatchEvent(new Event('input'));
Expand Down Expand Up @@ -4132,3 +4264,26 @@ export class GridGroupByTestDateTimeDataComponent {
public height = null;
public datesData = SampleTestData.generateTestDateTimeData();
}

@Component({
template: `
<igx-grid
#grid
igxGridState
[width]='width'
[height]='height'
[data]="datesData">
<igx-column [field]="'ProductID'" [width]="'200px'" [groupable]="true" dataType="number"></igx-column>
<igx-column [field]="'ProductName'" [width]="'200px'" [groupable]="true" dataType="string"></igx-column>
<igx-column [field]="'DateField'" [width]="'200px'" [groupable]="true" dataType="date"></igx-column>
<igx-column [field]="'TimeField'" [width]="'200px'" [groupable]="true" dataType="time"></igx-column>
<igx-column [field]="'DateTimeField'" [width]="'200px'" [groupable]="true" dataType="dateTime"></igx-column>
</igx-grid>
`,
standalone: true,
imports: [IgxGridComponent, IgxColumnComponent, IgxPaginatorComponent, IgxGridStateDirective]
})
export class GridGroupByStateComponent extends GridGroupByTestDateTimeDataComponent {
@ViewChild(IgxGridStateDirective, { static: true })
public state: IgxGridStateDirective;
}
11 changes: 9 additions & 2 deletions projects/igniteui-angular/src/lib/grids/state-base.directive.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -267,11 +267,18 @@ export class IgxGridStateBaseDirective {
restoreFeatureState: (context: IgxGridStateBaseDirective, state: IGroupingState): void => {
const grid = context.currGrid as IgxGridComponent;
grid.groupingExpressions = state.expressions as IGroupingExpression[];
state.expansion.forEach(exp => {
exp.hierarchy.forEach(h => {
const dataType = grid.columns.find(c => c.field === h.fieldName).dataType;
if (dataType.includes(GridColumnDataType.Date) || dataType.includes(GridColumnDataType.Time)) {
h.value = h.value ? new Date(Date.parse(h.value)) : h.value;
}
});
});
if (grid.groupsExpanded !== state.defaultExpanded) {
grid.toggleAllGroupRows();
} else {
grid.groupingExpansionState = state.expansion as IGroupByExpandState[];
}
grid.groupingExpansionState = state.expansion as IGroupByExpandState[];
}
},
paging: {
Expand Down
2 changes: 1 addition & 1 deletion projects/igniteui-angular/src/lib/test-utils/sample-test-data.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4414,7 +4414,7 @@ export class SampleTestData {
},
{
ProductID: 4,
ProductName: 'Product4',
ProductName: 'Product3',
DateField: new Date(new Date('2006-03-17').setHours(11, 11)),
TimeField: new Date(new Date('2006-03-17').setHours(11, 11)),
DateTimeField: new Date(new Date('2003-03-17').setHours(3, 20, 0, 1)),
Expand Down

0 comments on commit de30c5d

Please sign in to comment.