Skip to content

Commit 198d060

Browse files
ivanvpetrovdesig9steinteodosiahgedinakovaChronosSF
authored
[Query Builder] drag and drop refactor without DOM manipulations - 19.1.x (#15537)
* refactor(query-builder): drag and drop without DOM manipulations --------- Co-authored-by: desig9stein <[email protected]> Co-authored-by: teodosiah <[email protected]> Co-authored-by: Galina Edinakova <[email protected]> Co-authored-by: Stamen Stoychev <[email protected]>
1 parent dbf3d7f commit 198d060

File tree

8 files changed

+528
-414
lines changed

8 files changed

+528
-414
lines changed

‎projects/igniteui-angular/src/lib/core/styles/components/query-builder/_query-builder-component.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -107,12 +107,12 @@
107107
@extend %filter-tree__expression-item !optional;
108108
}
109109

110-
@include e(expression-item-ghost) {
110+
@include e(expression-item-drop-ghost) {
111111
@extend %filter-tree__expression-item-ghost !optional;
112112
}
113113

114-
@include e(expression-item-drop-ghost) {
115-
@extend %filter-tree__expression-drop-item-ghost !optional;
114+
@include e(expression-item-keyboard-ghost) {
115+
@extend %filter-tree__expression-item-keyboard-ghost !optional;
116116
}
117117

118118
@include e(expression-column) {

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

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -480,18 +480,25 @@
480480

481481

482482
%filter-tree__expression-item-ghost {
483-
&.igx-chip__item {
483+
.igx-chip__item {
484484
@include type-style('body-2');
485485

486486
--ig-body-2-text-transform: unset;
487487

488488
padding-inline: rem(32px);
489+
490+
color: color($color: 'gray', $variant: if($theme-variant == 'light', 600, 900));
491+
border: rem(1px) dashed color($color: 'gray', $variant: if($theme-variant == 'light', 600, 300));
492+
background: transparent;
489493
}
490-
491-
color: color($color: 'gray', $variant: if($theme-variant == 'light', 600, 900));
492-
border: rem(1px) dashed color($color: 'gray', $variant: if($theme-variant == 'light', 600, 300));
493-
background: transparent;
494494
}
495+
496+
%filter-tree__expression-item-keyboard-ghost {
497+
.igx-chip__item {
498+
box-shadow: var(--ghost-shadow);
499+
background: var(--ghost-background);
500+
}
501+
}
495502

496503
%filter-tree__expression-column {
497504
padding: 0 rem(8px);

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

Lines changed: 267 additions & 327 deletions
Large diffs are not rendered by default.

‎projects/igniteui-angular/src/lib/query-builder/query-builder-functions.spec.ts

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -865,7 +865,7 @@ export class QueryBuilderFunctions {
865865
}
866866

867867
public static getChipContent(chip: Element): string {
868-
if (chip.checkVisibility()) {
868+
if (chip && chip.checkVisibility()) {
869869
let text: string = '';
870870

871871
Array.from(chip.querySelectorAll('span')).forEach(element => {
@@ -883,7 +883,8 @@ export class QueryBuilderFunctions {
883883

884884
public static getDropGhost(fixture: ComponentFixture<any>): Element {
885885
var expressionsContainer = QueryBuilderFunctions.getQueryBuilderExpressionsContainer(fixture);
886-
return expressionsContainer.querySelector(`div.${QueryBuilderSelectors.FILTER_TREE_EXPRESSION_ITEM_DROP_GHOST}`);
886+
return expressionsContainer.querySelector(`div.${QueryBuilderSelectors.FILTER_TREE_EXPRESSION_ITEM_DROP_GHOST}`) ??
887+
expressionsContainer.querySelector(`div.${QueryBuilderSelectors.FILTER_TREE_EXPRESSION_ITEM_KEYBOARD_GHOST}`);
887888
}
888889

889890
public static getDropGhostBounds(fixture: ComponentFixture<any>): DOMRect {
@@ -910,4 +911,27 @@ export class QueryBuilderFunctions {
910911
dragDirective.onPointerUp({ pointerId: 1, pageX: X, pageY: Y });
911912
}
912913
}
914+
915+
public static getDropGhostAndItsSiblings(fixture: ComponentFixture<any>): [Element, string, string, string[]] {
916+
const dropGhost = this.getDropGhost(fixture);
917+
const newChipContents = QueryBuilderFunctions.GetChipsContentAsArray(fixture);
918+
let prevElement: string, nextElement: string;
919+
920+
if (dropGhost) {
921+
if (dropGhost.previousElementSibling?.className &&
922+
dropGhost.previousElementSibling?.className?.indexOf(QueryBuilderSelectors.FILTER_TREE_SUBQUERY) !== -1) {
923+
prevElement = QueryBuilderFunctions.getChipContent(dropGhost.previousElementSibling.previousElementSibling);
924+
} else if (dropGhost.previousElementSibling?.previousElementSibling) {
925+
prevElement = QueryBuilderFunctions.getChipContent(dropGhost.previousElementSibling);
926+
}
927+
928+
nextElement = QueryBuilderFunctions.getChipContent(dropGhost.nextElementSibling?.nextElementSibling);
929+
nextElement ??= QueryBuilderFunctions.getChipContent(dropGhost.nextElementSibling?.nextElementSibling?.nextElementSibling?.nextElementSibling);
930+
}
931+
932+
prevElement ??= null;
933+
nextElement ??= null;
934+
935+
return [dropGhost, prevElement, nextElement, newChipContents];
936+
}
913937
}

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

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -125,14 +125,24 @@
125125

126126
<ng-template #operandTemplate let-expressionItem>
127127
@if (!expressionItem.inEditMode) {
128+
@if(dragService.dropGhostExpression && expressionItem === dragService.dropGhostExpression && dragService.isKeyboardDrag === false){
129+
<div class="igx-filter-tree__expression-item igx-filter-tree__expression-item-drop-ghost">
130+
<igx-chip [data]="expressionItem">
131+
{{this.resourceStrings.igx_query_builder_drop_ghost_text}}
132+
</igx-chip>
133+
</div>
134+
} @else {
128135
<div
129136
#dragRef
130137
igxDrop
131138
(enter)="dragService.onChipEnter(dragRef, expressionItem)"
132139
(over)="dragService.onDivOver(dragRef, expressionItem)"
133140
(leave)="dragService.onChipLeave()"
134141
(dropped)="dragService.onDivDropped(expressionItem)"
135-
class="igx-filter-tree__expression-item"
142+
[ngClass]="{
143+
'igx-filter-tree__expression-item': true,
144+
'igx-filter-tree__expression-item-keyboard-ghost': expressionItem === dragService.dropGhostExpression
145+
}"
136146
(mouseenter)="expressionItem.hovered = true"
137147
(mouseleave)="expressionItem.hovered = false"
138148
(focusin)="onExpressionFocus(expressionItem)"
@@ -263,6 +273,7 @@
263273
}
264274
</div>
265275
}
276+
}
266277
<div #editingInputsContainer class="igx-filter-tree__subquery" >
267278
@if (expressionItem.inEditMode) {
268279
<div

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

Lines changed: 21 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -102,9 +102,19 @@ const DEFAULT_CHIP_FOCUS_DELAY = 50;
102102
],
103103
providers: [
104104
IgxQueryBuilderDragService
105-
]
105+
],
106106
})
107107
export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy {
108+
/**
109+
* @hidden @internal
110+
*/
111+
public _expressionTree: IExpressionTree;
112+
113+
/**
114+
* @hidden @internal
115+
*/
116+
public _expressionTreeCopy: IExpressionTree;
117+
108118
/**
109119
* @hidden @internal
110120
*/
@@ -288,8 +298,11 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy {
288298
@ViewChild('groupContextMenuDropDown', { read: IgxDropDownComponent })
289299
private groupContextMenuDropDown: IgxDropDownComponent;
290300

301+
/**
302+
* @hidden @internal
303+
*/
291304
@ViewChildren(IgxChipComponent, { read: IgxChipComponent })
292-
private expressionsChips: QueryList<IgxChipComponent>;
305+
public expressionsChips: QueryList<IgxChipComponent>;
293306

294307
@ViewChild('editingInputsContainer', { read: ElementRef })
295308
protected set editingInputsContainer(value: ElementRef) {
@@ -459,7 +472,6 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy {
459472
private _prevFocusedContainer: ElementRef;
460473
private _expandedExpressions: IFilteringExpression[] = [];
461474
private _fields: FieldType[];
462-
private _expressionTree: IExpressionTree;
463475
private _locale;
464476
private _entityNewValue: EntityType;
465477
private _resourceStrings = getCurrentResourceStrings(QueryBuilderResourceStringsEN);
@@ -475,7 +487,7 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy {
475487
/**
476488
* Returns if the fields combo at the root level is disabled.
477489
*/
478-
public get disableReturnFieldsChange(): boolean {
490+
public get disableReturnFieldsChange(): boolean {
479491

480492
return !this.selectedEntity || this.queryBuilder.disableReturnFieldsChange;
481493
}
@@ -1037,7 +1049,6 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy {
10371049
this._lastFocusedChipIndex = index;
10381050
this.focusEditedExpressionChip();
10391051
}
1040-
10411052
/**
10421053
* @hidden @internal
10431054
*/
@@ -1139,8 +1150,8 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy {
11391150
expressionItem.expression.condition.name :
11401151
null;
11411152
this.searchValue.value = expressionItem.expression.searchVal instanceof Set ?
1142-
Array.from(expressionItem.expression.searchVal) :
1143-
expressionItem.expression.searchVal;
1153+
Array.from(expressionItem.expression.searchVal) :
1154+
expressionItem.expression.searchVal;
11441155

11451156
expressionItem.inEditMode = true;
11461157
this._editedExpression = expressionItem;
@@ -1175,7 +1186,7 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy {
11751186
input?.focus();
11761187
}
11771188

1178-
(this.editingInputs?.nativeElement.parentElement as HTMLElement)?.scrollIntoView({block: "nearest", inline: "nearest"});
1189+
(this.editingInputs?.nativeElement.parentElement as HTMLElement)?.scrollIntoView({ block: "nearest", inline: "nearest" });
11791190
}
11801191

11811192
/**
@@ -1315,7 +1326,7 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy {
13151326
* @hidden @internal
13161327
*/
13171328
public invokeClick(eventArgs: KeyboardEvent) {
1318-
if (!this.dragService.dropGhostChipNode && this.platform.isActivationKey(eventArgs)) {
1329+
if (!this.dragService.dropGhostExpression && this.platform.isActivationKey(eventArgs)) {
13191330
eventArgs.preventDefault();
13201331
(eventArgs.currentTarget as HTMLElement).click();
13211332
}
@@ -1547,7 +1558,7 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy {
15471558
return groupItem;
15481559
}
15491560

1550-
for (let i = 0 ; i < expressionTree.filteringOperands.length; i++) {
1561+
for (let i = 0; i < expressionTree.filteringOperands.length; i++) {
15511562
const expr = expressionTree.filteringOperands[i];
15521563

15531564
if (isTree(expr)) {

‎projects/igniteui-angular/src/lib/query-builder/query-builder.common.ts

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,7 @@ export const QueryBuilderSelectors = {
6969
FILTER_TREE_EXPRESSION_CONTEXT_MENU: IGX_FILTER_TREE + '__expression-context-menu',
7070
FILTER_TREE_EXPRESSION_ITEM: IGX_FILTER_TREE + '__expression-item',
7171
FILTER_TREE_EXPRESSION_ITEM_DROP_GHOST: IGX_FILTER_TREE + '__expression-item-drop-ghost',
72+
FILTER_TREE_EXPRESSION_ITEM_KEYBOARD_GHOST: IGX_FILTER_TREE + '__expression-item-keyboard-ghost',
7273
FILTER_TREE_EXPRESSION_ITEM_GHOST: IGX_FILTER_TREE + '__expression-item-ghost',
7374
FILTER_TREE_EXPRESSION_SECTION: IGX_FILTER_TREE + '__expression-section',
7475

@@ -80,10 +81,4 @@ export const QueryBuilderSelectors = {
8081
QUERY_BUILDER_BODY: IGX_QUERY_BUILDER + '__main',
8182
QUERY_BUILDER_HEADER: IGX_QUERY_BUILDER + '__header',
8283
QUERY_BUILDER_TREE: IGX_QUERY_BUILDER + '-tree',
83-
84-
VIABLE_DROP_AREA:
85-
`.${IGX_FILTER_TREE}__expression-item[igxDrop]:not(.${IGX_FILTER_TREE + '__expression-item-drop-ghost'}),` + /*Condition chip*/
86-
`.${IGX_FILTER_TREE}__subquery:has([igxDrop]),` + /*Chip in edit*/
87-
`.${IGX_FILTER_TREE}__buttons > .igx-button[igxDrop]:first-of-type,` + /*Add Condition Button*/
88-
`.${IGX_FILTER_TREE}__expression-context-menu[igxDrop]` /*AND/OR group root*/
8984
}

0 commit comments

Comments
 (0)