feat(query-builder): update existing samples and add template sample

live-editing/configs/QueryBuilderConfigGenerator.ts

@@ -1,5 +1,4 @@
-import {IgxQueryBuilderModule} from 'igniteui-angular';
-import {AppModuleConfig, Config, IConfigGenerator} from 'igniteui-live-editing'
+import { Config, IConfigGenerator} from 'igniteui-live-editing'
 import { BaseAppConfig } from './BaseConfig';
 export class QueryBuilderConfigGenerator implements IConfigGenerator {
 
@@ -13,6 +12,12 @@ export class QueryBuilderConfigGenerator implements IConfigGenerator {
             shortenComponentPathBy: "/interactions/query-builder/"
         }));
 
+        configs.push(new Config({
+            component: 'QueryBuilderTemplateSampleComponent',
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/interactions/query-builder/"
+        }));
+
         configs.push(new Config({
             component: 'QueryBuilderStyleComponent',
             additionalFiles: ["/src/app/interactions/query-builder/query-builder-style/layout.scss"],

package.json

@@ -65,7 +65,7 @@
     "bootstrap": "5.3.3",
     "file-saver": "^2.0.2",
     "hammerjs": "^2.0.8",
-    "igniteui-angular": "^19.0.10",
+    "igniteui-angular": "^19.1.0-beta.4",
     "igniteui-angular-charts": "^19.0.0",
     "igniteui-angular-core": "^19.0.0",
     "igniteui-angular-extras": "^19.0.3",
@@ -80,8 +80,8 @@
   },
   "overrides": {
     "igniteui-angular-extras": {
-      "igniteui-angular": "^19.0.0",
-      "@infragistics/igniteui-angular": "^19.0.0",
+      "igniteui-angular": "^19.1.0-beta.4",
+      "@infragistics/igniteui-angular": "^19.1.0-beta.4",
       "igniteui-angular-charts": "^19.0.0",
       "igniteui-angular-core": "^19.0.0",
       "@angular/core": "^19.0.0",

src/app/interactions/interactions-routes-data.ts

@@ -49,5 +49,6 @@ export const interactionsRoutesData = {
     'drag-dialog-sample': { displayName: 'Drag Dialog Sample', parentName: 'Drag and Drop'},
     'icons-sample': { displayName: 'Icons sample', parentName: 'Drag and Drop' },
     'query-builder-sample-1': { displayName: 'Query Builder Sample 1', parentName: 'Query Builder' },
-    'query-builder-style': { displayName: 'Query Builder Style Sample', parentName: 'Query Builder' }
+    'query-builder-style': { displayName: 'Query Builder Style Sample', parentName: 'Query Builder' },
+    'query-builder-template-sample': { displayName: 'Query Builder Template Sample', parentName: 'Query Builder' }
 };

src/app/interactions/interactions.routes.ts

@@ -22,6 +22,7 @@ import { OverlayScrollSample2Component } from './overlay/overlay-scroll-2/overla
 import { OverlayStylingComponent } from './overlay/overlay-styling/overlay-styling.component';
 import { QueryBuilderSample1Component } from './query-builder/query-builder-sample-1/query-builder-sample-1.component';
 import { QueryBuilderStyleComponent } from './query-builder/query-builder-style/query-builder-style.component';
+import { QueryBuilderTemplateSampleComponent } from './query-builder/query-builder-template-sample/query-builder-template-sample.component';
 import { RippleSample2Component } from './ripple/ripple-sample-2/ripple-sample-2.component';
 import { RippleSample3Component } from './ripple/ripple-sample-3/ripple-sample-3.component';
 import { RippleSample4Component } from './ripple/ripple-sample-4/ripple-sample-4.component';
@@ -298,5 +299,10 @@ export const InteractionsRoutes: Routes = [
         component: QueryBuilderStyleComponent,
         data: interactionsRoutesData['query-builder-style'],
         path: 'query-builder-style'
+    },
+    {
+        component: QueryBuilderTemplateSampleComponent,
+        data: interactionsRoutesData['query-builder-template-sample'],
+        path: 'query-builder-template-sample'
     }
 ];

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

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

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

@@ -1,12 +1,15 @@
 .wrapper{
     margin: 10px;
+    height: 100%;
+    overflow-y: auto;
 }
 
 .output-area{
     overflow-y: auto;
     height: 200px;
     box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
     margin-top: 15px;
+    margin-right: 15px;
     border-radius: 4px;
     padding-left: 16px;
 }

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

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { FilteringExpressionsTree, FilteringLogic, IExpressionTree, IgxQueryBuilderComponent, IgxStringFilteringOperand, IgxQueryBuilderHeaderComponent } from 'igniteui-angular';
+import { FilteringExpressionsTree, FilteringLogic, IExpressionTree, IgxBooleanFilteringOperand, IgxDateFilteringOperand, IgxNumberFilteringOperand, IgxQueryBuilderComponent, IgxQueryBuilderHeaderComponent, IgxStringFilteringOperand } from 'igniteui-angular';
 
 @Component({
     selector: 'app-query-builder-sample-1',
@@ -8,52 +8,100 @@ import { FilteringExpressionsTree, FilteringLogic, IExpressionTree, IgxQueryBuil
     imports: [IgxQueryBuilderComponent, IgxQueryBuilderHeaderComponent]
 })
 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
+        });
+        innerTree.filteringOperands.push({
+            fieldName: 'Contract',
+            condition: IgxBooleanFilteringOperand.instance().condition('true'),
+            conditionName: 'true'
         });
-        const orTree = new FilteringExpressionsTree(FilteringLogic.Or);
-        orTree.filteringOperands.push({
-            fieldName: 'ID',
-            condition: IgxStringFilteringOperand.instance().condition('contains'),
-            searchVal: 'b',
-            ignoreCase: true
+
+        const subGroup = new FilteringExpressionsTree(FilteringLogic.Or, undefined, 'Orders', ['*']);
+        subGroup.filteringOperands.push({
+            fieldName: 'ShipCity',
+            condition: IgxStringFilteringOperand.instance().condition('endsWith'),
+            conditionName: IgxStringFilteringOperand.instance().condition('endsWith').name,
+            searchVal: 'bar'
+        });
+        subGroup.filteringOperands.push({
+            fieldName: 'OrderDate',
+            condition: IgxDateFilteringOperand.instance().condition('today'),
+            conditionName: IgxDateFilteringOperand.instance().condition('today').name
         });
-        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(subGroup);
         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;
@@ -62,4 +110,4 @@ export class QueryBuilderSample1Component implements OnInit {
     public printExpressionTree(tree: IExpressionTree) {
         return tree ? JSON.stringify(tree, null, 2) : 'Please add an expression!';
     }
-}
+}

src/app/interactions/query-builder/query-builder-style/query-builder-style.component.html

@@ -1,3 +1,5 @@
-<igx-query-builder #queryBuilder
-    [fields]="fields">    
-</igx-query-builder>
+<div class="wrapper">
+    <igx-query-builder #queryBuilder
+        [entities]="entities">    
+    </igx-query-builder>
+</div>