Skip to content

Commit 331eada

Browse files
mddragnevmddragnev
authored
feat(query-builder): Expose query builder component in elements (#16731)
1 parent 8f3f58d commit 331eada

11 files changed

Lines changed: 159 additions & 36 deletions

File tree

‎projects/igniteui-angular-elements/src/analyzer/config.template.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { IgxQueryBuilderComponent } from '../../../igniteui-angular/query-builder';
12
import { IgxGridComponent } from '../../../igniteui-angular/grids/grid';
23
import { IgxHierarchicalGridComponent } from '../../../igniteui-angular/grids/hierarchical-grid';
34
import { IgxPivotDataSelectorComponent, IgxPivotGridComponent } from '../../../igniteui-angular/grids/pivot-grid';
@@ -8,5 +9,6 @@ export const registerComponents = [
89
IgxHierarchicalGridComponent,
910
IgxTreeGridComponent,
1011
IgxPivotGridComponent,
11-
IgxPivotDataSelectorComponent
12+
IgxPivotDataSelectorComponent,
13+
IgxQueryBuilderComponent
1214
];

‎projects/igniteui-angular-elements/src/analyzer/elements.config.ts‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { IgxQueryBuilderComponent } from "../../../igniteui-angular/query-builder";
12
import { IgxGridComponent } from "../../../igniteui-angular/grids/grid";
23
import { IgxHierarchicalGridComponent } from "../../../igniteui-angular/grids/hierarchical-grid";
34
import {
@@ -12,6 +13,7 @@ import { IgxPaginatorToken } from "../../../igniteui-angular/paginator/src/pagin
1213
import { IgxColumnGroupComponent } from "../../../igniteui-angular/grids/core/src/columns/column-group.component";
1314
import { IgxColumnComponent } from "../../../igniteui-angular/grids/core/src/columns/column.component";
1415
import { IgxColumnLayoutComponent } from "../../../igniteui-angular/grids/core/src/columns/column-layout.component";
16+
import { IgxQueryBuilderHeaderComponent } from "../../../igniteui-angular/query-builder/src/query-builder/query-builder-header.component";
1517
import { IgxGridEditingActionsComponent } from "../../../igniteui-angular/grids/core/src/grid-actions/grid-editing-actions.component";
1618
import { IgxActionStripActionsToken } from "../../../igniteui-angular/core/src/grid-column-actions/token";
1719
import { IgxGridPinningActionsComponent } from "../../../igniteui-angular/grids/core/src/grid-actions/grid-pinning-actions.component";
@@ -32,6 +34,7 @@ export const registerComponents = [
3234
IgxTreeGridComponent,
3335
IgxPivotGridComponent,
3436
IgxPivotDataSelectorComponent,
37+
IgxQueryBuilderComponent,
3538
];
3639

3740
//// WARNING: Code below this line is auto-generated and any modifications will be overwritten
@@ -829,6 +832,29 @@ export var registerConfig = [
829832
"selectRowOnClick",
830833
],
831834
},
835+
{
836+
component: IgxQueryBuilderComponent,
837+
selector: "igc-query-builder",
838+
parents: [],
839+
contentQueries: [],
840+
additionalProperties: [],
841+
methods: ["canCommit", "commit", "discard"],
842+
templateProps: ["searchValueTemplate"],
843+
boolProps: [
844+
"showEntityChangeDialog",
845+
"disableEntityChange",
846+
"disableReturnFieldsChange",
847+
],
848+
},
849+
{
850+
component: IgxQueryBuilderHeaderComponent,
851+
selector: "igc-query-builder-header",
852+
parents: [IgxQueryBuilderComponent],
853+
contentQueries: [],
854+
additionalProperties: [],
855+
methods: [],
856+
boolProps: ["showLegend"],
857+
},
832858
{
833859
component: IgxRowIslandComponent,
834860
selector: "igc-row-island",

‎projects/igniteui-angular-elements/src/app/components.ts‎

Lines changed: 77 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -12,71 +12,124 @@ import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid';
1212
import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid';
1313
import { IgxPivotDataSelectorComponent, IgxPivotGridComponent } from 'igniteui-angular/grids/pivot-grid';
1414
import { GridType, IgxColumnComponent, IgxColumnGroupComponent, IgxColumnLayoutComponent, IgxGridEditingActionsComponent, IgxGridPinningActionsComponent, IgxGridToolbarActionsComponent, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarTitleComponent } from 'igniteui-angular/grids/core';
15+
import { IgxQueryBuilderComponent, IgxQueryBuilderHeaderComponent } from 'igniteui-angular/query-builder';
1516

1617
// force-create icon service, TODO: move to initializer or register/define mechanic to avoid side-effect?
1718
const _iconBroadcast: IgxIconBroadcastService = injector.get(IgxIconBroadcastService);
1819

1920
const grid = createIgxCustomElement(IgxGridComponent, { injector, registerConfig });
20-
const IgcGridComponent = withRegister(grid, () => { registerComponent(IgcGridComponent) });
21+
const IgcGridComponent = withRegister(grid, () => {
22+
registerComponent(IgcGridComponent)
23+
});
2124

2225
const treeGrid = createIgxCustomElement(IgxTreeGridComponent, { injector, registerConfig });
23-
const IgcTreeGridComponent = withRegister(treeGrid, () => { registerComponent(IgcTreeGridComponent) });
26+
const IgcTreeGridComponent = withRegister(treeGrid, () => {
27+
registerComponent(IgcTreeGridComponent)
28+
});
2429

2530
const hGrid = createIgxCustomElement(IgxHierarchicalGridComponent, { injector, registerConfig });
26-
const IgcHierarchicalGridComponent = withRegister(hGrid, () => { registerComponent(IgcHierarchicalGridComponent) });
31+
const IgcHierarchicalGridComponent = withRegister(hGrid, () => {
32+
registerComponent(IgcHierarchicalGridComponent)
33+
});
2734

2835
const pivot = createIgxCustomElement(IgxPivotGridComponent, { injector, registerConfig });
29-
const IgcPivotGridComponent = withRegister(pivot, () => { registerComponent(IgcPivotGridComponent) });
36+
const IgcPivotGridComponent = withRegister(pivot, () => {
37+
registerComponent(IgcPivotGridComponent)
38+
});
3039

3140
const pivotDataSelector = createIgxCustomElement(IgxPivotDataSelectorComponent, { injector, registerConfig });
32-
const IgcPivotDataSelectorComponent = withRegister(pivotDataSelector, () => { registerComponent(IgcPivotDataSelectorComponent) });
41+
const IgcPivotDataSelectorComponent = withRegister(pivotDataSelector, () => {
42+
registerComponent(IgcPivotDataSelectorComponent)
43+
});
3344

3445
const rowIsland = createIgxCustomElement(IgxRowIslandComponent, { injector, registerConfig });
35-
const IgcRowIslandComponent = withRegister(rowIsland, () => { registerComponent(IgcRowIslandComponent) });
46+
const IgcRowIslandComponent = withRegister(rowIsland, () => {
47+
registerComponent(IgcRowIslandComponent)
48+
});
3649

3750
const columnGroup = createIgxCustomElement(IgxColumnGroupComponent, { injector, registerConfig });
38-
const IgcColumnGroupComponent = withRegister(columnGroup, () => { registerComponent(IgcColumnGroupComponent) });
51+
const IgcColumnGroupComponent = withRegister(columnGroup, () => {
52+
registerComponent(IgcColumnGroupComponent)
53+
});
3954

4055
const columnLayout = createIgxCustomElement(IgxColumnLayoutComponent, { injector, registerConfig });
41-
const IgcColumnLayoutComponent = withRegister(columnLayout, () => { registerComponent(IgcColumnLayoutComponent) });
56+
const IgcColumnLayoutComponent = withRegister(columnLayout, () => {
57+
registerComponent(IgcColumnLayoutComponent)
58+
});
4259

4360
const column = createIgxCustomElement(IgxColumnComponent, { injector, registerConfig });
44-
const IgcColumnComponent = withRegister(column, () => { registerComponent(IgcColumnComponent) });
61+
const IgcColumnComponent = withRegister(column, () => {
62+
registerComponent(IgcColumnComponent)
63+
});
4564

4665
const paginator = createIgxCustomElement(IgxPaginatorComponent, { injector, registerConfig });
47-
const IgcPaginatorComponent = withRegister(paginator, () => { registerComponent(IgcPaginatorComponent) });
66+
const IgcPaginatorComponent = withRegister(paginator, () => {
67+
registerComponent(IgcPaginatorComponent)
68+
});
4869

4970
const toolbar = createIgxCustomElement(IgxGridToolbarComponent, { injector, registerConfig });
50-
const IgcGridToolbarComponent = withRegister(toolbar, () => { registerComponent(IgcGridToolbarComponent) });
71+
const IgcGridToolbarComponent = withRegister(toolbar, () => {
72+
registerComponent(IgcGridToolbarComponent)
73+
});
5174

5275
const actionStrip = createIgxCustomElement(IgxActionStripComponent, { injector, registerConfig });
53-
const IgcActionStripComponent = withRegister(actionStrip, () => { registerComponent(IgcActionStripComponent) });
76+
const IgcActionStripComponent = withRegister(actionStrip, () => {
77+
registerComponent(IgcActionStripComponent)
78+
});
5479

5580
const statePersistance = createIgxCustomElement(IgxGridStateComponent, { injector, registerConfig });
56-
const IgcGridStateComponent = withRegister(statePersistance, () => { registerComponent(IgcGridStateComponent) });
81+
const IgcGridStateComponent = withRegister(statePersistance, () => {
82+
registerComponent(IgcGridStateComponent)
83+
});
5784

5885
const editingActions = createIgxCustomElement(IgxGridEditingActionsComponent, { injector, registerConfig });
59-
const IgcGridEditingActionsComponent = withRegister(editingActions, () => { registerComponent(IgcGridEditingActionsComponent) });
86+
const IgcGridEditingActionsComponent = withRegister(editingActions, () => {
87+
registerComponent(IgcGridEditingActionsComponent)
88+
});
6089
const pinningActions = createIgxCustomElement(IgxGridPinningActionsComponent, { injector, registerConfig });
61-
const IgcGridPinningActionsComponent = withRegister(pinningActions, () => { registerComponent(IgcGridPinningActionsComponent) });
90+
const IgcGridPinningActionsComponent = withRegister(pinningActions, () => {
91+
registerComponent(IgcGridPinningActionsComponent)
92+
});
6293

6394
const toolbarTitle = createIgxCustomElement(IgxGridToolbarTitleComponent, { injector, registerConfig });
64-
const IgcGridToolbarTitleComponent = withRegister(toolbarTitle, () => { registerComponent(IgcGridToolbarTitleComponent) });
95+
const IgcGridToolbarTitleComponent = withRegister(toolbarTitle, () => {
96+
registerComponent(IgcGridToolbarTitleComponent)
97+
});
6598

6699
const toolbarActions = createIgxCustomElement(IgxGridToolbarActionsComponent, { injector, registerConfig });
67-
const IgcGridToolbarActionsComponent = withRegister(toolbarActions, () => { registerComponent(IgcGridToolbarActionsComponent) });
100+
const IgcGridToolbarActionsComponent = withRegister(toolbarActions, () => {
101+
registerComponent(IgcGridToolbarActionsComponent)
102+
});
68103

69104
const toolbarHiding = createIgxCustomElement(IgxGridToolbarHidingComponent, { injector, registerConfig });
70-
const IgcGridToolbarHidingComponent = withRegister(toolbarHiding, () => { registerComponent(IgcGridToolbarHidingComponent) });
105+
const IgcGridToolbarHidingComponent = withRegister(toolbarHiding, () => {
106+
registerComponent(IgcGridToolbarHidingComponent)
107+
});
71108

72109
const toolbarPinning = createIgxCustomElement(IgxGridToolbarPinningComponent, { injector, registerConfig });
73-
const IgcGridToolbarPinningComponent = withRegister(toolbarPinning, () => { registerComponent(IgcGridToolbarPinningComponent) });
110+
const IgcGridToolbarPinningComponent = withRegister(toolbarPinning, () => {
111+
registerComponent(IgcGridToolbarPinningComponent)
112+
});
74113

75114
const toolbarExport = createIgxCustomElement(IgxGridToolbarExporterComponent, { injector, registerConfig });
76-
const IgcGridToolbarExporterComponent = withRegister(toolbarExport, () => { registerComponent(IgcGridToolbarExporterComponent) });
115+
const IgcGridToolbarExporterComponent = withRegister(toolbarExport, () => {
116+
registerComponent(IgcGridToolbarExporterComponent)
117+
});
77118

78119
const toolbarFilter = createIgxCustomElement(IgxGridToolbarAdvancedFilteringComponent, { injector, registerConfig });
79-
const IgcGridToolbarAdvancedFilteringComponent = withRegister(toolbarFilter, () => { registerComponent(IgcGridToolbarAdvancedFilteringComponent) });
120+
const IgcGridToolbarAdvancedFilteringComponent = withRegister(toolbarFilter, () => {
121+
registerComponent(IgcGridToolbarAdvancedFilteringComponent)
122+
});
123+
124+
const queryBuilder = createIgxCustomElement(IgxQueryBuilderComponent, { injector, registerConfig });
125+
const IgcQueryBuilderComponent = withRegister(queryBuilder, () => {
126+
registerComponent(IgcQueryBuilderComponent)
127+
});
128+
129+
const queryBuilderHeader = createIgxCustomElement(IgxQueryBuilderHeaderComponent, { injector, registerConfig });
130+
const IgcQueryBuilderHeaderComponent = withRegister(queryBuilderHeader, () => {
131+
registerComponent(IgcQueryBuilderHeaderComponent)
132+
});
80133

81134
export {
82135
IgcGridComponent,
@@ -100,6 +153,8 @@ export {
100153
IgcGridToolbarPinningComponent,
101154
IgcGridToolbarExporterComponent,
102155
IgcGridToolbarAdvancedFilteringComponent,
156+
IgcQueryBuilderComponent,
157+
IgcQueryBuilderHeaderComponent
103158
}
104159

105160
// TODO: Custom elements JSON as well
@@ -111,5 +166,6 @@ declare global {
111166
'igc-tree-grid': NgElement & WithProperties<IgxTreeGridElement>;
112167
'igc-paginator': NgElement & WithProperties<IgxPaginatorComponent>;
113168
'igc-grid-state': NgElement & WithProperties<IgxGridStateComponent>;
169+
'igc-query-builder': NgElement & WithProperties<IgxQueryBuilderComponent>;
114170
}
115171
}

‎projects/igniteui-angular-elements/src/themes/_variables.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,5 +36,6 @@ $allowed: (
3636
igx-paginator,
3737
igx-action-strip,
3838
igx-grid-toolbar,
39-
igx-pivot-data-selector
39+
igx-pivot-data-selector,
40+
igx-query-builder
4041
);

‎projects/igniteui-angular-elements/src/utils/define-all.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,8 @@ import {
2121
IgcGridToolbarPinningComponent,
2222
IgcGridToolbarExporterComponent,
2323
IgcGridToolbarAdvancedFilteringComponent,
24+
IgcQueryBuilderComponent,
25+
IgcQueryBuilderHeaderComponent
2426
} from '../app/components';
2527

2628
export function defineAllComponents() {
@@ -46,5 +48,7 @@ export function defineAllComponents() {
4648
IgcGridToolbarPinningComponent,
4749
IgcGridToolbarExporterComponent,
4850
IgcGridToolbarAdvancedFilteringComponent,
51+
IgcQueryBuilderComponent,
52+
IgcQueryBuilderHeaderComponent
4953
);
5054
}

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,11 @@ import { Component, DestroyRef, HostBinding, inject, Input } from '@angular/core
22
import { IQueryBuilderResourceStrings, QueryBuilderResourceStringsEN } from 'igniteui-angular/core';
33
import { getCurrentResourceStrings, onResourceChangeHandle } from 'igniteui-angular/core';
44

5+
6+
/* wcElementTag: igc-query-builder-header */
7+
/**
8+
* @igxParent IgxQueryBuilderComponent
9+
*/
510
@Component({
611
selector: 'igx-query-builder-header',
712
templateUrl: 'query-builder-header.component.html'

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ import {
7171
import { IgxQueryBuilderSearchValueTemplateDirective } from './query-builder.directives';
7272
import { IgxQueryBuilderComponent } from './query-builder.component';
7373
import { IgxQueryBuilderDragService } from './query-builder-drag.service';
74-
import { ExpressionGroupItem, ExpressionItem, ExpressionOperandItem, IgxFieldFormatterPipe } from './query-builder.common';
74+
import { ExpressionGroupItem, ExpressionItem, ExpressionOperandItem, IgxFieldFormatterPipe, IgxQueryBuilderSearchValueContext } from './query-builder.common';
7575
import { getCurrentI18n, IResourceChangeEventArgs } from 'igniteui-i18n-core';
7676

7777
const DEFAULT_PIPE_DATE_FORMAT = 'mediumDate';
@@ -162,7 +162,7 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy {
162162
* Sets/gets the search value template.
163163
*/
164164
@Input()
165-
public searchValueTemplate: TemplateRef<IgxQueryBuilderSearchValueTemplateDirective> = null;
165+
public searchValueTemplate: TemplateRef<IgxQueryBuilderSearchValueContext> = null;
166166

167167
/**
168168
* Returns the parent expression operand.
@@ -1527,7 +1527,7 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy {
15271527
}
15281528
}
15291529

1530-
public getSearchValueTemplateContext(defaultSearchValueTemplate): any {
1530+
public getSearchValueTemplateContext(defaultSearchValueTemplate): IgxQueryBuilderSearchValueContext {
15311531
const ctx = {
15321532
$implicit: this.searchValue,
15331533
selectedField: this.selectedField,

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

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { Pipe, PipeTransform } from '@angular/core';
2-
import { FilteringLogic, IFilteringExpression } from 'igniteui-angular/core';
1+
import { Pipe, PipeTransform, TemplateRef } from '@angular/core';
2+
import { FieldType, FilteringLogic, IFilteringExpression } from 'igniteui-angular/core';
33

44
@Pipe({
55
name: 'fieldFormatter',
@@ -82,3 +82,11 @@ export const QueryBuilderSelectors = {
8282
QUERY_BUILDER_HEADER: IGX_QUERY_BUILDER + '__header',
8383
QUERY_BUILDER_TREE: IGX_QUERY_BUILDER + '-tree',
8484
}
85+
86+
export interface IgxQueryBuilderSearchValueContext {
87+
$implicit: any;
88+
selectedField: FieldType;
89+
selectedCondition: string;
90+
/* blazorSuppress */
91+
defaultSearchValueTemplate: TemplateRef<any>;
92+
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<ng-content select="igx-query-builder-header"></ng-content>
1+
<ng-content select="igx-query-builder-header,igc-query-builder-header"></ng-content>
22

33
<igx-query-builder-tree
44
[entities]="this.entities"

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

Lines changed: 20 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,9 @@ import { IgxQueryBuilderTreeComponent } from './query-builder-tree.component';
1818
import { IgxIconService } from 'igniteui-angular/icon';
1919
import { editor } from '@igniteui/material-icons-extended';
2020
import { IgxQueryBuilderSearchValueTemplateDirective } from './query-builder.directives';
21+
import { IgxQueryBuilderSearchValueContext } from './query-builder.common';
2122

23+
/* wcElementTag: igc-query-builder */
2224
/**
2325
* A component used for operating with complex filters by creating or editing conditions
2426
* and grouping them using AND/OR logic.
@@ -184,11 +186,23 @@ export class IgxQueryBuilderComponent implements OnDestroy {
184186
@Input()
185187
public disableEntityChange = false;
186188

189+
/**
190+
* Sets/gets the search value template.
191+
*/
192+
@Input()
193+
public set searchValueTemplate(template: TemplateRef<IgxQueryBuilderSearchValueContext>) {
194+
this._searchValueTemplate = template;
195+
}
196+
197+
public get searchValueTemplate(): TemplateRef<IgxQueryBuilderSearchValueContext> {
198+
return this._searchValueTemplate || this.searchValueTemplateDirective?.template;
199+
}
200+
187201
/**
188202
* Disables return fields changes at the root level.
189203
*/
190-
@Input()
191-
public disableReturnFieldsChange = false;
204+
@Input()
205+
public disableReturnFieldsChange = false;
192206

193207
/**
194208
* Event fired as the expression tree is changed.
@@ -203,8 +217,8 @@ export class IgxQueryBuilderComponent implements OnDestroy {
203217
/**
204218
* @hidden @internal
205219
*/
206-
@ContentChild(IgxQueryBuilderSearchValueTemplateDirective, { read: TemplateRef })
207-
public searchValueTemplate: TemplateRef<any>;
220+
@ContentChild(IgxQueryBuilderSearchValueTemplateDirective)
221+
protected searchValueTemplateDirective: IgxQueryBuilderSearchValueTemplateDirective;
208222

209223
/**
210224
* @hidden @internal
@@ -219,6 +233,7 @@ export class IgxQueryBuilderComponent implements OnDestroy {
219233
private _fields: FieldType[];
220234
private _entities: EntityType[];
221235
private _shouldEmitTreeChange = true;
236+
private _searchValueTemplate: TemplateRef<IgxQueryBuilderSearchValueContext>;
222237

223238
constructor() {
224239
this.registerSVGIcons();
@@ -298,7 +313,7 @@ export class IgxQueryBuilderComponent implements OnDestroy {
298313
this.queryTree.setAddButtonFocus();
299314
}
300315

301-
public onExpressionTreeChange(tree: IExpressionTree) {
316+
protected onExpressionTreeChange(tree: IExpressionTree) {
302317
if (tree && this.entities && tree !== this._expressionTree) {
303318
this._expressionTree = recreateTree(tree, this.entities);
304319
} else {

0 commit comments

Comments
 (0)