fix(AdvanceFiltering): Adding missing resource strings

Author: gedinakova

projects/igniteui-angular/src/lib/core/i18n/grid-resources.ts

@@ -89,6 +89,7 @@ export interface IGridResourceStrings {
     igx_grid_excel_no_matches?: string;
     igx_grid_excel_matches_count?: string;
     igx_grid_advanced_filter_title?: string;
+    igx_grid_advanced_filter_from_label?: string;
     igx_grid_advanced_filter_and_group?: string;
     igx_grid_advanced_filter_or_group?: string;
     igx_grid_advanced_filter_end_group?: string;
@@ -97,12 +98,17 @@ export interface IGridResourceStrings {
     igx_grid_advanced_filter_and_label?: string;
     igx_grid_advanced_filter_or_label?: string;
     igx_grid_advanced_filter_add_condition?: string;
+    igx_grid_advanced_filter_add_condition_root?: string;
+    igx_grid_advanced_filter_add_group?: string;
+    igx_grid_advanced_filter_add_group_root?: string;
     igx_grid_advanced_filter_ungroup?: string;
     igx_grid_advanced_filter_delete?: string;
     igx_grid_advanced_filter_delete_filters?: string;
     igx_grid_advanced_filter_initial_text?: string;
     igx_grid_advanced_filter_column_placeholder?: string;
     igx_grid_advanced_filter_value_placeholder?: string;
+    igx_grid_advanced_filter_query_value_placeholder?: string;
+    igx_grid_advanced_filter_switch_group?: string;
     igx_grid_pinned_row_indicator?: string;
     igx_grid_hiding_check_all_label?: string;
     igx_grid_hiding_uncheck_all_label?: string;
@@ -257,20 +263,26 @@ export const GridResourceStringsEN: IGridResourceStrings = {
     igx_grid_excel_no_matches: 'No matches',
     igx_grid_excel_matches_count: '{0} matches.',
     igx_grid_advanced_filter_title: 'Advanced Filtering',
+    igx_grid_advanced_filter_from_label: 'From',
     igx_grid_advanced_filter_and_group: '"And" Group',
     igx_grid_advanced_filter_or_group: '"Or" Group',
     igx_grid_advanced_filter_end_group: 'End Group',
     igx_grid_advanced_filter_create_and_group: 'Create "And" Group',
     igx_grid_advanced_filter_create_or_group: 'Create "Or" Group',
     igx_grid_advanced_filter_and_label: 'and',
     igx_grid_advanced_filter_or_label: 'or',
-    igx_grid_advanced_filter_add_condition: 'Condition',
+    igx_grid_advanced_filter_switch_group: 'Switch to {0}',
+    igx_grid_advanced_filter_add_condition: 'Add condition',
+    igx_grid_advanced_filter_add_group: 'Add group',
+    igx_grid_advanced_filter_add_condition_root: 'Condition',
+    igx_grid_advanced_filter_add_group_root: 'Group',
     igx_grid_advanced_filter_ungroup: 'Ungroup',
     igx_grid_advanced_filter_delete: 'Delete',
     igx_grid_advanced_filter_delete_filters: 'Delete filters',
     igx_grid_advanced_filter_initial_text: 'Start with creating a group of conditions linked with "And" or "Or"',
     igx_grid_advanced_filter_column_placeholder: 'Select column',
     igx_grid_advanced_filter_value_placeholder: 'Value',
+    igx_grid_advanced_filter_query_value_placeholder: 'Sub-query results',
     igx_grid_pinned_row_indicator: 'Pinned',
     igx_grid_hiding_check_all_label: 'Show All',
     igx_grid_hiding_uncheck_all_label: 'Hide All',

projects/igniteui-angular/src/lib/grids/grid/grid-filtering-advanced.spec.ts

@@ -28,6 +28,7 @@ import { By } from '@angular/platform-browser';
 import { IgxDateTimeEditorDirective } from '../../directives/date-time-editor/date-time-editor.directive';
 import { QueryBuilderSelectors } from '../../query-builder/query-builder.common';
 import { IgxHGridRemoteOnDemandComponent } from '../hierarchical-grid/hierarchical-grid.spec';
+import { IGridResourceStrings } from '../../core/i18n/grid-resources';
 
 describe('IgxGrid - Advanced Filtering #grid - ', () => {
     beforeEach(waitForAsync(() => {
@@ -1263,47 +1264,75 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => {
         it('Should correctly change resource strings for Advanced Filtering dialog.', fakeAsync(() => {
             const fix = TestBed.createComponent(IgxGridAdvancedFilteringComponent);
             const grid: IgxGridComponent = fix.componentInstance.grid;
-            grid.resourceStrings = Object.assign({}, grid.resourceStrings, {
+            const myResourceStrings: IGridResourceStrings = {
                 igx_grid_filter_operator_and: 'My and',
                 igx_grid_filter_operator_or: 'My or',
                 igx_grid_advanced_filter_title: 'My advanced filter',
                 igx_grid_advanced_filter_end_group: 'My end group',
                 igx_grid_advanced_filter_create_and_group: 'My create and group',
                 igx_grid_advanced_filter_and_label: 'My and',
                 igx_grid_advanced_filter_or_label: 'My or',
+                igx_grid_advanced_filter_add_condition: 'Add my condition',
                 igx_grid_advanced_filter_add_condition_root: 'My condition',
                 igx_grid_advanced_filter_add_group_root: 'My group',
+                igx_grid_advanced_filter_add_group: 'Add my group',
                 igx_grid_advanced_filter_ungroup: 'My ungroup',
+                igx_grid_advanced_filter_switch_group: 'My switch to {0}',
                 igx_grid_advanced_filter_delete_filters: 'My delete filters'
+            };
+
+            grid.resourceStrings = {
+                ...grid.resourceStrings,
+                ...myResourceStrings
+            };
+
+            const tree = new FilteringExpressionsTree(FilteringLogic.And);
+            tree.filteringOperands.push({
+                fieldName: 'ProductName',
+                condition: IgxStringFilteringOperand.instance().condition('contains'),
+                searchVal: 'angular',
+                ignoreCase: true
             });
+
+            grid.advancedFilteringExpressionsTree = tree;
             fix.detectChanges();
 
             // Open Advanced Filtering dialog.
             grid.openAdvancedFilteringDialog();
             fix.detectChanges();
 
             expect(QueryBuilderFunctions.getQueryBuilderHeaderText(fix).trim()).toBe('My advanced filter');
-            expect(QueryBuilderFunctions.getQueryBuilderInitialAddConditionBtn(fix).querySelector('span').innerText)
+            expect((QueryBuilderFunctions.getQueryBuilderTreeRootGroupButtons(fix, 0)[0] as HTMLElement).querySelector('span').innerText)
                 .toBe('My condition');
+            expect((QueryBuilderFunctions.getQueryBuilderTreeRootGroupButtons(fix, 0)[1] as HTMLElement).querySelector('span').innerText)
+                .toBe('My group');
 
-            QueryBuilderFunctions.clickQueryBuilderInitialAddConditionBtn(fix, 0);
+            QueryBuilderFunctions.clickQueryBuilderGroupContextMenu(fix, 0);
             tick(100);
             fix.detectChanges();
+            
+            const groupDDLItems = QueryBuilderFunctions.getQueryBuilderGroupContextMenuDropDownItems(fix);
+            expect(groupDDLItems[0].innerText).toBe('My switch to MY OR');
+            expect(groupDDLItems[1].innerText).toBe('My ungroup');
 
+            QueryBuilderFunctions.clickQueryBuilderGroupContextMenu(fix, 0);
+            tick(100);
+            fix.detectChanges();
 
-            // Populate edit inputs.
-            QueryBuilderFunctions.selectColumnInEditModeExpression(fix, 1); // Select 'ProductName' column.
-            QueryBuilderFunctions.selectOperatorInEditModeExpression(fix, 0); // Select 'Contains' operator.
+            // Hover the condition chip to show the add button
+            const expressionItem = fix.nativeElement.querySelectorAll(`.${QueryBuilderSelectors.FILTER_TREE_EXPRESSION_ITEM}`)[0];
+            expressionItem.dispatchEvent(new MouseEvent('mouseenter'));
+            tick();
+            fix.detectChanges();
 
-            const input = QueryBuilderFunctions.getQueryBuilderValueInput(fix).querySelector('input');
-            UIInteractions.clickAndSendInputElementValue(input, 'angular', fix); // Type filter value.
-            // Commit the populated expression.
-            QueryBuilderFunctions.clickQueryBuilderExpressionCommitButton(fix);
+            // Click the add icon to display the adding buttons and verify their content.
+            QueryBuilderFunctions.clickQueryBuilderTreeExpressionChipIcon(fix, [0], 'add');
             fix.detectChanges();
-            expect((QueryBuilderFunctions.getQueryBuilderTreeRootGroupButtons(fix, 0)[0] as HTMLElement).querySelector('span').innerText)
-                .toBe('My condition');
-            expect((QueryBuilderFunctions.getQueryBuilderTreeRootGroupButtons(fix, 0)[1] as HTMLElement).querySelector('span').innerText)
-                .toBe('My group');
+            tick(50);
+
+            const addingButtons: any = QueryBuilderFunctions.getQueryBuilderTreeRootGroupButtons(fix, 0);
+            expect(addingButtons[0].innerText).toBe('add\nMy condition');
+            expect(addingButtons[1].innerText).toBe('add\nMy group');
         }));
     });
 
@@ -1792,6 +1821,70 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => {
             expectedValues = ['ID', 'ProductName'];
             expect(dropdownValues).toEqual(expectedValues);
         }));
+
+        it('Should correctly change resource strings for hierarchical Advanced Filtering dialog.', fakeAsync(() => {
+            debugger
+            hgrid.closeAdvancedFilteringDialog(false);
+            tick(200);
+            fix.detectChanges(); 
+            
+            const innerTree = new FilteringExpressionsTree(0, undefined, 'childData', ['ID']);
+            innerTree.filteringOperands.push({
+                fieldName: 'ID',
+                ignoreCase: false,
+                conditionName: IgxStringFilteringOperand.instance().condition('contains').name,
+                searchVal: '39'
+            });
+    
+            const tree = new FilteringExpressionsTree(0, undefined, 'rootData', ['ID']);
+            tree.filteringOperands.push({
+                fieldName: 'ID',
+                conditionName: IgxStringFilteringOperand.instance().condition('inQuery').name,
+                ignoreCase: false,
+                searchTree: innerTree
+            });
+
+            hgrid.advancedFilteringExpressionsTree = tree;
+            
+            const myResourceStrings: IGridResourceStrings = {
+                igx_grid_filter_operator_and: 'My and',
+                igx_grid_filter_operator_or: 'My or',
+                igx_grid_advanced_filter_title: 'My advanced filter',
+                igx_grid_advanced_filter_end_group: 'My end group',
+                igx_grid_advanced_filter_create_and_group: 'My create and group',
+                igx_grid_advanced_filter_and_label: 'My and',
+                igx_grid_advanced_filter_or_label: 'My or',
+                igx_grid_advanced_filter_add_condition: 'Add my condition',
+                igx_grid_advanced_filter_add_condition_root: 'My condition',
+                igx_grid_advanced_filter_add_group_root: 'My group',
+                igx_grid_advanced_filter_add_group: 'Add my group',
+                igx_grid_advanced_filter_ungroup: 'My ungroup',
+                igx_grid_advanced_filter_switch_group: 'My switch to {0}',
+                igx_grid_advanced_filter_delete_filters: 'My delete filters',
+                igx_grid_advanced_filter_from_label: 'My from',
+                igx_grid_advanced_filter_query_value_placeholder: 'My sub-query results',
+            };
+
+            hgrid.resourceStrings = {
+                ...hgrid.resourceStrings,
+                ...myResourceStrings
+            };
+
+            fix.detectChanges();
+
+            // Open Advanced Filtering dialog.
+            hgrid.openAdvancedFilteringDialog();
+            fix.detectChanges();
+            
+            // Open up the sub-query
+            QueryBuilderFunctions.clickQueryBuilderTreeExpressionChip(fix, [0]);
+            tick(100);
+            fix.detectChanges();
+
+            const valueInput: any = QueryBuilderFunctions.getQueryBuilderValueInput(fix);
+            expect(valueInput.querySelector('input').placeholder).toBe('My sub-query results');
+
+        }));
     });
 });
 

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

@@ -9,7 +9,7 @@
 <ng-template #selectFromTemplate>
     <div class="igx-filter-tree__inputs" [style.display]="(isInEditMode() && (!this.isAdvancedFiltering() || this.isHierarchicalNestedQuery())) ? 'flex' : 'none'">
         <div class="igx-filter-tree__inputs-field">
-            <span class="igx-query-builder__label">From</span>
+            <span class="igx-query-builder__label">{{ this.resourceStrings.igx_query_builder_from_label }}</span>
             <igx-select #entitySelect
                 type="box"
                 (selectionChanging)="onEntitySelectChanging($event)"
@@ -30,7 +30,7 @@
 
         <div class="igx-filter-tree__inputs-field">
             @if (!this.isHierarchicalNestedQuery()) {
-                <span class="igx-query-builder__label">Select</span>
+                <span class="igx-query-builder__label">{{ this.resourceStrings.igx_query_builder_select_label }}</span>
             }
             @if (!parentExpression) {
                 <igx-combo