Merge pull request #5588 from IgniteUI/tzhelev/esf-load-on-demand

Excel Style Filtering - load on demand

CHANGELOG.md

@@ -2,6 +2,19 @@
 
 All notable changes for each version of this project will be documented in this file.
 
+## 8.2.0
+
+### New Features
+- `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
+    - `uniqueColumnValuesStrategy` input is added. This property provides a callback for loading unique column values on demand. If this property is provided, the unique values it generates will be used by the Excel Style Filtering (instead of using the unique values from the data that is bound to the grid).
+    - `igxExcelStyleLoading` directive is added, which can be used to provide a custom loading template for the Excel Style Filtering. If this property is not provided, a default loading template will be used instead.
+### General
+- `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
+    - **Breaking Change** `igxExcelStyleSortingTemplate` directive is renamed to `igxExcelStyleSorting`.
+    - **Breaking Change** `igxExcelStyleMovingTemplate` directive is renamed to `igxExcelStyleMoving`.
+    - **Breaking Change** `igxExcelStyleHidingTemplate` directive is renamed to `igxExcelStyleHiding`.
+    - **Breaking Change** `igxExcelStylePinningTemplate` directive is renamed to `igxExcelStylePinning`.
+
 ## 8.1.3
 - `IgxCombo`
     - Combo `onSelectionChange` events now emits the item(s) that were added to or removed from the collection:

projects/igniteui-angular/migrations/migration-collection.json

@@ -45,6 +45,11 @@
             "version": "7.3.4",
             "description": "Updates Ignite UI for Angular from v7.2.0 to v7.3.4",
             "factory": "./update-7_3_4"
+        },
+        "migration-10": {
+            "version": "8.2.0",
+            "description": "Updates Ignite UI for Angular from v8.1.x to v8.2.0",
+            "factory": "./update-8_2_0"
         }
     }
 }

projects/igniteui-angular/migrations/update-8_2_0/changes/selectors.json

@@ -0,0 +1,25 @@
+{
+    "$schema": "../../common/schema/selector.schema.json",
+    "changes": [
+        {
+            "type": "directive",
+            "selector": "igxExcelStyleSortingTemplate",
+            "replaceWith": "igxExcelStyleSorting"
+        },
+        {
+            "type": "directive",
+            "selector": "igxExcelStyleMovingTemplate",
+            "replaceWith": "igxExcelStyleMoving"
+        },
+        {
+            "type": "directive",
+            "selector": "igxExcelStyleHidingTemplate",
+            "replaceWith": "igxExcelStyleHiding"
+        },
+        {
+            "type": "directive",
+            "selector": "igxExcelStylePinningTemplate",
+            "replaceWith": "igxExcelStylePinning"
+        }
+    ]
+}

projects/igniteui-angular/migrations/update-8_2_0/index.spec.ts

@@ -0,0 +1,53 @@
+import * as path from 'path';
+
+// tslint:disable:no-implicit-dependencies
+import { virtualFs } from '@angular-devkit/core';
+import { EmptyTree } from '@angular-devkit/schematics';
+// tslint:disable-next-line:no-submodule-imports
+import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing';
+
+describe('Update 8.2.0', () => {
+    let appTree: UnitTestTree;
+    const schematicRunner = new SchematicTestRunner('ig-migrate', path.join(__dirname, '../migration-collection.json'));
+    const configJson = {
+        defaultProject: 'testProj',
+        projects: {
+            testProj: {
+                sourceRoot: '/testSrc'
+            }
+        },
+        schematics: {
+            '@schematics/angular:component': {
+                prefix: 'appPrefix'
+            }
+        }
+      };
+
+    beforeEach(() => {
+        appTree = new UnitTestTree(new EmptyTree());
+        appTree.create('/angular.json', JSON.stringify(configJson));
+    });
+
+    it('should update Excel Style Filtering template selectors', done => {
+        appTree.create(
+            '/testSrc/appPrefix/component/custom.component.html',
+            `<igx-grid [data]="data" height="500px" [autoGenerate]="true" [allowFiltering]='true' [filterMode]="'excelStyleFilter'">
+                <ng-template igxExcelStyleSortingTemplate><div class="esf-custom-sorting">Sorting Template</div></ng-template>
+                <ng-template igxExcelStyleHidingTemplate><div class="esf-custom-hiding">Hiding Template</div></ng-template>
+                <ng-template igxExcelStyleMovingTemplate><div class="esf-custom-moving">Moving Template</div></ng-template>
+                <ng-template igxExcelStylePinningTemplate><div class="esf-custom-pinning">Pinning Template</div></ng-template>
+            </igx-grid>`);
+
+        const tree = schematicRunner.runSchematic('migration-10', {}, appTree);
+        expect(tree.readContent('/testSrc/appPrefix/component/custom.component.html'))
+            .toEqual(
+            `<igx-grid [data]="data" height="500px" [autoGenerate]="true" [allowFiltering]='true' [filterMode]="'excelStyleFilter'">
+                <ng-template igxExcelStyleSorting><div class="esf-custom-sorting">Sorting Template</div></ng-template>
+                <ng-template igxExcelStyleHiding><div class="esf-custom-hiding">Hiding Template</div></ng-template>
+                <ng-template igxExcelStyleMoving><div class="esf-custom-moving">Moving Template</div></ng-template>
+                <ng-template igxExcelStylePinning><div class="esf-custom-pinning">Pinning Template</div></ng-template>
+            </igx-grid>`);
+
+        done();
+    });
+});

projects/igniteui-angular/migrations/update-8_2_0/index.ts

@@ -0,0 +1,17 @@
+import {
+    Rule,
+    SchematicContext,    
+    Tree
+} from '@angular-devkit/schematics';
+import { UpdateChanges } from '../common/UpdateChanges';
+
+const version = '8.2.0';
+
+export default function(): Rule {
+    return (host: Tree, context: SchematicContext) => {
+        context.logger.info(`Applying migration for Ignite UI for Angular to version ${version}`);
+
+        const update = new UpdateChanges(__dirname, host, context);
+        update.applyChanges();
+    };
+}

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

@@ -11,6 +11,10 @@
     @include b(igx-excel-filter) {
         @extend %grid-excel-filter !optional;
 
+        @include e(loading) {
+            @extend %igx-excel-filter__loading !optional;
+        }
+
         @include e(menu) {
             @extend %grid-excel-menu !optional;
         }

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

@@ -16,6 +16,12 @@
         display: block;
     }
 
+    %igx-excel-filter__loading {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
     %grid-excel-icon {
         cursor: pointer;
 

projects/igniteui-angular/src/lib/grids/README.md

@@ -174,6 +174,7 @@ Below is the list of all inputs that the developers may set to configure the gri
 |`filteringLogic`| FilteringLogic | The filtering logic of the grid. Defaults to _AND_. |
 |`filteringExpressionsTree`| IFilteringExpressionsTree | The filtering state of the grid. |
 |`emptyFilteredGridMessage`| string | The message displayed when there are no records and the grid is filtered.|
+|`uniqueColumnValuesStrategy`| void | Property that provides a callback for loading unique column values on demand. If this property is provided, the unique values it generates will be used by the Excel Style Filtering. |
 |`sortingExpressions`|Array|The sorting state of the grid.|
 |`rowSelectable`|boolean|Enables multiple row selection, default is _false_.|
 |`height`|string|The height of the grid element. You can pass values such as `1000px`, `75%`, etc.|

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

@@ -19,21 +19,33 @@
     </igx-icon>
 </igx-input-group>
 
-        <igx-list [displayDensity]="displayDensity" [style.height.px]="250">
-            <div [style.overflow]="'hidden'" [style.position]="'relative'">
-                <igx-list-item
-                    *igxFor="let item of data | excelStyleSearchFilter: searchValue; scrollOrientation : 'vertical'; containerSize: '250px'; itemSize: itemSize">
-                    <igx-checkbox
-                    [value]="item"
-                    tabindex="-1"
-                    [checked]="item.isSelected"
-                    [disableRipple]="true"
-                    [indeterminate]="item.indeterminate"
-                    [disableTransitions]="true"
-                    (change)="onCheckboxChange($event)">
-                        {{ column.formatter && !item.isSpecial ? column.formatter(item.label) : column.dataType === 'number' ? (item.label | igxdecimal:
-                            column.grid.locale) : column.dataType === 'date' ? (item.label | igxdate: column.grid.locale) : item.label }}
-                    </igx-checkbox>
-                </igx-list-item>
-            </div>
-        </igx-list>
+<igx-list [displayDensity]="displayDensity" [style.height.px]="250" [isLoading]="isLoading">
+    <div [style.overflow]="'hidden'" [style.position]="'relative'">
+        <igx-list-item
+            *igxFor="let item of data | excelStyleSearchFilter: searchValue; scrollOrientation : 'vertical'; containerSize: '250px'; itemSize: itemSize">
+            <igx-checkbox
+            [value]="item"
+            tabindex="-1"
+            [checked]="item.isSelected"
+            [disableRipple]="true"
+            [indeterminate]="item.indeterminate"
+            [disableTransitions]="true"
+            (change)="onCheckboxChange($event)">
+                {{ column.formatter && !item.isSpecial ? column.formatter(item.label) : column.dataType === 'number' ? (item.label | igxdecimal:
+                    column.grid.locale) : column.dataType === 'date' ? (item.label | igxdate: column.grid.locale) : item.label }}
+            </igx-checkbox>
+        </igx-list-item>
+    </div>
+
+    <ng-template igxDataLoading>        
+        <div class="igx-excel-filter__loading">
+            <ng-container *ngTemplateOutlet="valuesLoadingTemplate">
+            </ng-container>
+        </div>
+    </ng-template>
+</igx-list>
+
+<ng-template #defaultExcelStyleLoadingValuesTemplate>
+    <igx-circular-bar [indeterminate]="true">
+    </igx-circular-bar>
+</ng-template>

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

@@ -3,16 +3,25 @@ import {
     Component,
     ChangeDetectionStrategy,
     Input,
-    ViewChild
+    ViewChild,
+    ChangeDetectorRef,
+    TemplateRef,
+    Directive
 } from '@angular/core';
 import { IgxColumnComponent } from '../../column.component';
-import { IgxFilterOptions } from '../../../directives/filter/filter.directive';
 import { IChangeCheckboxEventArgs } from '../../../checkbox/checkbox.component';
 import { IgxInputDirective } from '../../../directives/input/input.directive';
 import { DisplayDensity } from '../../../core/density';
 import { IgxForOfDirective } from '../../../directives/for-of/for_of.directive';
 import { FilterListItem } from './grid.excel-style-filtering.component';
 
+@Directive({
+    selector: '[igxExcelStyleLoading]'
+})
+export class IgxExcelStyleLoadingValuesTemplateDirective {
+    constructor(public template: TemplateRef<any>) {}
+}
+
 /**
  * @hidden
  */
@@ -24,8 +33,24 @@ import { FilterListItem } from './grid.excel-style-filtering.component';
 })
 export class IgxExcelStyleSearchComponent implements AfterViewInit {
 
+    private _isLoading;
+
+    public get isLoading() {
+        return this._isLoading;
+    }
+
+    public set isLoading(value: boolean) {
+        this._isLoading = value;
+        if (!(this._cdr as any).destroyed) {
+            this._cdr.detectChanges();
+        }
+    }
+
     public searchValue: any;
 
+    @Input()
+    public grid: any;
+
     @Input()
     public data: FilterListItem[];
 
@@ -43,9 +68,24 @@ export class IgxExcelStyleSearchComponent implements AfterViewInit {
     @ViewChild(IgxForOfDirective, { static: true })
     protected virtDir: IgxForOfDirective<any>;
 
-    constructor() { }
+    @ViewChild('defaultExcelStyleLoadingValuesTemplate', { read: TemplateRef, static: true })
+    protected defaultExcelStyleLoadingValuesTemplate: TemplateRef<any>;
+
+    public get valuesLoadingTemplate() {
+        if (this.grid.excelStyleLoadingValuesTemplateDirective) {
+            return this.grid.excelStyleLoadingValuesTemplateDirective.template;
+        } else {
+            return this.defaultExcelStyleLoadingValuesTemplate;
+        }
+    }
+
+    constructor(private _cdr: ChangeDetectorRef) { }
 
     public ngAfterViewInit() {
+        this.refreshSize();
+    }
+
+    public refreshSize() {
         requestAnimationFrame(() => {
             this.virtDir.recalcUpdateSizes();
         });

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

@@ -124,6 +124,7 @@ <h4>{{ column.header || column.field }}</h4>
         #excelStyleSearch
         [column]="column"
         [data]="listData"
+        [grid]="grid"
         [displayDensity]="grid.displayDensity">
     </igx-excel-style-search>