Merge pull request #14524 from IgniteUI/dpetev/grid-types-refactor

kdinev · web-flow · commit 3ebd8bd1e547 · 2024-07-16T18:33:54.000+03:00
refactor(grids): clean up internal types handling
diff --git a/projects/igniteui-angular/src/lib/grids/cell.component.ts b/projects/igniteui-angular/src/lib/grids/cell.component.ts
@@ -1019,7 +1019,7 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy, CellT
      * @internal
      */
     public pointerenter = (event: PointerEvent) => {
-        const isHierarchicalGrid = this.grid.nativeElement.tagName.toLowerCase() === 'igx-hierarchical-grid';
+        const isHierarchicalGrid = this.grid.type === 'hierarchical';
         if (isHierarchicalGrid && (!this.grid.navigation?.activeNode?.gridID || this.grid.navigation.activeNode.gridID !== this.gridID)) {
             return;
         }
@@ -1049,7 +1049,7 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy, CellT
      * @internal
      */
     public pointerup = (event: PointerEvent) => {
-        const isHierarchicalGrid = this.grid.nativeElement.tagName.toLowerCase() === 'igx-hierarchical-grid';
+        const isHierarchicalGrid = this.grid.type === 'hierarchical';
         if (!this.platformUtil.isLeftClick(event) || (isHierarchicalGrid && (!this.grid.navigation?.activeNode?.gridID ||
             this.grid.navigation.activeNode.gridID !== this.gridID))) {
             return;
diff --git a/projects/igniteui-angular/src/lib/grids/columns/column.component.ts b/projects/igniteui-angular/src/lib/grids/columns/column.component.ts
@@ -1869,7 +1869,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
      */
     public getGridTemplate(isRow: boolean): string {
         if (isRow) {
-            const rowsCount = !this.grid.isPivot ? this.grid.multiRowLayoutRowSize : this.children.length - 1;
+            const rowsCount = this.grid.type !== 'pivot' ? this.grid.multiRowLayoutRowSize : this.children.length - 1;
             return `repeat(${rowsCount},1fr)`;
         } else {
             return this.getColumnSizesString(this.children);
diff --git a/projects/igniteui-angular/src/lib/grids/common/enums.ts b/projects/igniteui-angular/src/lib/grids/common/enums.ts
@@ -111,22 +111,17 @@ export enum GridPagingMode {
     Remote
 }
 
-export enum GridInstanceType {
-    Grid,
-    TreeGrid
-}
-
 /**
  * @hidden @internal
- * 
+ *
  * Enumeration representing the possible predefined size options of the grid.
  * - Small: This is the smallest size with 32px row height. Left and Right paddings are 12px. Minimal column width is 56px.
  * - Medium: This is the middle size with 40px row height. Left and Right paddings are 16px. Minimal column width is 64px.
  * - Large:  this is the default Grid size with the lowest intense and row height equal to 50px. Left and Right paddings are 24px. Minimal column width is 80px.
  */
 export const Size = /*@__PURE__*/mkenum({
-    Small: '1', 
+    Small: '1',
     Medium: '2',
     Large: '3'
 });
-export type Size = (typeof Size)[keyof typeof Size];
+export type Size = (typeof Size)[keyof typeof Size];
diff --git a/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts b/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts
@@ -1096,7 +1096,7 @@ export interface GridType extends IGridDataBindable {
     /** @hidden @internal */
     activeDescendant?: string;
     /** @hidden @internal */
-    isPivot?: boolean;
+    readonly type: 'flat' | 'tree' | 'hierarchical' | 'pivot';
 
     toggleGroup?(groupRow: IGroupByRecord): void;
     clearGrouping?(field: string): void;
diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts
@@ -2949,7 +2949,9 @@ export abstract class IgxGridBaseDirective implements GridType,
     public EMPTY_DATA = [];
 
     /** @hidden @internal */
-    public isPivot = false;
+    public get type(): GridType["type"] {
+        return 'flat';
+    }
 
     /** @hidden @internal */
     public _baseFontSize: number;
@@ -7218,7 +7220,7 @@ export abstract class IgxGridBaseDirective implements GridType,
         const keysAndData = [];
         const activeEl = this.selectionService.activeElement;
 
-        if (this.nativeElement.tagName.toLowerCase() === 'igx-hierarchical-grid') {
+        if (this.type === 'hierarchical') {
             const expansionRowIndexes = [];
             for (const [key, value] of this.expansionStates.entries()) {
                 if (value) {
@@ -7255,7 +7257,7 @@ export abstract class IgxGridBaseDirective implements GridType,
         const totalItems = (this as any).totalItemCount ?? 0;
         const isRemote = totalItems && totalItems > this.dataView.length;
         let selectionMap;
-        if (this.nativeElement.tagName.toLowerCase() === 'igx-hierarchical-grid' && selectionCollection.size > 0) {
+        if (this.type === 'hierarchical' && selectionCollection.size > 0) {
             selectionMap = isRemote ? Array.from(selectionCollection) :
                 Array.from(selectionCollection).filter((tuple) => tuple[0] < source.length);
         } else {
@@ -7287,9 +7289,9 @@ export abstract class IgxGridBaseDirective implements GridType,
                 columnsArray = this.getSelectableColumnsAt(each);
                 columnsArray.forEach((col) => {
                     if (col) {
-                        const key = !this.isPivot && headers ? col.header || col.field : col.field;
+                        const key = this.type !== 'pivot' && headers ? col.header || col.field : col.field;
                         const rowData = source[row].ghostRecord ? source[row].recordRef : source[row];
-                        const value = this.isPivot ? rowData.aggregationValues.get(col.field)
+                        const value = this.type === 'pivot' ? rowData.aggregationValues.get(col.field)
                             : resolveNestedPath(rowData, col.field);
                         record[key] = formatters && col.formatter ? col.formatter(value, rowData) : value;
                         if (columnData) {
diff --git a/projects/igniteui-angular/src/lib/grids/grid-public-row.ts b/projects/igniteui-angular/src/lib/grids/grid-public-row.ts
@@ -1,6 +1,6 @@
 import { IGroupByRecord } from '../data-operations/groupby-record.interface';
 import { IgxAddRow, IgxEditRow } from './common/crud.service';
-import { GridInstanceType, GridSummaryCalculationMode, GridSummaryPosition } from './common/enums';
+import { GridSummaryCalculationMode, GridSummaryPosition } from './common/enums';
 import { IgxGridCell } from './grid-public-cell';
 import { IgxSummaryResult } from './summaries/grid-summary';
 import { ITreeGridRecord } from './tree-grid/tree-grid.interfaces';
@@ -705,12 +705,6 @@ export class IgxSummaryRow implements RowType {
      */
     public isSummaryRow: boolean;
 
-
-    /**
-     * Returns the curent grid type
-     */
-    private gridType: GridInstanceType;
-
     /**
      * The IGroupByRecord object, representing the group record, if the row is a GroupByRow.
      */
@@ -723,7 +717,7 @@ export class IgxSummaryRow implements RowType {
      */
     public get viewIndex(): number {
         if (this.grid.hasSummarizedColumns && this.grid.page > 0) {
-            if (this.gridType === GridInstanceType.Grid) {
+            if (this.grid.type === 'flat') {
                 if (this.grid.page) {
                     const precedingDetailRows = [];
                     const precedingGroupRows = [];
@@ -764,7 +758,7 @@ export class IgxSummaryRow implements RowType {
                 } else {
                     return this.index;
                 }
-            } else if (this.gridType === GridInstanceType.TreeGrid) {
+            } else if (this.grid.type === 'tree') {
                 if (this.grid.summaryCalculationMode !== GridSummaryCalculationMode.rootLevelOnly) {
                     const firstRowIndex = this.grid.processedExpandedFlatData.indexOf(this.grid.dataView[0].data);
                     const precedingSummaryRows = this.grid.summaryPosition === GridSummaryPosition.bottom ?
@@ -783,12 +777,11 @@ export class IgxSummaryRow implements RowType {
      */
     constructor(
         grid: GridType,
-        index: number, private _summaries?: Map<string, IgxSummaryResult[]>, type?: GridInstanceType
+        index: number, private _summaries?: Map<string, IgxSummaryResult[]>,
     ) {
         this.grid = grid;
         this.index = index;
         this.isSummaryRow = true;
-        this.gridType = type;
     }
 
     private getRootParent(row: ITreeGridRecord): ITreeGridRecord {
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts
@@ -23,7 +23,7 @@ import { IgxGridSummaryService } from '../summaries/grid-summary.service';
 import { IgxGridSelectionService } from '../selection/selection.service';
 import { IgxForOfSyncService, IgxForOfScrollSyncService } from '../../directives/for-of/for_of.sync.service';
 import { IgxGridMRLNavigationService } from '../grid-mrl-navigation.service';
-import { FilterMode, GridInstanceType } from '../common/enums';
+import { FilterMode } from '../common/enums';
 import { CellType, GridType, IgxGridMasterDetailContext, IgxGroupByRowSelectorTemplateContext, IgxGroupByRowTemplateContext, IGX_GRID_BASE, IGX_GRID_SERVICE_BASE, RowType } from '../common/grid.interface';
 import { IgxGroupByRowSelectorDirective } from '../selection/row-selectors';
 import { IgxGridCRUDService } from '../common/crud.service';
@@ -1233,7 +1233,7 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
             row = new IgxGroupByRow(this, index, rec);
         }
         if (rec && this.isSummaryRow(rec)) {
-            row = new IgxSummaryRow(this, index, rec.summaries, GridInstanceType.Grid);
+            row = new IgxSummaryRow(this, index, rec.summaries);
         }
         // if found record is a no a groupby or summary row, return IgxGridRow instance
         if (!row && rec) {
diff --git a/projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.html b/projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.html
@@ -67,7 +67,7 @@
         <ng-container *ngTemplateOutlet="column.headerTemplate ? column.headerTemplate : defaultColumn; context: { $implicit: column, column: column}">
         </ng-container>
     </div>
-    <div class="igx-grid-thead__group" *ngIf='!grid.isPivot'>
+    <div class="igx-grid-thead__group" *ngIf="grid.type !== 'pivot'">
         <ng-container *ngFor="let child of column.children">
             <igx-grid-header-group *ngIf="!child.hidden" class="igx-grid-thead__subgroup"
                 [ngClass]="child.headerGroupClasses"
diff --git a/projects/igniteui-angular/src/lib/grids/headers/grid-header.component.ts b/projects/igniteui-angular/src/lib/grids/headers/grid-header.component.ts
@@ -110,7 +110,7 @@ export class IgxGridHeaderComponent implements DoCheck, OnDestroy {
 
     @HostBinding('style.height.rem')
     public get height() {
-        if (!this.grid.hasColumnGroups || this.grid.isPivot) {
+        if (!this.grid.hasColumnGroups || this.grid.type === 'pivot') {
             return null;
         }
 
diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid-base.directive.ts
@@ -89,6 +89,11 @@ export abstract class IgxHierarchicalGridBaseDirective extends IgxGridBaseDirect
     @Output()
     public dataPreLoad = new EventEmitter<IForOfState>();
 
+    /** @hidden @internal */
+    public override get type(): GridType["type"] {
+        return 'hierarchical';
+    }
+
     /**
      * @hidden
      */
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts
@@ -632,7 +632,9 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
         return this.pivotConfiguration.pivotKeys || DEFAULT_PIVOT_KEYS;
     }
     /** @hidden @internal */
-    public override isPivot = true;
+    public override get type(): GridType["type"] {
+        return 'pivot';
+    }
 
     /**
      * @hidden @internal
diff --git a/projects/igniteui-angular/src/lib/grids/row-drag.directive.ts b/projects/igniteui-angular/src/lib/grids/row-drag.directive.ts
@@ -161,7 +161,7 @@ export class IgxRowDragDirective extends IgxDragDirective implements OnDestroy {
     };
 
     private get isHierarchicalGrid() {
-        return this.row.grid.nativeElement.tagName.toLowerCase() === 'igx-hierarchical-grid';
+        return this.row.grid.type === 'hierarchical';
     }
 }
 
diff --git a/projects/igniteui-angular/src/lib/grids/selection/selection.service.ts b/projects/igniteui-angular/src/lib/grids/selection/selection.service.ts
@@ -390,7 +390,7 @@ export class IgxGridSelectionService {
     }
 
     public getSelectedRowsData() {
-        if (this.grid.isPivot) {
+        if (this.grid.type === 'pivot') {
             return this.grid.dataView.filter(r => {
                 const keys = r.dimensions.map(d => PivotUtil.getRecordKey(r, d));
                 return keys.some(k => this.isPivotRowSelected(k));
@@ -441,11 +441,11 @@ export class IgxGridSelectionService {
 
     /** Select the specified row and emit event. */
     public selectRowById(rowID, clearPrevSelection?, event?): void {
-        if (!(this.grid.isRowSelectable || this.grid.isPivot) || this.isRowDeleted(rowID)) {
+        if (!(this.grid.isRowSelectable || this.grid.type === 'pivot') || this.isRowDeleted(rowID)) {
             return;
         }
         clearPrevSelection = !this.grid.isMultiRowSelectionEnabled || clearPrevSelection;
-        if (this.grid.isPivot) {
+        if (this.grid.type === 'pivot') {
             this.selectPivotRowById(rowID, clearPrevSelection, event);
             return;
         }
@@ -469,7 +469,7 @@ export class IgxGridSelectionService {
         if (!this.isRowSelected(rowID)) {
             return;
         }
-        if(this.grid.isPivot) {
+        if(this.grid.type === 'pivot') {
             this.deselectPivotRowByID(rowID, event);
             return;
         }
diff --git a/projects/igniteui-angular/src/lib/grids/summaries/grid-summary.service.ts b/projects/igniteui-angular/src/lib/grids/summaries/grid-summary.service.ts
@@ -57,15 +57,15 @@ export class IgxGridSummaryService {
         if (this.summaryCacheMap.size === 1 && this.summaryCacheMap.has(this.rootSummaryID)) {
             return;
         }
-        if (this.isTreeGrid) {
+        if (this.grid.type === 'tree') {
             if (this.grid.transactions.enabled && this.deleteOperation) {
                 this.deleteOperation = false;
                 // TODO: this.removeChildRowSummaries(rowID, columnName);
                 this.summaryCacheMap.clear();
                 return;
             }
             this.removeAllTreeGridSummaries(rowID, columnName);
-        } else if (this.isHierarchicalGrid) {
+        } else if (this.grid.type === 'hierarchical') {
             if (this.grid.transactions.enabled && this.deleteOperation) {
                 this.deleteOperation = false;
                 this.summaryCacheMap.clear();
@@ -244,13 +244,4 @@ export class IgxGridSummaryService {
             });
         }
     }
-
-    private get isTreeGrid() {
-        return this.grid.nativeElement.tagName.toLowerCase() === 'igx-tree-grid';
-    }
-
-    private get isHierarchicalGrid() {
-        return this.grid.nativeElement.tagName.toLowerCase() === 'igx-hierarchical-grid';
-    }
-
 }
diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.ts
@@ -47,7 +47,7 @@ import { IgxGridNavigationService } from '../grid-navigation.service';
 import { CellType, GridServiceType, GridType, IGX_GRID_BASE, IGX_GRID_SERVICE_BASE, RowType } from '../common/grid.interface';
 import { IgxColumnComponent } from '../columns/column.component';
 import { IgxTreeGridSelectionService } from './tree-grid-selection.service';
-import { GridInstanceType, GridSelectionMode } from '../common/enums';
+import { GridSelectionMode } from '../common/enums';
 import { IgxSummaryRow, IgxTreeGridRow } from '../grid-public-row';
 import { IgxGridCRUDService } from '../common/crud.service';
 import { IgxTreeGridGroupByAreaComponent } from '../grouping/tree-grid-group-by-area.component';
@@ -361,6 +361,11 @@ export class IgxTreeGridComponent extends IgxGridBaseDirective implements GridTy
         this.cdr.markForCheck();
     }
 
+    /** @hidden @internal */
+    public override get type(): GridType["type"] {
+        return 'tree';
+    }
+
     /**
      * Get transactions service for the grid.
      *
@@ -936,7 +941,7 @@ export class IgxTreeGridComponent extends IgxGridBaseDirective implements GridTy
         const rec: any = data ?? this.dataView[dataIndex];
 
         if (this.isSummaryRow(rec)) {
-            row = new IgxSummaryRow(this as any, index, rec.summaries, GridInstanceType.TreeGrid);
+            row = new IgxSummaryRow(this as any, index, rec.summaries);
         }
 
         if (!row && rec) {
diff --git a/projects/igniteui-angular/src/lib/grids/watch-changes.ts b/projects/igniteui-angular/src/lib/grids/watch-changes.ts
@@ -82,15 +82,15 @@ export function notifyChanges(repaint = false) {
             if (originalSetter) {
                 originalSetter.call(this, newValue);
                 if (this.grid) {
-                    this.grid.notifyChanges(repaint && !this.grid.isPivot);
+                    this.grid.notifyChanges(repaint && this.type !== 'pivot');
                 }
             } else {
                 if (newValue === this[key]) {
                     return;
                 }
                 this[privateKey] = newValue;
                 if (this.grid) {
-                    this.grid.notifyChanges(repaint && !this.grid.isPivot);
+                    this.grid.notifyChanges(repaint && this.type !== 'pivot');
                 }
             }
         };
diff --git a/projects/igniteui-angular/src/lib/services/exporter-common/base-export-service.ts b/projects/igniteui-angular/src/lib/services/exporter-common/base-export-service.ts
@@ -244,17 +244,16 @@ export abstract class IgxBaseExporter {
         }
 
         const columnList = this.getColumns(columns);
-        const tagName = grid.nativeElement.tagName.toLowerCase();
 
-        if (tagName === 'igx-hierarchical-grid') {
+        if (grid.type === 'hierarchical') {
             this._ownersMap.set(grid, columnList);
 
             const childLayoutList = grid.childLayoutList;
 
             for (const island of childLayoutList) {
                 this.mapHierarchicalGridColumns(island, grid.data[0]);
             }
-        } else if (tagName === 'igx-pivot-grid') {
+        } else if (grid.type === 'pivot') {
             this.pivotGridColumns = [];
             this.isPivotGridExport = true;
             this.pivotGridKeyValueMap = new Map<string, string>();
@@ -540,24 +539,23 @@ export abstract class IgxBaseExporter {
 
     private prepareData(grid: GridType) {
         this.flatRecords = [];
-        const tagName = grid.nativeElement.tagName.toLowerCase();
         const hasFiltering = (grid.filteringExpressionsTree && grid.filteringExpressionsTree.filteringOperands.length > 0) ||
             (grid.advancedFilteringExpressionsTree && grid.advancedFilteringExpressionsTree.filteringOperands.length > 0);
         const expressions = grid.groupingExpressions ? grid.groupingExpressions.concat(grid.sortingExpressions || []) : grid.sortingExpressions;
         const hasSorting = expressions && expressions.length > 0;
         let setSummaryOwner = false;
 
-        switch (tagName) {
-            case 'igx-pivot-grid': {
+        switch (grid.type) {
+            case 'pivot': {
                 this.preparePivotGridData(grid);
                 break;
             }
-            case 'igx-hierarchical-grid': {
+            case 'hierarchical': {
                 this.prepareHierarchicalGridData(grid, hasFiltering, hasSorting);
                 setSummaryOwner = true;
                 break;
             }
-            case 'igx-tree-grid': {
+            case 'tree': {
                 this.prepareTreeGridData(grid, hasFiltering, hasSorting);
                 break;
             }
@@ -1300,7 +1298,7 @@ export abstract class IgxBaseExporter {
     }
 
     private addPivotGridColumns(grid: any) {
-        if (grid.nativeElement.tagName.toLowerCase() !== 'igx-pivot-grid') {
+        if (grid.type !== 'pivot') {
             return;
         }
 

Original file line number	Diff line number	Diff line change
`@@ -110,7 +110,7 @@ export class IgxGridHeaderComponent implements DoCheck, OnDestroy {`
`110`	`110`
`111`	`111`	`@HostBinding('style.height.rem')`
`112`	`112`	`public get height() {`
`113`		`- if (!this.grid.hasColumnGroups \|\| this.grid.isPivot) {`
	`113`	`+ if (!this.grid.hasColumnGroups \|\| this.grid.type === 'pivot') {`
`114`	`114`	`return null;`
`115`	`115`	`}`
`116`	`116`