Merge pull request #8193 from IgniteUI/ibarakov/fix-5813-10.2.x

feat(grid-esf): make excel style filtering work like in excel

Author: DiyanDimitrov

CHANGELOG.md

@@ -6,6 +6,12 @@ All notable changes for each version of this project will be documented in this
 ### General
 - `IgxGridActions`
     - Added `asMenuItems` Input for grid actions - `igx-grid-editing-actions`, `igx-grid-pinning-actions`. When set to true will render the related action buttons as separate menu items with button and label.
+- `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
+    - **Behavioral Change** - The Excel Style Filtering has been reworked to provide filtering experience such as in Excel. This includes the following changes:
+        - You can close the Excel Style Filtering menu by pressing `Ctrl + Shift + L`.
+        - You can apply the filter by pressing `Enter`.
+        - When searching items in the Excel Style Filtering menu, only the rows that match your search term will be filtered in.
+        - By checking the `Add current selection to filter` option, the new search results will be added to the previously filtered items.
 - `IgxInputGroup`
     - **Breaking Change** - Removed `fluent`, `fluent_search`, `bootstrap`, and `indigo` as possible values for the `type` input property.
     - **Behavioral Change** - The styling of the input group is now dictated by the theme being used. The remaining `types` - `line`, `border`, and `box` will only have effect on the styling when used with the `material` theme. The `search` type will affect styling when used with all themes. Changing the theme at runtime will not change the styling of the input group, a page refresh is required.

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

@@ -64,6 +64,8 @@ export interface IGridResourceStrings {
     igx_grid_excel_apply?: string;
     igx_grid_excel_search_placeholder?: string;
     igx_grid_excel_select_all?: string;
+    igx_grid_excel_select_all_search_results?: string;
+    igx_grid_excel_add_to_filter?: string;
     igx_grid_excel_blanks?: string;
     igx_grid_excel_hide?: string;
     igx_grid_excel_show?: string;
@@ -174,6 +176,8 @@ export const GridResourceStringsEN: IGridResourceStrings = {
     igx_grid_excel_apply: 'apply',
     igx_grid_excel_search_placeholder: 'Search',
     igx_grid_excel_select_all: 'Select All',
+    igx_grid_excel_select_all_search_results: 'Select all search results',
+    igx_grid_excel_add_to_filter: 'Add current selection to filter',
     igx_grid_excel_blanks: '(Blanks)',
     igx_grid_excel_hide: 'Hide column',
     igx_grid_excel_show: 'Show column',

projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.ts

@@ -175,11 +175,14 @@ export class IgxGridFilteringRowComponent implements AfterViewInit {
         this.input.nativeElement.focus();
     }
 
-    @HostListener('keydown.esc', ['$event'])
-    public onEscHandler(evt) {
-        evt.preventDefault();
-        evt.stopPropagation();
-        this.close();
+    @HostListener('keydown', ['$event'])
+    public onKeydownHandler(evt) {
+        if (evt.key === KEYS.ESCAPE || evt.key === KEYS.ESCAPE_IE ||
+            evt.ctrlKey && evt.shiftKey && evt.key.toLowerCase() === 'l') {
+                evt.preventDefault();
+                evt.stopPropagation();
+                this.close();
+        }
     }
 
     get disabled(): boolean {
@@ -260,8 +263,9 @@ export class IgxGridFilteringRowComponent implements AfterViewInit {
         } else if (event.altKey && (event.key === KEYS.DOWN_ARROW || event.key === KEYS.DOWN_ARROW_IE)) {
             this.inputGroupPrefix.nativeElement.focus();
             this.toggleConditionsDropDown(this.inputGroupPrefix.nativeElement);
-        } else if (event.key === KEYS.ESCAPE || event.key === KEYS.ESCAPE_IE) {
-            this.close();
+        } else if (event.key === KEYS.ESCAPE || event.key === KEYS.ESCAPE_IE ||
+            event.ctrlKey && event.shiftKey && event.key.toLowerCase() === 'l') {
+                this.close();
         }
     }
 

projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-search.component.html

@@ -7,6 +7,8 @@
         igxInput
         tabindex="0"
         [(ngModel)]="searchValue"
+        (ngModelChange)="filterListData()"
+        (keydown)="onInputKeyDown($event)"
         [placeholder]="esf.column?.grid.resourceStrings.igx_grid_excel_search_placeholder"
         autocomplete="off"/>
     <igx-icon
@@ -21,7 +23,7 @@
 <igx-list #list [displayDensity]="esf.displayDensity" [isLoading]="isLoading">
     <div [style.overflow]="'hidden'" [style.position]="'relative'">
         <igx-list-item
-        *igxFor="let item of esf.listData | excelStyleSearchFilter: searchValue; scrollOrientation : 'vertical'; containerSize: containerSize; itemSize: itemSize">
+        *igxFor="let item of displayedListData scrollOrientation : 'vertical'; containerSize: containerSize; itemSize: itemSize">
             <igx-checkbox
             [value]="item"
             tabindex="-1"

projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-search.component.ts

@@ -11,7 +11,7 @@ import {
 import { IgxInputDirective } from '../../../directives/input/input.directive';
 import { DisplayDensity } from '../../../core/density';
 import { IgxForOfDirective } from '../../../directives/for-of/for_of.directive';
-import { IgxGridExcelStyleFilteringComponent } from './grid.excel-style-filtering.component';
+import { IgxGridExcelStyleFilteringComponent, FilterListItem } from './grid.excel-style-filtering.component';
 import { FilteringExpressionsTree } from '../../../data-operations/filtering-expressions-tree';
 import { FilteringLogic } from '../../../data-operations/filtering-expression.interface';
 import { DataType } from '../../../data-operations/data-util';
@@ -23,6 +23,7 @@ import { Subject } from 'rxjs';
 import { IgxListComponent } from '../../../list/public_api';
 import { IChangeCheckboxEventArgs } from '../../../checkbox/checkbox.component';
 import { takeUntil } from 'rxjs/operators';
+import { KEYS } from '../../../core/utils';
 
 @Directive({
     selector: '[igxExcelStyleLoading]'
@@ -42,8 +43,30 @@ export class IgxExcelStyleLoadingValuesTemplateDirective {
 export class IgxExcelStyleSearchComponent implements AfterViewInit, OnDestroy {
     private static readonly filterOptimizationThreshold = 2;
     private _isLoading;
+    private _addToCurrentFilter: FilterListItem;
     private destroy$ = new Subject<boolean>();
 
+    /**
+     * @hidden @internal
+     */
+    public get addToCurrentFilter(): FilterListItem {
+        if (!this._addToCurrentFilter) {
+            const addToCurrentFilterItem = {
+                isSelected: false,
+                isFiltered: false,
+                indeterminate: false,
+                isSpecial: true,
+                isBlanks: false,
+                value: this.esf.grid.resourceStrings.igx_grid_excel_add_to_filter,
+                label: this.esf.grid.resourceStrings.igx_grid_excel_add_to_filter
+            };
+
+            this._addToCurrentFilter = addToCurrentFilterItem;
+        }
+
+        return this._addToCurrentFilter;
+    }
+
     /**
      * @hidden @internal
      */
@@ -66,6 +89,11 @@ export class IgxExcelStyleSearchComponent implements AfterViewInit, OnDestroy {
      */
     public searchValue: any;
 
+    /**
+     * @hidden @internal
+     */
+    public displayedListData: FilterListItem[];
+
     /**
      * @hidden @internal
      */
@@ -106,13 +134,6 @@ export class IgxExcelStyleSearchComponent implements AfterViewInit, OnDestroy {
         }
     }
 
-    /**
-     * @hidden @internal
-     */
-    get applyButtonDisabled() {
-        return this.esf.listData[0] && !this.esf.listData[0].isSelected && !this.esf.listData[0].indeterminate;
-    }
-
     constructor(public cdr: ChangeDetectorRef, public esf: IgxGridExcelStyleFilteringComponent) {
         esf.loadingStart.pipe(takeUntil(this.destroy$)).subscribe(() => {
             this.isLoading = true;
@@ -129,6 +150,10 @@ export class IgxExcelStyleSearchComponent implements AfterViewInit, OnDestroy {
         esf.columnChange.pipe(takeUntil(this.destroy$)).subscribe(() => {
             this.virtDir.resetScrollPosition();
         });
+
+        esf.listDataLoaded.pipe(takeUntil(this.destroy$)).subscribe(() => {
+            this.filterListData();
+        });
     }
 
     public ngAfterViewInit() {
@@ -154,28 +179,38 @@ export class IgxExcelStyleSearchComponent implements AfterViewInit, OnDestroy {
      */
     public clearInput() {
         this.searchValue = null;
+        this.filterListData();
     }
 
     /**
      * @hidden @internal
      */
     public onCheckboxChange(eventArgs: IChangeCheckboxEventArgs) {
-        const selectedIndex = this.esf.listData.indexOf(eventArgs.checkbox.value);
+        const selectedIndex = this.displayedListData.indexOf(eventArgs.checkbox.value);
+        const selectAllBtn = this.displayedListData[0];
+
         if (selectedIndex === 0) {
-            this.esf.listData.forEach(element => {
+            this.displayedListData.forEach(element => {
+                if (element === this.addToCurrentFilter) { return; }
                 element.isSelected = eventArgs.checked;
-                this.esf.listData[0].indeterminate = false;
             });
+
+            selectAllBtn.indeterminate = false;
         } else {
             eventArgs.checkbox.value.isSelected = eventArgs.checked;
-            if (!this.esf.listData.slice(1, this.esf.listData.length).find(el => el.isSelected === false)) {
-                this.esf.listData[0].indeterminate = false;
-                this.esf.listData[0].isSelected = true;
-            } else if (!this.esf.listData.slice(1, this.esf.listData.length).find(el => el.isSelected === true)) {
-                this.esf.listData[0].indeterminate = false;
-                this.esf.listData[0].isSelected = false;
+            const indexToStartSlicing = this.displayedListData.indexOf(this.addToCurrentFilter) > -1 ? 2 : 1;
+
+            const slicedArray =
+                this.displayedListData.slice(indexToStartSlicing, this.displayedListData.length);
+
+            if (!slicedArray.find(el => el.isSelected === false)) {
+                selectAllBtn.indeterminate = false;
+                selectAllBtn.isSelected = true;
+            } else if (!slicedArray.find(el => el.isSelected === true)) {
+                selectAllBtn.indeterminate = false;
+                selectAllBtn.isSelected = false;
             } else {
-                this.esf.listData[0].indeterminate = true;
+                selectAllBtn.indeterminate = true;
             }
         }
         eventArgs.checkbox.nativeCheckbox.nativeElement.blur();
@@ -203,12 +238,84 @@ export class IgxExcelStyleSearchComponent implements AfterViewInit, OnDestroy {
         }
     }
 
+    /**
+     * @hidden @internal
+     */
+    get applyButtonDisabled(): boolean {
+        return this.esf.listData[0] && !this.esf.listData[0].isSelected && !this.esf.listData[0].indeterminate ||
+            this.displayedListData && this.displayedListData.length === 0;
+    }
+
+    /**
+     * @hidden @internal
+     */
+    public onInputKeyDown(event): void {
+        if (event.key === KEYS.ENTER) {
+            event.preventDefault();
+            this.applyFilter();
+        }
+    }
+
+    /**
+     * @hidden @internal
+     */
+    public filterListData(): void {
+        if (!this.esf.listData || !this.esf.listData.length) {
+            this.displayedListData = [];
+
+            return;
+        }
+
+        const searchAllBtn = this.esf.listData[0];
+
+        if (!this.searchValue) {
+            const anyFiltered = this.esf.listData.some(i => i.isFiltered);
+            const anyUnfiltered = this.esf.listData.some(i => !i.isFiltered);
+
+            if (anyFiltered && anyUnfiltered) {
+                searchAllBtn.indeterminate = true;
+            }
+
+            this.esf.listData.forEach(i => i.isSelected = i.isFiltered);
+            this.displayedListData = this.esf.listData;
+            searchAllBtn.label = this.esf.grid.resourceStrings.igx_grid_excel_select_all;
+
+            return;
+        }
+
+        const searchVal = this.searchValue.toLowerCase();
+
+        this.displayedListData = this.esf.listData.filter((it, i) => (i === 0 && it.isSpecial) ||
+            (it.label !== null && it.label !== undefined) &&
+            !it.isBlanks &&
+            it.label.toString().toLowerCase().indexOf(searchVal) > -1);
+
+       this.esf.listData.forEach(i => i.isSelected = false);
+       this.displayedListData.forEach(i => i.isSelected = true);
+
+        this.displayedListData.splice(1, 0, this.addToCurrentFilter);
+
+        searchAllBtn.indeterminate = false;
+        searchAllBtn.label = this.esf.grid.resourceStrings.igx_grid_excel_select_all_search_results;
+
+        if (this.displayedListData.length === 2) {
+            this.displayedListData = [];
+        }
+    }
+
     /**
      * @hidden @internal
      */
     public applyFilter() {
         const filterTree = new FilteringExpressionsTree(FilteringLogic.Or, this.esf.column.field);
-        const selectedItems = this.esf.listData.slice(1, this.esf.listData.length).filter(el => el.isSelected === true);
+
+        const item = this.displayedListData[1];
+        const addToCurrentFilterOptionVisible = item === this.addToCurrentFilter;
+
+        const selectedItems = addToCurrentFilterOptionVisible && item.isSelected ?
+            this.esf.listData.slice(1, this.esf.listData.length).filter(el => el.isSelected || el.isFiltered) :
+            this.esf.listData.slice(1, this.esf.listData.length).filter(el => el.isSelected);
+
         const unselectedItem = this.esf.listData.slice(1, this.esf.listData.length).find(el => el.isSelected === false);
 
         if (unselectedItem) {