feat(pivot): Implement filters area dropdown

Author: mddragnev

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

@@ -35,11 +35,11 @@ export class IgxFilteringService implements OnDestroy {
 
     private columnsWithComplexFilter = new Set<string>();
     private areEventsSubscribed = false;
-    private destroy$ = new Subject<boolean>();
+    protected destroy$ = new Subject<boolean>();
     private isFiltering = false;
     private columnToExpressionsMap = new Map<string, ExpressionUI[]>();
     private columnStartIndex = -1;
-    private _filterMenuOverlaySettings: OverlaySettings = {
+    protected _filterMenuOverlaySettings: OverlaySettings = {
         closeOnEscape: true,
         closeOnOutsideClick: true,
         modal: false,
@@ -50,11 +50,11 @@ export class IgxFilteringService implements OnDestroy {
         }),
         scrollStrategy: new AbsoluteScrollStrategy()
     };
-    private lastActiveNode;
+    protected lastActiveNode;
 
     constructor(
         private iconService: IgxIconService,
-        private _overlayService: IgxOverlayService,
+        protected _overlayService: IgxOverlayService,
     ) { }
 
     public ngOnDestroy(): void {

projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-filtering.service.ts

@@ -1,13 +1,17 @@
 import { Injectable } from '@angular/core';
+import { first, takeUntil } from 'rxjs/operators';
 import { IFilteringOperation } from '../../data-operations/filtering-condition';
 import { FilteringLogic } from '../../data-operations/filtering-expression.interface';
 import { FilteringExpressionsTree, IFilteringExpressionsTree } from '../../data-operations/filtering-expressions-tree';
+import { ColumnType } from '../common/grid.interface';
 import { IgxFilteringService } from '../filtering/grid-filtering.service';
 import { IgxPivotGridComponent } from './pivot-grid.component';
 import { PivotUtil } from './pivot-util';
 
 @Injectable()
 export class IgxPivotFilteringService extends IgxFilteringService {
+    private filtersESFId;
+
     public clearFilter(field: string): void {
         this.clear_filter(field);
     }
@@ -47,4 +51,44 @@ export class IgxPivotFilteringService extends IgxFilteringService {
             (grid as any).setupColumns();
         }
     }
+
+    public toggleFiltersESF(dropdown: any, element: HTMLElement, column: ColumnType, shouldReattach: boolean) {
+        const filterIcon = column.filteringExpressionsTree ? 'igx-excel-filter__icon--filtered' : 'igx-excel-filter__icon';
+        const filterIconTarget = element.querySelector(`.${filterIcon}`) as HTMLElement || element;
+
+        const { id, ref } = (this.grid as IgxPivotGridComponent).createFilterESF(dropdown, column, {
+            ...this._filterMenuOverlaySettings,
+            ...{ target: filterIconTarget }
+        }, shouldReattach);
+
+        this.filtersESFId = id;
+
+        if (shouldReattach) {
+            this._overlayService.opening
+                .pipe(
+                    first(overlay => overlay.id === id),
+                    takeUntil(this.destroy$)
+                )
+                .subscribe(() => this.lastActiveNode = this.grid.navigation.activeNode);
+
+            this._overlayService.closed
+                .pipe(
+                    first(overlay => overlay.id === id),
+                    takeUntil(this.destroy$)
+                )
+                .subscribe(() => {
+                    this._overlayService.detach(id);
+                    ref?.destroy();
+                    this.grid.navigation.activeNode = this.lastActiveNode;
+                    this.grid.theadRow.nativeElement.focus();
+                });
+
+            this.grid.columnPinned.pipe(first()).subscribe(() => ref?.destroy());
+            this._overlayService.show(id);
+        }
+    }
+
+    public hideESF() {
+        this._overlayService.hide(this.filtersESFId);
+    }
 }

projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.html

@@ -47,7 +47,7 @@
             </ng-template>
         </ng-template>
         <ng-template #record_template let-rowIndex="index" let-rowData>
-            <igx-pivot-row [pivotRowWidths]='pivotRowWidths' [gridID]="id" [index]="rowIndex" [data]="rowData" 
+            <igx-pivot-row [pivotRowWidths]='pivotRowWidths' [gridID]="id" [index]="rowIndex" [data]="rowData"
             [ngClass]="rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:pipeTrigger"
             [ngStyle]="rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger" #row>
             </igx-pivot-row>

projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts

@@ -30,7 +30,7 @@ import { IgxGridBaseDirective } from '../grid-base.directive';
 import { IgxFilteringService } from '../filtering/grid-filtering.service';
 import { IgxGridSelectionService } from '../selection/selection.service';
 import { IgxForOfSyncService, IgxForOfScrollSyncService } from '../../directives/for-of/for_of.sync.service';
-import { GridServiceType, GridType, IGX_GRID_BASE, IGX_GRID_SERVICE_BASE, RowType } from '../common/grid.interface';
+import { ColumnType, GridType, IGX_GRID_BASE, RowType } from '../common/grid.interface';
 import { IgxGridCRUDService } from '../common/crud.service';
 import { IgxGridSummaryService } from '../summaries/grid-summary.service';
 import { DEFAULT_PIVOT_KEYS, IDimensionsChange, IPivotConfiguration, IPivotDimension, IPivotKeys, IValuesChange, PivotDimensionType } from './pivot-grid.interface';
@@ -117,8 +117,6 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
     @ViewChild(IgxPivotHeaderRowComponent, { static: true })
     public theadRow: IgxPivotHeaderRowComponent;
 
-
-
     @Input()
     /**
      * Gets/Sets the pivot configuration with all related dimensions and values.
@@ -610,6 +608,20 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
         return;
     }
 
+    /** @hidden @internal */
+    public createFilterESF(dropdown: any, column: ColumnType, options: OverlaySettings, shouldReatach: boolean) {
+        options.outlet = this.outlet;
+        if (dropdown) {
+            dropdown.initialize(column, this.overlayService);
+            if (shouldReatach) {
+                const id = this.overlayService.attach(dropdown.element, options);
+                dropdown.overlayComponentId = id;
+                return { id, ref: undefined };
+            }
+            return {id: dropdown.overlayComponentId, ref: undefined};
+        }
+    }
+
     /** @hidden */
     public featureColumnsWidth() {
         return this.pivotRowWidths;