feat(query-builder): add field formatter & support object search values (#14930)

* feat(query-builder): use field formatter to support object search values

Author: teodosiah

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

@@ -96,7 +96,7 @@ <h6 class="igx-filter-empty__title">
                 <span igxPrefix class="igx-filter-tree__expression-condition">
                     {{
                         getConditionFriendlyName(
-                            expressionItem.expression.condition.name
+                            expressionItem.expression.condition?.name
                         )
                     }}
                 </span>
@@ -106,35 +106,59 @@ <h6 class="igx-filter-empty__title">
                     </ng-container>
 
                     <ng-container *ngIf="!expressionItem.expression.searchTree">
-                    {{
-                        isDate(expressionItem.expression.searchVal)
-                            ? getFormatter(expressionItem.expression.fieldName)
-                                ? (expressionItem.expression.searchVal
-                                | fieldFormatter
-                                    : getFormatter(
-                                            expressionItem.expression.fieldName
-                                        )
-                                    : undefined)
-                                : (expressionItem.expression.searchVal
-                                | date
-                                    : getFormat(
-                                            expressionItem.expression.fieldName
-                                        )
-                                    : undefined
-                                    : this.locale)
-                            : expressionItem.expression.searchVal
-                    }}
+                        @if(isDate(expressionItem.expression.searchVal)) {
+                            @if(getFormatter(expressionItem.expression.fieldName)) {
+                               {{
+                                    expressionItem.expression.searchVal
+                                    | fieldFormatter
+                                        : getFormatter(
+                                                expressionItem.expression.fieldName
+                                            )
+                                        : undefined
+                               }}
+                            } @else {
+                                {{
+                                    expressionItem.expression.searchVal
+                                    | date
+                                        : getFormat(
+                                                expressionItem.expression.fieldName
+                                            )
+                                        : undefined
+                                        : this.locale
+                                }}
+                            }
+                        } @else {
+                            @if(getFormatter(expressionItem.expression.fieldName)) {
+                                {{
+                                    expressionItem.expression.searchVal
+                                        | fieldFormatter
+                                        : getFormatter(expressionItem.expression.fieldName)
+                                        : (expressionItem.expression.conditionName ||  expressionItem.expression.condition?.name)
+                                }}
+                            } @else {
+                                {{ expressionItem.expression.searchVal }}
+                            }
+                        }
                     </ng-container>
                 </span>
             </igx-chip>
             <div #tooltipRef="tooltip" igxTooltip>
-                {{
-                    expressionItem.expression.searchTree ?
-                        expressionItem.expression.searchTree.returnFields.join(', ') :
-                        expressionItem.expression.condition.isUnary ?
-                            getConditionFriendlyName(expressionItem.expression.condition.name) :
+                @if(expressionItem.expression.searchTree){
+                    {{expressionItem.expression.searchTree.returnFields.join(', ')}}
+                } @else if (expressionItem.expression.condition.isUnary) {
+                    {{getConditionFriendlyName(expressionItem.expression.condition?.name)}}
+                } @else {
+                    @if(getFormatter(expressionItem.expression.fieldName)) {
+                        {{
                             expressionItem.expression.searchVal
-                }}
+                                | fieldFormatter
+                                : getFormatter(expressionItem.expression.fieldName)
+                                : (expressionItem.expression.conditionName || expressionItem.expression.condition?.name)
+                        }}
+                    } @else {
+                        {{ expressionItem.expression.searchVal }}
+                    }
+                }
             </div>
             <div
                 class="igx-filter-tree__expression-actions"

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

@@ -19,7 +19,7 @@ import { IButtonGroupEventArgs, IgxButtonGroupComponent } from '../buttonGroup/b
 import { IgxChipComponent } from '../chips/chip.component';
 import { IQueryBuilderResourceStrings, QueryBuilderResourceStringsEN } from '../core/i18n/query-builder-resources';
 import { PlatformUtil } from '../core/utils';
-import { DataType, DataUtil } from '../data-operations/data-util';
+import { DataType } from '../data-operations/data-util';
 import { IgxBooleanFilteringOperand, IgxDateFilteringOperand, IgxDateTimeFilteringOperand, IgxNumberFilteringOperand, IgxStringFilteringOperand, IgxTimeFilteringOperand } from '../data-operations/filtering-condition';
 import { FilteringLogic, IFilteringExpression } from '../data-operations/filtering-expression.interface';
 import { FilteringExpressionsTree, IExpressionTree, IFilteringExpressionsTree } from '../data-operations/filtering-expressions-tree';
@@ -738,7 +738,7 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy {
             this._editedExpression.expression.fieldName = this.selectedField.field;
             this._editedExpression.expression.condition = this.selectedField.filters.condition(this.selectedCondition);
             this._editedExpression.expression.conditionName = this.selectedCondition;
-            this._editedExpression.expression.searchVal = DataUtil.parseValue(this.selectedField.dataType, actualSearchValue);
+            this._editedExpression.expression.searchVal = actualSearchValue;
             this._editedExpression.fieldLabel = this.selectedField.label
                 ? this.selectedField.label
                 : this.selectedField.header
@@ -1145,7 +1145,7 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy {
      * @hidden @internal
      */
     public getFormatter(field: string) {
-        return this.fields.find(el => el.field === field).formatter;
+        return this.fields.find(el => el.field === field)?.formatter;
     }
 
     /**