From 47bc07e3702dd47e6ba3ce3d95ddcfc9ae8d6dd0 Mon Sep 17 00:00:00 2001 From: ivanvpetrov <110455887+ivanvpetrov@users.noreply.github.com> Date: Fri, 11 Oct 2024 14:13:18 +0300 Subject: [PATCH] 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 Co-authored-by: Teodosia Hristodorova <52423497+teodosiah@users.noreply.github.com> Co-authored-by: Galina Edinakova Co-authored-by: igdmdimitrov --- .../interactions/interactions-routes-data.ts | 3 +- .../interactions-routing.module.ts | 6 ++ src/app/interactions/interactions.module.ts | 14 +++- ...ery-builder-template-sample.component.html | 32 ++++++++ ...ery-builder-template-sample.component.scss | 20 +++++ ...query-builder-template-sample.component.ts | 81 +++++++++++++++++++ 6 files changed, 153 insertions(+), 3 deletions(-) create mode 100644 src/app/interactions/query-builder/query-builder-template-sample/query-builder-template-sample.component.html create mode 100644 src/app/interactions/query-builder/query-builder-template-sample/query-builder-template-sample.component.scss create mode 100644 src/app/interactions/query-builder/query-builder-template-sample/query-builder-template-sample.component.ts diff --git a/src/app/interactions/interactions-routes-data.ts b/src/app/interactions/interactions-routes-data.ts index 4dfccd8360..99535f672e 100644 --- a/src/app/interactions/interactions-routes-data.ts +++ b/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' } }; diff --git a/src/app/interactions/interactions-routing.module.ts b/src/app/interactions/interactions-routing.module.ts index ba5e9625d1..e65935b736 100644 --- a/src/app/interactions/interactions-routing.module.ts +++ b/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' } ]; diff --git a/src/app/interactions/interactions.module.ts b/src/app/interactions/interactions.module.ts index f9dbd02955..28589afcf4 100644 --- a/src/app/interactions/interactions.module.ts +++ b/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] }) diff --git a/src/app/interactions/query-builder/query-builder-template-sample/query-builder-template-sample.component.html b/src/app/interactions/query-builder/query-builder-template-sample/query-builder-template-sample.component.html new file mode 100644 index 0000000000..8f6081c9f0 --- /dev/null +++ b/src/app/interactions/query-builder/query-builder-template-sample/query-builder-template-sample.component.html @@ -0,0 +1,32 @@ +
+ + + + + @if (selectedField?.field === 'Region' && (selectedCondition === 'equals' || selectedCondition === 'doesNotEqual')){ + + {{ reg.text }} + + } + @else if (selectedField?.field === 'OrderStatus' && (selectedCondition === 'equals' || selectedCondition === 'doesNotEqual')){ + + + {{stat.text}} + + + } + @else { + + } + + +
+ 
{{ printExpressionTree(queryBuilder.expressionTree) }}
+
+
diff --git a/src/app/interactions/query-builder/query-builder-template-sample/query-builder-template-sample.component.scss b/src/app/interactions/query-builder/query-builder-template-sample/query-builder-template-sample.component.scss new file mode 100644 index 0000000000..a8e0461bd1 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/app/interactions/query-builder/query-builder-template-sample/query-builder-template-sample.component.ts b/src/app/interactions/query-builder/query-builder-template-sample/query-builder-template-sample.component.ts new file mode 100644 index 0000000000..b89e9973d9 --- /dev/null +++ b/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!'; + } +} \ No newline at end of file