feat(h-grid): add fields for child entities and not show select entity if nested

igdmdimitrov · igdmdimitrov · commit 76129481805d · 2025-04-10T19:46:05.000+03:00
diff --git a/projects/igniteui-angular/src/lib/data-operations/filtering-condition.ts b/projects/igniteui-angular/src/lib/data-operations/filtering-condition.ts
@@ -50,6 +50,13 @@ export class IgxFilteringOperand {
     public conditionList(): string[] {
         return this.operations.filter(f => !f.hidden && !f.isNestedQuery).map((element) => element.name);
     }
+    
+    /**
+     * Returns "In" and "Not In" conditions
+     */
+    public nestedConditionList(): string[] {
+        return this.operations.filter(f => !f.hidden && f.isNestedQuery).map((element) => element.name);
+    }
 
     /**
      * Returns an array of names of the conditions which are visible in the UI, including "In" and "Not In", allowing the creation of sub-queries.
diff --git a/projects/igniteui-angular/src/lib/query-builder/query-builder-tree.component.html b/projects/igniteui-angular/src/lib/query-builder/query-builder-tree.component.html
@@ -7,7 +7,7 @@
 </ng-template>
 
 <ng-template #selectFromTemplate>
-    <div class="igx-filter-tree__inputs" [style.display]="(isInEditMode() && (!this.isAdvancedFiltering() || this.isHierarchicalGridNestedQuery())) ? 'flex' : 'none'">
+    <div class="igx-filter-tree__inputs" [style.display]="(isInEditMode() && (!this.isAdvancedFiltering() && !this.isHierarchicalGridNestedQuery())) ? 'flex' : 'none'">
         <div class="igx-filter-tree__inputs-field">
             <span class="igx-query-builder__label">From</span>
             <igx-select #entitySelect
@@ -69,7 +69,7 @@
                     </ng-template>
                 </igx-combo>
             }
-            @else if (!this.isAdvancedFiltering() && !this.isHierarchicalGridNestedQuery()) {
+            @else {
                 <igx-select #returnFieldSelect
                     type="box"
                     (selectionChanging)="onReturnFieldSelectChanging($event)"
@@ -466,7 +466,7 @@
                 <ng-container>
                     <igx-query-builder-tree
                         [style.display]="expressionItem.inEditMode || expressionItem.expanded ? 'block' : 'none'"
-                        [entities]="(this.selectedEntity ? this.selectedEntity.childEntities : entities[0].childEntities) ?? entities"
+                        [entities]="determineEntities()"
                         [queryBuilder]="this.queryBuilder"
                         [parentExpression]="expressionItem"
                         [expressionTree]="expressionItem.inEditMode ? (innerQueryNewExpressionTree ?? getExpressionTreeCopy(expressionItem.expression.searchTree, true)) : expressionItem.expression.searchTree"
diff --git a/projects/igniteui-angular/src/lib/query-builder/query-builder-tree.component.ts b/projects/igniteui-angular/src/lib/query-builder/query-builder-tree.component.ts
@@ -517,7 +517,8 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy {
     /** @hidden */
     protected isAdvancedFiltering(): boolean {
         return (this.entities?.length === 1 && !this.entities[0]?.name) ||
-            this.entities.find(e => e.childEntities?.length > 0) !== undefined;
+            this.entities.find(e => e.childEntities?.length > 0) !== undefined ||
+            this.entities !== this.queryBuilder.entities;
     }
 
     /** @hidden */
@@ -555,6 +556,7 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy {
         this.addExpressionDropDownOverlaySettings.outlet = this.overlayOutlet;
         this.groupContextMenuDropDownOverlaySettings.outlet = this.overlayOutlet;
         
+        console.log('ngAfterViewInit', this._expressionTree);
         if (this.isAdvancedFiltering() && this.entities?.length === 1) {
             this._selectedEntity = this.entities[0];
         }
@@ -575,6 +577,7 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy {
      * @hidden @internal
      */
     public set selectedEntity(value: string) {
+        console.log('selectedEntity', value);
         this._selectedEntity = this.entities?.find(el => el.name === value);
     }
 
@@ -691,6 +694,10 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy {
 
         if (this._selectedField !== value) {
             this._selectedField = value;
+            if (this._selectedField && !this._selectedField.dataType) {
+                this._selectedField.filters = this.getFilters(this._selectedField);
+            }
+
             this.selectDefaultCondition();
             if (oldValue && this._selectedField && this._selectedField.dataType !== oldValue.dataType) {
                 this.searchValue.value = null;
@@ -1368,9 +1375,16 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy {
     public getConditionList(): string[] {
         if (!this.selectedField) return [];
 
-        if ((this.isAdvancedFiltering() && !this.entities[0].childEntities) ||
-            (this.isHierarchicalGridNestedQuery() && this.selectedEntity.name && !this.selectedEntity.childEntities)) {
-            return this.selectedField.filters.conditionList();
+        if (!this.selectedField.filters) {
+            this.selectedField.filters = this.getFilters(this.selectedField);
+        }
+
+        if (this.isAdvancedFiltering()) {
+            if (!this.selectedField.dataType) { // field was generated for child entity
+                return this.selectedField.filters.nestedConditionList();
+            } else {
+                return this.selectedField.filters.conditionList();
+            }
         }
 
         return this.selectedField.filters.extendedConditionList();
@@ -1436,6 +1450,16 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy {
         }
     }
 
+    public determineEntities(): EntityType[] {
+        // TODO: FIX, not working correctly for every scenario
+
+        if (this.entities.length === 1 && this.entities[0].childEntities && this.selectedField) {
+            return this.entities[0].childEntities.filter(e => e.name === this.selectedField.field);
+        }
+
+        return (this.selectedEntity ? this.selectedEntity.childEntities : this.entities[0].childEntities) ?? this.entities;
+    }
+
     public getExpressionTreeCopy(expressionTree: IExpressionTree, shouldAssignInnerQueryExprTree?: boolean): IExpressionTree {
         if (!expressionTree) {
             return null;
@@ -1512,8 +1536,12 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy {
     }
 
     private selectDefaultCondition() {
-        if (this.selectedField && this.selectedField.filters) {
-            this.selectedCondition = this.selectedField.filters.conditionList().indexOf('equals') >= 0 ? 'equals' : this.selectedField.filters.conditionList()[0];
+        if (this.selectedField) {
+            if (!this.selectedField.dataType) {
+                this.selectedCondition = 'inQuery';
+            } else {
+                this.selectedCondition = this.selectedField.filters.conditionList().indexOf('equals') >= 0 ? 'equals' : this.selectedField.filters.conditionList()[0];
+            }
         }
     }
 
diff --git a/projects/igniteui-angular/src/lib/query-builder/query-builder.component.ts b/projects/igniteui-angular/src/lib/query-builder/query-builder.component.ts
@@ -64,6 +64,10 @@ export class IgxQueryBuilderComponent implements OnDestroy {
      */
     @Input()
     public set entities(entities: EntityType[]) {
+        if (entities) {
+            this.updateEntities(entities) // add field for every child entity recursively
+        }
+
         if (entities !== this._entities) {
             if (entities && this.expressionTree) {
                 this._expressionTree = recreateTree(this._expressionTree, entities);
@@ -270,6 +274,20 @@ export class IgxQueryBuilderComponent implements OnDestroy {
         }
     }
 
+    private updateEntities(entities: EntityType[]) {
+        entities.forEach((entity) => {
+            if (entity.childEntities) {
+                entity.childEntities.forEach((childEntity) => {
+                    if (entity.fields.find((f) => f.field === childEntity.name)) {
+                        return;
+                    }
+                    entity.fields.push({ field: childEntity.name, dataType: null });
+                });
+                this.updateEntities(entity.childEntities);
+            }
+        });
+    }
+
     private registerSVGIcons(): void {
         const editorIcons = editor as any[];
 
diff --git a/src/app/hierarchical-grid-advanced-filtering/hierarchical-grid-advanced-filtering.sample.ts b/src/app/hierarchical-grid-advanced-filtering/hierarchical-grid-advanced-filtering.sample.ts
@@ -30,12 +30,14 @@ export class HierarchicalGridAdvancedFilteringSampleComponent implements AfterVi
         const innerTree = new FilteringExpressionsTree(FilteringLogic.And, undefined, 'Albums', ['Artist']);
         innerTree.filteringOperands.push({
             fieldName: 'USBillboard200',
+            condition: IgxNumberFilteringOperand.instance().condition('lessThanOrEqualTo'),
             conditionName: IgxNumberFilteringOperand.instance().condition('lessThanOrEqualTo').name,
             searchVal: 5
         });
         const tree = new FilteringExpressionsTree(FilteringLogic.And, undefined, 'Artists', ['*']);
         tree.filteringOperands.push({
-            fieldName: 'Artist',
+            fieldName: 'Albums',
+            condition: IgxStringFilteringOperand.instance().condition('inQuery'),
             conditionName: IgxStringFilteringOperand.instance().condition('inQuery').name,
             searchTree: innerTree
         });
diff --git a/src/app/hierarchical-grid-remote/hierarchical-grid-remote.sample.ts b/src/app/hierarchical-grid-remote/hierarchical-grid-remote.sample.ts
@@ -78,7 +78,7 @@ export class HierarchicalGridRemoteSampleComponent implements OnInit {
 
         const customersTree = new FilteringExpressionsTree(0, undefined, 'Customers', ['customerId', 'companyName', 'contactName', 'contactTitle']);
         customersTree.filteringOperands.push({
-            fieldName: 'customerId',
+            fieldName: 'Orders',
             condition: IgxStringFilteringOperand.instance().condition('notInQuery'),
             conditionName: IgxStringFilteringOperand.instance().condition('notInQuery').name,
             ignoreCase: false,
