Skip to content

Commit 6090c5e

Browse files
tachojelevtachojelev
authored
Merge branch 'master' into tzhelev/fix-5577-8.2.x
2 parents 0a2f634 + 7353e57 commit 6090c5e

25 files changed

+480
-51
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/cell.component.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -723,10 +723,10 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
723723
* @internal
724724
*/
725725
@HostListener('dblclick', ['$event'])
726-
public onDoubleClick = (event: MouseEvent| HammerInput) => {
726+
public onDoubleClick = (event: MouseEvent | HammerInput) => {
727727
if (event.type === 'doubletap') {
728728
// prevent double-tap to zoom on iOS
729-
event.preventDefault();
729+
(event as HammerInput).preventDefault();
730730
}
731731
if (this.editable && !this.editMode && !this.row.deleted) {
732732
this.crudService.begin(this);

‎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>

0 commit comments

Comments
 (0)