Skip to content

Commit 73f6ba5

Browse files
DiyanDimitrovDiyanDimitrov
authored
Merge pull request #5588 from IgniteUI/tzhelev/esf-load-on-demand
Excel Style Filtering - load on demand
2 parents eb91703 + f0f4a9a commit 73f6ba5

24 files changed

+478
-49
lines changed

‎CHANGELOG.md‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,19 @@
22

33
All notable changes for each version of this project will be documented in this file.
44

5+
## 8.2.0
6+
7+
### New Features
8+
- `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
9+
- `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).
10+
- `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.
11+
### General
12+
- `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
13+
- **Breaking Change** `igxExcelStyleSortingTemplate` directive is renamed to `igxExcelStyleSorting`.
14+
- **Breaking Change** `igxExcelStyleMovingTemplate` directive is renamed to `igxExcelStyleMoving`.
15+
- **Breaking Change** `igxExcelStyleHidingTemplate` directive is renamed to `igxExcelStyleHiding`.
16+
- **Breaking Change** `igxExcelStylePinningTemplate` directive is renamed to `igxExcelStylePinning`.
17+
518
## 8.1.3
619
- `IgxCombo`
720
- Combo `onSelectionChange` events now emits the item(s) that were added to or removed from the collection:

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,11 @@
4545
"version": "7.3.4",
4646
"description": "Updates Ignite UI for Angular from v7.2.0 to v7.3.4",
4747
"factory": "./update-7_3_4"
48+
},
49+
"migration-10": {
50+
"version": "8.2.0",
51+
"description": "Updates Ignite UI for Angular from v8.1.x to v8.2.0",
52+
"factory": "./update-8_2_0"
4853
}
4954
}
5055
}

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

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"$schema": "../../common/schema/selector.schema.json",
3+
"changes": [
4+
{
5+
"type": "directive",
6+
"selector": "igxExcelStyleSortingTemplate",
7+
"replaceWith": "igxExcelStyleSorting"
8+
},
9+
{
10+
"type": "directive",
11+
"selector": "igxExcelStyleMovingTemplate",
12+
"replaceWith": "igxExcelStyleMoving"
13+
},
14+
{
15+
"type": "directive",
16+
"selector": "igxExcelStyleHidingTemplate",
17+
"replaceWith": "igxExcelStyleHiding"
18+
},
19+
{
20+
"type": "directive",
21+
"selector": "igxExcelStylePinningTemplate",
22+
"replaceWith": "igxExcelStylePinning"
23+
}
24+
]
25+
}

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

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import * as path from 'path';
2+
3+
// tslint:disable:no-implicit-dependencies
4+
import { virtualFs } from '@angular-devkit/core';
5+
import { EmptyTree } from '@angular-devkit/schematics';
6+
// tslint:disable-next-line:no-submodule-imports
7+
import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing';
8+
9+
describe('Update 8.2.0', () => {
10+
let appTree: UnitTestTree;
11+
const schematicRunner = new SchematicTestRunner('ig-migrate', path.join(__dirname, '../migration-collection.json'));
12+
const configJson = {
13+
defaultProject: 'testProj',
14+
projects: {
15+
testProj: {
16+
sourceRoot: '/testSrc'
17+
}
18+
},
19+
schematics: {
20+
'@schematics/angular:component': {
21+
prefix: 'appPrefix'
22+
}
23+
}
24+
};
25+
26+
beforeEach(() => {
27+
appTree = new UnitTestTree(new EmptyTree());
28+
appTree.create('/angular.json', JSON.stringify(configJson));
29+
});
30+
31+
it('should update Excel Style Filtering template selectors', done => {
32+
appTree.create(
33+
'/testSrc/appPrefix/component/custom.component.html',
34+
`<igx-grid [data]="data" height="500px" [autoGenerate]="true" [allowFiltering]='true' [filterMode]="'excelStyleFilter'">
35+
<ng-template igxExcelStyleSortingTemplate><div class="esf-custom-sorting">Sorting Template</div></ng-template>
36+
<ng-template igxExcelStyleHidingTemplate><div class="esf-custom-hiding">Hiding Template</div></ng-template>
37+
<ng-template igxExcelStyleMovingTemplate><div class="esf-custom-moving">Moving Template</div></ng-template>
38+
<ng-template igxExcelStylePinningTemplate><div class="esf-custom-pinning">Pinning Template</div></ng-template>
39+
</igx-grid>`);
40+
41+
const tree = schematicRunner.runSchematic('migration-10', {}, appTree);
42+
expect(tree.readContent('/testSrc/appPrefix/component/custom.component.html'))
43+
.toEqual(
44+
`<igx-grid [data]="data" height="500px" [autoGenerate]="true" [allowFiltering]='true' [filterMode]="'excelStyleFilter'">
45+
<ng-template igxExcelStyleSorting><div class="esf-custom-sorting">Sorting Template</div></ng-template>
46+
<ng-template igxExcelStyleHiding><div class="esf-custom-hiding">Hiding Template</div></ng-template>
47+
<ng-template igxExcelStyleMoving><div class="esf-custom-moving">Moving Template</div></ng-template>
48+
<ng-template igxExcelStylePinning><div class="esf-custom-pinning">Pinning Template</div></ng-template>
49+
</igx-grid>`);
50+
51+
done();
52+
});
53+
});

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import {
2+
Rule,
3+
SchematicContext,
4+
Tree
5+
} from '@angular-devkit/schematics';
6+
import { UpdateChanges } from '../common/UpdateChanges';
7+
8+
const version = '8.2.0';
9+
10+
export default function(): Rule {
11+
return (host: Tree, context: SchematicContext) => {
12+
context.logger.info(`Applying migration for Ignite UI for Angular to version ${version}`);
13+
14+
const update = new UpdateChanges(__dirname, host, context);
15+
update.applyChanges();
16+
};
17+
}

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,10 @@
1111
@include b(igx-excel-filter) {
1212
@extend %grid-excel-filter !optional;
1313

14+
@include e(loading) {
15+
@extend %igx-excel-filter__loading !optional;
16+
}
17+
1418
@include e(menu) {
1519
@extend %grid-excel-menu !optional;
1620
}

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,12 @@
1616
display: block;
1717
}
1818

19+
%igx-excel-filter__loading {
20+
display: flex;
21+
justify-content: center;
22+
align-items: center;
23+
}
24+
1925
%grid-excel-icon {
2026
cursor: pointer;
2127

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -174,6 +174,7 @@ Below is the list of all inputs that the developers may set to configure the gri
174174
|`filteringLogic`| FilteringLogic | The filtering logic of the grid. Defaults to _AND_. |
175175
|`filteringExpressionsTree`| IFilteringExpressionsTree | The filtering state of the grid. |
176176
|`emptyFilteredGridMessage`| string | The message displayed when there are no records and the grid is filtered.|
177+
|`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. |
177178
|`sortingExpressions`|Array|The sorting state of the grid.|
178179
|`rowSelectable`|boolean|Enables multiple row selection, default is _false_.|
179180
|`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‎

Lines changed: 30 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -19,21 +19,33 @@
1919
</igx-icon>
2020
</igx-input-group>
2121

22-
<igx-list [displayDensity]="displayDensity" [style.height.px]="250">
23-
<div [style.overflow]="'hidden'" [style.position]="'relative'">
24-
<igx-list-item
25-
*igxFor="let item of data | excelStyleSearchFilter: searchValue; scrollOrientation : 'vertical'; containerSize: '250px'; itemSize: itemSize">
26-
<igx-checkbox
27-
[value]="item"
28-
tabindex="-1"
29-
[checked]="item.isSelected"
30-
[disableRipple]="true"
31-
[indeterminate]="item.indeterminate"
32-
[disableTransitions]="true"
33-
(change)="onCheckboxChange($event)">
34-
{{ column.formatter && !item.isSpecial ? column.formatter(item.label) : column.dataType === 'number' ? (item.label | igxdecimal:
35-
column.grid.locale) : column.dataType === 'date' ? (item.label | igxdate: column.grid.locale) : item.label }}
36-
</igx-checkbox>
37-
</igx-list-item>
38-
</div>
39-
</igx-list>
22+
<igx-list [displayDensity]="displayDensity" [style.height.px]="250" [isLoading]="isLoading">
23+
<div [style.overflow]="'hidden'" [style.position]="'relative'">
24+
<igx-list-item
25+
*igxFor="let item of data | excelStyleSearchFilter: searchValue; scrollOrientation : 'vertical'; containerSize: '250px'; itemSize: itemSize">
26+
<igx-checkbox
27+
[value]="item"
28+
tabindex="-1"
29+
[checked]="item.isSelected"
30+
[disableRipple]="true"
31+
[indeterminate]="item.indeterminate"
32+
[disableTransitions]="true"
33+
(change)="onCheckboxChange($event)">
34+
{{ column.formatter && !item.isSpecial ? column.formatter(item.label) : column.dataType === 'number' ? (item.label | igxdecimal:
35+
column.grid.locale) : column.dataType === 'date' ? (item.label | igxdate: column.grid.locale) : item.label }}
36+
</igx-checkbox>
37+
</igx-list-item>
38+
</div>
39+
40+
<ng-template igxDataLoading>
41+
<div class="igx-excel-filter__loading">
42+
<ng-container *ngTemplateOutlet="valuesLoadingTemplate">
43+
</ng-container>
44+
</div>
45+
</ng-template>
46+
</igx-list>
47+
48+
<ng-template #defaultExcelStyleLoadingValuesTemplate>
49+
<igx-circular-bar [indeterminate]="true">
50+
</igx-circular-bar>
51+
</ng-template>

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

Lines changed: 43 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,25 @@ import {
33
Component,
44
ChangeDetectionStrategy,
55
Input,
6-
ViewChild
6+
ViewChild,
7+
ChangeDetectorRef,
8+
TemplateRef,
9+
Directive
710
} from '@angular/core';
811
import { IgxColumnComponent } from '../../column.component';
9-
import { IgxFilterOptions } from '../../../directives/filter/filter.directive';
1012
import { IChangeCheckboxEventArgs } from '../../../checkbox/checkbox.component';
1113
import { IgxInputDirective } from '../../../directives/input/input.directive';
1214
import { DisplayDensity } from '../../../core/density';
1315
import { IgxForOfDirective } from '../../../directives/for-of/for_of.directive';
1416
import { FilterListItem } from './grid.excel-style-filtering.component';
1517

18+
@Directive({
19+
selector: '[igxExcelStyleLoading]'
20+
})
21+
export class IgxExcelStyleLoadingValuesTemplateDirective {
22+
constructor(public template: TemplateRef<any>) {}
23+
}
24+
1625
/**
1726
* @hidden
1827
*/
@@ -24,8 +33,24 @@ import { FilterListItem } from './grid.excel-style-filtering.component';
2433
})
2534
export class IgxExcelStyleSearchComponent implements AfterViewInit {
2635

36+
private _isLoading;
37+
38+
public get isLoading() {
39+
return this._isLoading;
40+
}
41+
42+
public set isLoading(value: boolean) {
43+
this._isLoading = value;
44+
if (!(this._cdr as any).destroyed) {
45+
this._cdr.detectChanges();
46+
}
47+
}
48+
2749
public searchValue: any;
2850

51+
@Input()
52+
public grid: any;
53+
2954
@Input()
3055
public data: FilterListItem[];
3156

@@ -43,9 +68,24 @@ export class IgxExcelStyleSearchComponent implements AfterViewInit {
4368
@ViewChild(IgxForOfDirective, { static: true })
4469
protected virtDir: IgxForOfDirective<any>;
4570

46-
constructor() { }
71+
@ViewChild('defaultExcelStyleLoadingValuesTemplate', { read: TemplateRef, static: true })
72+
protected defaultExcelStyleLoadingValuesTemplate: TemplateRef<any>;
73+
74+
public get valuesLoadingTemplate() {
75+
if (this.grid.excelStyleLoadingValuesTemplateDirective) {
76+
return this.grid.excelStyleLoadingValuesTemplateDirective.template;
77+
} else {
78+
return this.defaultExcelStyleLoadingValuesTemplate;
79+
}
80+
}
81+
82+
constructor(private _cdr: ChangeDetectorRef) { }
4783

4884
public ngAfterViewInit() {
85+
this.refreshSize();
86+
}
87+
88+
public refreshSize() {
4989
requestAnimationFrame(() => {
5090
this.virtDir.recalcUpdateSizes();
5191
});

0 commit comments

Comments
 (0)