diff --git a/projects/igniteui-angular/src/lib/query-builder/query-builder-tree.component.ts b/projects/igniteui-angular/src/lib/query-builder/query-builder-tree.component.ts index 1e47d7dd7f4..0194fbd7549 100644 --- a/projects/igniteui-angular/src/lib/query-builder/query-builder-tree.component.ts +++ b/projects/igniteui-angular/src/lib/query-builder/query-builder-tree.component.ts @@ -172,17 +172,12 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy { @Input() public set fields(fields: FieldType[]) { this._fields = fields; - + + this._fields = this._fields?.map(f => ({...f, filters: this.getFilters(f), pipeArgs: this.getPipeArgs(f) })); + if (!this._fields && this.isAdvancedFiltering()) { this._fields = this.entities[0].fields; } - - if (this._fields) { - this._fields.forEach(field => { - this.setFilters(field); - this.setFormat(field); - }); - } } /** @@ -1182,7 +1177,7 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy { if (!this.selectedField) { this.fieldSelect.input.nativeElement.focus(); } else if (this.selectedField.filters.condition(this.selectedCondition)?.isUnary) { - this.conditionSelect.input.nativeElement.focus(); + this.conditionSelect?.input.nativeElement.focus(); } else { const input = this.searchValueInput?.nativeElement || this.picker?.getEditElement(); input?.focus(); @@ -1485,16 +1480,19 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy { return ctx; } - private setFormat(field: FieldType) { - if (!field.pipeArgs) { - field.pipeArgs = { digitsInfo: DEFAULT_PIPE_DIGITS_INFO }; + private getPipeArgs(field: FieldType) { + let pipeArgs = {...field.pipeArgs}; + if (!pipeArgs) { + pipeArgs = { digitsInfo: DEFAULT_PIPE_DIGITS_INFO }; } - if (!field.pipeArgs.format) { - field.pipeArgs.format = field.dataType === DataType.Time ? + if (!pipeArgs.format) { + pipeArgs.format = field.dataType === DataType.Time ? DEFAULT_PIPE_TIME_FORMAT : field.dataType === DataType.DateTime ? DEFAULT_PIPE_DATE_TIME_FORMAT : DEFAULT_PIPE_DATE_FORMAT; } + + return pipeArgs; } private selectDefaultCondition() { @@ -1503,30 +1501,24 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy { } } - private setFilters(field: FieldType) { + private getFilters(field: FieldType) { if (!field.filters) { switch (field.dataType) { case DataType.Boolean: - field.filters = IgxBooleanFilteringOperand.instance(); - break; + return IgxBooleanFilteringOperand.instance(); case DataType.Number: case DataType.Currency: case DataType.Percent: - field.filters = IgxNumberFilteringOperand.instance(); - break; + return IgxNumberFilteringOperand.instance(); case DataType.Date: - field.filters = IgxDateFilteringOperand.instance(); - break; + return IgxDateFilteringOperand.instance(); case DataType.Time: - field.filters = IgxTimeFilteringOperand.instance(); - break; + return IgxTimeFilteringOperand.instance(); case DataType.DateTime: - field.filters = IgxDateTimeFilteringOperand.instance(); - break; + return IgxDateTimeFilteringOperand.instance(); case DataType.String: default: - field.filters = IgxStringFilteringOperand.instance(); - break; + return IgxStringFilteringOperand.instance(); } } } diff --git a/projects/igniteui-angular/src/lib/query-builder/query-builder.component.spec.ts b/projects/igniteui-angular/src/lib/query-builder/query-builder.component.spec.ts index 497ff573299..98be7fbf5a4 100644 --- a/projects/igniteui-angular/src/lib/query-builder/query-builder.component.spec.ts +++ b/projects/igniteui-angular/src/lib/query-builder/query-builder.component.spec.ts @@ -119,6 +119,16 @@ describe('IgxQueryBuilder', () => { expect(mainEntityContainer.children[1].children[1].tagName).toBe('IGX-COMBO'); expect(nestedEntityContainer.children[1].children[1].tagName).toBe('IGX-SELECT'); })); + + it('Should return proper fields collection without additional props.', fakeAsync(() => { + queryBuilder.expressionTree = QueryBuilderFunctions.generateExpressionTree(); + fix.detectChanges(); + + queryBuilder.entities[0].fields.forEach(field => { + expect(field.filters).toBeUndefined(); + expect(field.pipeArgs).toBeUndefined(); + }); + })); }); describe('Interactions', () => { @@ -3243,8 +3253,7 @@ export class IgxQueryBuilderSampleTestComponent implements OnInit { <p class="selectedField">{{selectedField.field}}</p> <p class="selectedCondition">{{selectedCondition}}</p> } @else if (selectedField?.field === 'OrderId' && selectedCondition === 'equals') { - <igx-combo [data]="comboData" [(ngModel)]="searchValue.value" - (selectionChanging)="handleChange($event, selectedField, searchValue)" [displayKey]="'field'"> + <igx-combo [data]="comboData" [(ngModel)]="searchValue.value" [displayKey]="'field'"> </igx-combo> } @else { <ng-container #defaultTemplate *ngTemplateOutlet="defaultSearchValueTemplate"></ng-container> @@ -3273,6 +3282,7 @@ export class IgxQueryBuilderCustomTemplateSampleTestComponent implements OnInit public ngOnInit(): void { this.entities = SampleEntities.map(a => ({ ...a })); + this.entities[1].fields[0].formatter = (value: any, rowData: any) => rowData === 'equals' ? (Array.from(value)[0] as any).id : value; const tree = new FilteringExpressionsTree(FilteringLogic.And, null, 'Orders', ['*']); tree.filteringOperands.push({ @@ -3290,11 +3300,4 @@ export class IgxQueryBuilderCustomTemplateSampleTestComponent implements OnInit { id: 1, field: 'B' } ]; } - - public handleChange(ev, selectedField, searchVal) { - if (selectedField.field === 'OrderId') { - searchVal.value = ev.newValue[0]; - selectedField.formatter = (value: any, rowData: any) => rowData === 'equals' ? (Array.from(value)[0] as any).id : value; - } - } }