fix(query-builder): refactor expression tree change emission for consistency - 21.1.x

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

@@ -670,7 +670,7 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy {
 
             this._editedExpression = null;
             if (!this.parentExpression) {
-                this.expressionTreeChange.emit(this._expressionTree);
+                this.emitExpressionTreeChange();
             }
 
             this.rootGroup = null;
@@ -699,7 +699,7 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy {
 
             if (this._expressionTree && !this.parentExpression) {
                 this._expressionTree.returnFields = value.length === this.fields.length ? ['*'] : value;
-                this.expressionTreeChange.emit(this._expressionTree);
+                this.emitExpressionTreeChange();
             }
         }
     }
@@ -892,7 +892,7 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy {
 
         this._expressionTree = this.createExpressionTreeFromGroupItem(this.rootGroup, this.selectedEntity?.name, this.selectedReturnFields);
         if (!this.parentExpression) {
-            this.expressionTreeChange.emit(this._expressionTree);
+            this.emitExpressionTreeChange();
         }
     }
 
@@ -933,7 +933,7 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy {
         }
 
         if (!this.parentExpression && !skipEmit) {
-            this.expressionTreeChange.emit(this._expressionTree);
+            this.emitExpressionTreeChange();
         }
     }
 
@@ -1523,7 +1523,7 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy {
         }
 
         if (!this.parentExpression) {
-            this.expressionTreeChange.emit(this._expressionTree);
+            this.emitExpressionTreeChange();
         }
     }
 
@@ -1714,12 +1714,16 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy {
         }, this._focusDelay);
     }
 
+    private emitExpressionTreeChange(): void {
+        this.expressionTreeChange.emit(this._expressionTree);
+    }
+
     private init() {
         this.cancelOperandAdd();
         this.cancelOperandEdit();
 
         // Ignore values of certain properties for the comparison
-        const propsToIgnore = ['parent', 'hovered', 'ignoreCase', 'inEditMode', 'inAddMode'];
+        const propsToIgnore = ['parent', 'hovered', 'ignoreCase', 'inEditMode', 'inAddMode', 'externalObject'];
         const propsReplacer = function replacer(key, value) {
             if (propsToIgnore.indexOf(key) >= 0) {
                 return undefined;

projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.spec.ts

@@ -144,6 +144,45 @@ describe('IgxQueryBuilder', () => {
     }));
   });
 
+  describe('Serialization', () => {
+    it('Should serialize Set searchVal as array when emitting expressionTreeChange.', () => {
+      const tree = new FilteringExpressionsTree(FilteringLogic.And, null, 'Orders', ['*']);
+      tree.filteringOperands.push({
+        fieldName: 'OrderId',
+        condition: IgxNumberFilteringOperand.instance().condition('in'),
+        conditionName: 'in',
+        searchVal: new Set([1])
+      } as any);
+
+      spyOn(queryBuilder.expressionTreeChange, 'emit');
+      (queryBuilder as any).onExpressionTreeChange(tree);
+
+      const emittedTree = (queryBuilder.expressionTreeChange.emit as jasmine.Spy).calls.mostRecent().args[0] as IExpressionTree;
+      const emittedExpression = emittedTree.filteringOperands[0] as any;
+      expect(Array.isArray(emittedExpression.searchVal)).toBeTrue();
+      expect(emittedExpression.searchVal).toEqual([1]);
+    });
+
+    it('Should emit a deep-cloned serializable tree when expressionTreeChange fires.', () => {
+      const tree = new FilteringExpressionsTree(FilteringLogic.And, null, 'Orders', ['*']);
+      tree.filteringOperands.push({
+        fieldName: 'OrderId',
+        condition: IgxNumberFilteringOperand.instance().condition('greaterThan'),
+        conditionName: 'greaterThan',
+        searchVal: 5
+      } as any);
+
+      spyOn(queryBuilder.expressionTreeChange, 'emit');
+      (queryBuilder as any).onExpressionTreeChange(tree);
+
+      const emittedTree = (queryBuilder.expressionTreeChange.emit as jasmine.Spy).calls.mostRecent().args[0] as IExpressionTree;
+      expect(emittedTree).not.toBe(queryBuilder.expressionTree);
+
+      (emittedTree.filteringOperands[0] as any).conditionName = 'equals';
+      expect((queryBuilder.expressionTree.filteringOperands[0] as any).conditionName).toBe('greaterThan');
+    });
+  });
+
   describe('Interactions', () => {
     it('Should correctly initialize a newly added \'And\' group.', fakeAsync(() => {
       QueryBuilderFunctions.selectEntityInEditModeExpression(fix, 1); // Select 'Orders' entity

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

@@ -327,14 +327,35 @@ export class IgxQueryBuilderComponent implements OnDestroy {
         this.queryTree.setAddButtonFocus();
     }
 
+    private serializeExpressionTreeCallback(key: string, val: unknown): unknown {
+        if (key === 'externalObject') {
+            return undefined;
+        }
+        if (key === 'searchVal' && val instanceof Set) {
+            // Ensure Set-based search values (e.g. for "in" conditions) are serialized correctly
+            // JSON.stringify(new Set([...])) => '{}' by default, so convert to an array first
+            return Array.from(val);
+        }
+
+        return val;
+    }
+
+    private getSerializableExpressionTree(tree: IExpressionTree): IExpressionTree {
+        if (!tree) {
+            return tree;
+        }
+
+        return JSON.parse(JSON.stringify(tree, this.serializeExpressionTreeCallback));
+    }
+
     protected onExpressionTreeChange(tree: IExpressionTree) {
         if (tree && this.entities && tree !== this._expressionTree) {
             this._expressionTree = recreateTree(tree, this.entities);
         } else {
             this._expressionTree = tree;
         }
         if (this._shouldEmitTreeChange) {
-            this.expressionTreeChange.emit(tree);
+            this.expressionTreeChange.emit(this.getSerializableExpressionTree(this._expressionTree));
         }
     }
 
@@ -389,4 +410,3 @@ export class IgxQueryBuilderComponent implements OnDestroy {
         });
     }
 }
-

src/app/query-builder/query-builder.sample.ts

@@ -191,7 +191,15 @@ export class QueryBuilderComponent implements OnInit {
             // this.expressionTree = tree;
             // this.onChange();
         }
-        return tree ? JSON.stringify(tree, null, 2) : 'Please add an expression!';
+        return tree ? JSON.stringify(tree, this.serializeExpressionTreeCallback, 2) : 'Please add an expression!';
+    }
+
+    // JSON.stringify serializes Set as {}, so convert Set-based searchVal to array to preserve values in the printed output.
+    private serializeExpressionTreeCallback(key: string, val: any) {
+        if (key === 'searchVal' && val instanceof Set) {
+            return Array.from(val);
+        }
+        return val;
     }
 
     public canCommitExpressionTree() {