feat(query-builder): add public api for commit and discard current state (#14910)

* feat(query-builder): add public api for commit and discard current state
* chore(*): update changelog
---------

Co-authored-by: teodosia <[email protected]>

Author: igdmdimitrov

CHANGELOG.md

@@ -17,6 +17,7 @@ All notable changes for each version of this project will be documented in this
 - `IgxQueryBuilder`
     - Introduced ability to create nested queries by specifying IN/NOT IN operators.
     - Added the `entities` property that accepts an array of `EntityType` objects describing an entity with its name and an array of fields. The `fields` input property has been deprecated and will be removed in a future version. Automatic migrations are available and will be applied on `ng update`.
+    - Added the `canCommit`, `commit` and `discard` public methods that allows the user to save/discard the current state of the expression tree.
     - Added option to template the search value input:
     ```
     <ng-template igxQueryBuilderSearchValue 

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

@@ -100,7 +100,7 @@ <h6 class="igx-filter-empty__title">
                         )
                     }}
                 </span>
-                <span *ngIf="!expressionItem.expression.condition.isUnary">
+                <span *ngIf="!expressionItem.expression.condition?.isUnary">
                     <ng-container *ngIf="expressionItem.expression.searchTree">
                         <strong>{{expressionItem.expression.searchTree.entity}}</strong>&nbsp;/ {{formatReturnFields(expressionItem.expression.searchTree)}}
                     </ng-container>
@@ -145,7 +145,7 @@ <h6 class="igx-filter-empty__title">
             <div #tooltipRef="tooltip" igxTooltip>
                 @if(expressionItem.expression.searchTree){
                     {{expressionItem.expression.searchTree.returnFields.join(', ')}}
-                } @else if (expressionItem.expression.condition.isUnary) {
+                } @else if (expressionItem.expression.condition?.isUnary) {
                     {{getConditionFriendlyName(expressionItem.expression.condition?.name)}}
                 } @else {
                     @if(getFormatter(expressionItem.expression.fieldName)) {

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

@@ -747,20 +747,22 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy {
 
             const innerQuery = this.innerQueries.filter(q => q.isInEditMode())[0]
             if (innerQuery && this.selectedField?.filters?.condition(this.selectedCondition)?.isNestedQuery) {
-                if (!this._editedExpression.expression.searchTree) {
+                if (!this._editedExpression.expression.searchTree && innerQuery.expressionTree) {
                     this._editedExpression.expression.searchTree = new FilteringExpressionsTree(innerQuery.expressionTree.operator);
                 }
 
-                this._editedExpression.expression.searchTree.entity = innerQuery.selectedEntity.name;
-                this._editedExpression.expression.searchTree.returnFields = innerQuery.selectedReturnFields;
-                this._editedExpression.expression.searchTree.filteringOperands = innerQuery.expressionTree.filteringOperands;
-                this._editedExpression.expression.searchTree.operator = innerQuery.expressionTree.operator;
-                this._editedExpression.expression.searchTree.fieldName = innerQuery.expressionTree.fieldName;
+                if (this._editedExpression.expression.searchTree) {
+                    this._editedExpression.expression.searchTree.entity = innerQuery.selectedEntity.name;
+                    this._editedExpression.expression.searchTree.returnFields = innerQuery.selectedReturnFields;
+                    this._editedExpression.expression.searchTree.filteringOperands = innerQuery.expressionTree?.filteringOperands;
+                    this._editedExpression.expression.searchTree.operator = innerQuery.expressionTree?.operator;
+                    this._editedExpression.expression.searchTree.fieldName = innerQuery.expressionTree?.fieldName;
+                }
             } else {
                 this._editedExpression.expression.searchTree = null;
             }
 
-            if (this.selectedField.filters.condition(this.selectedCondition).isUnary) {
+            if (this.selectedField.filters.condition(this.selectedCondition)?.isUnary) {
                 this._editedExpression.expression.searchVal = null;
             }
 
@@ -816,16 +818,52 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy {
         return this.selectedField && this.selectedCondition &&
             (
                 (
-                    (!!this.searchValue.value || (!!this.searchValueTemplate && !!this._editedExpression.expression.searchVal)) &&
+                    ((!Array.isArray(this.searchValue.value) && !!this.searchValue.value) || (Array.isArray(this.searchValue.value) && this.searchValue.value.length !== 0)) &&
                     !(this.selectedField?.filters?.condition(this.selectedCondition)?.isNestedQuery)
                 ) ||
                 (
-                    innerQuery && !!innerQuery.expressionTree && innerQuery._editedExpression == undefined && innerQuery.selectedReturnFields.length > 0
+                    this.selectedField?.filters?.condition(this.selectedCondition)?.isNestedQuery && innerQuery && !!innerQuery.expressionTree && innerQuery._editedExpression == undefined && innerQuery.selectedReturnFields.length > 0
                 ) ||
-                this.selectedField.filters.condition(this.selectedCondition).isUnary
+                this.selectedField.filters.condition(this.selectedCondition)?.isUnary
             );
     }
 
+    /**
+     * @hidden @internal
+     */
+    public canCommitCurrentState(): boolean {
+        const innerQuery = this.innerQueries.filter(q => q.isInEditMode())[0];
+        if (innerQuery) {
+            return this.selectedReturnFields?.length > 0 && innerQuery.canCommitCurrentState();
+        } else {
+            return this.selectedReturnFields?.length > 0 &&
+                (
+                    (!this._editedExpression && !!this.rootGroup) || // no edited expr, root group
+                    (this._editedExpression && !this.selectedField && (this.expressionTree && this.expressionTree.filteringOperands[0] !== this._editedExpression.expression)) || // empty edited expr with at least one other expr
+                    (this._editedExpression && this.operandCanBeCommitted() === true) // valid edited expr
+                );
+        }
+    }
+
+    /**
+     * @hidden @internal
+     */
+    public commitCurrentState(): void {
+        const innerQuery = this.innerQueries.filter(q => q.isInEditMode())[0];
+        if (innerQuery) {
+            innerQuery.commitCurrentState();
+        }
+
+        if (this._editedExpression) {
+            if (this.selectedField) {
+                this.commitOperandEdit();
+            } else {
+                this.deleteItem(this._editedExpression);
+                this._editedExpression = null;
+            }
+        }
+    }
+
     /**
      * @hidden @internal
      *
@@ -931,7 +969,7 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy {
 
         if (!this.selectedField) {
             this.fieldSelect.input.nativeElement.focus();
-        } else if (this.selectedField.filters.condition(this.selectedCondition).isUnary) {
+        } else if (this.selectedField.filters.condition(this.selectedCondition)?.isUnary) {
             this.conditionSelect.input.nativeElement.focus();
         } else {
             const input = this.searchValueInput?.nativeElement || this.picker?.getEditElement();
@@ -1335,6 +1373,9 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy {
         let groupItem: ExpressionGroupItem;
         if (expressionTree) {
             groupItem = new ExpressionGroupItem(expressionTree.operator, parent);
+            if (!expressionTree.filteringOperands) {
+                return groupItem;
+            }
 
             for (const expr of expressionTree.filteringOperands) {
                 if (expr instanceof FilteringExpressionsTree) {