Merge pull request #6879 from IgniteUI/dmdimitrov/issue6670-master

fix(excel-style-filtering): implemented new position strategy for esf only

Author: DiyanDimitrov

projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss

@@ -16,31 +16,18 @@
 
     %grid-excel-filter {
         display: block;
-    }
-
-    %grid-excel-filter--inline {
         width: 100%;
+        height: 100%;
         flex-grow: 1;
+        box-shadow: igx-elevation($elevations, 12);
         overflow: auto;
+    }
+
+    %grid-excel-filter--inline {
+        box-shadow: none;
 
         %grid-excel-menu {
-            display: flex;
-            flex-direction: column;
             width: 100%;
-            height: 100%;
-            box-shadow: none;
-
-            %grid-excel-main {
-                display: flex;
-                flex-direction: column;
-                flex-grow: 1;
-                overflow: hidden;
-            }
-
-            %grid-excel-main igx-list {
-                flex-grow: 1;
-                overflow: hidden;
-            }
         }
     }
 
@@ -67,10 +54,12 @@
     }
 
     %grid-excel-menu {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
         width: 320px;
         min-width: 320px;
         background: --var($theme, 'filtering-row-background');
-        box-shadow: igx-elevation($elevations, 12);
         border-radius: 4px;
 
         @include igx-button-group(igx-button-group-theme(
@@ -227,10 +216,15 @@
     }
 
     %grid-excel-main {
-        display: block;
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+        overflow: hidden;
         padding: 0 rem(16px);
 
         igx-list {
+            flex-grow: 1;
+            overflow: hidden;
             margin: rem(8px) -#{rem(16px)} 0;
             border: 0;
             border-top: 1px dashed igx-color($palette, 'grays', 300);

projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-position-strategy.ts

@@ -0,0 +1,23 @@
+import { AutoPositionStrategy } from '../../../services/overlay/position/auto-position-strategy';
+import { ConnectedFit } from '../../../services/overlay/utilities';
+
+/** @hidden */
+export class ExcelStylePositionStrategy extends AutoPositionStrategy {
+    protected shouldFitInViewPort(connectedFit: ConnectedFit) {
+        return true;
+    }
+
+    protected fitInViewport(element: HTMLElement, connectedFit: ConnectedFit) {
+        const heightOverflow = connectedFit.contentElementRect.height - connectedFit.viewPortRect.height;
+        if (heightOverflow > 0) {
+            element.style.width = 'auto';
+            element.style.height = `${connectedFit.viewPortRect.height}px`;
+        } else {
+            element.style.height = `${Math.max(
+                connectedFit.viewPortRect.height - connectedFit.targetRect.bottom - 1,
+                connectedFit.contentElementRect.height)}px`;
+        }
+
+        super.fitInViewport(element, connectedFit);
+    }
+}

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

@@ -19,7 +19,7 @@
     </igx-icon>
 </igx-input-group>
 
-<igx-list #list [displayDensity]="displayDensity" [style.height.px]="listSize" [isLoading]="isLoading">
+<igx-list #list [displayDensity]="displayDensity" [isLoading]="isLoading">
     <div [style.overflow]="'hidden'" [style.position]="'relative'">
         <igx-list-item
             *igxFor="let item of data | excelStyleSearchFilter: searchValue; scrollOrientation : 'vertical'; containerSize: containerSize; itemSize: itemSize">

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

@@ -16,8 +16,6 @@ import { IgxForOfDirective } from '../../../directives/for-of/for_of.directive';
 import { FilterListItem } from './grid.excel-style-filtering.component';
 import { IgxListComponent } from '../../../list';
 
-const SEARCH_LIST_HEIGHT = 250;
-
 @Directive({
     selector: '[igxExcelStyleLoading]'
 })
@@ -134,11 +132,7 @@ export class IgxExcelStyleSearchComponent implements AfterViewInit {
         return itemSize;
     }
 
-    public get listSize() {
-        return this.inline ? null : SEARCH_LIST_HEIGHT;
-    }
-
     public get containerSize() {
-        return this.inline ? this.list.element.nativeElement.offsetHeight : SEARCH_LIST_HEIGHT;
+        return this.list.element.nativeElement.offsetHeight;
     }
 }

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

@@ -52,7 +52,9 @@
         'igx-excel-filter__menu--compact': grid.displayDensity === 'compact'
     }"
     [id]="overlayComponentId"
-    (keydown)="onKeyDown($event)">
+    (keydown)="onKeyDown($event)"
+    [style.min-height]="minHeight"
+    [style.max-height]="maxHeight">
 
     <header class="igx-excel-filter__menu-header">
         <h4>{{ column.header || column.field }}</h4>
@@ -136,7 +138,7 @@ <h4>{{ column.header || column.field }}</h4>
     </footer>
 </article>
 
-<igx-drop-down 
+<igx-drop-down
     *ngIf="column"
     #subMenu
     [maxHeight]="'397px'"

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

@@ -39,6 +39,7 @@ import { takeUntil } from 'rxjs/operators';
 import { ISelectionEventArgs, IgxDropDownComponent } from '../../../drop-down';
 import { IgxColumnComponent } from '../../columns/column.component';
 import { IgxGridBaseDirective } from '../../grid-base.directive';
+import { DisplayDensity } from '../../../core/density';
 
 /**
  *@hidden
@@ -202,6 +203,36 @@ export class IgxGridExcelStyleFilteringComponent implements OnDestroy {
         scrollStrategy: new AbsoluteScrollStrategy()
     };
 
+    /**
+     * @hidden @internal
+     */
+    get minHeight() {
+        if (!this.inline) {
+            let minHeight = 600;
+            switch (this.grid.displayDensity) {
+                case DisplayDensity.cosy: minHeight = 465; break;
+                case DisplayDensity.compact: minHeight = 330; break;
+                default: break;
+            }
+            return `${minHeight}px`;
+        }
+    }
+
+    /**
+     * @hidden @internal
+     */
+    @HostBinding('style.max-height') get maxHeight() {
+        if (!this.inline) {
+            let maxHeight = 730;
+            switch (this.grid.displayDensity) {
+                case DisplayDensity.cosy: maxHeight = 565; break;
+                case DisplayDensity.compact: maxHeight = 405; break;
+                default: break;
+            }
+            return `${maxHeight}px`;
+        }
+    }
+
     /**
      * @hidden @internal
      */

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

@@ -2671,7 +2671,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
             const excelMenu = GridFunctions.getExcelStyleFilteringComponent(fix);
             const checkbox: any[] = Array.from(GridFunctions.getExcelStyleFilteringCheckboxes(fix, excelMenu));
 
-            expect(checkbox.map(c => c.checked)).toEqual([false, false, false, false, false, false, false, false]);
+            expect(checkbox.map(c => c.checked)).toEqual([false, false, false, false, false, false, false ]);
         }));
 
         it('Should not select values in list if two values with Or operator are entered and contains operand.', fakeAsync(() => {
@@ -2713,8 +2713,8 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
             const excelMenu = GridFunctions.getExcelStyleFilteringComponent(fix);
             const checkbox: any[] = Array.from(GridFunctions.getExcelStyleFilteringCheckboxes(fix, excelMenu));
 
-            expect(checkbox.map(c => c.checked)).toEqual([true, false, false, true, false, false, true, false]);
-            expect(checkbox.map(c => c.indeterminate)).toEqual([true, false, false, false, false, false, false, false]);
+            expect(checkbox.map(c => c.checked)).toEqual([true, false, false, true, false, false, true]);
+            expect(checkbox.map(c => c.indeterminate)).toEqual([true, false, false, false, false, false, false]);
         }));
 
         it('Should change filter when changing And/Or operator.', fakeAsync(() => {
@@ -3411,15 +3411,15 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
             fix.detectChanges();
 
             // Verify scrollbar's scrollTop.
-            expect(scrollbar.scrollTop >= 610 && scrollbar.scrollTop <= 615).toBe(true,
+            expect(scrollbar.scrollTop >= 680 && scrollbar.scrollTop <= 690).toBe(true,
                 'search scrollbar has incorrect scrollTop');
             // Verify display container height.
             const displayContainer = searchComponent.querySelector('igx-display-container');
             const displayContainerRect = displayContainer.getBoundingClientRect();
-            expect(displayContainerRect.height).toBe(288, 'incorrect search display container height');
+            expect(displayContainerRect.height).toBe(216, 'incorrect search display container height');
             // Verify rendered list items count.
             const listItems = displayContainer.querySelectorAll('igx-list-item');
-            expect(listItems.length).toBe(12, 'incorrect rendered list items count');
+            expect(listItems.length).toBe(9, 'incorrect rendered list items count');
         }));
 
         it('should correctly display all items in search list after filtering it', (async () => {
@@ -3691,8 +3691,8 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
             fix.detectChanges();
 
             verifyExcelStyleFilterAvailableOptions(fix,
-                ['Select All', '(Blanks)', '0', '20', '100', '127', '254', '702'],
-                [true, true, true, true, true, true, true, true]);
+                ['Select All', '(Blanks)', '0', '20', '100', '127', '254'],
+                [true, true, true, true, true, true, true]);
 
             GridFunctions.clickExcelFilterIcon(fix, 'ProductName');
             tick(100);

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

@@ -1,3 +1,4 @@
+import { ElasticPositionStrategy } from './../../services/overlay/position/elastic-position-strategy';
 import {
     ChangeDetectionStrategy,
     ChangeDetectorRef,
@@ -23,13 +24,13 @@ import { IgxColumnResizingService } from '../resizing/resizing.service';
 import { IgxOverlayService } from '../../services/overlay/overlay';
 import { IgxGridExcelStyleFilteringComponent } from '../filtering/excel-style/grid.excel-style-filtering.component';
 import { OverlaySettings, PositionSettings, VerticalAlignment } from '../../services/overlay/utilities';
-import { AutoPositionStrategy } from '../../services/overlay/position/auto-position-strategy';
 import { useAnimation } from '@angular/animations';
 import { filter, takeUntil } from 'rxjs/operators';
 import { Subject } from 'rxjs';
 import { fadeIn, fadeOut } from '../../animations/main';
 import { AbsoluteScrollStrategy } from '../../services/overlay/scroll/absolute-scroll-strategy';
 import { GridType } from '../common/grid.interface';
+import { ExcelStylePositionStrategy } from '../filtering/excel-style/excel-style-position-strategy';
 
 /**
  * @hidden
@@ -233,7 +234,7 @@ export class IgxGridHeaderComponent implements DoCheck, OnInit, OnDestroy {
         this._filterMenuOverlaySettings = {
             closeOnOutsideClick: true,
             modal: false,
-            positionStrategy: new AutoPositionStrategy(this._filterMenuPositionSettings),
+            positionStrategy: new ExcelStylePositionStrategy(this._filterMenuPositionSettings),
             scrollStrategy: new AbsoluteScrollStrategy()
         };
 

projects/igniteui-angular/src/lib/services/overlay/position/base-fit-position-strategy.ts

@@ -16,8 +16,7 @@ export abstract class BaseFitPositionStrategy extends ConnectedPositioningStrate
             this.settings = Object.assign({}, this._initialSettings);
             connectedFit.viewPortRect = Util.getViewportRect(document);
             this.updateViewPortFit(connectedFit);
-            if (connectedFit.fitHorizontal.back < 0 || connectedFit.fitHorizontal.forward < 0 ||
-                connectedFit.fitVertical.back < 0 || connectedFit.fitVertical.forward < 0) {
+            if (this.shouldFitInViewPort(connectedFit)) {
                 this.fitInViewport(contentElement, connectedFit);
             }
         }
@@ -83,6 +82,15 @@ export abstract class BaseFitPositionStrategy extends ConnectedPositioningStrate
         return targetRect.bottom + targetRect.height * startPoint + elementRect.height * direction + offset;
     }
 
+    /**
+     * Returns whether the element should fit in viewport
+     * @param connectedFit connectedFit object containing all necessary parameters
+     */
+    protected shouldFitInViewPort(connectedFit: ConnectedFit) {
+        return connectedFit.fitHorizontal.back < 0 || connectedFit.fitHorizontal.forward < 0 ||
+            connectedFit.fitVertical.back < 0 || connectedFit.fitVertical.forward < 0;
+    }
+
     /**
      * Fits the element into viewport according to the position settings
      * @param element element to fit in viewport
@@ -92,5 +100,3 @@ export abstract class BaseFitPositionStrategy extends ConnectedPositioningStrate
         element: HTMLElement,
         connectedFit: ConnectedFit);
 }
-
-

src/app/grid-filtering/grid-filtering.sample.html

@@ -3,7 +3,7 @@
         Demonstrates grid's filtering functionality.
     </app-page-header>
 
-    
+
 
     <div class="sample-content">
         <div class="sample-column">
@@ -18,17 +18,18 @@
                 [allowFiltering]="true"
                 [filterMode]="'excelStyleFilter'"
                 [allowAdvancedFiltering]="true"
+                [advancedFilteringExpressionsTree]="advancedFilteringTree"
                 [rowSelectable]="true"
                 [paging]="false"
                 [width]="'980px'"
-                [height]="'600px'" 
+                [height]="'600px'"
                 [showToolbar]="true"
-                [columnHiding]="true" 
+                [columnHiding]="true"
                 [columnPinning]="true"
-                [exportExcel]="true" 
-                [exportCsv]="true" 
+                [exportExcel]="true"
+                [exportCsv]="true"
                 exportText="Export"
-                exportExcelText="Export to Excel" 
+                exportExcelText="Export to Excel"
                 exportCsvText="Export to CSV">
                 <igx-column *ngFor="let c of columns" [field]="c.field"
                                                     [header]="c.header"