feat(IgxState): Re-use matching columns for state. (#14756)

Author: MayaKirova

CHANGELOG.md

@@ -39,6 +39,8 @@ All notable changes for each version of this project will be documented in this
     according to the target type that the editor mask includes. Defaults to `date`.
 - `IgxTabs`
     - Added `activation` property to control tab selection. In `auto` mode (default), tabs are selected instantly with Arrow or Home/End keys. In `manual` mode, tabs are focused with keys but only selected with Enter or Space.
+- `IgxGridState`
+    -  When possible the state directive nows reuses the column that already exists on the grid when restoring the state, instead of creating new column instances every time. This removes the need to set any complex objects manually back on the column on `columnInit`. The only instance where this is still necessary is when the column (or its children in case of column groups) have no `field` property so there's no way to uniquely identify the matching column.
 
 ### Themes
 - `Palettes`

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

@@ -16,7 +16,7 @@ import { IgxGridComponent } from './grid/grid.component';
 import { IgxHierarchicalGridComponent } from './hierarchical-grid/hierarchical-grid.component';
 import { GridSelectionRange } from './common/types';
 import { ISortingExpression } from '../data-operations/sorting-strategy';
-import { GridType, IGX_GRID_BASE, IPinningConfig } from './common/grid.interface';
+import { ColumnType, GridType, IGX_GRID_BASE, IPinningConfig } from './common/grid.interface';
 import { IgxPivotGridComponent } from './pivot-grid/pivot-grid.component';
 import { IPivotConfiguration, IPivotDimension } from './pivot-grid/pivot-grid.interface'
 import { PivotUtil } from './pivot-grid/pivot-util';
@@ -92,7 +92,12 @@ export interface IColumnState {
     resizable: boolean;
     searchable: boolean;
     columnGroup: boolean;
-    parent: any;
+    /**
+     * @deprecated
+     */
+    parent?: any;
+    key: string;
+    parentKey: string;
     disableHiding: boolean;
     disablePinning: boolean;
     collapsible?: boolean;
@@ -205,7 +210,8 @@ export class IgxGridStateBaseDirective {
                     resizable: c.resizable,
                     searchable: c.searchable,
                     selectable: c.selectable,
-                    parent: c.parent ? c.parent.header : null,
+                    key: c.columnGroup ? this.getColumnGroupKey(c) : c.field,
+                    parentKey: c.parent ? this.getColumnGroupKey(c.parent) : undefined,
                     columnGroup: c.columnGroup,
                     disableHiding: c.disableHiding,
                     disablePinning: c.disablePinning,
@@ -221,29 +227,42 @@ export class IgxGridStateBaseDirective {
                     const hasColumnGroup = colState.columnGroup;
                     delete colState.columnGroup;
                     if (hasColumnGroup) {
-                        const ref1 = createComponent(IgxColumnGroupComponent, { environmentInjector: this.envInjector, elementInjector: this.injector });
-                        Object.assign(ref1.instance, colState);
-                        ref1.instance.grid = context.currGrid;
-                        if (ref1.instance.parent) {
-                            const columnGroup: IgxColumnGroupComponent = newColumns.find(e => e.header === ref1.instance.parent  && e.columnGroup);
-                            columnGroup.children.reset([...columnGroup.children.toArray(), ref1.instance]);
-                            ref1.instance.parent = columnGroup;
+                        let ref1: IgxColumnGroupComponent = context.currGrid.columns.find(x => x.columnGroup && (colState.key ? this.getColumnGroupKey(x) === colState.key : x.header === colState.header)) as IgxColumnGroupComponent;
+                        if (!ref1) {
+                            const component = createComponent(IgxColumnGroupComponent, { environmentInjector: this.envInjector, elementInjector: this.injector });
+                            ref1 = component.instance;
+                            component.changeDetectorRef.detectChanges();
+                        } else {
+                            ref1.children.reset([]);
                         }
-                        ref1.changeDetectorRef.detectChanges();
-                        newColumns.push(ref1.instance);
+                        Object.assign(ref1, colState);
+                        ref1.grid = context.currGrid;
+                        if (colState.parent || colState.parentKey) {
+                            const columnGroup: IgxColumnGroupComponent = newColumns.find(e => e.columnGroup && (e.key ? e.key === colState.parentKey : e.header === ref1.parent));
+                            columnGroup.children.reset([...columnGroup.children.toArray(), ref1]);
+                            ref1.parent = columnGroup;
+                        }
+                        ref1.cdr.detectChanges();
+                        newColumns.push(ref1);
                     } else {
-                        const ref = createComponent(IgxColumnComponent, { environmentInjector: this.envInjector, elementInjector: this.injector});
-                        Object.assign(ref.instance, colState);
-                        ref.instance.grid = context.currGrid;
-                        if (ref.instance.parent) {
-                            const columnGroup: IgxColumnGroupComponent = newColumns.find(e => e.header === ref.instance.parent && e.columnGroup);
+                        let ref: IgxColumnComponent = context.currGrid.columns.find(x => !x.columnGroup && x.field === colState.field) as IgxColumnComponent;
+                        if (!ref) {
+                            const component = createComponent(IgxColumnComponent, { environmentInjector: this.envInjector, elementInjector: this.injector});
+                            ref = component.instance;
+                            component.changeDetectorRef.detectChanges();
+                        }
+
+                        Object.assign(ref, colState);
+                        ref.grid = context.currGrid;
+                        if (colState.parent || colState.parentKey) {
+                            const columnGroup: IgxColumnGroupComponent = newColumns.find(e =>  e.columnGroup && (e.key ? e.key === colState.parentKey : e.header === ref.parent));
                             if (columnGroup) {
-                                ref.instance.parent = columnGroup;
-                                columnGroup.children.reset([...columnGroup.children.toArray(), ref.instance]);
+                                ref.parent = columnGroup;
+                                columnGroup.children.reset([...columnGroup.children.toArray(), ref]);
                             }
                         }
-                        ref.changeDetectorRef.detectChanges();
-                        newColumns.push(ref.instance);
+                        ref.cdr.detectChanges();
+                        newColumns.push(ref);
                     }
                 });
                 context.currGrid.updateColumns(newColumns);
@@ -722,6 +741,10 @@ export class IgxGridStateBaseDirective {
         return val;
     }
 
+    private getColumnGroupKey(columnGroup: ColumnType) : string {
+        return columnGroup.childColumns.map(x => x.columnGroup ? x.level + "_" + this.getColumnGroupKey(x) : x.field).sort().join("_");
+    }
+
     private getFeature(key: string): Feature {
         const feature: Feature = this.FEATURES[key];
         return feature;