Skip to content

Commit d92ce79

Browse files
mtsvyatkovamtsvyatkova
authored
Ignore time portions when filtering 'date' type columns - 17.2.0 (#14688)
* fix(esf): filter only by date for date columns
1 parent 82ecfbf commit d92ce79

File tree

6 files changed

+111
-44
lines changed

6 files changed

+111
-44
lines changed

‎projects/igniteui-angular/src/lib/data-operations/filtering-condition.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -387,6 +387,15 @@ export class IgxDateFilteringOperand extends IgxBaseDateTimeFilteringOperand {
387387
}
388388
}].concat(this.operations);
389389
}
390+
391+
protected override findValueInSet(target: any, searchVal: Set<any>) {
392+
if (!target) {
393+
return false;
394+
}
395+
396+
target = target.toDateString();
397+
return searchVal.has(target);
398+
}
390399
}
391400

392401
export class IgxDateTimeFilteringOperand extends IgxBaseDateTimeFilteringOperand {

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

Lines changed: 25 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -533,37 +533,34 @@ export class IgxGridExcelStyleFilteringComponent extends BaseFilteringComponent
533533
}
534534

535535
private renderValues() {
536-
this.filterValues = this.generateFilterValues(this.column.dataType === GridColumnDataType.Date || this.column.dataType === GridColumnDataType.DateTime);
536+
this.filterValues = this.generateFilterValues();
537537
this.generateListData();
538538
}
539539

540-
private generateFilterValues(isDateColumn = false) {
541-
let filterValues;
540+
private generateFilterValues() {
541+
const formatValue = (value: any): any => {
542+
if (!value) return value;
542543

543-
if (isDateColumn) {
544-
filterValues = new Set<any>(this.expressionsList.reduce((arr, e) => {
545-
if (e.expression.condition.name === 'in') {
546-
return [...arr, ...Array.from((e.expression.searchVal as Set<any>).values()).map(v =>
547-
new Date(v).toISOString())];
548-
}
549-
return [...arr, ...[e.expression.searchVal ? e.expression.searchVal.toISOString() : e.expression.searchVal]];
550-
}, []));
551-
} else if (this.column.dataType === GridColumnDataType.Time) {
552-
filterValues = new Set<any>(this.expressionsList.reduce((arr, e) => {
553-
if (e.expression.condition.name === 'in') {
554-
return [...arr, ...Array.from((e.expression.searchVal as Set<any>).values()).map(v =>
555-
typeof v === 'string' ? v : new Date(v).toLocaleTimeString())];
556-
}
557-
return [...arr, ...[e.expression.searchVal ? e.expression.searchVal.toLocaleTimeString() : e.expression.searchVal]];
558-
}, []));
559-
} else {
560-
filterValues = new Set<any>(this.expressionsList.reduce((arr, e) => {
561-
if (e.expression.condition.name === 'in') {
562-
return [...arr, ...Array.from((e.expression.searchVal as Set<any>).values())];
563-
}
564-
return [...arr, ...[e.expression.searchVal]];
565-
}, []));
566-
}
544+
switch (this.column.dataType) {
545+
case GridColumnDataType.Date:
546+
return new Date(value).toDateString();
547+
case GridColumnDataType.DateTime:
548+
return new Date(value).toISOString();
549+
case GridColumnDataType.Time:
550+
return typeof value === 'string' ? value : new Date(value).toLocaleTimeString();
551+
default:
552+
return value;
553+
}
554+
};
555+
556+
const processExpression = (arr: any[], e: any): any[] => {
557+
if (e.expression.condition.name === 'in') {
558+
return [...arr, ...Array.from((e.expression.searchVal as Set<any>).values()).map(v => formatValue(v))];
559+
}
560+
return [...arr, formatValue(e.expression.searchVal)];
561+
};
562+
563+
const filterValues = new Set<any>(this.expressionsList.reduce(processExpression, []));
567564

568565
return filterValues;
569566
}
@@ -761,7 +758,7 @@ export class IgxGridExcelStyleFilteringComponent extends BaseFilteringComponent
761758

762759
private getExpressionValue(value: any): string {
763760
if (this.column.dataType === GridColumnDataType.Date) {
764-
value = value ? new Date(value).toISOString() : value;
761+
value = value ? new Date(value).toDateString() : value;
765762
} else if (this.column.dataType === GridColumnDataType.DateTime) {
766763
value = value ? new Date(value).toISOString() : value;
767764
} else if (this.column.dataType === GridColumnDataType.Time) {

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

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -585,11 +585,15 @@ export class IgxExcelStyleSearchComponent implements AfterViewInit, OnDestroy {
585585
condition: this.createCondition('in'),
586586
fieldName: this.esf.column.field,
587587
ignoreCase: this.esf.column.filteringIgnoreCase,
588-
searchVal: new Set(this.esf.column.dataType === GridColumnDataType.Date ||
588+
searchVal: new Set(
589+
this.esf.column.dataType === GridColumnDataType.Date ?
590+
selectedItems.map(d => d.value.toDateString()) :
589591
this.esf.column.dataType === GridColumnDataType.DateTime ?
590-
selectedItems.map(d => d.value.toISOString()) : this.esf.column.dataType === GridColumnDataType.Time ?
592+
selectedItems.map(d => d.value.toISOString()) :
593+
this.esf.column.dataType === GridColumnDataType.Time ?
591594
selectedItems.map(e => e.value.toLocaleTimeString()) :
592-
selectedItems.map(e => e.value))
595+
selectedItems.map(e => e.value)
596+
)
593597
});
594598

595599
if (blanksItem) {

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

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5370,6 +5370,63 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
53705370
expect(excelMenu).toBeNull();
53715371
}));
53725372

5373+
it('Should filter ISO 8601 dates for date column ignoring the time portion - issue #14643', fakeAsync(() => {
5374+
// Add hours part to the ReleaseDate so some records differ only by the time portion
5375+
fix.componentInstance.data = SampleTestData.excelFilteringData().map(rec => {
5376+
const newRec = Object.assign({}, rec) as any;
5377+
5378+
if (rec.ReleaseDate) {
5379+
const date = new Date(rec.ReleaseDate);
5380+
date.setHours(date.getHours() + Math.floor(Math.random() * 24));
5381+
newRec.ReleaseDate = date.toISOString();
5382+
} else {
5383+
newRec.ReleaseDate = null;
5384+
}
5385+
5386+
return newRec;
5387+
});
5388+
fix.detectChanges();
5389+
5390+
GridFunctions.clickExcelFilterIcon(fix, 'ReleaseDate');
5391+
tick(100);
5392+
fix.detectChanges();
5393+
5394+
const excelMenu = GridFunctions.getExcelStyleFilteringComponent(fix);
5395+
const checkbox = GridFunctions.getExcelStyleFilteringCheckboxes(fix, excelMenu)[1];
5396+
5397+
checkbox.click();
5398+
tick();
5399+
fix.detectChanges();
5400+
5401+
const applyButton = GridFunctions.getApplyButtonExcelStyleFiltering(fix);
5402+
applyButton.focus();
5403+
fix.detectChanges();
5404+
5405+
expect(document.activeElement).toBe(applyButton);
5406+
5407+
UIInteractions.simulateClickEvent(applyButton);
5408+
fix.detectChanges();
5409+
5410+
const rows = GridFunctions.getRows(fix);
5411+
const cell1 = GridFunctions.getRowCells(fix, 0)[4].nativeElement;
5412+
const cell2 = GridFunctions.getRowCells(fix, 3)[4].nativeElement;
5413+
expect(cell1.textContent.toString()).toEqual(cell2.textContent.toString());
5414+
expect(rows.length).toBe(6, 'incorrect number of rows');
5415+
5416+
//Check if checkboxes have correct state on ESF menu reopening
5417+
GridFunctions.clickExcelFilterIcon(fix, 'ReleaseDate');
5418+
tick(100);
5419+
fix.detectChanges();
5420+
5421+
const checkboxes: any[] = Array.from(GridFunctions.getExcelStyleFilteringCheckboxes(fix));
5422+
expect(checkboxes[0].indeterminate).toBeTrue();
5423+
expect(checkboxes[1].checked).toBeFalse();
5424+
const listItemsCheckboxes = checkboxes.slice(2, checkboxes.length-1);
5425+
for (const checkboxItem of listItemsCheckboxes) {
5426+
ControlsFunction.verifyCheckboxState(checkboxItem.parentElement);
5427+
}
5428+
}));
5429+
53735430
it('Should filter date by input string', fakeAsync(() => {
53745431
GridFunctions.clickExcelFilterIcon(fix, 'ReleaseDate');
53755432
tick(100);

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

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -251,7 +251,7 @@ describe('IgxGrid - Filtering actions #grid', () => {
251251
grid.filter('ReleaseDate', cal.timedelta(today, 'day', 4),
252252
IgxDateFilteringOperand.instance().condition('after'));
253253
fix.detectChanges();
254-
expect(grid.rowList.length).toEqual(2);
254+
expect(grid.rowList.length).toEqual(1);
255255

256256
// Before filter
257257
grid.clearFilter('ReleaseDate');
@@ -260,20 +260,20 @@ describe('IgxGrid - Filtering actions #grid', () => {
260260
grid.filter('ReleaseDate', cal.timedelta(today, 'day', 4),
261261
IgxDateFilteringOperand.instance().condition('before'));
262262
fix.detectChanges();
263-
expect(grid.rowList.length).toEqual(4);
263+
expect(grid.rowList.length).toEqual(5);
264264

265265
// DoesNotEqual filter
266266
grid.clearFilter('ReleaseDate');
267267
fix.detectChanges();
268-
grid.filter('ReleaseDate', cal.timedelta(today, 'day', 15),
268+
grid.filter('ReleaseDate', today,
269269
IgxDateFilteringOperand.instance().condition('doesNotEqual'));
270270
fix.detectChanges();
271271
expect(grid.rowList.length).toEqual(7);
272272

273273
// Equals filter
274274
grid.clearFilter('ReleaseDate');
275275
fix.detectChanges();
276-
grid.filter('ReleaseDate', cal.timedelta(today, 'day', 15),
276+
grid.filter('ReleaseDate', today,
277277
IgxDateFilteringOperand.instance().condition('equals'));
278278
fix.detectChanges();
279279
expect(grid.rowList.length).toEqual(1);
@@ -527,7 +527,7 @@ describe('IgxGrid - Filtering actions #grid', () => {
527527
grid.filter('ReleaseDate', cal.timedelta(today, 'day', 4),
528528
IgxDateFilteringOperand.instance().condition('after'));
529529
fix.detectChanges();
530-
expect(grid.rowList.length).toEqual(2);
530+
expect(grid.rowList.length).toEqual(1);
531531

532532
// Before filter
533533
grid.clearFilter('ReleaseDate');
@@ -536,20 +536,20 @@ describe('IgxGrid - Filtering actions #grid', () => {
536536
grid.filter('ReleaseDate', cal.timedelta(today, 'day', 4),
537537
IgxDateFilteringOperand.instance().condition('before'));
538538
fix.detectChanges();
539-
expect(grid.rowList.length).toEqual(4);
539+
expect(grid.rowList.length).toEqual(5);
540540

541541
// DoesNotEqual filter
542542
grid.clearFilter('ReleaseDate');
543543
fix.detectChanges();
544-
grid.filter('ReleaseDate', cal.timedelta(today, 'day', 15),
544+
grid.filter('ReleaseDate', today,
545545
IgxDateFilteringOperand.instance().condition('doesNotEqual'));
546546
fix.detectChanges();
547547
expect(grid.rowList.length).toEqual(7);
548548

549549
// Equals filter
550550
grid.clearFilter('ReleaseDate');
551551
fix.detectChanges();
552-
grid.filter('ReleaseDate', cal.timedelta(today, 'day', 15),
552+
grid.filter('ReleaseDate', today,
553553
IgxDateFilteringOperand.instance().condition('equals'));
554554
fix.detectChanges();
555555
expect(grid.rowList.length).toEqual(1);
@@ -649,7 +649,7 @@ describe('IgxGrid - Filtering actions #grid', () => {
649649
grid.filter('ReleaseDate', cal.timedelta(today, 'day', 4),
650650
IgxDateFilteringOperand.instance().condition('after'));
651651
fix.detectChanges();
652-
expect(grid.rowList.length).toEqual(2);
652+
expect(grid.rowList.length).toEqual(1);
653653

654654
// Before filter
655655
grid.clearFilter('ReleaseDate');
@@ -658,20 +658,20 @@ describe('IgxGrid - Filtering actions #grid', () => {
658658
grid.filter('ReleaseDate', cal.timedelta(today, 'day', 4),
659659
IgxDateFilteringOperand.instance().condition('before'));
660660
fix.detectChanges();
661-
expect(grid.rowList.length).toEqual(4);
661+
expect(grid.rowList.length).toEqual(5);
662662

663663
// DoesNotEqual filter
664664
grid.clearFilter('ReleaseDate');
665665
fix.detectChanges();
666-
grid.filter('ReleaseDate', cal.timedelta(today, 'day', 15),
666+
grid.filter('ReleaseDate', today,
667667
IgxDateFilteringOperand.instance().condition('doesNotEqual'));
668668
fix.detectChanges();
669669
expect(grid.rowList.length).toEqual(7);
670670

671671
// Equals filter
672672
grid.clearFilter('ReleaseDate');
673673
fix.detectChanges();
674-
grid.filter('ReleaseDate', cal.timedelta(today, 'day', 15),
674+
grid.filter('ReleaseDate', today,
675675
IgxDateFilteringOperand.instance().condition('equals'));
676676
fix.detectChanges();
677677
expect(grid.rowList.length).toEqual(1);

‎projects/igniteui-angular/src/lib/test-utils/sample-test-data.spec.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1902,7 +1902,7 @@ export class SampleTestData {
19021902
Downloads: 254,
19031903
ID: 1,
19041904
ProductName: 'Ignite UI for JavaScript',
1905-
ReleaseDate: SampleTestData.timeGenerator.timedelta(SampleTestData.today, 'day', 15),
1905+
ReleaseDate: SampleTestData.timeGenerator.timedelta(SampleTestData.today, 'day', 1),
19061906
ReleaseDateTime: SampleTestData.timeGenerator.timedelta(SampleTestData.todayFullDate, 'hour', 1),
19071907
ReleaseTime: SampleTestData.timeGenerator.timedelta(SampleTestData.todayFullDate, 'hour', 1),
19081908
Released: false,

0 commit comments

Comments
 (0)