Skip to content

Commit

Permalink
Merge pull request #3594 from IgniteUI/ipetrov/query-builder-samples-…
Browse files Browse the repository at this point in the history 
…update-36242

feat(query-builder): update existing samples and add template sample
  • Loading branch information
@damyanpetev
damyanpetev authored Feb 24, 2025
2 parents 514efa5 + dccccb0 commit 00ba0cc
Show file tree
Hide file tree
Showing 16 changed files with 336 additions and 131 deletions.
9 changes: 7 additions & 2 deletions live-editing/configs/QueryBuilderConfigGenerator.ts
View file
Original file line number Diff line number Diff line change
@@ -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 {

Expand All @@ -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"],
Expand Down
17 changes: 9 additions & 8 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 3 additions & 3 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand Down
3 changes: 2 additions & 1 deletion src/app/interactions/interactions-routes-data.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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' }
};
6 changes: 6 additions & 0 deletions src/app/interactions/interactions.routes.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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'
}
];
8 changes: 4 additions & 4 deletions ...p/interactions/query-builder/query-builder-sample-1/query-builder-sample-1.component.html
View file
Original file line number Diff line number Diff line change
@@ -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>
3 changes: 3 additions & 0 deletions ...p/interactions/query-builder/query-builder-sample-1/query-builder-sample-1.component.scss
View file
Original file line number Diff line number Diff line change
@@ -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;
}
130 changes: 89 additions & 41 deletions ...app/interactions/query-builder/query-builder-sample-1/query-builder-sample-1.component.ts
View file
Original file line number Diff line number Diff line change
@@ -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',
Expand All @@ -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;
Expand All @@ -62,4 +110,4 @@ export class QueryBuilderSample1Component implements OnInit {
public printExpressionTree(tree: IExpressionTree) {
return tree ? JSON.stringify(tree, null, 2) : 'Please add an expression!';
}
}
}
8 changes: 5 additions & 3 deletions src/app/interactions/query-builder/query-builder-style/query-builder-style.component.html
View file
Original file line number Diff line number Diff line change
@@ -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>
Loading

0 comments on commit 00ba0cc

Please sign in to comment.