feat(h-grid): update adv filtering schema on row expand

CHANGELOG.md

@@ -2,6 +2,11 @@
 
 All notable changes for each version of this project will be documented in this file.
 
+## 20.2.0
+
+### General
+- `IgxHierarchicalGrid`
+    - **Deprecation** - `schema` input property has been deprecated and will be removed in a future version.
 
 ## 20.1.0
 

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

@@ -27,7 +27,7 @@ import { QueryBuilderFunctions } from '../../query-builder/query-builder-functio
 import { By } from '@angular/platform-browser';
 import { IgxDateTimeEditorDirective } from '../../directives/date-time-editor/date-time-editor.directive';
 import { QueryBuilderSelectors } from '../../query-builder/query-builder.common';
-import { IgxHGridRemoteOnDemandComponent, IgxHierarchicalGridMissingChildDataComponent } from '../hierarchical-grid/hierarchical-grid.spec';
+import { IgxHGridRemoteOnDemandComponent, IgxHierarchicalGridMissingChildDataComponent, IgxHierarchicalGridToggleRIComponent } from '../hierarchical-grid/hierarchical-grid.spec';
 import { IGridResourceStrings } from '../../core/i18n/grid-resources';
 
 describe('IgxGrid - Advanced Filtering #grid - ', () => {
@@ -1750,76 +1750,69 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => {
             expect(hgrid.filteredData.length).toBe(5);
         }));
 
-        it('Should have proper fields in UI when schema is defined with load on demand.', fakeAsync(() => {
-            const fixture = TestBed.createComponent(IgxHGridRemoteOnDemandComponent);
-            const hierarchicalGrid = fixture.componentInstance.instance;
+        it('Should update root grid schema when row island is expanded.', fakeAsync(() => {
+            const fixture = TestBed.createComponent(IgxHierarchicalGridToggleRIComponent);
+            const hierarchicalGrid = fixture.componentInstance.hgrid;
             hierarchicalGrid.allowAdvancedFiltering = true;
-            hierarchicalGrid.schema = [
-                {
-                    name: 'rootLevel',
-                    fields: [
-                        { field: 'ID', dataType: 'string' },
-                        { field: 'ChildLevels', dataType: 'number' },
-                        { field: 'ProductName', dataType: 'string' },
-                        { field: 'Col1', dataType: 'number' },
-                        { field: 'Col2', dataType: 'number' },
-                        { field: 'Col3', dataType: 'number' }
-                    ],
-                    childEntities: [
-                        {
-                            name: 'childData',
-                            fields: [
-                                { field: 'ID', dataType: 'string' },
-                                { field: 'ProductName', dataType: 'string' }
-                            ],
-                            childEntities: [
-                                {
-                                    name: 'childData2',
-                                    fields: [
-                                        { field: 'ID', dataType: 'string' },
-                                        { field: 'ProductName', dataType: 'string' }
-                                    ]
-                                }
-                            ]
-                        }
-                    ]
-                }
-            ]
             fixture.detectChanges();
 
-            hierarchicalGrid.openAdvancedFilteringDialog();
-            fixture.detectChanges();
+            // Open advanced filtering dialog and create an 'In' condition.
+            const createInConditionAndGetReturnFields = () => {
+                // Open Advanced Filtering dialog.
+                hierarchicalGrid.openAdvancedFilteringDialog();
+                fixture.detectChanges();
 
-            // Click the initial 'Add Condition' button.
-            QueryBuilderFunctions.clickQueryBuilderInitialAddConditionBtn(fixture, 0);
-            tick(100);
-            fixture.detectChanges();
-            // Populate edit inputs.
-            QueryBuilderFunctions.selectColumnInEditModeExpression(fixture, 0); // Select 'ID' column.
-            QueryBuilderFunctions.selectOperatorInEditModeExpression(fixture, 10); // Select 'In' operator.
-            tick(100);
-            fixture.detectChanges();
+                // Click the initial 'Add Condition' button.
+                QueryBuilderFunctions.clickQueryBuilderInitialAddConditionBtn(fixture, 0);
+                tick(100);
+                fixture.detectChanges();
+                // Populate edit inputs.
+                QueryBuilderFunctions.selectColumnInEditModeExpression(fixture, 0); // Select 'ID' column.
+                QueryBuilderFunctions.selectOperatorInEditModeExpression(fixture, 10); // Select 'In' operator.
+                tick(100);
+                fixture.detectChanges();
 
-            const entityInputGroup = QueryBuilderFunctions.getQueryBuilderEntitySelect(fixture, 1).querySelector('input');
-            expect(entityInputGroup.value).toBe('childData');
+                // Verify entities
+                QueryBuilderFunctions.clickQueryBuilderEntitySelect(fixture, 1);
+                fixture.detectChanges();
+                const queryBuilderElement: HTMLElement = fixture.debugElement.queryAll(By.css(`.${QueryBuilderSelectors.QUERY_BUILDER_TREE}`))[1].nativeElement;
+                let dropdownValues: string[] = QueryBuilderFunctions.getQueryBuilderSelectDropdownItems(queryBuilderElement).map((x: any) => x.innerText);
+                let expectedValues = ['childData'];
+                expect(dropdownValues).toEqual(expectedValues);
 
-            const fieldInputGroup = QueryBuilderFunctions.getQueryBuilderFieldsCombo(fixture, 1).querySelector('input');
-            expect(fieldInputGroup.value).toBe('ID');
+                // Verify return fields
+                QueryBuilderFunctions.clickQueryBuilderFieldsCombo(fixture, 1);
+                fixture.detectChanges();
+                const innerQueryReturnFields = QueryBuilderFunctions.getQueryBuilderSelectDropdown(queryBuilderElement, 1);
+
+                return innerQueryReturnFields;
+            };
+
+            let innerQueryReturnFields = createInConditionAndGetReturnFields();
+            expect(innerQueryReturnFields).toBeNull();
 
-            // Verify entities
-            QueryBuilderFunctions.clickQueryBuilderEntitySelect(fixture, 1);
+            // Close Advanced Filtering dialog.
+            hierarchicalGrid.closeAdvancedFilteringDialog(false);
+            tick(200);
             fixture.detectChanges();
-            const queryBuilderElement: HTMLElement = fixture.debugElement.queryAll(By.css(`.${QueryBuilderSelectors.QUERY_BUILDER_TREE}`))[1].nativeElement;
-            let dropdownValues: string[] = QueryBuilderFunctions.getQueryBuilderSelectDropdownItems(queryBuilderElement).map((x: any) => x.innerText);
-            let expectedValues = ['childData'];
-            expect(dropdownValues).toEqual(expectedValues);
 
-            // Verify return fileds
-            QueryBuilderFunctions.clickQueryBuilderFieldsCombo(fixture, 1);
+            // Expand row island
+            const row = hierarchicalGrid.gridAPI.get_row_by_index(0) as any;
+            UIInteractions.simulateClickAndSelectEvent(row.expander);
             fixture.detectChanges();
-            dropdownValues = QueryBuilderFunctions.getQueryBuilderSelectDropdownItems(queryBuilderElement, 1).map((x: any) => x.innerText);
-            expectedValues = ['ID', 'ProductName'];
-            expect(dropdownValues).toEqual(expectedValues);
+
+            // Open advanced filtering dialog and verify that schema is updated.
+            innerQueryReturnFields = createInConditionAndGetReturnFields();
+            expect(innerQueryReturnFields).not.toBeNull();
+            const items = Array.from(innerQueryReturnFields.querySelectorAll('.igx-drop-down__item'));
+            expect(items.length).toBe(7);
+            expect((items[0] as HTMLElement).innerText).toBe('ID');
+            expect((items[1] as HTMLElement).innerText).toBe('ChildLevels');
+            expect((items[2] as HTMLElement).innerText).toBe('ProductName');
+            expect((items[3] as HTMLElement).innerText).toBe('Col1');
+            expect((items[4] as HTMLElement).innerText).toBe('Col2');
+            expect((items[5] as HTMLElement).innerText).toBe('Col3');
+            expect((items[6] as HTMLElement).innerText).toBe('childData2');
         }));
 
         it('Should correctly change resource strings for hierarchical Advanced Filtering dialog.', fakeAsync(() => {

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

@@ -590,11 +590,10 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirecti
      * const schema = this.grid.schema;
      * this.grid.schema = [{ name: 'Products', fields: [...], childEntities: [...] }];
      * ```
+     * @deprecated in version 20.2.0.
      */
     @Input()
-    public set schema(entities: EntityType[]) {
-        this._hGridSchema = entities;
-    }
+    public set schema(entities: EntityType[]) {}
 
     /* blazorSuppress */
     public get schema() {
@@ -686,6 +685,10 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirecti
                 this.batchEditing = val;
             });
         }
+        this.columnsAutogenerated.subscribe((e) => {
+            this.updateRootGridSchema(e);
+        });
+
         super.ngOnInit();
     }
 
@@ -1238,7 +1241,7 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirecti
     }
 
     private generateSchema() {
-        const filterableFields = this.columns.filter((column) => !column.columnGroup && column.filterable);
+        const filterableFields: FieldType[] = this.columns.filter((column) => !column.columnGroup && column.filterable);
         let entities: EntityType[];
 
         if(filterableFields.length !== 0) {
@@ -1248,6 +1251,7 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirecti
                     fields: filterableFields.map(f => ({
                             field: f.field,
                             dataType: f.dataType,
+                            label: f.label,
                             header: f.header,
                             editorOptions: f.editorOptions,
                             filters: f.filters,
@@ -1259,44 +1263,62 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirecti
             ];
 
             entities[0].childEntities = this.childLayoutList.reduce((acc, rowIsland) => {
-                const childFirstRowData = this.data?.length > 0 && this.data[0][rowIsland.key]?.length > 0 ?
-                    this.data[0][rowIsland.key][0] : null;
-                return acc.concat(this.generateChildEntity(rowIsland, childFirstRowData));
+                return acc.concat(this.generateChildEntity(rowIsland));
             }
             , []);
         }
 
         return entities;
     }
 
-    private generateChildEntity(rowIsland: IgxRowIslandComponent, firstRowData: any[]): EntityType {
+    private updateRootGridSchema(event: any) {
+        const schema = (this.rootGrid as IgxHierarchicalGridComponent).schema;
+        if (!schema || schema.length === 0) {
+            return;
+        }
+
+        let path = [];
+        let parentIsland = this.parentIsland;
+        while (parentIsland) {
+            path.push(parentIsland.key);
+            parentIsland = parentIsland.parentIsland;
+        }
+
+        path.reverse();
+        if (path.length > 0) {
+            let childEntity = schema[0];
+            for (let i = 0; i < path.length; i++) {
+                childEntity = childEntity.childEntities.find(e => e.name === path[i]);
+            }
+
+            if (childEntity) {
+                childEntity.fields = event.columns.filter((column) => !column.columnGroup && column.filterable)
+                    .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[];
+            }
+        }
+    }
+
+    private generateChildEntity(rowIsland: IgxRowIslandComponent): EntityType {
         const entityName = rowIsland.key;
         let fields = [];
         let childEntities;
-        if (!rowIsland.autoGenerate) {
+        if (rowIsland.childColumns?.length > 0) {
             fields = flatten(rowIsland.childColumns.toArray()).filter(col => col.field)
                 .map(f => ({ field: f.field, dataType: f.dataType })) as FieldType[];
-        } else if (firstRowData) {
-            const rowIslandFields = Object.keys(firstRowData).map(key => {
-                if (firstRowData[key] instanceof Array) {
-                    return null;
-                }
-
-                return {
-                    field: key,
-                    dataType: this.resolveDataTypes(firstRowData[key])
-                }
-            });
-            fields = rowIslandFields.filter(f => f !== null) as FieldType[];
         }
 
         const rowIslandChildEntities = rowIsland.childLayoutList.reduce((acc, childRowIsland) => {
-            if (!firstRowData) {
-                return null;
-            }
-            const childFirstRowData = firstRowData.length > 0 && firstRowData[childRowIsland.key]?.length > 0 ?
-                firstRowData[childRowIsland.key][0] : null;
-            return acc.concat(this.generateChildEntity(childRowIsland, childFirstRowData));
+            return acc.concat(this.generateChildEntity(childRowIsland));
         }, []);
 
         if (rowIslandChildEntities?.length > 0) {

projects/igniteui-angular/src/lib/query-builder/query-builder-tree.component.ts

@@ -1410,7 +1410,7 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy {
      * @hidden @internal
      */
     public getFormat(field: string) {
-        return this.fields?.find(el => el.field === field).pipeArgs.format;
+        return this.fields?.find(el => el.field === field)?.pipeArgs.format;
     }
 
     /**