feat(query-builder): support for nested queries and other improvements #14647

igdmdimitrov · 2024-08-19T13:49:59Z

Closes #14642
Closes #14979
Closes #15389

Additional information (check all that apply):

Checklist:

All relevant tags have been applied to this PR
This PR includes unit tests covering all the new code (test guidelines)
This PR includes API docs for newly added methods/properties (api docs guidelines)
This PR includes feature/README.MD updates for the feature docs
This PR includes general feature table updates in the root README.MD
This PR includes CHANGELOG.MD updates for newly added functionality
This PR contains breaking changes
This PR includes ng update migrations for the breaking changes (migrations guidelines)
This PR includes behavioral changes and the feature specification has been updated with them

gedinakova · 2024-08-29T12:10:27Z

@desig9stein

Run the dev demo with indigo theme
Expand "Select return fields" combo

Result: The search & select all are not aligned with the actual items.

Expected result: All elements should be aligned.

gedinakova · 2024-08-29T12:24:40Z

@desig9stein

Run the dev demo with bootstrap or fluent theme
Put one of the conditions in edit mode
Note the commit & discard buttons alignment

Result:

Expected result: The buttons should be aligned with the inputs.

gedinakova · 2024-08-29T12:46:09Z

Run the dev demo
Clear all conditions
Start a new group
Add a new condition without a value
Click the line group indicator

Result: The changes are discarded.

desig9stein · 2024-08-29T14:40:00Z

@desig9stein

Run the dev demo with bootstrap or fluent theme

Put one of the conditions in edit mode

Note the commit & discard buttons alignment

Result:

Expected result: The buttons should be aligned with the inputs.

@AnjiManova Since this is by design, I am unsure how to proceed. The problem is that those are icon buttons, and they are big, even in small variant.

Maybe we can use just icons instead? We already have just icons here

AnjiManova · 2024-08-29T14:51:59Z

@desig9stein

Run the dev demo with bootstrap or fluent theme

Put one of the conditions in edit mode

Note the commit & discard buttons alignment

Result:
Expected result: The buttons should be aligned with the inputs.

@AnjiManova Since this is by design, I am unsure how to proceed. The problem is that those are icon buttons, and they are big, even in small variant.

Maybe we can use just icons instead? We already have just icons here

Can we just try to apply align-item: flex-end and align the buttons to the bottom instead of changing the used components?

desig9stein · 2024-08-29T15:00:43Z

@desig9stein

Run the dev demo with bootstrap or fluent theme

Put one of the conditions in edit mode

Note the commit & discard buttons alignment

Result:
Expected result: The buttons should be aligned with the inputs.

@AnjiManova Since this is by design, I am unsure how to proceed. The problem is that those are icon buttons, and they are big, even in small variant.
Maybe we can use just icons instead? We already have just icons here

Can we just try to apply align-item: flex-end and align the buttons to the bottom instead of changing the used components?

Won't work, since the buttons are very big and there are labels on top of the inputs. the only way to align the buttons with the inputs is to use icons, I can try to make the buttons absolute and play with the position, but i don't like this idea

absolute position

Or maybe we can override the size of the buttons to match the size of the inputs in the context of the query builder

teodosiah · 2024-08-29T15:02:05Z

Start adding new group
Type some values in the inputs
Change the selected entity
Confirm the change

Result: The operator and value inputs are not reset and the commit button is not disabled

Expected result: All inputs in the condition should be cleared and the commit button should be disabled

AnjiManova · 2024-08-30T07:47:37Z

@desig9stein

Run the dev demo with bootstrap or fluent theme

Put one of the conditions in edit mode

Note the commit & discard buttons alignment

Result:
Expected result: The buttons should be aligned with the inputs.

@AnjiManova Since this is by design, I am unsure how to proceed. The problem is that those are icon buttons, and they are big, even in small variant.
Maybe we can use just icons instead? We already have just icons here

Can we just try to apply align-item: flex-end and align the buttons to the bottom instead of changing the used components?

Won't work, since the buttons are very big and there are labels on top of the inputs. the only way to align the buttons with the inputs is to use icons, I can try to make the buttons absolute and play with the position, but i don't like this idea

absolute position

Or maybe we can override the size of the buttons to match the size of the inputs in the context of the query builder

If it's up to me I will not override the size of the buttons. The problem is only in the Large size in Bootstrap and in the Small size in Fluent and it is because of the fixed size of the Input Group components (Small size) in the Advanced Filtering and the Query Builder. We could consider future improvment here.

About the buttons misalignment we will discuss your concerns with the team and we will come back to you, but for now it can stay as it is.

In addition we added visual examples in all sizes for the Query Builder for all themes in the Figma file.

ivanvpetrov · 2024-09-02T10:54:34Z

Open Query Builder demo page
Select both available conditions
Group the as new And/Or group
Repeat 2 and 3 again
The Select expression disappears - issue
Now start creating new select expression
Cancel the creation.
The two conditions disappear - issue

QueryBuilder_bug1.mp4

gedinakova · 2024-09-03T07:13:57Z

Run the dev demo
Put the inner query in edit mode
Click the Or Group button to add a group at the bottom
Enter a valid condition and submit it
Attempt to add a new condition to the newly added group

Result: The + button does not show up on the group.

Expected: One should be allowed to add new conditions to groups.

gedinakova · 2024-09-03T07:27:12Z

Run the dev demo
Put the 'Id equals 123' condition in edit mode (or create a new inner query)
Change 'Equals' to 'In' > the value input gets disabled
Add a valid condition in the inner query & submit it
Commit the parent

Result: The condition remains in edit mode although the parent condition's commit button gets enabled. On attempting to commit the parent the following error is thrown:
ERROR TypeError: Cannot read properties of null (reading 'name')
at _a150.createExpressionGroupItem (query-builder-tree.component.ts:1305:64)
at _a150.init (query-builder-tree.component.ts:1526:31)
at set expressionTree (query-builder-tree.component.ts:221:14)
at applyValueToInputField (core.mjs:4045:29)
at writeToDirectiveInput (core.mjs:11443:13)
at setInputsForProperty (core.mjs:12749:9)
at elementPropertyInternal (core.mjs:12050:9)

Expected result: Adding an In/Not condition should be working fine.

gedinakova · 2024-09-03T09:00:43Z

Run the dev demo
Clear all conditions and start a new group > all add buttons are disabled
Select an entity > all add buttons get enabled
Click "+ condition" button > Two empty conditions are in view
Select a field in the first one

Result: Both conditions get updated with the newly selected field.
Expected result: The add buttons should not be enabled before the first condition is submitted.

teodosiah · 2024-09-04T06:58:17Z

Run the dev demo

Put the 'Id equals 123' condition in edit mode (or create a new inner query)

Change 'Equals' to 'In' > the value input gets disabled

Add a valid condition in the inner query & submit it

Commit the parent

Result: The condition remains in edit mode although the parent condition's commit button gets enabled. On attempting to commit the parent the following error is thrown: ERROR TypeError: Cannot read properties of null (reading 'name') at _a150.createExpressionGroupItem (query-builder-tree.component.ts:1305:64) at _a150.init (query-builder-tree.component.ts:1526:31) at set expressionTree (query-builder-tree.component.ts:221:14) at applyValueToInputField (core.mjs:4045:29) at writeToDirectiveInput (core.mjs:11443:13) at setInputsForProperty (core.mjs:12749:9) at elementPropertyInternal (core.mjs:12050:9)

Expected result: Adding an In/Not condition should be working fine.

The issue could be reproduced when there is no initially set expressionTree and a new group is added as well:

teodosiah · 2024-09-04T07:47:22Z

Add new group

Result:

Еxpected behavior:

Commit the condition
Result:

Expected result:

Add second condition
Result:

Expected result:

igdmdimitrov · 2024-09-12T11:39:51Z

@desig9stein , please add background to 'Select All' item (when selected) and align the item:

projects/igniteui-angular/src/lib/core/styles/components/dialog/_dialog-theme.scss

projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss

projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss

...ects/igniteui-angular/src/lib/core/styles/components/query-builder/_query-builder-theme.scss

- Remove qb overriders from igx-dialog theme, - Remove unused variables related to the qb from igx-grid theme

- fix typography - make sure that creating a global button theme will not override the and and or buttons

…e handled in separate issue

damyanpetev

Leaving some comments, most of those can be addressed later (thus non-blocking for now)

damyanpetev · 2025-02-20T15:39:57Z

projects/igniteui-angular/src/lib/data-operations/filtering-condition.ts

    /**
-     * Returns an array of names of the conditions which are visible in the UI
+     * Returns an array of names of the conditions which are visible in the filtering UI
     */
    public conditionList(): string[] {
+        return this.operations.filter(f => !f.hidden && !f.isNestedQuery).map((element) => element.name);    
+    }
+
+    /**
+     * Returns an array of names of the conditions which are visible in the UI, including "In" and "Not In", allowing the creation of sub-queries.
+     */
+    public extendedConditionList(): string[] {
        return this.operations.filter(f => !f.hidden).map((element) => element.name);
    }


Since IgxFilteringOperand is very much public (customers are advised to extend for custom scenarios), I'm not sure about this change. At least would consider a middle ground that doesn't disturb the API (like a flag to include queries), but also operations are also public so it's super simple to access externally and our internal utils really don't belong in public user configs.
Quite similar to the find methods of the expression tree IIRC and perhaps worth of similar fate (to be phased out).

damyanpetev · 2025-02-20T16:16:55Z

projects/igniteui-angular/src/lib/data-operations/filtering-condition.ts

     * @hidden
     */
-    protected findValueInSet(target: any, searchVal: Set<any>) {
+    public findValueInSet(target: any, searchVal: Set<any>) {


Also not sure why this became public, can't see any external use and we've already got enough of those visible :)

damyanpetev · 2025-02-20T16:22:37Z

projects/igniteui-angular/src/lib/data-operations/filtering-condition.ts

+        }];
+
+        this.operations = newOperations.concat(this.operations);


If we're changing this wouldn't mind also just ...this.operations and the end. With those array sizes and this running once, it'll negligible diff, if any :)

Also empty line with indents

damyanpetev · 2025-02-21T14:02:24Z

...ui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.ts

+
+    /**
+     * @hidden @internal
+     */
+    public generateEntity() {
+        const entities = [


Don't need any more of those semi-public things for templates anymore

Suggested change

/**

* @hidden @internal

*/

public generateEntity() {

const entities = [

protected generateEntity() {

const entities = [

Also, and I can't say the old code was any better in this regard, not really the best option to have a function generate this array basically on every change detection. Pretty much guarantees whatever logic is behind entities is ran too. Both the filter and entity transform are probably best done by a pipe.

damyanpetev · 2025-02-21T14:51:43Z

...gniteui-angular/src/lib/grids/filtering/excel-style/excel-style-date-expression.component.ts

+    }
+
+    public set searchVal(value: any) {
+        this.expressionUI.expression.searchVal = value ? new Date(Date.parse(value.toString())) : null;


Ough, always a bit sketchy seeing a direct Date.parse/new Date on what I'm assuming is user data directly? Those tend to have oddities with both formats against locales and time offsets with date-only ISO. For examples: our own internal DateUtil has such parseISODate and you can have a look behind Angular's toDate which is used for formatDate/DatePipe

Regardless, would love if not every small grid component does its own parsing however, but have a single util that definitely supports what we need (eventually I guess). At the very least, I see some of the filtering strategy going to core/utils parseDate so we can at least try to move towards standardizing on that for the Grids?

projects/igniteui-angular/src/lib/query-builder/query-builder-drag.service.ts

damyanpetev · 2025-02-21T16:20:07Z

projects/igniteui-angular/src/lib/query-builder/query-builder.component.ts

    /**
     * @hidden @internal
     */
-    public fieldSelectOverlaySettings: OverlaySettings = {
-        scrollStrategy: new AbsoluteScrollStrategy(),
-        modal: false,
-        closeOnOutsideClick: false
-    };
+    @ContentChild(IgxQueryBuilderSearchValueTemplateDirective, { read: TemplateRef })
+    public searchValueTemplate: TemplateRef<any>;


Again, would prefer if these props were directly private/protected

damyanpetev · 2025-02-21T16:23:57Z

projects/igniteui-angular/src/lib/query-builder/query-builder.component.ts

-            this.deselectParentRecursive(parent);
-        }
-    }
+        const inIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5f6368"><path d="M560-280H120v-400h720v120h-80v-40H200v240h360v80Zm-360-80v-240 240Zm560 200v-120H640v-80h120v-120h80v120h120v80H840v120h-80Z"/></svg>';


Are those supposed to go into the actual package at some point?

CHANGELOG.md

damyanpetev · 2025-02-21T16:46:44Z

projects/igniteui-angular/src/lib/core/i18n/query-builder-resources.ts

-    igx_query_builder_create_and_group?: string;
-    igx_query_builder_create_or_group?: string;


Removing those is technically a breaking change, however small. The resource interfaces are public API, just sayin :)

added migration in this PR - #15381

…b.com/IgniteUI/igniteui-angular into dmdimitrov/query-builder-improvements

* fix(*): Renamed nested query condtions

…ader title (#15381) * feat(query-builder): expose disableReturnFieldsChange prop on root level * feat(query-builder): hide header, remove title RS, update CHANGELOG and README.md * chore(*): Move header variants down in the dev demo. --------- Co-authored-by: igdmdimitrov <[email protected]> Co-authored-by: desig9stein <[email protected]> Co-authored-by: Galina Edinakova <[email protected]>

stale

igdmdimitrov added the 🛠️ status: in-development Issues and PRs with active development on them label Aug 19, 2024

This comment was marked as outdated.

Sign in to view

Otixa force-pushed the dmdimitrov/query-builder-improvements branch from 36e04c1 to 28a92c3 Compare August 29, 2024 12:06

simeonoff reviewed Feb 21, 2025

View reviewed changes

fix(query-builder): Fix for comments

0307dfd

- Remove qb overriders from igx-dialog theme, - Remove unused variables related to the qb from igx-grid theme

desig9stein mentioned this pull request Feb 21, 2025

Chip: long suffix and prefix wrap on 2 lines #15389

Closed

desig9stein added 2 commits February 21, 2025 17:23

fix(query-builder): Fix for comments

5cbdf3a

- fix typography - make sure that creating a global button theme will not override the and and or buttons

fix(query-builder): Revert the chip prefix/suffix fix since it will b…

42912d5

…e handled in separate issue

damyanpetev reviewed Feb 21, 2025

View reviewed changes

simeonoff previously approved these changes Feb 24, 2025

View reviewed changes

simeonoff mentioned this pull request Feb 24, 2025

[Bug]: Chip long suffix and prefix wrap on 2 lines IgniteUI/igniteui-webcomponents#1583

Closed

ivanvpetrov added 2 commits February 24, 2025 10:51

fix(query-builder): test exprectations loosen up

62cf1fb

Merge branch 'dmdimitrov/query-builder-improvements' of https://githu…

a619af9

…b.com/IgniteUI/igniteui-angular into dmdimitrov/query-builder-improvements

ivanvpetrov dismissed simeonoff’s stale review via a619af9 February 24, 2025 08:52

ivanvpetrov and others added 5 commits February 24, 2025 10:58

chore(query-builder): comments syntax changed

2423fb5

chore(*): update changelog

409913a

chore(query-builder): comments on functions added with params

b5c23f6

Merge branch 'master' into dmdimitrov/query-builder-improvements

8dba318

Merge branch 'master' into dmdimitrov/query-builder-improvements

6421e31

ChronosSF requested review from ChronosSF and damyanpetev February 25, 2025 13:27

fix(*): Renamed nested query condtions (#15401)

ea6d711

* fix(*): Renamed nested query condtions

ChronosSF previously approved these changes Feb 25, 2025

View reviewed changes

gedinakova dismissed ChronosSF’s stale review via 7b04dce February 25, 2025 15:15

Merge branch 'master' into dmdimitrov/query-builder-improvements

45c9a44

gedinakova requested review from ChronosSF and pmoleri February 25, 2025 15:43

damyanpetev approved these changes Feb 25, 2025

View reviewed changes

damyanpetev merged commit 16d2f95 into master Feb 25, 2025
5 checks passed

damyanpetev deleted the dmdimitrov/query-builder-improvements branch February 25, 2025 15:55

damyanpetev mentioned this pull request Mar 4, 2025

API analyzer adjustments 19.1 #15451

Merged

14 tasks

		igx_query_builder_create_and_group?: string;
		igx_query_builder_create_or_group?: string;

feat(query-builder): support for nested queries and other improvements #14647

feat(query-builder): support for nested queries and other improvements #14647

Uh oh!

Conversation

igdmdimitrov commented Aug 19, 2024 • edited by simeonoff Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Additional information (check all that apply):

Checklist:

Uh oh!

This comment was marked as outdated.

This comment was marked as outdated.

This comment was marked as outdated.

This comment was marked as outdated.

This comment was marked as outdated.

This comment was marked as outdated.

This comment was marked as outdated.

This comment was marked as outdated.

This comment was marked as outdated.

This comment was marked as outdated.

This comment was marked as outdated.

This comment was marked as outdated.

This comment was marked as outdated.

gedinakova commented Aug 29, 2024

Uh oh!

gedinakova commented Aug 29, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

gedinakova commented Aug 29, 2024

Uh oh!

desig9stein commented Aug 29, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

AnjiManova commented Aug 29, 2024

Uh oh!

desig9stein commented Aug 29, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

teodosiah commented Aug 29, 2024

Uh oh!

AnjiManova commented Aug 30, 2024

Uh oh!

ivanvpetrov commented Sep 2, 2024

Uh oh!

gedinakova commented Sep 3, 2024

Uh oh!

gedinakova commented Sep 3, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

gedinakova commented Sep 3, 2024

Uh oh!

teodosiah commented Sep 4, 2024

Uh oh!

teodosiah commented Sep 4, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

igdmdimitrov commented Sep 12, 2024

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

damyanpetev left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

igdmdimitrov commented Aug 19, 2024 •

edited by simeonoff

Loading

gedinakova commented Aug 29, 2024 •

edited

Loading

desig9stein commented Aug 29, 2024 •

edited

Loading

desig9stein commented Aug 29, 2024 •

edited

Loading

gedinakova commented Sep 3, 2024 •

edited

Loading

teodosiah commented Sep 4, 2024 •

edited

Loading