Merge pull request #6157 from IgniteUI/hanastasov/grid-state

feat(grid): Add state persistence directive igxGridState

Author: zdrawku

CHANGELOG.md

@@ -17,6 +17,7 @@ All notable changes for each version of this project will be documented in this
 
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
     - **Behavioral Change** - Pinning columns is no longer automatically prevented when the pinning area would exceed the size of the grid.
+    - `igxGridState` directive added to make it easy for developers to save and restore the grid state. The directive exposes the `getState` and `setState` methods to save/restore the state and an `options` input property to exclude features.
 - `IgxCarousel`:
     - **Breaking Changes** -The carousel slides are no longer array, they are changed to QueryList.
     - **Behavioural change** - When slides are more than 5, a label is shown instead of the indicators. The count limit of visible indicators can be changed with the input `maximumIndicatorsCount`

README.md

@@ -43,7 +43,7 @@ You can find source files under the [`src`](https://github.com/IgniteUI/igniteui
 |input group|Available|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/input-group/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/input_group.html)|Animations|Available|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/animations/README.md)||
 |linear progress|Available|[Readme](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular/src/lib/progressbar)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/linear_progress.html)|dataUtil|Available|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/data-operations/README-DATAUTIL.md)||
 |list|Available|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/list/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/list.html)|dataContainer|Available|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/data-operations/README-DATACONTAINER.md)||
-|month picker|Available|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/calendar/month-picker/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/month_picker.html)|||||
+|month picker|Available|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/calendar/month-picker/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/month_picker.html)|IgxGridState|Available|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/grids/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/state_persistence.html)||
 |navbar|Available|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/navbar/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/navbar.html)|||||
 |navigation drawer|Available|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/navigation-drawer/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/navdrawer.html)|||||
 |radio|Available|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/radio/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/radio_button.html)|||||

projects/igniteui-angular/src/lib/grids/README.md

@@ -494,3 +494,18 @@ import {
 |Name|Return Type|Description|
 |--- |--- |--- |
 |`update(val: any)`|void|Emits the `onEditDone` event and updates the appropriate record in the data source.|
+
+## IgxGridState Directive
+
+### Getters/Setters
+
+|Name|Type|Getter|Setter|Description|
+|--- |--- |--- |--- |--- |
+|`options`|IGridStateOptions|Yes|Yes|Features to be exluded from tracking in the IgxGridState directive.|
+
+### Methods
+
+|Name|Return Type|Description|
+|--- |--- |--- |
+|`getState(serialize: boolean, feature?: string | string[])`|IGridState, string|Gets the state of a feature or states of all grid features, unless a certain feature is disabled through the `options` property..|
+|`setState(val: IGridState | string)`|void|Restores grid features' state based on the IGridState object passed as an argument.|

projects/igniteui-angular/src/lib/grids/common/shared.module.ts

@@ -20,6 +20,7 @@ import { IgxButtonGroupModule } from '../../buttonGroup/buttonGroup.component';
 import { IgxProgressBarModule } from '../../progressbar/progressbar.component';
 import { IgxSelectModule } from '../../select/select.module';
 import { IgxDropDownModule } from '../../drop-down/index';
+import { IgxGridStateModule } from '../state.directive';
 
 
 @NgModule({
@@ -44,7 +45,8 @@ import { IgxDropDownModule } from '../../drop-down/index';
         IgxDropDownModule,
         IgxButtonGroupModule,
         IgxProgressBarModule,
-        IgxSelectModule
+        IgxSelectModule,
+        IgxGridStateModule
     ],
     exports: [
         CommonModule,
@@ -59,6 +61,7 @@ import { IgxDropDownModule } from '../../drop-down/index';
         IgxForOfModule,
         IgxTemplateOutletModule,
         IgxTextHighlightModule,
+        IgxGridStateModule,
         IgxTextSelectionModule,
         IgxCheckboxModule,
         IgxBadgeModule,

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

@@ -1129,7 +1129,7 @@ describe('IgxHierarchicalGrid Runtime Row Island change Scenarios #hGrid', () =>
 
 });
 
-describe('IgxHierarchicalGrid custom template', () => {
+describe('IgxHierarchicalGrid custom template #hGrid', () => {
     configureTestSuite();
     let fixture: ComponentFixture<IgxHierarchicalGridCustomTemplateComponent>;
     let hierarchicalGrid: IgxHierarchicalGridComponent;
@@ -1149,7 +1149,7 @@ describe('IgxHierarchicalGrid custom template', () => {
         hierarchicalGrid = fixture.componentInstance.hgrid;
     }));
 
-    it(' should allow setting custom template for  expand/collapse icons', async() => {
+    it(' should allow setting custom template for expand/collapse icons', async() => {
         let rows = hierarchicalGrid.dataRowList.toArray();
         for (const row of rows) {
             const expander =  row.nativeElement.querySelector('.igx-grid__hierarchical-expander');

projects/igniteui-angular/src/lib/grids/index.ts

@@ -10,3 +10,4 @@ export * from './grid-common.module';
 export { IColumnVisibilityChangedEventArgs } from './hiding/column-hiding-item.directive';
 export * from './hiding/column-hiding.component';
 export * from './pinning/column-pinning.component';
+export * from './state.directive';