feat(h-grid): add support for advanced filtering

CHANGELOG.md

@@ -13,6 +13,13 @@ All notable changes for each version of this project will be documented in this
     - A column's `minWidth` and `maxWidth` constrain the user-specified `width` so that it cannot go outside their bounds.
     - In SSR mode grid with height 100% or with no height will render on the server with % size and with no data. The grid will show either the empty grid template or the loading indicator (if isLoading is true).
     - In SSR mode grid with width 100% or with no width will render on the server with % size and with all columns.
+- `IgxHierarchicalGrid`
+    - Introduced a new advanced filtering capability that enables top-level records to be dynamically refined based on the attributes or data of their associated child records.
+    - Added a new `schema` input property that can be used to pass collection of `EntityType` objects. This property is required for remote data scenarios.
+- `IgxQueryBuilderComponent`, `IgxAdvancedFilteringDialogComponent`
+    - Added support for entities with hierarchical structure.
+- `EntityType`
+    - A new optional property called `childEntities` has been introduced that can be used to create nested entities.
 
 ## 19.1.1
 ### New Features
@@ -30,7 +37,7 @@ All notable changes for each version of this project will be documented in this
     - Introduced a new `expanded` input property, enabling dynamic control over the banner's state. The banner can now be programmatically set to expanded (visible) or collapsed (hidden) both initially and at runtime. Animations will trigger during runtime updates — the **open animation** plays when `expanded` is set to `true`, and the **close animation** plays when set to `false`. However, no animations will trigger when the property is set initially.
     - The banner's event lifecycle (`opening`, `opened`, `closing`, `closed`) only triggers through **user interactions** (e.g., clicking to open/close). Programmatic updates using the `expanded` property will not fire any events.
     - If the `expanded` property changes during an ongoing animation, the current animation will **stop** and the opposite animation will begin from the **point where the previous animation left off**. For instance, if the open animation (10 seconds) is interrupted at 6 seconds and `expanded` is set to `false`, the close animation (5 seconds) will start from its 3rd second.
-- `IgxQueryBuilder` has new design that comes with updated appearance and new functionality
+- `IgxQueryBuilder` has a new design that comes with an updated appearance and new functionality
     - `IgxQueryBuilderComponent`
         - Introduced the ability to create nested queries by specifying IN/NOT IN operators.
         - Introduced the ability to reposition condition chips by dragging or using `Arrow Up/Down`.

projects/igniteui-angular-elements/src/analyzer/elements.config.ts

@@ -7,20 +7,20 @@ import {
 } from "../../../igniteui-angular/src/public_api";
 import { IgxPaginatorComponent } from "../../../igniteui-angular/src/lib/paginator/paginator.component";
 import { IgxPaginatorToken } from "../../../igniteui-angular/src/lib/paginator/token";
-import { IgxActionStripComponent } from "../../../igniteui-angular/src/lib/action-strip/action-strip.component";
-import { IgxActionStripToken } from "../../../igniteui-angular/src/lib/action-strip/token";
-import { IgxGridEditingActionsComponent } from "../../../igniteui-angular/src/lib/action-strip/grid-actions/grid-editing-actions.component";
-import { IgxGridActionsBaseDirective } from "../../../igniteui-angular/src/lib/action-strip/grid-actions/grid-actions-base.directive";
-import { IgxGridPinningActionsComponent } from "../../../igniteui-angular/src/lib/action-strip/grid-actions/grid-pinning-actions.component";
-import { IgxColumnComponent } from "../../../igniteui-angular/src/lib/grids/columns/column.component";
-import { IgxColumnGroupComponent } from "../../../igniteui-angular/src/lib/grids/columns/column-group.component";
-import { IgxColumnLayoutComponent } from "../../../igniteui-angular/src/lib/grids/columns/column-layout.component";
 import { IgxGridToolbarTitleComponent } from "../../../igniteui-angular/src/lib/grids/toolbar/common";
 import { IgxGridToolbarActionsComponent } from "../../../igniteui-angular/src/lib/grids/toolbar/common";
 import { IgxGridToolbarAdvancedFilteringComponent } from "../../../igniteui-angular/src/lib/grids/toolbar/grid-toolbar-advanced-filtering.component";
 import { IgxGridToolbarComponent } from "../../../igniteui-angular/src/lib/grids/toolbar/grid-toolbar.component";
 import { IgxToolbarToken } from "../../../igniteui-angular/src/lib/grids/toolbar/token";
+import { IgxColumnComponent } from "../../../igniteui-angular/src/lib/grids/columns/column.component";
+import { IgxColumnGroupComponent } from "../../../igniteui-angular/src/lib/grids/columns/column-group.component";
 import { IgxRowIslandComponent } from "../../../igniteui-angular/src/lib/grids/hierarchical-grid/row-island.component";
+import { IgxActionStripComponent } from "../../../igniteui-angular/src/lib/action-strip/action-strip.component";
+import { IgxActionStripToken } from "../../../igniteui-angular/src/lib/action-strip/token";
+import { IgxGridEditingActionsComponent } from "../../../igniteui-angular/src/lib/action-strip/grid-actions/grid-editing-actions.component";
+import { IgxGridActionsBaseDirective } from "../../../igniteui-angular/src/lib/action-strip/grid-actions/grid-actions-base.directive";
+import { IgxGridPinningActionsComponent } from "../../../igniteui-angular/src/lib/action-strip/grid-actions/grid-pinning-actions.component";
+import { IgxColumnLayoutComponent } from "../../../igniteui-angular/src/lib/grids/columns/column-layout.component";
 import { IgxGridToolbarExporterComponent } from "../../../igniteui-angular/src/lib/grids/toolbar/grid-toolbar-exporter.component";
 import { IgxGridToolbarHidingComponent } from "../../../igniteui-angular/src/lib/grids/toolbar/grid-toolbar-hiding.component";
 import { IgxGridToolbarPinningComponent } from "../../../igniteui-angular/src/lib/grids/toolbar/grid-toolbar-pinning.component";

projects/igniteui-angular/src/lib/data-operations/expressions-tree-util.ts

@@ -178,16 +178,17 @@ export function isTree(entry: IExpressionTree | IFilteringExpression): entry is
  * @param entities An array of entities to use for recreating the tree.
  * @returns The recreated expression tree.
  */
-export function recreateTree(tree: IExpressionTree, entities: EntityType[]): IExpressionTree {
-    const entity = entities.find(e => e.name === tree.entity);
+export function recreateTree(tree: IExpressionTree, entities: EntityType[], isRoot: boolean = false): IExpressionTree {
+    const entity = isRoot ? entities[0] : entities.find(e => e.name === tree.entity);
+    if (!entity) return tree;
 
     for (let i = 0; i < tree.filteringOperands.length; i++) {
         const operand = tree.filteringOperands[i];
         if (isTree(operand)) {
             tree.filteringOperands[i] = recreateTree(operand, entities);
         } else {
             if (operand.searchTree) {
-                operand.searchTree = recreateTree(operand.searchTree, entities);
+                operand.searchTree = recreateTree(operand.searchTree, entities[0].childEntities ?? entities);
             }
             tree.filteringOperands[i] = recreateExpression(operand, entity?.fields);
         }

projects/igniteui-angular/src/lib/data-operations/filtering-strategy.ts

@@ -1,12 +1,13 @@
 import { FilteringLogic, IFilteringExpression } from './filtering-expression.interface';
 import { FilteringExpressionsTree, IFilteringExpressionsTree } from './filtering-expressions-tree';
 import { resolveNestedPath, parseDate, formatDate, formatCurrency } from '../core/utils';
-import { ColumnType, GridType } from '../grids/common/grid.interface';
+import { ColumnType, EntityType, GridType } from '../grids/common/grid.interface';
 import { GridColumnDataType } from './data-util';
 import { SortingDirection } from './sorting-strategy';
 import { formatNumber, formatPercent, getLocaleCurrencyCode } from '@angular/common';
 import { IFilteringState } from './filtering-state.interface';
 import { isTree } from './expressions-tree-util';
+import { IgxHierarchicalGridComponent } from '../grids/hierarchical-grid/hierarchical-grid.component';
 
 const DateType = 'date';
 const DateTimeType = 'dateTime';
@@ -39,14 +40,34 @@ export interface IgxFilterItem {
 export abstract class BaseFilteringStrategy implements IFilteringStrategy  {
     // protected
     public findMatchByExpression(rec: any, expr: IFilteringExpression, isDate?: boolean, isTime?: boolean, grid?: GridType): boolean {
+        if (expr.searchTree) {
+            const records = rec[expr.searchTree.entity];
+            const shouldMatchRecords = expr.conditionName === 'inQuery';
+            if (!records) { // child grid is not yet created
+                return true;
+            } else if (records.length === 0) { // child grid is empty
+                return false;
+            }
+
+            for (let index = 0; index < records.length; index++) {
+                const record = records[index];
+                if ((shouldMatchRecords && this.matchRecord(record, expr.searchTree, grid, expr.searchTree.entity)) ||
+                    (!shouldMatchRecords && !this.matchRecord(record, expr.searchTree, grid, expr.searchTree.entity))) {
+                    return true;
+                }
+            }
+
+            return false;
+        }
+
         const val = this.getFieldValue(rec, expr.fieldName, isDate, isTime, grid);
         if (expr.condition?.logic) {
             return expr.condition.logic(val, expr.searchVal, expr.ignoreCase);
         }
     }
 
     // protected
-    public matchRecord(rec: any, expressions: IFilteringExpressionsTree | IFilteringExpression, grid?: GridType): boolean {
+    public matchRecord(rec: any, expressions: IFilteringExpressionsTree | IFilteringExpression, grid?: GridType, entity?: string): boolean {
         if (expressions) {
             if (isTree(expressions)) {
                 const expressionsTree = expressions;
@@ -55,7 +76,7 @@ export abstract class BaseFilteringStrategy implements IFilteringStrategy  {
 
                 if (expressionsTree.filteringOperands && expressionsTree.filteringOperands.length) {
                     for (const operand of expressionsTree.filteringOperands) {
-                        matchOperand = this.matchRecord(rec, operand, grid);
+                        matchOperand = this.matchRecord(rec, operand, grid, entity);
 
                         // Return false if at least one operand does not match and the filtering logic is And
                         if (!matchOperand && operator === FilteringLogic.And) {
@@ -74,16 +95,42 @@ export abstract class BaseFilteringStrategy implements IFilteringStrategy  {
                 return true;
             } else {
                 const expression = expressions;
-                const column = grid && grid.getColumnByName(expression.fieldName);
-                const isDate = column ? column.dataType === DateType || column.dataType === DateTimeType : false;
-                const isTime = column ? column.dataType === TimeType : false;
+                let dataType = null;
+                if (!entity) {
+                    const column = grid && grid.getColumnByName(expression.fieldName);
+                    dataType = column?.dataType;
+                } else if (grid.type === 'hierarchical') {
+                    const schema = (grid as IgxHierarchicalGridComponent).schema;
+                    const entityMatch = this.findEntityByName(schema, entity);
+                    dataType = entityMatch?.fields.find(f => f.field === expression.fieldName)?.dataType;
+                }
+
+                const isDate = dataType ? dataType === DateType || dataType === DateTimeType : false;
+                const isTime = dataType ? dataType === TimeType : false;
+
                 return this.findMatchByExpression(rec, expression, isDate, isTime, grid);
             }
         }
 
         return true;
     }
 
+    private findEntityByName(schema: EntityType[], name: string): EntityType | null {
+        for (const entity of schema) {
+            if (entity.name === name) {
+                return entity;
+            }
+
+            if (entity.childEntities && entity.childEntities.length > 0) {
+                const found = this.findEntityByName(entity.childEntities, name);
+                if (found) {
+                    return found;
+                }
+            }
+        }
+        return null;
+    }
+
     public getFilterItems(column: ColumnType, tree: IFilteringExpressionsTree): Promise<IgxFilterItem[]> {
 
         let data = column.grid.gridAPI.filterDataByExpressions(tree);

projects/igniteui-angular/src/lib/grids/common/grid.interface.ts

@@ -1497,4 +1497,5 @@ export interface IClipboardOptions {
 export interface EntityType {
     name: string;
     fields: FieldType[];
+    childEntities?: EntityType[];
 }

projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.ts

@@ -6,7 +6,7 @@ import { IDragStartEventArgs, IgxDragDirective, IgxDragHandleDirective } from '.
 import { Subject } from 'rxjs';
 import { IActiveNode } from '../../grid-navigation.service';
 import { PlatformUtil } from '../../../core/utils';
-import { FieldType, GridType } from '../../common/grid.interface';
+import { EntityType, FieldType, GridType } from '../../common/grid.interface';
 import { IgxQueryBuilderComponent } from '../../../query-builder/query-builder.component';
 import { GridResourceStringsEN } from '../../../core/i18n/grid-resources';
 import { IFilteringExpressionsTree } from '../../../data-operations/filtering-expressions-tree';
@@ -15,6 +15,8 @@ import { IgxQueryBuilderHeaderComponent } from '../../../query-builder/query-bui
 import { NgClass } from '@angular/common';
 import { getCurrentResourceStrings } from '../../../core/i18n/resources';
 import { QueryBuilderResourceStringsEN } from '../../../core/i18n/query-builder-resources';
+import { IgxHierarchicalGridComponent } from '../../hierarchical-grid/hierarchical-grid.component';
+import { IgxRowIslandComponent } from '../../hierarchical-grid/row-island.component';
 
 /**
  * A component used for presenting advanced filtering UI for a Grid.
@@ -191,18 +193,33 @@ export class IgxAdvancedFilteringDialogComponent implements AfterViewInit, OnDes
         this.closeDialog();
     }
 
-
     /**
      * @hidden @internal
      */
     public generateEntity() {
-        const entities = [
-            {
-                name: null, 
-                fields: this.filterableFields
-            }
-        ];
-        return entities;
+        if (this.queryBuilder?.entities) {
+            return this.queryBuilder?.entities;
+        } else if (this.grid.type === 'hierarchical') {
+            return (this.grid as IgxHierarchicalGridComponent).schema;
+        } else {
+            const entities: EntityType[] = [
+                {
+                    name: null,
+                    fields: this.filterableFields.map(f => ({
+                            field: f.field,
+                            dataType: f.dataType,
+                        //  label: f.label,
+                        //  header: f.header,
+                            editorOptions: f.editorOptions,
+                            filters: f.filters,
+                            pipeArgs: f.pipeArgs,
+                            defaultTimeFormat: f.defaultTimeFormat,
+                            defaultDateTimeFormat: f.defaultDateTimeFormat
+                        })) as FieldType[]
+                }
+            ];
+            return entities;
+        }
     }
 
     private assignResourceStrings() {

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

@@ -147,7 +147,8 @@ import {
     ISizeInfo,
     RowType,
     IPinningConfig,
-    IClipboardOptions
+    IClipboardOptions,
+    EntityType
 } from './common/grid.interface';
 import { DropPosition } from './moving/moving.service';
 import { IgxHeadSelectorDirective, IgxRowSelectorDirective } from './selection/row-selectors';
@@ -179,7 +180,7 @@ import { DefaultDataCloneStrategy, IDataCloneStrategy } from '../data-operations
 import { IgxGridCellComponent } from './cell.component';
 import { IgxGridValidationService } from './grid/grid-validation.service';
 import { getCurrentResourceStrings } from '../core/i18n/resources';
-import { isTree, recreateTreeFromFields } from '../data-operations/expressions-tree-util';
+import { isTree, recreateTree, recreateTreeFromFields } from '../data-operations/expressions-tree-util';
 import { getUUID } from './common/random';
 
 interface IMatchInfoCache {
@@ -1859,7 +1860,7 @@ export abstract class IgxGridBaseDirective implements GridType,
 
             value.type = FilteringExpressionsTreeType.Regular;
             if (value && this._columns?.length > 0) {
-                this._filteringExpressionsTree = recreateTreeFromFields(value, this._columns) as IFilteringExpressionsTree;
+                this._filteringExpressionsTree = this.getRecreatedTree(value);
             } else {
                 this._filteringExpressionsTree = value;
             }
@@ -1909,7 +1910,7 @@ export abstract class IgxGridBaseDirective implements GridType,
         if (value && isTree(value)) {
             value.type = FilteringExpressionsTreeType.Advanced;
             if (this._columns && this._columns.length > 0) {
-                this._advancedFilteringExpressionsTree = recreateTreeFromFields(value, this._columns) as IFilteringExpressionsTree;
+                this._advancedFilteringExpressionsTree = this.getRecreatedTree(value);
             } else {
                 this._advancedFilteringExpressionsTree = value;
             }
@@ -3138,6 +3139,7 @@ export abstract class IgxGridBaseDirective implements GridType,
         matchCount: 0,
         content: ''
     };
+    protected _hGridSchema: EntityType[];
     protected gridComputedStyles;
 
     /** @hidden @internal */
@@ -6638,10 +6640,10 @@ export abstract class IgxGridBaseDirective implements GridType,
         this._unpinnedColumns = newColumns.filter((c) => !c.pinned);
         this._columns = newColumns;
         if (this._columns && this._columns.length && this._filteringExpressionsTree) {
-            this._filteringExpressionsTree = recreateTreeFromFields(this._filteringExpressionsTree, this.columns) as IFilteringExpressionsTree;
+            this._filteringExpressionsTree = this.getRecreatedTree(this._filteringExpressionsTree);
         }
         if (this._columns && this._columns.length && this._advancedFilteringExpressionsTree) {
-            this._advancedFilteringExpressionsTree = recreateTreeFromFields(this._advancedFilteringExpressionsTree, this.columns) as IFilteringExpressionsTree;
+            this._advancedFilteringExpressionsTree = this.getRecreatedTree(this._advancedFilteringExpressionsTree);
         }
         this.resetCaches();
     }
@@ -6706,10 +6708,10 @@ export abstract class IgxGridBaseDirective implements GridType,
             this._columns = this.getColumnList();
         }
         if (this._columns && this._columns.length && this._filteringExpressionsTree) {
-            this._filteringExpressionsTree = recreateTreeFromFields(this._filteringExpressionsTree, this._columns) as IFilteringExpressionsTree;
+            this._filteringExpressionsTree = this.getRecreatedTree(this._filteringExpressionsTree);
         }
         if (this._columns && this._columns.length && this._advancedFilteringExpressionsTree) {
-            this._advancedFilteringExpressionsTree = recreateTreeFromFields(this._advancedFilteringExpressionsTree, this._columns) as IFilteringExpressionsTree;
+            this._advancedFilteringExpressionsTree = this.getRecreatedTree(this._advancedFilteringExpressionsTree);
         }
 
         this.initColumns(this._columns, (col: IgxColumnComponent) => this.columnInit.emit(col));
@@ -7922,4 +7924,12 @@ export abstract class IgxGridBaseDirective implements GridType,
         this.navigation.activeNode = {} as IActiveNode;
         this.notifyChanges();
     }
+
+    private getRecreatedTree(value: IFilteringExpressionsTree): IFilteringExpressionsTree {
+        if (this._hGridSchema) {
+            return recreateTree(value, this._hGridSchema, true) as IFilteringExpressionsTree;
+        } else {
+            return recreateTreeFromFields(value, this._columns) as IFilteringExpressionsTree;
+        }
+    }
 }