Skip to content

Commit 2ec9981

Browse files
tachojelevtachojelev
committed
feat(esf): code updates #5448 
1 parent 155eda9 commit 2ec9981

File tree

6 files changed

+65
-149
lines changed

6 files changed

+65
-149
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import { IgxForOfDirective } from '../../../directives/for-of/for_of.directive';
1616
import { FilterListItem } from './grid.excel-style-filtering.component';
1717

1818
@Directive({
19-
selector: '[igxExcelStyleLoadingValuesTemplate]'
19+
selector: '[igxExcelStyleLoading]'
2020
})
2121
export class IgxExcelStyleLoadingValuesTemplateDirective {
2222
constructor(public template: TemplateRef<any>) {}

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

Lines changed: 42 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -332,59 +332,53 @@ export class IgxGridExcelStyleFilteringComponent implements OnDestroy, AfterView
332332
}
333333

334334
public populateColumnData() {
335-
if (this.grid.loadExcelStyleUniqueValuesOnDemand) {
336-
this.loadValuesOnDemand();
335+
if (this.grid.uniqueColumnValuesStrategy) {
336+
this.renderColumnValuesRemotely();
337337
} else {
338-
this.loadValuesFromGridData();
338+
this.renderColumnValuesFromData();
339339
}
340340
}
341341

342-
private loadValuesOnDemand() {
342+
private renderColumnValuesRemotely() {
343343
this.excelStyleSearch.isLoading = true;
344-
this.grid.loadExcelStyleUniqueValuesOnDemand(this.column, (columnUniqueValues: any[]) => {
345-
if (this.column.dataType === DataType.Date) {
346-
this.uniqueValues = Array.from(new Set(columnUniqueValues.map(val => val ? val.toDateString() : val)));
347-
this.generateFilterValues(true);
348-
} else {
349-
this.uniqueValues = Array.from(new Set(columnUniqueValues));
350-
this.generateFilterValues();
351-
}
352-
this.generateListData();
344+
const expressionsTree: FilteringExpressionsTree = this.getColumnFilterExpressionsTree();
345+
346+
this.grid.uniqueColumnValuesStrategy(this.column, expressionsTree, (colVals: any[]) => {
347+
const columnValues = (this.column.dataType === DataType.Date) ?
348+
colVals.map(val => val ? val.toDateString() : val) : colVals;
349+
350+
this.renderValues(columnValues);
353351
this.excelStyleSearch.isLoading = false;
354352
});
355353
}
356354

357-
public loadValuesFromGridData() {
355+
public renderColumnValuesFromData() {
358356
let data = this.column.gridAPI.get_all_data(this.grid.id);
359-
const gridExpressionsTree: IFilteringExpressionsTree = this.grid.filteringExpressionsTree;
360-
const expressionsTree = new FilteringExpressionsTree(gridExpressionsTree.operator, gridExpressionsTree.fieldName);
361-
362-
for (const operand of gridExpressionsTree.filteringOperands) {
363-
if (operand instanceof FilteringExpressionsTree) {
364-
const columnExprTree = operand as FilteringExpressionsTree;
365-
if (columnExprTree.fieldName === this.column.field) {
366-
break;
367-
}
368-
}
369-
expressionsTree.filteringOperands.push(operand);
370-
}
357+
const expressionsTree = this.getColumnFilterExpressionsTree();
371358

372359
if (expressionsTree.filteringOperands.length) {
373360
const state = { expressionsTree: expressionsTree };
374361
data = DataUtil.filter(cloneArray(data), state);
375362
}
376363

377-
if (this.column.dataType === DataType.Date) {
378-
this.uniqueValues = Array.from(new Set(data.map(record =>
379-
record[this.column.field] ? record[this.column.field].toDateString() : record[this.column.field])));
380-
this.generateFilterValues(true);
381-
} else {
382-
this.uniqueValues = Array.from(new Set(data.map(record => record[this.column.field])));
383-
this.generateFilterValues();
384-
}
364+
const columnField = this.column.field;
365+
const columnValues = (this.column.dataType === DataType.Date) ?
366+
data.map(record => record[columnField] ? record[columnField].toDateString() : record[columnField]) :
367+
data.map(record => record[columnField]);
368+
369+
this.renderValues(columnValues);
370+
}
371+
372+
private renderValues(columnValues: any[]) {
373+
this.generateUniqueValues(columnValues);
374+
this.generateFilterValues(this.column.dataType === DataType.Date);
385375
this.generateListData();
386376
}
387377

378+
private generateUniqueValues(columnValues: any[]) {
379+
this.uniqueValues = Array.from(new Set(columnValues));
380+
}
381+
388382
private generateFilterValues(isDateColumn: boolean = false) {
389383
if (isDateColumn) {
390384
this.filterValues = new Set<any>(this.expressionsList.reduce((arr, e) => {
@@ -430,71 +424,22 @@ export class IgxGridExcelStyleFilteringComponent implements OnDestroy, AfterView
430424
this.cdr.detectChanges();
431425
}
432426

427+
private getColumnFilterExpressionsTree() {
428+
const gridExpressionsTree: IFilteringExpressionsTree = this.grid.filteringExpressionsTree;
429+
const expressionsTree = new FilteringExpressionsTree(gridExpressionsTree.operator, gridExpressionsTree.fieldName);
433430

431+
for (const operand of gridExpressionsTree.filteringOperands) {
432+
if (operand instanceof FilteringExpressionsTree) {
433+
const columnExprTree = operand as FilteringExpressionsTree;
434+
if (columnExprTree.fieldName === this.column.field) {
435+
break;
436+
}
437+
}
438+
expressionsTree.filteringOperands.push(operand);
439+
}
434440

435-
// public populateColumnData() {
436-
// let data = this.column.gridAPI.get_all_data(this.grid.id);
437-
// const gridExpressionsTree: IFilteringExpressionsTree = this.grid.filteringExpressionsTree;
438-
// const expressionsTree = new FilteringExpressionsTree(gridExpressionsTree.operator, gridExpressionsTree.fieldName);
439-
440-
// for (const operand of gridExpressionsTree.filteringOperands) {
441-
// if (operand instanceof FilteringExpressionsTree) {
442-
// const columnExprTree = operand as FilteringExpressionsTree;
443-
// if (columnExprTree.fieldName === this.column.field) {
444-
// break;
445-
// }
446-
// }
447-
// expressionsTree.filteringOperands.push(operand);
448-
// }
449-
450-
// if (expressionsTree.filteringOperands.length) {
451-
// const state = { expressionsTree: expressionsTree };
452-
// data = DataUtil.filter(cloneArray(data), state);
453-
// }
454-
455-
// if (this.column.dataType === DataType.Date) {
456-
// this.uniqueValues = Array.from(new Set(data.map(record =>
457-
// record[this.column.field] ? record[this.column.field].toDateString() : record[this.column.field])));
458-
// this.filterValues = new Set<any>(this.expressionsList.reduce((arr, e) => {
459-
// if (e.expression.condition.name === 'in') {
460-
// return [ ...arr, ...Array.from((e.expression.searchVal as Set<any>).values()).map(v =>
461-
// new Date(v).toDateString()) ];
462-
// }
463-
// return [ ...arr, ...[e.expression.searchVal ? e.expression.searchVal.toDateString() : e.expression.searchVal] ];
464-
// }, []));
465-
// } else {
466-
// this.uniqueValues = Array.from(new Set(data.map(record => record[this.column.field])));
467-
// this.filterValues = new Set<any>(this.expressionsList.reduce((arr, e) => {
468-
// if (e.expression.condition.name === 'in') {
469-
// return [ ...arr, ...Array.from((e.expression.searchVal as Set<any>).values()) ];
470-
// }
471-
// return [ ...arr, ...[e.expression.searchVal] ];
472-
// }, []));
473-
// }
474-
// this.listData = new Array<FilterListItem>();
475-
476-
// const shouldUpdateSelection = this.areExpressionsSelectable() && this.areExpressionsValuesInTheList();
477-
478-
// if (this.column.dataType === DataType.Boolean) {
479-
// this.addBooleanItems();
480-
// } else {
481-
// this.addItems(shouldUpdateSelection);
482-
// }
483-
484-
// this.listData.sort((a, b) => this.sortData(a, b));
485-
486-
// if (this.column.dataType === DataType.Date) {
487-
// this.uniqueValues = this.uniqueValues.map(value => new Date(value));
488-
// }
489-
490-
// if (this.containsNullOrEmpty) {
491-
// this.addBlanksItem(shouldUpdateSelection);
492-
// }
493-
494-
// this.addSelectAllItem();
495-
496-
// this.cdr.detectChanges();
497-
// }
441+
return expressionsTree;
442+
}
498443

499444
private addBooleanItems() {
500445
this.selectAllSelected = true;

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1003,7 +1003,9 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
10031003
}
10041004

10051005
@Input()
1006-
public loadExcelStyleUniqueValuesOnDemand: (field: string, done: (values: any[]) => void) => void;
1006+
public uniqueColumnValuesStrategy: (column: IgxColumnComponent,
1007+
filteringExpressionsTree: IFilteringExpressionsTree,
1008+
done: (values: any[]) => void) => void;
10071009

10081010
/**
10091011
* Emitted when `IgxGridCellComponent` is clicked. Returns the `IgxGridCellComponent`.

‎src/app/grid-esf-load-on-demand/grid-esf-load-on-demand.component.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
[showToolbar]="true" [columnHiding]="true" [allowFiltering]="true" [rowSelectable]="true"
1313
[filterMode]="'excelStyleFilter'"
1414

15-
[loadExcelStyleUniqueValuesOnDemand]="loadColumnValues"
15+
[uniqueColumnValuesStrategy]="columnValuesStrategy"
1616
>
1717

1818
<igx-column [field]="'ID'" [filterable]="true" [sortable]="true" [movable]="true" [dataType]="'string'"></igx-column>
@@ -21,7 +21,7 @@
2121
<igx-column [field]="'Contract'" [filterable]="true" [sortable]="true" [movable]="true" [dataType]="'boolean'"></igx-column>
2222
<igx-column [field]="'DateCreated'" [filterable]="true" [sortable]="true" [movable]="true" [dataType]="'date'"></igx-column>
2323

24-
<!-- <ng-template igxExcelStyleLoadingValuesTemplate>
24+
<!-- <ng-template igxExcelStyleLoading>
2525
Loading ...
2626
</ng-template> -->
2727
</igx-grid>

‎src/app/grid-esf-load-on-demand/grid-esf-load-on-demand.component.ts‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Component, ViewChild, OnInit } from '@angular/core';
2-
import { IgxGridComponent, IgxColumnComponent } from 'igniteui-angular';
2+
import { IgxGridComponent, IgxColumnComponent, IFilteringExpressionsTree } from 'igniteui-angular';
33
import { SAMPLE_DATA } from '../shared/sample-data';
44
import { GridESFLoadOnDemandService } from './grid-esf-load-on-demand.service';
55

@@ -19,8 +19,10 @@ export class GridEsfLoadOnDemandComponent implements OnInit {
1919
@ViewChild('grid1', { static: true })
2020
public grid1: IgxGridComponent;
2121

22-
public loadColumnValues = (column: IgxColumnComponent, done: (uniqueValues: string[]) => void) => {
23-
this.esfService.getData(column.field, uniqueValues => done(uniqueValues));
22+
public columnValuesStrategy = (column: IgxColumnComponent,
23+
columnExprTree: IFilteringExpressionsTree,
24+
done: (uniqueValues: any[]) => void) => {
25+
this.esfService.getColumnData(column, columnExprTree, uniqueValues => done(uniqueValues));
2426
}
2527

2628
public ngOnInit(): void {
@@ -30,7 +32,7 @@ export class GridEsfLoadOnDemandComponent implements OnInit {
3032
{ label: 'compact', selected: this.density === 'compact', togglable: true }
3133
];
3234

33-
this.data = SAMPLE_DATA.slice(0);
35+
this.data = this.esfService.getRecordsData();
3436
}
3537

3638
public selectDensity(event) {

‎src/app/grid-esf-load-on-demand/grid-esf-load-on-demand.service.ts‎

Lines changed: 11 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,17 @@
1-
const COLUMNS_DATA = [
2-
{
3-
field: 'ID',
4-
values: [
5-
'ALFKI', 'ANATR', 'ANTON', 'AROUT', 'BERGS', 'BLAUS', 'BLONP', 'BOLID', 'BONAP', 'BOTTM', 'BSBEV',
6-
'CACTU', 'CENTC', 'CHOPS', 'COMMI', 'CONSH', 'DRACD', 'DUMON', 'EASTC', 'ERNSH', 'FAMIA', 'FISSA',
7-
'FOLIG', 'FOLKO', 'FRANK', 'FRANR', 'FRANS'
8-
]
9-
},
10-
{
11-
field: 'CompanyName',
12-
values: [
13-
'Alfreds Futterkiste', 'Ana Trujillo Emparedados y helados', 'Antonio Moreno Taquería', 'Around the Horn',
14-
'Berglunds snabbköp', 'Blauer See Delikatessen', 'Blondesddsl père et fils', 'Bólido Comidas preparadas',
15-
'Bon app', 'Bottom-Dollar Markets', 'Beverages', 'Cactus Comidas para llevar', 'Centro comercial Moctezuma',
16-
'Chop-suey Chinese', 'Comércio Mineiro', 'Consolidated Holdings', 'Drachenblut Delikatessen', 'Du monde entier',
17-
'Eastern Connection', 'Ernst Handel', 'Familia Arquibaldo', 'FISSA Fabrica Inter. Salchichas S.A.', 'Folies gourmandes',
18-
'Folk och fä HB', 'Frankenversand', 'France restauration', 'Franchi S.p.A.',
19-
]
20-
},
21-
{
22-
field: 'Employees',
23-
values: [ 68, 47, 16, 71,213, 347, 34, 54, 68, 107, 197, 33, 18, 380,
24-
137, 150, 265, 24, 123, 9, 67, 87, 37, 42, 17, 20, 5 ]
25-
},
26-
{
27-
field: 'DateCreated',
28-
values: [ new Date(2018, 8, 17), new Date(2015, 10, 1), new Date(2016, 5, 5), new Date(2010, 2, 15), new Date(2015, 2, 5),
29-
new Date(2016, 7, 1), new Date(2016, 10, 5), new Date(2016, 4, 20), new Date(2018, 3, 5), new Date(2017, 6, 10),
30-
new Date(2017, 10, 4), new Date(2014, 5, 12), new Date(2015, 6, 27), new Date(2011, 8, 6), new Date(2012, 6, 10),
31-
new Date(2014, 9, 11), new Date(2015, 8, 4), new Date(2013, 4, 18), new Date(2013, 7, 9), new Date(2015, 6, 17),
32-
new Date(2017, 3, 15), new Date(2014, 5, 14), new Date(2011, 3, 21), new Date(2010, 7, 24), new Date(2011, 7, 14),
33-
new Date(2012, 8, 3),
34-
null, undefined
35-
]
36-
},
37-
{
38-
field: 'Contract',
39-
values: [ true, false, null, undefined ]
40-
}
41-
];
1+
import { IgxColumnComponent, IFilteringExpressionsTree, FilteringStrategy } from 'igniteui-angular';
2+
import { SAMPLE_DATA } from '../shared/sample-data';
423

434
export class GridESFLoadOnDemandService {
44-
public getData(columnField: string, done: (colVals: any[]) => void) {
5+
private _filteringStrategy = new FilteringStrategy();
6+
7+
public getRecordsData() {
8+
return SAMPLE_DATA.slice(0);
9+
}
10+
11+
public getColumnData(column: IgxColumnComponent, columnExprTree: IFilteringExpressionsTree, done: (colVals: any[]) => void) {
4512
setTimeout(() => {
46-
const columnData = COLUMNS_DATA.find(c => c.field === columnField);
47-
const columnValues = columnData ? columnData.values : [];
13+
const filteredData = this._filteringStrategy.filter(this.getRecordsData(), columnExprTree);
14+
const columnValues = filteredData.map(record => record[column.field]);
4815
done(columnValues);
4916
}, 1000);
5017
}

0 commit comments

Comments
 (0)