Skip to content

Commit f917b4a

Browse files
ivanvpetrovigdmdimitrov
ivanvpetrov
and
igdmdimitrov
authored
Query builder simple select from (#14985)
* refactor(query-builder): simple select from * test(query-builder): fix several legacy tests --------- Co-authored-by: INFRAGISTICS\IPetrov <[email protected]> Co-authored-by: igdmdimitrov <[email protected]>
1 parent 3a37c79 commit f917b4a

File tree

4 files changed

+361
-209
lines changed

4 files changed

+361
-209
lines changed

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

Lines changed: 24 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -530,10 +530,10 @@ export class QueryBuilderFunctions {
530530
public static verifyEditModeQueryExpressionInputStates(fix,
531531
entitySelectEnabled: boolean,
532532
fieldComboEnabled: boolean,
533-
columnSelectEnabled: boolean,
534-
operatorSelectEnabled: boolean,
535-
valueInputEnabled: boolean,
536-
commitButtonEnabled: boolean,
533+
columnSelectEnabled: boolean = null,
534+
operatorSelectEnabled: boolean = null,
535+
valueInputEnabled: boolean = null,
536+
commitButtonEnabled: boolean = null,
537537
level = 0) {
538538
// Verify the entity select state.
539539
const entityInputGroup = QueryBuilderFunctions.getQueryBuilderEntitySelect(fix, level).querySelector('igx-input-group');
@@ -544,7 +544,9 @@ export class QueryBuilderFunctions {
544544
expect(!fieldInputGroup.classList.contains('igx-input-group--disabled')).toBe(fieldComboEnabled,
545545
'incorrect fields combo state');
546546

547-
QueryBuilderFunctions.verifyEditModeExpressionInputStates(fix, columnSelectEnabled, operatorSelectEnabled, valueInputEnabled, commitButtonEnabled, level);
547+
if(columnSelectEnabled || operatorSelectEnabled || valueInputEnabled || commitButtonEnabled){
548+
QueryBuilderFunctions.verifyEditModeExpressionInputStates(fix, columnSelectEnabled, operatorSelectEnabled, valueInputEnabled, commitButtonEnabled, level);
549+
}
548550
};
549551

550552
public static verifyEditModeExpressionInputStates(fix,
@@ -581,15 +583,18 @@ export class QueryBuilderFunctions {
581583
public static verifyQueryEditModeExpressionInputValues(fix,
582584
entityText: string,
583585
fieldsText: string,
584-
columnText: string,
585-
operatorText: string,
586-
valueText: string,
586+
columnText: string = null,
587+
operatorText: string = null,
588+
valueText: string = null,
587589
level = 0) {
588590
const entityInput = QueryBuilderFunctions.getQueryBuilderEntitySelect(fix, level).querySelector('input');
589591
const fieldInput = QueryBuilderFunctions.getQueryBuilderFieldsCombo(fix, level).querySelector('input');
590-
QueryBuilderFunctions.verifyEditModeExpressionInputValues(fix, columnText, operatorText, valueText, level);
591592
expect(entityInput.value).toBe(entityText);
592593
expect(fieldInput.value).toBe(fieldsText);
594+
595+
if(columnText || operatorText || valueText){
596+
QueryBuilderFunctions.verifyEditModeExpressionInputValues(fix, columnText, operatorText, valueText, level);
597+
}
593598
};
594599

595600
public static verifyEditModeExpressionInputValues(fix,
@@ -664,9 +669,9 @@ export class QueryBuilderFunctions {
664669
let i = 0;
665670
tabElements.forEach((element: HTMLElement) => {
666671
switch (i) {
667-
case 0: expect(element).toHaveClass('igx-filter-tree__line--and'); break;
672+
case 0: expect(element).toHaveClass('igx-input-group__input'); break;
668673
case 1: expect(element).toHaveClass('igx-input-group__input'); break;
669-
case 2: expect(element).toHaveClass('igx-input-group__input'); break;
674+
case 2: expect(element).toHaveClass('igx-filter-tree__line--and'); break;
670675
case 3: expect(element).toHaveClass('igx-chip'); break;
671676
case 4: expect(element).toHaveClass('igx-chip__remove'); break;
672677
case 5: expect(element).toHaveClass('igx-filter-tree__details-button'); break;
@@ -723,9 +728,9 @@ export class QueryBuilderFunctions {
723728
let i = 0;
724729
tabElements.forEach((element: HTMLElement) => {
725730
switch (i) {
726-
case 0: expect(element).toHaveClass('igx-filter-tree__line--and'); break;
731+
case 0: expect(element).toHaveClass('igx-input-group__input'); break;
727732
case 1: expect(element).toHaveClass('igx-input-group__input'); break;
728-
case 2: expect(element).toHaveClass('igx-input-group__input'); break;
733+
case 2: expect(element).toHaveClass('igx-filter-tree__line--and'); break;
729734
case 3: expect(element).toHaveClass('igx-chip'); break;
730735
case 4: expect(element).toHaveClass('igx-chip__remove'); break;
731736
case 5: expect(element).toHaveClass('igx-chip'); break;
@@ -848,17 +853,18 @@ export class QueryBuilderFunctions {
848853
}
849854

850855
public static addAndValidateChildGroup(fix: ComponentFixture<any>, groupType: number, level: number) {
851-
// Click the initial 'Add Or Group' button.
852-
QueryBuilderFunctions.clickQueryBuilderInitialAddGroupButton(fix, groupType, level);
856+
// Enter values in the nested query
857+
QueryBuilderFunctions.selectEntityInEditModeExpression(fix, 0, level); // Select 'Products' entity
853858
tick(100);
854859
fix.detectChanges();
855860

856-
QueryBuilderFunctions.verifyEditModeQueryExpressionInputStates(fix, true, false, false, false, false, false, level);
857-
// Enter values in the nested query
858-
QueryBuilderFunctions.selectEntityInEditModeExpression(fix, 0, level); // Select 'Products' entity
861+
// Click the initial 'Add Or Group' button.
862+
QueryBuilderFunctions.clickQueryBuilderInitialAddGroupButton(fix, groupType, level);
859863
tick(100);
860864
fix.detectChanges();
861865

866+
QueryBuilderFunctions.verifyEditModeQueryExpressionInputStates(fix, true, true, false, false, false, false, level);
867+
862868
QueryBuilderFunctions.verifyEditModeQueryExpressionInputStates(fix, true, true, true, false, false, false, level);
863869

864870
QueryBuilderFunctions.selectColumnInEditModeExpression(fix, 1, level); // Select 'ProductName' column.

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

Lines changed: 57 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,66 @@
66
<igx-icon family="default" name="close"></igx-icon>
77
</ng-template>
88

9+
<ng-template #selectFromTemplate>
10+
<div class="igx-filter-tree__inputs" [style.display]="(isInEditMode() && !this.isAdvancedFiltering()) ? 'flex' : 'none'">
11+
<igx-select #entitySelect
12+
type="box"
13+
(selectionChanging)="onEntitySelectChanging($event)"
14+
[overlaySettings]="entitySelectOverlaySettings"
15+
[ngModel]="selectedEntity"
16+
[style.display]="isInEditMode() ? 'block' : 'none'"
17+
>
18+
<label igxLabel>{{ this.resourceStrings.igx_query_builder_select_entity }}</label>
19+
<igx-select-item *ngFor="let entity of entities" [value]="entity">
20+
{{entity.name}}
21+
</igx-select-item>
22+
</igx-select>
23+
24+
<igx-combo
25+
#selectedReturnFieldsCombo
26+
[itemsMaxHeight]="250"
27+
[data]="fields"
28+
[displayKey]="'field'"
29+
[valueKey]="'field'"
30+
[disabled]="!selectedEntity"
31+
[(ngModel)]="selectedReturnFields"
32+
[overlaySettings]="returnFieldSelectOverlaySettings"
33+
searchPlaceholder="{{ this.resourceStrings.igx_query_builder_search }}"
34+
[style.display]="isInEditMode() ? 'block' : 'none'"
35+
(selectionChanging)="onReturnFieldSelectChanging($event)"
36+
>
37+
<ng-template igxComboHeader>
38+
<div
39+
class="igx-drop-down__item igx-drop-down__item--query-builder"
40+
(click)="onSelectAllClicked($event)"
41+
[ngClass]="{'igx-drop-down__item--selected': this.selectedEntity && this.selectedReturnFields && this.selectedEntity.fields.length === this.selectedReturnFields.length}"
42+
>
43+
<igx-checkbox
44+
[checked]="this.selectedEntity && this.selectedReturnFields && this.selectedEntity.fields.length === this.selectedReturnFields.length"
45+
[indeterminate]="this.selectedEntity && this.selectedReturnFields && this.selectedReturnFields.length > 0 && this.selectedReturnFields.length < this.selectedEntity.fields?.length"
46+
[readonly]="true"
47+
[disableRipple]="true"
48+
[tabindex]="-1"
49+
class="igx-combo__checkbox">
50+
</igx-checkbox>
51+
<div class="igx-drop-down__inner">
52+
{{ this.resourceStrings.igx_query_builder_select_all }}
53+
</div>
54+
</div>
55+
</ng-template>
56+
<label igxLabel>{{ this.resourceStrings.igx_query_builder_select_return_fields }}</label>
57+
</igx-combo>
58+
</div>
59+
</ng-template>
60+
961
<div
1062
#expressionsContainer
1163
class="igx-query-builder__main"
64+
style="display: grid;"
1265
(scroll)="onExpressionsScrolled()"
1366
>
14-
<ng-container *ngIf="!rootGroup">
67+
<ng-container *ngTemplateOutlet="selectFromTemplate"></ng-container>
68+
<ng-container *ngIf="!rootGroup && (selectedEntity || (entities?.length === 1 && !entities[0]?.name))">
1569
<div class="igx-query-builder__root">
1670
<div class="igx-query-builder__root-actions">
1771
<button type="button"
@@ -192,7 +246,7 @@ <h6 class="igx-filter-empty__title">
192246
<igx-icon id="add-expression">add</igx-icon>
193247
</button>
194248
</div>
195-
<div *ngIf="!expressionItem.inEditMode && expressionItem.expression.searchTree"
249+
<div *ngIf="!expressionItem.inEditMode && expressionItem.expression.searchTree && expressionItem.expression.searchTree.filteringOperands.length > 0"
196250
igxButton
197251
class="igx-filter-tree__details-button"
198252
(click)="expanderClick($event, expressionItem)"
@@ -452,58 +506,7 @@ <h6 class="igx-filter-empty__title">
452506
(click)="onGroupClick(expressionItem)"
453507
></div>
454508

455-
<div class="igx-filter-tree__expression">
456-
<div class="igx-filter-tree__inputs" [style.display]="(isInEditMode() && this.entities.length > 0 && this.entities[0].name) ? 'flex' : 'none'">
457-
<ng-container *ngIf="!expressionItem.parent">
458-
<igx-select #entitySelect
459-
type="box"
460-
(selectionChanging)="onEntitySelectChanging($event)"
461-
[overlaySettings]="entitySelectOverlaySettings"
462-
[ngModel]="selectedEntity"
463-
[style.display]="isInEditMode() ? 'block' : 'none'"
464-
>
465-
<label igxLabel>{{ this.resourceStrings.igx_query_builder_select_entity }}</label>
466-
<igx-select-item *ngFor="let entity of entities" [value]="entity">
467-
{{entity.name}}
468-
</igx-select-item>
469-
</igx-select>
470-
471-
<igx-combo
472-
#selectedReturnFieldsCombo
473-
[itemsMaxHeight]="250"
474-
[data]="fields"
475-
[displayKey]="'field'"
476-
[valueKey]="'field'"
477-
[disabled]="!selectedEntity"
478-
[(ngModel)]="selectedReturnFields"
479-
[overlaySettings]="returnFieldSelectOverlaySettings"
480-
searchPlaceholder="{{ this.resourceStrings.igx_query_builder_search }}"
481-
[style.display]="isInEditMode() ? 'block' : 'none'"
482-
>
483-
<ng-template igxComboHeader>
484-
<div
485-
class="igx-drop-down__item igx-drop-down__item--query-builder"
486-
(click)="onSelectAllClicked($event)"
487-
[ngClass]="{'igx-drop-down__item--selected': this.selectedEntity && this.selectedReturnFields && this.selectedEntity.fields.length === this.selectedReturnFields.length}"
488-
>
489-
<igx-checkbox
490-
[checked]="this.selectedEntity && this.selectedReturnFields && this.selectedEntity.fields.length === this.selectedReturnFields.length"
491-
[indeterminate]="this.selectedEntity && this.selectedReturnFields && this.selectedReturnFields.length > 0 && this.selectedReturnFields.length < this.selectedEntity.fields?.length"
492-
[readonly]="true"
493-
[disableRipple]="true"
494-
[tabindex]="-1"
495-
class="igx-combo__checkbox">
496-
</igx-checkbox>
497-
<div class="igx-drop-down__inner">
498-
{{ this.resourceStrings.igx_query_builder_select_all }}
499-
</div>
500-
</div>
501-
</ng-template>
502-
<label igxLabel>{{ this.resourceStrings.igx_query_builder_select_return_fields }}</label>
503-
</igx-combo>
504-
</ng-container>
505-
</div>
506-
509+
<div class="igx-filter-tree__expression">
507510
<ng-container *ngFor="let expr of expressionItem?.children">
508511
<ng-container
509512
*ngTemplateOutlet="

0 commit comments

Comments
 (0)