Query-builder conditions Drag&Drop functionality (take 2 - no chip gaps) #15122

ivanvpetrov · 2024-11-28T13:18:45Z

The difference between this PR and #15102 is that here component gaps are replaced with padding so we don't have void space between chips and the drag&drop works perfectly
Closes #14642

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

…le is false

…ot mouse

- make sure that the icon buttons are outlined - change the size of the fields in bootstrap - change the label inside the ghost drop indicator - change the padding inside the ghost drop

desig9stein · 2025-01-31T15:09:38Z

Material
The buttons for all themes should be Outlined, not Flat. there was a bug logged

Here is the bug
#15299

The label and the border should be grays 600, and there is no fill color.

They are the background is transparent

sbayreva · 2025-02-03T12:18:09Z

Indigo

The space between here should be 24px, not 16px. For all themes EXCEPT Bootstrap where this gap is 16px.

Material

The background of the whole QB in light mode should be white. Now, it is surface.
Relevant for all themes: Top, Bottom, Left and Right paddings here should be 12 px

…ithub.com/IgniteUI/igniteui-angular into ipetrov/query-builder-drag-and-drop-nogap

- fix icons - fix padding - fix gap - Add min width to he subquery - Fix bootstrap AND & OR buttons foreground color

- Add overrides for qb in context of igx-dialog

…de click

… editors template (#15330) * feat(query-builder): expose resource string for nested query value placeholder * feat(query-builder): add placeholder check in tests, fix not-in

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

gedinakova · 2025-02-05T06:43:49Z

projects/igniteui-angular/package.json

@@ -73,7 +73,7 @@
        "tslib": "^2.3.0",
        "igniteui-trial-watermark": "^3.0.2",
        "lodash-es": "^4.17.21",
-        "igniteui-theming": "^14.3.1-beta.1",
+        "igniteui-theming": "v14.5.0-beta.2",


Suggested change

"igniteui-theming": "v14.5.0-beta.2",

"igniteui-theming": "v14.5.0-beta.3",

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

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

projects/igniteui-angular/src/lib/query-builder/query-builder-tree.component.html

igdmdimitrov · 2025-02-04T15:51:38Z

projects/igniteui-angular/src/lib/query-builder/query-builder-tree.component.html

-            (click)="addCondition(expressionItem, afterExpression)"
+            (click)="addCondition(expressionItem, afterExpression, true)"
+            igxDrop
+            (enter)="dragService.onAddConditionEnter(addConditionButton, expressionItem)"


Add wrapping div for the two buttons and move igxDrop, enter/leave logic there, so that dragging over '+ Group' button will show ghost chip as well.

Only the '+Condition' button was discussed to be a drop zone.
I have a hunch that if we want to introduce the '+Group' button as a drop zone, the user will anticipate dropping the condition in a new group and that won't be so easy to implement.

@ig-georgeA What's your take on this? Leave it like this, or change something?

projects/igniteui-angular/src/lib/query-builder/query-builder-tree.component.html

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

…ry-builder-drag-and-drop-nogap

chore(*): query builder merge

…ry-builder-drag-and-drop-nogap

ivanvpetrov added 14 commits November 22, 2024 13:06

feat(query-builder): add initial drag and drop functionality

4131e24

feat(query-builder): add drag and drop functionality 2

b37a8c1

feat(query-builder): add code clean up

273fb12

feat(query-builder): edit code clean

b791a81

feat(query-builder): fix big improvement in drag and drop

01b8615

feat(query-builder): add drop at north of a chip functionality added

39be52e

feat(query-builder): add drop at addCondition button

7009f7f

feat(query-builder): fix drop ghost behavior on addCondition

e924129

feat(query-builder): edit switch gap for padding

a123d7b

feat(query-builder): edit switch gap for padding 2

0945919

feat(query-builder): refactor drag and drop with no gap

ee80747

feat(query-builder): refactor almost done

5d2d4e0

feat(query-builder): fix move to addCondition. code cleanup

7b63988

feat(query-builder): fix chip move bug and other bugs

c5c3074

ivanvpetrov added 🆕 status: new ❌ do not merge query-builder labels Nov 28, 2024

ivanvpetrov requested a review from gedinakova November 28, 2024 13:18

ivanvpetrov added 12 commits December 3, 2024 10:35

feat(query-builder): add cursor change

2e11edf

feat(query-builder): fix more css. padding replaced with margin

28b6076

feat(query-builder): add make edited condition a dropzone too

fd478da

feat(query-builder): add chips can be dragged only when in edin mode

fdc8837

feat(query-builder): fix more css margin

7982502

feat(query-builder): add mousemove listener for ghost removal

8caa97e

feat(query-builder): fix more css gaps

e11116b

feat(query-builder): fix bug where movestart is fired, though draggab…

1ccfa71

…le is false

feat(query-builder): add ghost adjacency calced by it's chip rather n…

502185d

…ot mouse

feat(query-builder): fix removed duplicated reference

346a6a5

feat(query-builder): add group opearator word

12b1172

feat(query-builder): add keyboard drag&drop working

4db0605

fix(query-builder): fix for comments

79c05c5

- make sure that the icon buttons are outlined - change the size of the fields in bootstrap - change the label inside the ghost drop indicator - change the padding inside the ghost drop

fix(*): Bumped theming beta to 2.

a0078f0

ivanvpetrov and others added 11 commits February 3, 2025 15:23

fix(query-builder): test all drag&drop test passing now

87ece07

feat(query-builder): select default condition on field selection

dbe59c1

Merge branch 'ipetrov/query-builder-drag-and-drop-nogap' of https://g…

96251cd

…ithub.com/IgniteUI/igniteui-angular into ipetrov/query-builder-drag-and-drop-nogap

fix(query-builder): fix for comments

79dc9d7

- fix icons - fix padding - fix gap - Add min width to he subquery - Fix bootstrap AND & OR buttons foreground color

refactor(query-builder): include qb inside a igx-dialog in the sample

8668b6b

- Add overrides for qb in context of igx-dialog

refactor(query-builder): add the ability to close the dialog on outsi…

1f2eb95

…de click

build(igniteui-theming): bump to latest beta

ae13ef4

feat(query-builder): change nested query value placeholder & refactor…

a5a0c91

… editors template (#15330) * feat(query-builder): expose resource string for nested query value placeholder * feat(query-builder): add placeholder check in tests, fix not-in

test(query-builder): fix edit inputs states checks

6ab28fb

test(query-builder): fix children classes checks

4c0089c

refactor(query-builder): service for drag&drop introduced

bde4780

gedinakova reviewed Feb 5, 2025

View reviewed changes

projects/igniteui-angular-i18n/src/i18n/BG/query-builder-resources.ts Show resolved Hide resolved

gedinakova reviewed Feb 5, 2025

View reviewed changes

igdmdimitrov reviewed Feb 5, 2025

View reviewed changes

teodosiah reviewed Feb 5, 2025

View reviewed changes

igdmdimitrov and others added 5 commits February 5, 2025 12:21

Merge branch 'dmdimitrov/query-builder-improvements' into ipetrov/que…

cddb4c3

…ry-builder-drag-and-drop-nogap

test(query-builder): tree root group buttons visibility checks

1729ede

chore(*): update angular to 19.1.3

ccf65a2

Merge pull request #15336 from IgniteUI/dmdimitrov/query-builder-merge

71f43be

chore(*): query builder merge

Merge branch 'dmdimitrov/query-builder-improvements' into ipetrov/que…

18e8e12

…ry-builder-drag-and-drop-nogap

gedinakova added ✅ status: verified Applies to PRs that have passed manual verification and removed ❌ do not merge labels Feb 5, 2025

gedinakova approved these changes Feb 5, 2025

View reviewed changes

gedinakova merged commit 927dc7d into dmdimitrov/query-builder-improvements Feb 5, 2025

gedinakova deleted the ipetrov/query-builder-drag-and-drop-nogap branch February 5, 2025 13:19

teodosiah mentioned this pull request Feb 7, 2025

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

Merged

14 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Query-builder conditions Drag&Drop functionality (take 2 - no chip gaps) #15122

Query-builder conditions Drag&Drop functionality (take 2 - no chip gaps) #15122

Uh oh!

ivanvpetrov commented Nov 28, 2024 •

edited by desig9stein

Loading

Uh oh!

desig9stein commented Jan 31, 2025 •

edited

Loading

Uh oh!

sbayreva commented Feb 3, 2025 •

edited

Loading

Uh oh!

Uh oh!

gedinakova Feb 5, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

igdmdimitrov Feb 4, 2025

Uh oh!

ivanvpetrov Feb 5, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

	"igniteui-theming": "v14.5.0-beta.2",
	"igniteui-theming": "v14.5.0-beta.3",

Query-builder conditions Drag&Drop functionality (take 2 - no chip gaps) #15122

Query-builder conditions Drag&Drop functionality (take 2 - no chip gaps) #15122

Uh oh!

Conversation

ivanvpetrov commented Nov 28, 2024 • edited by desig9stein Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Additional information (check all that apply):

Checklist:

Uh oh!

desig9stein commented Jan 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

sbayreva commented Feb 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

gedinakova Feb 5, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

igdmdimitrov Feb 4, 2025

Choose a reason for hiding this comment

Uh oh!

ivanvpetrov Feb 5, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ivanvpetrov commented Nov 28, 2024 •

edited by desig9stein

Loading

desig9stein commented Jan 31, 2025 •

edited

Loading

sbayreva commented Feb 3, 2025 •

edited

Loading