-
Notifications
You must be signed in to change notification settings - Fork 25
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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 <[email protected]> Co-authored-by: Teodosia Hristodorova <[email protected]> Co-authored-by: Galina Edinakova <[email protected]> Co-authored-by: igdmdimitrov <[email protected]>
- Loading branch information
5 people
authored
Oct 11, 2024
1 parent
78e285c
commit 47bc07e
Showing
6 changed files
with
153 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
32 changes: 32 additions & 0 deletions
32
.../query-builder/query-builder-template-sample/query-builder-template-sample.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
20 changes: 20 additions & 0 deletions
20
.../query-builder/query-builder-template-sample/query-builder-template-sample.component.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| } |
81 changes: 81 additions & 0 deletions
81
...ns/query-builder/query-builder-template-sample/query-builder-template-sample.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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!'; | ||
| } | ||
| } |