refactor(query-builder-sample): update QB sample 1 with nested entities (#3532)

* refactor(query-builder-sample): update QB sample 1 with nested entities
* fix(query-builder): remove header template from main sample

Author: ivanvpetrov

src/app/interactions/query-builder/query-builder-sample-1/query-builder-sample-1.component.html

@@ -1,9 +1,7 @@
 <div class="wrapper">
     <igx-query-builder #queryBuilder
-        [entities]="[{ name: '', fields: fields}]"
+        [entities]="entities"
         [expressionTree]="expressionTree">
-        <igx-query-builder-header [title]="'Query Builder Overview'" [showLegend]="true">        
-        </igx-query-builder-header>
     </igx-query-builder>
     <div class="output-area">
         <pre>{{ printExpressionTree(queryBuilder.expressionTree) }}</pre>

src/app/interactions/query-builder/query-builder-sample-1/query-builder-sample-1.component.ts

@@ -1,58 +1,92 @@
 import { Component, OnInit } from '@angular/core';
-import { FilteringExpressionsTree, FilteringLogic, IExpressionTree, IgxQueryBuilderComponent, IgxStringFilteringOperand } from 'igniteui-angular';
+import { FilteringExpressionsTree, FilteringLogic, IExpressionTree, IgxBooleanFilteringOperand, IgxDateFilteringOperand, IgxNumberFilteringOperand, IgxStringFilteringOperand } from 'igniteui-angular';
 
 @Component({
     selector: 'app-query-builder-sample-1',
     styleUrls: ['./query-builder-sample-1.component.scss'],
     templateUrl: 'query-builder-sample-1.component.html'
 })
 export class QueryBuilderSample1Component implements OnInit {
+    public entities: any[];
+    public companiesFields: any[];
+    public ordersFields: any[];
     public expressionTree: IExpressionTree;
-    
-    public fields: any[] = [
-        { field: 'ID', dataType: 'string' },
-        { field: 'CompanyName', dataType: 'string' },
-        { field: 'ContactName', dataType: 'string' },
-        { field: 'Employees', dataType: 'number' },
-        { field: 'ContactTitle', dataType: 'string' },
-        { field: 'DateCreated', dataType: 'date' },
-        { field: 'TimeCreated', dataType: 'time' },
-        { field: 'Address', dataType: 'string' },
-        { field: 'City', dataType: 'string' },
-        { field: 'Region', dataType: 'string' },
-        { field: 'PostalCode', dataType: 'string' },
-        { field: 'Phone', dataType: 'string' },
-        { field: 'Fax', dataType: 'string' },
-        { field: 'Contract', dataType: 'boolean' }
-    ];
 
     public ngOnInit(): void {
-        const tree = new FilteringExpressionsTree(FilteringLogic.And);
-        tree.filteringOperands.push({
-            fieldName: 'ID',
-            condition: IgxStringFilteringOperand.instance().condition('contains'),
-            searchVal: 'a',
-            ignoreCase: true
+        this.companiesFields = [
+            { field: "ID", dataType: "string" },
+            { field: "CompanyName", dataType: "string" },
+            { field: "ContactName", dataType: "string" },
+            { field: "Employees", dataType: "number" },
+            { field: "ContactTitle", dataType: "string" },
+            { field: "DateCreated", dataType: "date" },
+            { field: "TimeCreated", dataType: "time" },
+            { field: "Address", dataType: "string" },
+            { field: "City", dataType: "string" },
+            { field: "Region", dataType: "string" },
+            { field: "PostalCode", dataType: "string" },
+            { field: "Phone", dataType: "string" },
+            { field: "Fax", dataType: "string" },
+            { field: "Contract", dataType: "boolean" }
+        ];
+
+        this.ordersFields = [
+            { field: "CompanyID", dataType: "string" },
+            { field: "OrderID", dataType: "number" },
+            { field: "EmployeeId", dataType: "number" },
+            { field: "OrderDate", dataType: "date" },
+            { field: "RequiredDate", dataType: "date" },
+            { field: "ShippedDate", dataType: "date" },
+            { field: "ShipVia", dataType: "number" },
+            { field: "Freight", dataType: "number" },
+            { field: "ShipName", dataType: "string" },
+            { field: "ShipCity", dataType: "string" },
+            { field: "ShipPostalCode", dataType: "string" },
+            { field: "ShipCountry", dataType: "string" },
+            { field: "Region", dataType: "string" }
+        ];
+
+        this.entities = [
+            {
+                name: "Companies",
+                fields: this.companiesFields
+            },
+            {
+                name: "Orders",
+                fields: this.ordersFields
+            }
+        ];
+
+        const innerTree = new FilteringExpressionsTree(FilteringLogic.And, undefined, 'Companies', ['ID']);
+        innerTree.filteringOperands.push({
+            fieldName: 'Employees',
+            condition: IgxNumberFilteringOperand.instance().condition('greaterThan'),
+            conditionName: 'greaterThan',
+            searchVal: 100
         });
-        const orTree = new FilteringExpressionsTree(FilteringLogic.Or);
-        orTree.filteringOperands.push({
-            fieldName: 'ID',
-            condition: IgxStringFilteringOperand.instance().condition('contains'),
-            searchVal: 'b',
-            ignoreCase: true
+        innerTree.filteringOperands.push({
+            fieldName: 'Contract',
+            condition: IgxBooleanFilteringOperand.instance().condition('true'),
+            conditionName: 'true'
         });
-        orTree.filteringOperands.push({
-            fieldName: 'CompanyName',
-            condition: IgxStringFilteringOperand.instance().condition('contains'),
-            searchVal: 'c',
-            ignoreCase: true
+
+        const tree = new FilteringExpressionsTree(FilteringLogic.And, undefined, 'Orders', ['*']);
+        tree.filteringOperands.push({
+            fieldName: 'CompanyID',
+            condition: IgxStringFilteringOperand.instance().condition('in'),
+            conditionName: 'in',
+            searchTree: innerTree
+        });
+        tree.filteringOperands.push({
+            fieldName: 'OrderDate',
+            condition: IgxDateFilteringOperand.instance().condition('before'),
+            conditionName: 'before',
+            searchVal: new Date('2024-01-01T00:00:00.000Z')
         });
-        tree.filteringOperands.push(orTree);
         tree.filteringOperands.push({
-            fieldName: 'CompanyName',
-            condition: IgxStringFilteringOperand.instance().condition('contains'),
-            searchVal: 'd',
-            ignoreCase: true
+            fieldName: 'ShippedDate',
+            condition: IgxDateFilteringOperand.instance().condition('null'),
+            conditionName: 'null'
         });
 
         this.expressionTree = tree;