Skip to content

Commit 00ba0cc

Browse files
damyanpetevdamyanpetev
authored
Merge pull request #3594 from IgniteUI/ipetrov/query-builder-samples-update-36242
feat(query-builder): update existing samples and add template sample
2 parents 514efa5 + dccccb0 commit 00ba0cc

16 files changed

+336
-131
lines changed

‎live-editing/configs/QueryBuilderConfigGenerator.ts‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import {IgxQueryBuilderModule} from 'igniteui-angular';
2-
import {AppModuleConfig, Config, IConfigGenerator} from 'igniteui-live-editing'
1+
import { Config, IConfigGenerator} from 'igniteui-live-editing'
32
import { BaseAppConfig } from './BaseConfig';
43
export class QueryBuilderConfigGenerator implements IConfigGenerator {
54

@@ -13,6 +12,12 @@ export class QueryBuilderConfigGenerator implements IConfigGenerator {
1312
shortenComponentPathBy: "/interactions/query-builder/"
1413
}));
1514

15+
configs.push(new Config({
16+
component: 'QueryBuilderTemplateSampleComponent',
17+
appConfig: BaseAppConfig,
18+
shortenComponentPathBy: "/interactions/query-builder/"
19+
}));
20+
1621
configs.push(new Config({
1722
component: 'QueryBuilderStyleComponent',
1823
additionalFiles: ["/src/app/interactions/query-builder/query-builder-style/layout.scss"],

‎package-lock.json‎

Lines changed: 9 additions & 8 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@
6565
"bootstrap": "5.3.3",
6666
"file-saver": "^2.0.2",
6767
"hammerjs": "^2.0.8",
68-
"igniteui-angular": "^19.0.10",
68+
"igniteui-angular": "^19.1.0-beta.4",
6969
"igniteui-angular-charts": "^19.0.0",
7070
"igniteui-angular-core": "^19.0.0",
7171
"igniteui-angular-extras": "^19.0.3",
@@ -80,8 +80,8 @@
8080
},
8181
"overrides": {
8282
"igniteui-angular-extras": {
83-
"igniteui-angular": "^19.0.0",
84-
"@infragistics/igniteui-angular": "^19.0.0",
83+
"igniteui-angular": "^19.1.0-beta.4",
84+
"@infragistics/igniteui-angular": "^19.1.0-beta.4",
8585
"igniteui-angular-charts": "^19.0.0",
8686
"igniteui-angular-core": "^19.0.0",
8787
"@angular/core": "^19.0.0",

‎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.routes.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import { OverlayScrollSample2Component } from './overlay/overlay-scroll-2/overla
2222
import { OverlayStylingComponent } from './overlay/overlay-styling/overlay-styling.component';
2323
import { QueryBuilderSample1Component } from './query-builder/query-builder-sample-1/query-builder-sample-1.component';
2424
import { QueryBuilderStyleComponent } from './query-builder/query-builder-style/query-builder-style.component';
25+
import { QueryBuilderTemplateSampleComponent } from './query-builder/query-builder-template-sample/query-builder-template-sample.component';
2526
import { RippleSample2Component } from './ripple/ripple-sample-2/ripple-sample-2.component';
2627
import { RippleSample3Component } from './ripple/ripple-sample-3/ripple-sample-3.component';
2728
import { RippleSample4Component } from './ripple/ripple-sample-4/ripple-sample-4.component';
@@ -298,5 +299,10 @@ export const InteractionsRoutes: Routes = [
298299
component: QueryBuilderStyleComponent,
299300
data: interactionsRoutesData['query-builder-style'],
300301
path: 'query-builder-style'
302+
},
303+
{
304+
component: QueryBuilderTemplateSampleComponent,
305+
data: interactionsRoutesData['query-builder-template-sample'],
306+
path: 'query-builder-template-sample'
301307
}
302308
];

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<div class="wrapper">
22
<igx-query-builder #queryBuilder
3-
[fields]="fields"
3+
[entities]="entities"
44
[expressionTree]="expressionTree">
5-
<igx-query-builder-header [title]="'Query Builder Overview'" [showLegend]="true">
6-
</igx-query-builder-header>
5+
<igx-query-builder-header [title]="'Query Builder Overview'"></igx-query-builder-header>
76
</igx-query-builder>
7+
88
<div class="output-area">
99
<pre>{{ printExpressionTree(queryBuilder.expressionTree) }}</pre>
1010
</div>
11-
</div>
11+
</div>

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
11
.wrapper{
22
margin: 10px;
3+
height: 100%;
4+
overflow-y: auto;
35
}
46

57
.output-area{
68
overflow-y: auto;
79
height: 200px;
810
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);
911
margin-top: 15px;
12+
margin-right: 15px;
1013
border-radius: 4px;
1114
padding-left: 16px;
1215
}

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

Lines changed: 89 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Component, OnInit } from '@angular/core';
2-
import { FilteringExpressionsTree, FilteringLogic, IExpressionTree, IgxQueryBuilderComponent, IgxStringFilteringOperand, IgxQueryBuilderHeaderComponent } from 'igniteui-angular';
2+
import { FilteringExpressionsTree, FilteringLogic, IExpressionTree, IgxBooleanFilteringOperand, IgxDateFilteringOperand, IgxNumberFilteringOperand, IgxQueryBuilderComponent, IgxQueryBuilderHeaderComponent, IgxStringFilteringOperand } from 'igniteui-angular';
33

44
@Component({
55
selector: 'app-query-builder-sample-1',
@@ -8,52 +8,100 @@ import { FilteringExpressionsTree, FilteringLogic, IExpressionTree, IgxQueryBuil
88
imports: [IgxQueryBuilderComponent, IgxQueryBuilderHeaderComponent]
99
})
1010
export class QueryBuilderSample1Component implements OnInit {
11+
public entities: any[];
12+
public companiesFields: any[];
13+
public ordersFields: any[];
1114
public expressionTree: IExpressionTree;
12-
13-
public fields: any[] = [
14-
{ field: 'ID', dataType: 'string' },
15-
{ field: 'CompanyName', dataType: 'string' },
16-
{ field: 'ContactName', dataType: 'string' },
17-
{ field: 'Employees', dataType: 'number' },
18-
{ field: 'ContactTitle', dataType: 'string' },
19-
{ field: 'DateCreated', dataType: 'date' },
20-
{ field: 'TimeCreated', dataType: 'time' },
21-
{ field: 'Address', dataType: 'string' },
22-
{ field: 'City', dataType: 'string' },
23-
{ field: 'Region', dataType: 'string' },
24-
{ field: 'PostalCode', dataType: 'string' },
25-
{ field: 'Phone', dataType: 'string' },
26-
{ field: 'Fax', dataType: 'string' },
27-
{ field: 'Contract', dataType: 'boolean' }
28-
];
2915

3016
public ngOnInit(): void {
31-
const tree = new FilteringExpressionsTree(FilteringLogic.And);
32-
tree.filteringOperands.push({
33-
fieldName: 'ID',
34-
condition: IgxStringFilteringOperand.instance().condition('contains'),
35-
searchVal: 'a',
36-
ignoreCase: true
17+
this.companiesFields = [
18+
{ field: "ID", dataType: "string" },
19+
{ field: "CompanyName", dataType: "string" },
20+
{ field: "ContactName", dataType: "string" },
21+
{ field: "Employees", dataType: "number" },
22+
{ field: "ContactTitle", dataType: "string" },
23+
{ field: "DateCreated", dataType: "date" },
24+
{ field: "TimeCreated", dataType: "time" },
25+
{ field: "Address", dataType: "string" },
26+
{ field: "City", dataType: "string" },
27+
{ field: "Region", dataType: "string" },
28+
{ field: "PostalCode", dataType: "string" },
29+
{ field: "Phone", dataType: "string" },
30+
{ field: "Fax", dataType: "string" },
31+
{ field: "Contract", dataType: "boolean" }
32+
];
33+
34+
this.ordersFields = [
35+
{ field: "CompanyID", dataType: "string" },
36+
{ field: "OrderID", dataType: "number" },
37+
{ field: "EmployeeId", dataType: "number" },
38+
{ field: "OrderDate", dataType: "date" },
39+
{ field: "RequiredDate", dataType: "date" },
40+
{ field: "ShippedDate", dataType: "date" },
41+
{ field: "ShipVia", dataType: "number" },
42+
{ field: "Freight", dataType: "number" },
43+
{ field: "ShipName", dataType: "string" },
44+
{ field: "ShipCity", dataType: "string" },
45+
{ field: "ShipPostalCode", dataType: "string" },
46+
{ field: "ShipCountry", dataType: "string" },
47+
{ field: "Region", dataType: "string" }
48+
];
49+
50+
this.entities = [
51+
{
52+
name: "Companies",
53+
fields: this.companiesFields
54+
},
55+
{
56+
name: "Orders",
57+
fields: this.ordersFields
58+
}
59+
];
60+
61+
const innerTree = new FilteringExpressionsTree(FilteringLogic.And, undefined, 'Companies', ['ID']);
62+
innerTree.filteringOperands.push({
63+
fieldName: 'Employees',
64+
condition: IgxNumberFilteringOperand.instance().condition('greaterThan'),
65+
conditionName: 'greaterThan',
66+
searchVal: 100
67+
});
68+
innerTree.filteringOperands.push({
69+
fieldName: 'Contract',
70+
condition: IgxBooleanFilteringOperand.instance().condition('true'),
71+
conditionName: 'true'
3772
});
38-
const orTree = new FilteringExpressionsTree(FilteringLogic.Or);
39-
orTree.filteringOperands.push({
40-
fieldName: 'ID',
41-
condition: IgxStringFilteringOperand.instance().condition('contains'),
42-
searchVal: 'b',
43-
ignoreCase: true
73+
74+
const subGroup = new FilteringExpressionsTree(FilteringLogic.Or, undefined, 'Orders', ['*']);
75+
subGroup.filteringOperands.push({
76+
fieldName: 'ShipCity',
77+
condition: IgxStringFilteringOperand.instance().condition('endsWith'),
78+
conditionName: IgxStringFilteringOperand.instance().condition('endsWith').name,
79+
searchVal: 'bar'
80+
});
81+
subGroup.filteringOperands.push({
82+
fieldName: 'OrderDate',
83+
condition: IgxDateFilteringOperand.instance().condition('today'),
84+
conditionName: IgxDateFilteringOperand.instance().condition('today').name
4485
});
45-
orTree.filteringOperands.push({
46-
fieldName: 'CompanyName',
47-
condition: IgxStringFilteringOperand.instance().condition('contains'),
48-
searchVal: 'c',
49-
ignoreCase: true
86+
87+
const tree = new FilteringExpressionsTree(FilteringLogic.And, undefined, 'Orders', ['*']);
88+
tree.filteringOperands.push({
89+
fieldName: 'CompanyID',
90+
condition: IgxStringFilteringOperand.instance().condition('in'),
91+
conditionName: 'in',
92+
searchTree: innerTree
93+
});
94+
tree.filteringOperands.push({
95+
fieldName: 'OrderDate',
96+
condition: IgxDateFilteringOperand.instance().condition('before'),
97+
conditionName: 'before',
98+
searchVal: new Date('2024-01-01T00:00:00.000Z')
5099
});
51-
tree.filteringOperands.push(orTree);
100+
tree.filteringOperands.push(subGroup);
52101
tree.filteringOperands.push({
53-
fieldName: 'CompanyName',
54-
condition: IgxStringFilteringOperand.instance().condition('contains'),
55-
searchVal: 'd',
56-
ignoreCase: true
102+
fieldName: 'ShippedDate',
103+
condition: IgxDateFilteringOperand.instance().condition('null'),
104+
conditionName: 'null'
57105
});
58106

59107
this.expressionTree = tree;
@@ -62,4 +110,4 @@ export class QueryBuilderSample1Component implements OnInit {
62110
public printExpressionTree(tree: IExpressionTree) {
63111
return tree ? JSON.stringify(tree, null, 2) : 'Please add an expression!';
64112
}
65-
}
113+
}

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

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1-
<igx-query-builder #queryBuilder
2-
[fields]="fields">
3-
</igx-query-builder>
1+
<div class="wrapper">
2+
<igx-query-builder #queryBuilder
3+
[entities]="entities">
4+
</igx-query-builder>
5+
</div>

0 commit comments

Comments
 (0)