From 37d4fd52f0ab18e8efd2e8eb5d21b220818fcc57 Mon Sep 17 00:00:00 2001 From: Teodosia Hristodorova <52423497+teodosiah@users.noreply.github.com> Date: Fri, 18 Oct 2024 13:15:28 +0300 Subject: [PATCH] Revert "docs(query-builder): update topic with nested queries and templating" --- en/components/query-builder.md | 128 +++++++-------------------------- en/components/toc.yml | 1 - 2 files changed, 25 insertions(+), 104 deletions(-) diff --git a/en/components/query-builder.md b/en/components/query-builder.md index c8de544ee9..cc2d506688 100644 --- a/en/components/query-builder.md +++ b/en/components/query-builder.md @@ -64,7 +64,7 @@ import { IGX_QUERY_BUILDER_DIRECTIVES, FilteringExpressionsTree, FieldType } fro selector: 'app-home', template: ` @@ -76,7 +76,7 @@ import { IGX_QUERY_BUILDER_DIRECTIVES, FilteringExpressionsTree, FieldType } fro }) export class HomeComponent { public expressionTree: FilteringExpressionsTree; - public entities: Array; + public fields: FieldType []; public onExpressionTreeChange() { ... @@ -88,53 +88,41 @@ Now that you have the Ignite UI for Angular Query Builder module or directives i ## Using the Angular Query Builder -If no expression tree is initially set, you start by creating a group of conditions linked with [`AND`]({environment:angularApiUrl}/enums/filteringlogic.html#and) or [`OR`]({environment:angularApiUrl}/enums/filteringlogic.html#or). Then you choose an entity and which of its fields the query should return. After that, conditions or sub-groups can be added. +If no expression tree is initially set, you start with creating a group of conditions linked with [`AND`]({environment:angularApiUrl}/enums/filteringlogic.html#and) or [`OR`]({environment:angularApiUrl}/enums/filteringlogic.html#or). After that, conditions or sub-groups can be added. -In order to add a condition you select a field, an operand based on the field data type and a value if the operand is not unary. The operands `In` and `Not In` will allow you to create an inner query with conditions for a different entity instead of simply providing a value. Once the condition is committed, a chip with the condition information appears. By clicking the chip, you have the options to modify it or add another condition or group right after it. +In order to add a condition, a field, an operand based on the field dataType and a value if the operand is not unary. Once the condition is committed, a chip with the condition information appears. By hovering or clicking the chip, you have the options to modify it or add another condition or group right after it. -If you select more than one condition chip, a context menu appears with options to group or delete the current selection. If you choose to create a group with the selected conditions, the newly created group will appear where the topmost selected condition was placed. +If you select more than one condition chip, a context menu appears with options to create a group or delete the queries. If you choose to create a group with the selected conditions, the newly created group will appear where the topmost selected condition was placed. In order to select a group, you can also click on its vertical line, which is colored based on the linking condition ([`AND`]({environment:angularApiUrl}/enums/filteringlogic.html#and) or [`OR`]({environment:angularApiUrl}/enums/filteringlogic.html#or)). If a single group is selected, you get a context menu with options to change its logic, ungroup or delete it. -Since every condition is related to a specific field from a particular entity changing the entity will lead to resetting all preset conditions and groups. When selecting a new entity a confirmation dialog will be shown, unless the [`showEntityChangeDialog`]({environment:angularApiUrl}/classes/igxquerybuildercomponent.html#showEntityChangeDialog) input property is set to false. - -You can start using the component by setting the [`entities`]({environment:angularApiUrl}/classes/igxquerybuildercomponent.html#entities) property to an array describing the entity name and an array of its fields, where each field is defined by its name and data type. Once a field is selected it will automatically assign the corresponding operands based on the data type. +You can start using the component by setting the [`fields`]({environment:angularApiUrl}/classes/igxquerybuildercomponent.html#fields) property to an array describing the field name and its data type. It will automatically assign the corresponding operands based on the data type. The Query Builder has the [`expressionTree`]({environment:angularApiUrl}/classes/igxquerybuildercomponent.html#expressionTree) input property. You could use it to set an initial state of the control and access the user-specified filtering logic. ```typescript ngAfterViewInit(): void { - 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: 'Contact', - condition: IgxBooleanFilteringOperand.instance().condition('true'), - conditionName: 'true' - }); - - const tree = new FilteringExpressionsTree(FilteringLogic.And, undefined, 'Orders', ['*']); + const tree = new FilteringExpressionsTree(FilteringLogic.And); tree.filteringOperands.push({ - fieldName: 'CompanyID', - condition: IgxStringFilteringOperand.instance().condition('in'), - conditionName: 'in', - searchTree: innerTree + fieldName: 'ID', + condition: IgxStringFilteringOperand.instance().condition('contains'), + searchVal: 'a', + ignoreCase: true }); - tree.filteringOperands.push({ - fieldName: 'OrderDate', - condition: IgxDateFilteringOperand.instance().condition('before'), - conditionName: 'before', - searchVal: new Date('2024-01-01T00:00:00.000Z') + const subTree = new FilteringExpressionsTree(FilteringLogic.Or); + subTree.filteringOperands.push({ + fieldName: 'ContactTitle', + condition: IgxStringFilteringOperand.instance().condition('doesNotContain'), + searchVal: 'b', + ignoreCase: true }); - tree.filteringOperands.push({ - fieldName: 'ShippedDate', - condition: IgxDateFilteringOperand.instance().condition('null'), - conditionName: 'null' + subTree.filteringOperands.push({ + fieldName: 'CompanyName', + condition: IgxStringFilteringOperand.instance().condition('startsWith'), + searchVal: 'c', + ignoreCase: true }); - + tree.filteringOperands.push(subTree); + this.queryBuilder.expressionTree = tree; } ``` @@ -143,76 +131,12 @@ The `expressionTree` is a two-way bindable property which means a corresponding ```html ``` -## Templating - -The Ignite UI for Angular Query Builder Component allows defining templates for the component's header and the search value using the following predefined reference names: - -### Header - -Passing content inside of the `igx-query-builder-header` allows templating the query builder header. The [`IgxQueryBuilderHeaderComponent`]({environment:angularApiUrl}/classes/igxquerybuilderheadercomponent.html) provides a way to hide the legend by setting the [`showLegend`]({environment:angularApiUrl}/classes/igxquerybuilderheadercomponent.html#showLegend) input property to false. - - The code snippet below illustrates how to do this: - -```html - - - - -``` - -### Search value - -The search value of a condition can be templated using the [`igxQueryBuilderSearchValue`]({environment:angularApiUrl}/classes/igxquerybuildersearchvaluetemplatedirective.html) directive, applied to an `` inside of the `igx-query-builder`'s body: - -```html - - - @if ( - selectedField?.field === 'Region' && - (selectedCondition === 'equals' || selectedCondition === 'doesNotEqual') - ){ - - - {{ reg.text }} - - - } - @else if ( - selectedField?.field === 'OrderStatus' && - (selectedCondition === 'equals' || selectedCondition === 'doesNotEqual') - ){ - - - {{stat.text}} - - - } - @else { - - } - - -``` - -We’ve created this Angular Query Builder example to show you the templating functionalities for the header and the search value of the Angular Query Builder component. - - - - ## Styling To get started with styling the Query Builder, we need to import the `index` file, where all the theme functions and component mixins live: @@ -522,8 +446,6 @@ You can also streamline your Angular app development using [WYSIWYG App Builder
* [IgxQueryBuilderComponent API]({environment:angularApiUrl}/classes/igxquerybuildercomponent.html) -* [IgxQueryBuilderHeaderComponent]({environment:angularApiUrl}/classes/igxquerybuilderheadercomponent.html) -* [IgxQueryBuilderSearchValueTemplateDirective]({environment:angularApiUrl}/classes/igxquerybuildersearchvaluetemplatedirective.html) * [IgxQueryBuilderComponent Styles]({environment:sassApiUrl}/index.html#function-query-builder-theme) ## Additional Resources diff --git a/en/components/toc.yml b/en/components/toc.yml index d3812bcd15..f83ea1f9be 100644 --- a/en/components/toc.yml +++ b/en/components/toc.yml @@ -970,7 +970,6 @@ - name: Query Builder href: query-builder.md new: false - updated: true - name: Radio & Radio Group href: radio-button.md new: false