Skip to content

Commit 387a79a

Browse files
teodosiahteodosiah
committed
feat(grid): add moving feature to grid states
1 parent 5ab1370 commit 387a79a

File tree

4 files changed

+170
-18
lines changed

4 files changed

+170
-18
lines changed

‎projects/igniteui-angular/src/lib/grids/state.directive.spec.ts

Lines changed: 65 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,8 @@ describe('IgxGridState - input properties #grid', () => {
4141
rowSelection: true,
4242
columnSelection: true,
4343
rowPinning: true,
44-
expansion: true
44+
expansion: true,
45+
moving: true
4546
};
4647

4748
const fix = TestBed.createComponent(IgxGridStateComponent);
@@ -66,6 +67,7 @@ describe('IgxGridState - input properties #grid', () => {
6667
rowPinning: true,
6768
expansion: true,
6869
groupBy: false,
70+
moving: false
6971
};
7072

7173
const fix = TestBed.createComponent(IgxGridStateWithOptionsComponent);
@@ -76,7 +78,7 @@ describe('IgxGridState - input properties #grid', () => {
7678
});
7779

7880
it('getState should return correct JSON string', () => {
79-
const initialGridState = '{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"number","hasSummary":false,"field":"ProductID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Prodyct Name","resizable":true,"searchable":true,"selectable":false,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"InStock","width":"140px","header":"In Stock","resizable":true,"searchable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"OrderDate","width":"110px","header":"Date ordered","resizable":false,"searchable":true,"parent":null,"columnGroup":false,"disableHiding":false}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"groupBy":{"expressions":[],"expansion":[],"defaultExpanded":true},"paging":{"index":0,"recordsPerPage":15,"metadata":{"countPages":1,"countRecords":10,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[]}';
81+
const initialGridState = '{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"number","hasSummary":false,"field":"ProductID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Prodyct Name","resizable":true,"searchable":true,"selectable":false,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"InStock","width":"140px","header":"In Stock","resizable":true,"searchable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"OrderDate","width":"110px","header":"Date ordered","resizable":false,"searchable":true,"parent":null,"columnGroup":false,"disableHiding":false}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"groupBy":{"expressions":[],"expansion":[],"defaultExpanded":true},"paging":{"index":0,"recordsPerPage":15,"metadata":{"countPages":1,"countRecords":10,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[],"moving":true}';
8082
const fix = TestBed.createComponent(IgxGridStateComponent);
8183
fix.detectChanges();
8284

@@ -115,6 +117,7 @@ describe('IgxGridState - input properties #grid', () => {
115117

116118
const columns = fix.componentInstance.columns;
117119
const paging = grid.pagingState;
120+
const moving = grid.moving;
118121
const sorting = grid.sortingExpressions;
119122
const groupBy = grid.groupingExpressions;
120123
const groupByExpansion = grid.groupingExpansionState;
@@ -127,6 +130,7 @@ describe('IgxGridState - input properties #grid', () => {
127130
HelperFunctions.verifyGroupingExpressions(groupBy, gridState);
128131
HelperFunctions.verifyGroupingExpansion(groupByExpansion, gridState.groupBy);
129132
HelperFunctions.verifyFilteringExpressions(filtering, gridState);
133+
HelperFunctions.verifyMoving(moving, gridState);
130134
});
131135

132136
it('getState should return corect IGridState object when options are not default', () => {
@@ -137,10 +141,12 @@ describe('IgxGridState - input properties #grid', () => {
137141
let gridState = state.getState(false) as IGridState;
138142
expect(gridState['sorting']).toBeFalsy();
139143
expect(gridState['groupBy']).toBeFalsy();
144+
expect(gridState['moving']).toBeFalsy();
140145

141-
gridState = state.getState(false, ['filtering', 'sorting', 'groupBy']) as IGridState;
146+
gridState = state.getState(false, ['filtering', 'sorting', 'groupBy', 'moving']) as IGridState;
142147
expect(gridState['sorting']).toBeFalsy();
143148
expect(gridState['groupBy']).toBeFalsy();
149+
expect(gridState['groupBy']).toBeFalsy();
144150
});
145151

146152
it('getState should return corect filtering state', () => {
@@ -437,6 +443,55 @@ describe('IgxGridState - input properties #grid', () => {
437443
expect(grid.pinnedRows[0].key).toBe(1);
438444
expect(grid.pinnedRows[1].key).toBe(3);
439445
});
446+
447+
it('setState should correctly restore grid moving state from string', () => {
448+
const fix = TestBed.createComponent(IgxGridStateComponent);
449+
fix.detectChanges();
450+
const grid = fix.componentInstance.grid;
451+
const state = fix.componentInstance.state;
452+
453+
const movingState = '{"moving":false}';
454+
const initialState = '{"moving":true}';
455+
456+
let gridState = state.getState(true, 'moving');
457+
expect(gridState).toBe(initialState);
458+
459+
state.setState(movingState);
460+
expect(grid.moving).toBeFalsy();
461+
gridState = state.getState(true, 'moving');
462+
expect(gridState).toBe(movingState);
463+
464+
});
465+
466+
it('setState should correctly restore grid moving state from object', () => {
467+
const fix = TestBed.createComponent(IgxGridStateComponent);
468+
fix.detectChanges();
469+
const grid = fix.componentInstance.grid;
470+
const state = fix.componentInstance.state;
471+
const movingState = '{"moving":false}';
472+
const initialState = '{"moving":true}';
473+
const movingStateObject = JSON.parse(movingState);
474+
475+
let gridState = state.getState(true, 'moving');
476+
expect(gridState).toBe(initialState);
477+
478+
state.setState(movingStateObject);
479+
fix.detectChanges();
480+
481+
expect(grid.moving).toBeFalsy();
482+
gridState = state.getState(true, 'moving');
483+
expect(gridState).toBe(movingState);
484+
485+
grid.moving = true;
486+
fix.detectChanges();
487+
488+
state.setState(movingStateObject);
489+
fix.detectChanges();
490+
491+
expect(grid.moving).toBeFalsy();
492+
gridState = state.getState(true, 'moving');
493+
expect(gridState).toBe(movingState);
494+
});
440495

441496
it('setState should correctly restore grid cell selection state from string', () => {
442497
const fix = TestBed.createComponent(IgxGridStateComponent);
@@ -586,6 +641,10 @@ class HelperFunctions {
586641
expect(paging).toEqual(jasmine.objectContaining(gridState.paging));
587642
}
588643

644+
public static verifyMoving(moving: boolean, gridState: IGridState){
645+
expect(moving).toEqual(gridState.moving);
646+
}
647+
589648
public static verifyRowSelection(selectedRows: any[], gridState: IGridState) {
590649
gridState.rowSelection.forEach((s, index) => {
591650
expect(s).toBe(selectedRows[index]);
@@ -608,7 +667,7 @@ class HelperFunctions {
608667

609668
@Component({
610669
template: `
611-
<igx-grid #grid [data]="data" [autoGenerate]="false" igxGridState rowSelection="multiple"
670+
<igx-grid #grid [data]="data" [autoGenerate]="false" [moving]="true" igxGridState rowSelection="multiple"
612671
cellSelection="multiple" primaryKey="ProductID">
613672
<igx-column *ngFor="let c of columns"
614673
[width]="c.width"
@@ -673,7 +732,8 @@ export class IgxGridStateWithOptionsComponent {
673732
filtering: false,
674733
advancedFiltering: true,
675734
sorting: false,
676-
groupBy: false
735+
groupBy: false,
736+
moving: false
677737
};
678738
}
679739

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

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ export interface IGridState {
2323
filtering?: IFilteringExpressionsTree;
2424
advancedFiltering?: IFilteringExpressionsTree;
2525
paging?: IPagingState;
26+
moving?: boolean;
2627
sorting?: ISortingExpression[];
2728
groupBy?: IGroupingState;
2829
cellSelection?: GridSelectionRange[];
@@ -87,7 +88,7 @@ export type GridFeatures = keyof IGridStateOptions;
8788

8889
interface Feature {
8990
getFeatureState: (context: IgxGridStateDirective) => IGridState;
90-
restoreFeatureState: (context: IgxGridStateDirective, state: IColumnState[] | IPagingState | ISortingExpression[] |
91+
restoreFeatureState: (context: IgxGridStateDirective, state: IColumnState[] | IPagingState | boolean | ISortingExpression[] |
9192
IGroupingState | IFilteringExpressionsTree | GridSelectionRange[] | IPinningConfig | any[]) => void;
9293
}
9394

@@ -113,7 +114,7 @@ export class IgxGridStateDirective {
113114
rowPinning: true,
114115
expansion: true,
115116
rowIslands: true,
116-
moving: false
117+
moving: true
117118
};
118119
private FEATURES = {
119120
sorting: {
@@ -267,6 +268,14 @@ export class IgxGridStateDirective {
267268
context.currGrid.paginator.page = state.index;
268269
}
269270
},
271+
moving: {
272+
getFeatureState: (context: IgxGridStateDirective): IGridState => {
273+
return { moving: context.currGrid.moving };
274+
},
275+
restoreFeatureState: (context: IgxGridStateDirective, state: boolean): void => {
276+
context.currGrid.moving = state;
277+
}
278+
},
270279
rowSelection: {
271280
getFeatureState: (context: IgxGridStateDirective): IGridState => {
272281
const selection = context.currGrid.selectedRows;
@@ -498,7 +507,7 @@ export class IgxGridStateDirective {
498507
this.featureKeys.forEach(f => {
499508
if (this.options[f]) {
500509
const featureState = state[f];
501-
if (featureState) {
510+
if (f === 'moving' || featureState) {
502511
const feature = this.getFeature(f);
503512
feature.restoreFeatureState(this, featureState);
504513
}

‎projects/igniteui-angular/src/lib/grids/state.hierarchicalgrid.spec.ts

Lines changed: 52 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import { ISortingExpression, SortingDirection } from '../data-operations/sorting
1717
import { GridSelectionRange } from './common/types';
1818

1919
/* eslint-disable max-len */
20-
describe('IgxHierarchicalGridState - input properties #hGrid', () => {
20+
fdescribe('IgxHierarchicalGridState - input properties #hGrid', () => {
2121
let fix;
2222
let grid;
2323
configureTestSuite((() => {
@@ -52,7 +52,8 @@ describe('IgxHierarchicalGridState - input properties #hGrid', () => {
5252
rowSelection: true,
5353
columnSelection: true,
5454
expansion: true,
55-
rowIslands: true
55+
rowIslands: true,
56+
moving: true
5657
};
5758

5859
const state = fix.componentInstance.state;
@@ -79,7 +80,8 @@ describe('IgxHierarchicalGridState - input properties #hGrid', () => {
7980
rowSelection: true,
8081
columnSelection: true,
8182
expansion: true,
82-
rowIslands: false
83+
rowIslands: false,
84+
moving:true
8385
};
8486

8587
const state = fix.componentInstance.state;
@@ -133,26 +135,66 @@ describe('IgxHierarchicalGridState - input properties #hGrid', () => {
133135

134136
const optionsInput = {
135137
paging: false,
136-
sorting: false
138+
sorting: false,
139+
moving: false
137140
};
138141

139142
state.options = optionsInput;
140143

141144
let gridState = state.getState(false) as IGridState;
142145
expect(gridState['sorting']).toBeFalsy();
143146
expect(gridState['paging']).toBeFalsy();
147+
expect(gridState['moving']).toBeFalsy();
144148

145149
const gridsCollection = HelperFunctions.getChildGridsCollection(grid, gridState);
146150
gridsCollection.forEach(childGrid => {
147151
expect(childGrid.state['sorting']).toBeFalsy();
148152
expect(childGrid.state['paging']).toBeFalsy();
149153
});
150154

151-
gridState = state.getState(false, ['filtering', 'sorting', 'paging', 'rowIslands']) as IGridState;
155+
gridState = state.getState(false, ['filtering', 'sorting', 'paging', 'rowIslands', 'moving']) as IGridState;
152156
expect(gridState['sorting']).toBeFalsy();
153157
expect(gridState['paging']).toBeFalsy();
158+
expect(gridState['moving']).toBeFalsy();
154159
});
155160

161+
it('getState should return correct moving state', () => {
162+
const state = fix.componentInstance.state;
163+
const initialState = HelperFunctions.buildStateString(grid, 'moving', 'true', 'true');
164+
165+
let gridState = state.getState(true, ['moving', 'rowIslands']);
166+
expect(gridState).toBe(initialState);
167+
168+
gridState = state.getState(false, ['moving', 'rowIslands']) as IGridState;
169+
HelperFunctions.verifyMoving(grid.moving, gridState);
170+
});
171+
172+
173+
it('setState should correctly restore grid moving state from string', fakeAsync(() => {
174+
const state = fix.componentInstance.state;
175+
176+
const initialState = HelperFunctions.buildStateString(grid, 'moving', 'true', 'true');
177+
const movingState = HelperFunctions.buildStateString(grid, 'moving', 'false', 'true');
178+
179+
const movingStateObject = JSON.parse(movingState) as IGridState;
180+
movingStateObject.columns = fix.componentInstance.childColumns;
181+
182+
let gridState = state.getState(true, ['moving', 'rowIslands']);
183+
expect(gridState).toBe(initialState);
184+
185+
state.setState(JSON.stringify(movingStateObject));
186+
tick();
187+
fix.detectChanges();
188+
gridState = state.getState(false, ['moving', 'rowIslands']) as IGridState;
189+
HelperFunctions.verifyMoving(grid.moving, gridState);
190+
const gridsCollection = HelperFunctions.getChildGridsCollection(grid, gridState);
191+
gridsCollection.forEach(childGrid => {
192+
expect(childGrid.grid.moving).toEqual(childGrid.grid.moving);
193+
});
194+
gridState = state.getState(true, ['moving', 'rowIslands']);
195+
expect(gridState).toBe(movingState);
196+
}));
197+
156198
it('getState should return correct filtering state', () => {
157199
const state = fix.componentInstance.state;
158200
const filtering = grid.filteringExpressionsTree;
@@ -521,6 +563,10 @@ class HelperFunctions {
521563
expect(paging).toEqual(jasmine.objectContaining(gridState.paging));
522564
}
523565

566+
public static verifyMoving(moving: boolean, gridState: IGridState){
567+
expect(moving).toEqual(gridState.moving);
568+
}
569+
524570
public static verifyRowSelection(selectedRows: any[], gridState: IGridState) {
525571
gridState.rowSelection.forEach((s, index) => {
526572
expect(s).toBe(selectedRows[index]);
@@ -581,7 +627,7 @@ class HelperFunctions {
581627
@Component({
582628
template: `
583629
<igx-hierarchical-grid #hGrid [moving]="true" [data]="data" igxGridState [expandChildren]="true" primaryKey="ID"
584-
[autoGenerate]="false" [height]="'800px'" [width]="'800px'" rowSelection="multiple" cellSelection="multiple">
630+
[autoGenerate]="false" [height]="'800px'" [width]="'800px'" [moving]="true" rowSelection="multiple" cellSelection="multiple">
585631
<igx-column *ngFor="let c of columns"
586632
[width]="c.width"
587633
[sortable]="c.sortable"

0 commit comments

Comments
 (0)