Skip to content

Commit 47bc07e

Browse files
ivanvpetrovteodosiahgedinakovaigdmdimitrov
authored
feat(query-builder): add template sample (#3534)
* sample(query-builder): add template sample in progress * sample(query-builder): add new template functionality * sample(query-builder): add template sample done * chore(query-builder) sample remove header icon * chore(query-builder): test template sample cleanup * fix(query-builder): fix changed to shorter word to fit in docfx sample width * chore(query-builder): changed igniteui-angular version * chore(query-builder): changed igniteui-angular version * chore(*): add temp fix for radio-group height --------- Co-authored-by: INFRAGISTICS\IPetrov <IPetrov@infragistics.com> Co-authored-by: Teodosia Hristodorova <52423497+teodosiah@users.noreply.github.com> Co-authored-by: Galina Edinakova <gedinakova@infragistics.com> Co-authored-by: igdmdimitrov <dmdimitrov@infragistics.com>
1 parent 78e285c commit 47bc07e

6 files changed

Lines changed: 153 additions & 3 deletions

File tree

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,5 +49,6 @@ export const interactionsRoutesData = {
4949
'drag-dialog-sample': { displayName: 'Drag Dialog Sample', parentName: 'Drag and Drop'},
5050
'icons-sample': { displayName: 'Icons sample', parentName: 'Drag and Drop' },
5151
'query-builder-sample-1': { displayName: 'Query Builder Sample 1', parentName: 'Query Builder' },
52-
'query-builder-style': { displayName: 'Query Builder Style Sample', parentName: 'Query Builder' }
52+
'query-builder-style': { displayName: 'Query Builder Style Sample', parentName: 'Query Builder' },
53+
'query-builder-template-sample': { displayName: 'Query Builder Template Sample', parentName: 'Query Builder' }
5354
};

‎src/app/interactions/interactions-routing.module.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import { OverlayScrollSample2Component } from './overlay/overlay-scroll-2/overla
2323
import { OverlayStylingComponent } from './overlay/overlay-styling/overlay-styling.component';
2424
import { QueryBuilderSample1Component } from './query-builder/query-builder-sample-1/query-builder-sample-1.component';
2525
import { QueryBuilderStyleComponent } from './query-builder/query-builder-style/query-builder-style.component';
26+
import { QueryBuilderTemplateSampleComponent } from './query-builder/query-builder-template-sample/query-builder-template-sample.component';
2627
import { RippleSample2Component } from './ripple/ripple-sample-2/ripple-sample-2.component';
2728
import { RippleSample3Component } from './ripple/ripple-sample-3/ripple-sample-3.component';
2829
import { RippleSample4Component } from './ripple/ripple-sample-4/ripple-sample-4.component';
@@ -299,6 +300,11 @@ export const interactionsRoutes: Routes = [
299300
component: QueryBuilderStyleComponent,
300301
data: interactionsRoutesData['query-builder-style'],
301302
path: 'query-builder-style'
303+
},
304+
{
305+
component: QueryBuilderTemplateSampleComponent,
306+
data: interactionsRoutesData['query-builder-template-sample'],
307+
path: 'query-builder-template-sample'
302308
}
303309
];
304310

‎src/app/interactions/interactions.module.ts‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,11 @@ import {
2121
IgxSwitchModule,
2222
IgxToggleModule,
2323
IgxTooltipModule,
24-
IgxIconButtonDirective
24+
IgxIconButtonDirective,
25+
IgxSelectComponent,
26+
IgxSelectItemComponent,
27+
IgxRadioComponent,
28+
IgxRadioGroupDirective
2529
} from 'igniteui-angular';
2630
import { LayoutsModule } from '../layouts/layouts.module';
2731
import { DialogSample1Component } from './dialog/dialog-sample-1/dialog-sample-1.component';
@@ -47,6 +51,7 @@ import { OverlayScrollSample2Component } from './overlay/overlay-scroll-2/overla
4751
import { OverlayStylingComponent } from './overlay/overlay-styling/overlay-styling.component';
4852
import { QueryBuilderSample1Component } from './query-builder/query-builder-sample-1/query-builder-sample-1.component';
4953
import { QueryBuilderStyleComponent } from './query-builder/query-builder-style/query-builder-style.component';
54+
import { QueryBuilderTemplateSampleComponent } from './query-builder/query-builder-template-sample/query-builder-template-sample.component';
5055
import { RippleSample2Component } from './ripple/ripple-sample-2/ripple-sample-2.component';
5156
import { RippleSample3Component } from './ripple/ripple-sample-3/ripple-sample-3.component';
5257
import { RippleSample4Component } from './ripple/ripple-sample-4/ripple-sample-4.component';
@@ -109,6 +114,7 @@ import { TooltipStyleComponent } from './tooltip/tooltip-style/tooltip-style.com
109114
TickLabelsTemplateComponent,
110115
QueryBuilderSample1Component,
111116
QueryBuilderStyleComponent,
117+
QueryBuilderTemplateSampleComponent,
112118
RippleSample2Component,
113119
RippleSample3Component,
114120
RippleSample4Component,
@@ -160,7 +166,11 @@ import { TooltipStyleComponent } from './tooltip/tooltip-style/tooltip-style.com
160166
IgxComboModule,
161167
IgxListModule,
162168
LayoutsModule,
163-
IgxIconButtonDirective
169+
IgxIconButtonDirective,
170+
IgxSelectComponent,
171+
IgxSelectItemComponent,
172+
IgxRadioComponent,
173+
IgxRadioGroupDirective
164174
],
165175
providers: [IgxOverlayService]
166176
})

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

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<div class="wrapper">
2+
<igx-query-builder #queryBuilder
3+
[entities]="entities"
4+
[expressionTree]="expressionTree">
5+
<igx-query-builder-header [title]="'Query Builder Template Sample'" [showLegend]="true">
6+
</igx-query-builder-header>
7+
<ng-template #searchValueTemplate igxQueryBuilderSearchValue
8+
let-searchValue
9+
let-selectedField = "selectedField"
10+
let-selectedCondition = "selectedCondition"
11+
let-defaultSearchValueTemplate = "defaultSearchValueTemplate">
12+
@if (selectedField?.field === 'Region' && (selectedCondition === 'equals' || selectedCondition === 'doesNotEqual')){
13+
<igx-select [placeholder]="'Select region'" [(ngModel)]="searchValue.value">
14+
<igx-select-item *ngFor="let reg of regionOptions" [value]="reg.value">{{ reg.text }}</igx-select-item>
15+
</igx-select>
16+
}
17+
@else if (selectedField?.field === 'OrderStatus' && (selectedCondition === 'equals' || selectedCondition === 'doesNotEqual')){
18+
<igx-radio-group [(ngModel)]="searchValue.value">
19+
<igx-radio class="radio-sample" *ngFor="let stat of statusOptions" value="{{stat.value}}">
20+
{{stat.text}}
21+
</igx-radio>
22+
</igx-radio-group>
23+
}
24+
@else {
25+
<ng-container *ngTemplateOutlet="defaultSearchValueTemplate"></ng-container>
26+
}
27+
</ng-template>
28+
</igx-query-builder>
29+
<div class="output-area">
30+
<pre>{{ printExpressionTree(queryBuilder.expressionTree) }}</pre>
31+
</div>
32+
</div>

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
.wrapper{
2+
margin: 10px;
3+
}
4+
5+
.output-area{
6+
overflow-y: auto;
7+
height: 200px;
8+
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);
9+
margin-top: 15px;
10+
border-radius: 4px;
11+
padding-left: 16px;
12+
}
13+
14+
igx-radio-group{
15+
height: 40px;
16+
}
17+
18+
.igx-radio-group .igx-radio:not(:last-of-type) {
19+
margin-inline-end: 0;
20+
}

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

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
import { Component, OnInit } from '@angular/core';
2+
import { FilteringExpressionsTree, FilteringLogic, IExpressionTree, IgxBooleanFilteringOperand, IgxDateFilteringOperand, IgxNumberFilteringOperand, IgxStringFilteringOperand } from 'igniteui-angular';
3+
4+
@Component({
5+
selector: 'app-query-builder-template-sample',
6+
styleUrls: ['./query-builder-template-sample.component.scss'],
7+
templateUrl: 'query-builder-template-sample.component.html'
8+
})
9+
export class QueryBuilderTemplateSampleComponent implements OnInit {
10+
public entities: any[];
11+
public companiesFields: any[];
12+
public ordersFields: any[];
13+
public expressionTree: IExpressionTree;
14+
public regionOptions = [
15+
{text: 'Central North America', value: 'CNA'},
16+
{text: 'Central Europe', value: 'CEU'},
17+
{text: 'Mediterranean region', value: 'MED'},
18+
{text: 'Central Asia', value: 'CAS'},
19+
{text: 'South Asia', value: 'SAS'},
20+
{text: 'Western Africa', value: 'WAF'},
21+
{text: 'Amazonia', value: 'AMZ'},
22+
{text: 'Southern Africa', value: 'SAF'},
23+
{text: 'Northern Australia', value: 'NAU'}];
24+
25+
public statusOptions = [
26+
{text: 'New', value: 1},
27+
{text: 'Shipped', value: 2},
28+
{text: 'Done', value: 3}];
29+
30+
public ngOnInit(): void {
31+
this.ordersFields = [
32+
{ field: "CompanyID", dataType: "string" },
33+
{ field: "OrderID", dataType: "number" },
34+
{ field: "EmployeeId", dataType: "number" },
35+
{ field: "OrderDate", dataType: "date" },
36+
{ field: "RequiredDate", dataType: "date" },
37+
{ field: "ShippedDate", dataType: "date" },
38+
{ field: "ShipVia", dataType: "number" },
39+
{ field: "Freight", dataType: "number" },
40+
{ field: "ShipName", dataType: "string" },
41+
{ field: "ShipCity", dataType: "string" },
42+
{ field: "ShipPostalCode", dataType: "string" },
43+
{ field: "ShipCountry", dataType: "string" },
44+
{ field: "Region", dataType: "string" },
45+
{ field: "OrderStatus", dataType: "number" }
46+
];
47+
48+
this.entities = [
49+
{
50+
name: "Orders",
51+
fields: this.ordersFields
52+
}
53+
];
54+
55+
const tree = new FilteringExpressionsTree(FilteringLogic.And, undefined, 'Orders', ['*']);
56+
tree.filteringOperands.push({
57+
fieldName: 'Region',
58+
condition: IgxStringFilteringOperand.instance().condition('equals'),
59+
conditionName: 'equals',
60+
searchVal: 'CNA'
61+
});
62+
tree.filteringOperands.push({
63+
fieldName: 'OrderStatus',
64+
condition: IgxNumberFilteringOperand.instance().condition('equals'),
65+
conditionName: 'equals',
66+
searchVal: 1
67+
});
68+
tree.filteringOperands.push({
69+
fieldName: 'OrderDate',
70+
condition: IgxDateFilteringOperand.instance().condition('before'),
71+
conditionName: 'before',
72+
searchVal: new Date('2024-01-01T00:00:00.000Z')
73+
});
74+
75+
this.expressionTree = tree;
76+
}
77+
78+
public printExpressionTree(tree: IExpressionTree) {
79+
return tree ? JSON.stringify(tree, null, 2) : 'Please add an expression!';
80+
}
81+
}

0 commit comments

Comments
 (0)