feat(query-builder): add template sample

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-routing.module.ts

@@ -23,6 +23,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';
@@ -299,6 +300,11 @@ 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/interactions.module.ts

@@ -21,7 +21,11 @@ import {
     IgxSwitchModule,
     IgxToggleModule,
     IgxTooltipModule,
-    IgxIconButtonDirective
+    IgxIconButtonDirective,
+    IgxSelectComponent,
+    IgxSelectItemComponent,
+    IgxRadioComponent,
+    IgxRadioGroupDirective
 } from 'igniteui-angular';
 import { LayoutsModule } from '../layouts/layouts.module';
 import { DialogSample1Component } from './dialog/dialog-sample-1/dialog-sample-1.component';
@@ -47,6 +51,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';
@@ -109,6 +114,7 @@ import { TooltipStyleComponent } from './tooltip/tooltip-style/tooltip-style.com
         TickLabelsTemplateComponent,
         QueryBuilderSample1Component,
         QueryBuilderStyleComponent,
+        QueryBuilderTemplateSampleComponent,
         RippleSample2Component,
         RippleSample3Component,
         RippleSample4Component,
@@ -160,7 +166,11 @@ import { TooltipStyleComponent } from './tooltip/tooltip-style/tooltip-style.com
         IgxComboModule,
         IgxListModule,
         LayoutsModule,
-        IgxIconButtonDirective
+        IgxIconButtonDirective,
+        IgxSelectComponent,
+        IgxSelectItemComponent,
+        IgxRadioComponent,
+        IgxRadioGroupDirective
     ],
     providers: [IgxOverlayService]
 })

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

@@ -0,0 +1,32 @@
+<div class="wrapper">
+    <igx-query-builder #queryBuilder
+        [entities]="entities"
+        [expressionTree]="expressionTree">
+        <igx-query-builder-header [title]="'Query Builder Template Sample'" [showLegend]="true">  
+        </igx-query-builder-header>
+        <ng-template #searchValueTemplate igxQueryBuilderSearchValue 
+                        let-searchValue
+                        let-selectedField = "selectedField" 
+                        let-selectedCondition = "selectedCondition"
+                        let-defaultSearchValueTemplate = "defaultSearchValueTemplate">
+                @if (selectedField?.field === 'Region' && (selectedCondition === 'equals' || selectedCondition === 'doesNotEqual')){
+                    <igx-select [placeholder]="'Select region'" [(ngModel)]="searchValue.value">
+                        <igx-select-item *ngFor="let reg of regionOptions" [value]="reg.value">{{ reg.text }}</igx-select-item>
+                    </igx-select>
+                } 
+                @else if (selectedField?.field === 'OrderStatus' && (selectedCondition === 'equals' || selectedCondition === 'doesNotEqual')){
+                    <igx-radio-group [(ngModel)]="searchValue.value">
+                        <igx-radio class="radio-sample" *ngFor="let stat of statusOptions" value="{{stat.value}}">
+                            {{stat.text}}
+                        </igx-radio>
+                    </igx-radio-group>
+                }
+                 @else {  
+                    <ng-container *ngTemplateOutlet="defaultSearchValueTemplate"></ng-container>
+                }
+            </ng-template>
+    </igx-query-builder>
+    <div class="output-area">
+        <pre>{{ printExpressionTree(queryBuilder.expressionTree) }}</pre>
+    </div>
+</div>

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

@@ -0,0 +1,20 @@
+.wrapper{
+    margin: 10px;
+}
+
+.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;
+    border-radius: 4px;
+    padding-left: 16px;
+}
+
+igx-radio-group{
+    height: 40px;
+}
+
+.igx-radio-group .igx-radio:not(:last-of-type) {
+    margin-inline-end: 0;
+}

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

@@ -0,0 +1,81 @@
+import { Component, OnInit } from '@angular/core';
+import { FilteringExpressionsTree, FilteringLogic, IExpressionTree, IgxBooleanFilteringOperand, IgxDateFilteringOperand, IgxNumberFilteringOperand, IgxStringFilteringOperand } from 'igniteui-angular';
+
+@Component({
+    selector: 'app-query-builder-template-sample',
+    styleUrls: ['./query-builder-template-sample.component.scss'],
+    templateUrl: 'query-builder-template-sample.component.html'
+})
+export class QueryBuilderTemplateSampleComponent implements OnInit {
+    public entities: any[];
+    public companiesFields: any[];
+    public ordersFields: any[];
+    public expressionTree: IExpressionTree;
+    public regionOptions = [
+        {text: 'Central North America', value: 'CNA'},
+        {text: 'Central Europe', value: 'CEU'},
+        {text: 'Mediterranean region', value: 'MED'},
+        {text: 'Central Asia', value: 'CAS'},
+        {text: 'South Asia', value: 'SAS'},
+        {text: 'Western Africa', value: 'WAF'},
+        {text: 'Amazonia', value: 'AMZ'},
+        {text: 'Southern Africa', value: 'SAF'},
+        {text: 'Northern Australia', value: 'NAU'}];
+
+    public statusOptions = [
+        {text: 'New', value: 1},
+        {text: 'Shipped', value: 2},
+        {text: 'Done', value: 3}];
+
+    public ngOnInit(): void {
+        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" },
+            { field: "OrderStatus", dataType: "number" }
+        ];
+
+        this.entities = [
+            {
+                name: "Orders",
+                fields: this.ordersFields
+            }
+        ];
+
+        const tree = new FilteringExpressionsTree(FilteringLogic.And, undefined, 'Orders', ['*']);
+        tree.filteringOperands.push({
+            fieldName: 'Region',
+            condition: IgxStringFilteringOperand.instance().condition('equals'),
+            conditionName: 'equals',
+            searchVal: 'CNA'
+        });
+        tree.filteringOperands.push({
+            fieldName: 'OrderStatus',
+            condition: IgxNumberFilteringOperand.instance().condition('equals'),
+            conditionName: 'equals',
+            searchVal: 1
+        });
+        tree.filteringOperands.push({
+            fieldName: 'OrderDate',
+            condition: IgxDateFilteringOperand.instance().condition('before'),
+            conditionName: 'before',
+            searchVal: new Date('2024-01-01T00:00:00.000Z')
+        });
+
+        this.expressionTree = tree;
+    }
+
+    public printExpressionTree(tree: IExpressionTree) {
+        return tree ? JSON.stringify(tree, null, 2) : 'Please add an expression!';
+    }
+}