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