diff --git a/src/app/core/basic-datatypes/date/date-range-filter/date-range-filter-panel/date-range-filter-panel.component.html b/src/app/core/basic-datatypes/date/date-range-filter/date-range-filter-panel/date-range-filter-panel.component.html index 178f13846f..b0bf659070 100644 --- a/src/app/core/basic-datatypes/date/date-range-filter/date-range-filter-panel/date-range-filter-panel.component.html +++ b/src/app/core/basic-datatypes/date/date-range-filter/date-range-filter-panel/date-range-filter-panel.component.html @@ -10,8 +10,20 @@ >
+
+ +
{ } }); + it("should highlight the whole month when hovering over the 'all' option ", async () => { + const calendar = await loader.getHarness(MatCalendarHarness); + const cells = await calendar.getCells(); + component.preselectAllRange(); + for (let cell of cells) { + await expectAsync(cell.isInComparisonRange()).toBeResolvedTo(true); + } + }); + + it("should return '_' as filter.selectedOption when 'all' option has been chosen", async () => { + component.selectRangeAndClose("all"); + expect(dateFilter.selectedOption).toEqual("_"); + }); + it("should correctly calculate date ranges based on the config", () => { let res = calculateDateRange({ label: "Today" }); let fromDate = moment().startOf("day").toDate(); diff --git a/src/app/core/basic-datatypes/date/date-range-filter/date-range-filter-panel/date-range-filter-panel.component.ts b/src/app/core/basic-datatypes/date/date-range-filter/date-range-filter-panel/date-range-filter-panel.component.ts index c18d9cfeed..1764e848b8 100644 --- a/src/app/core/basic-datatypes/date/date-range-filter/date-range-filter-panel/date-range-filter-panel.component.ts +++ b/src/app/core/basic-datatypes/date/date-range-filter/date-range-filter-panel/date-range-filter-panel.component.ts @@ -62,7 +62,10 @@ export const defaultDateFilters: DateRangeFilterConfigOption[] = [ ], }) export class DateRangeFilterPanelComponent { - selectedRangeValue = this.filter.getDateRange(); + selectedRangeValue: DateRange = new DateRange( + this.filter.getDateRange().start ?? new Date("1900-01-01"), + this.filter.getDateRange().end ?? new Date("2999-12-31"), + ); selectedOption = this.filter.getSelectedOption(); comparisonRange: DateRange = new DateRange(null, null); @@ -75,12 +78,23 @@ export class DateRangeFilterPanelComponent { this.comparisonRange = calculateDateRange(dateRangeOption); } + preselectAllRange(): void { + this.comparisonRange = new DateRange( + new Date("1900-01-01"), + new Date("2999-12-31"), + ); + } + unselectRange() { this.comparisonRange = new DateRange(null, null); } - selectRangeAndClose(index: number): void { - this.filter.selectedOption = index.toString(); + selectRangeAndClose(index: number | "all"): void { + if (typeof index === "number") { + this.filter.selectedOption = index.toString(); + } else { + this.filter.selectedOption = "_"; + } this.dialogRef.close(); } diff --git a/src/app/core/basic-datatypes/date/date-range-filter/date-range-filter.component.spec.ts b/src/app/core/basic-datatypes/date/date-range-filter/date-range-filter.component.spec.ts index 117faf9e0c..03fb26ac5d 100644 --- a/src/app/core/basic-datatypes/date/date-range-filter/date-range-filter.component.spec.ts +++ b/src/app/core/basic-datatypes/date/date-range-filter/date-range-filter.component.spec.ts @@ -31,7 +31,7 @@ describe("DateRangeFilterComponent", () => { dateFilter.selectedOption = "9"; component.filterConfig = dateFilter; - expect(component.dateFilter.getFilter()).toBe(undefined); + expect(component.dateFilter.getFilter()).toEqual({}); jasmine.clock().mockDate(new Date("2023-05-18")); dateFilter.selectedOption = "0"; @@ -53,6 +53,10 @@ describe("DateRangeFilterComponent", () => { }, }; expect(component.dateFilter.getFilter()).toEqual(expectedDataFilter); + + dateFilter.selectedOption = "_"; + component.filterConfig = dateFilter; + expect(component.dateFilter.getFilter()).toEqual({}); jasmine.clock().uninstall(); }); @@ -61,17 +65,38 @@ describe("DateRangeFilterComponent", () => { dateFilter.selectedOption = "1_2_3"; component.filterConfig = dateFilter; - expect(component.dateFilter.getFilter()).toBe(undefined); + expect(component.dateFilter.getFilter()).toEqual({}); + + dateFilter.selectedOption = "_"; + component.filterConfig = dateFilter; + expect(component.dateFilter.getFilter()).toEqual({}); + + dateFilter.selectedOption = "2022-9-18_"; + component.filterConfig = dateFilter; + let testFilter: { $gte?: string; $lte?: string } = { $gte: "2022-09-18" }; + let expectedDateFilter = { + test: testFilter, + }; + expect(component.dateFilter.getFilter()).toEqual(expectedDateFilter); + + dateFilter.selectedOption = "_2023-01-3"; + component.filterConfig = dateFilter; + testFilter = { $lte: "2023-01-03" }; + expectedDateFilter = { + test: testFilter, + }; + expect(component.dateFilter.getFilter()).toEqual(expectedDateFilter); dateFilter.selectedOption = "2022-9-18_2023-01-3"; component.filterConfig = dateFilter; - let expectedDataFilter = { - test: { - $gte: "2022-09-18", - $lte: "2023-01-03", - }, + testFilter = { + $gte: "2022-09-18", + $lte: "2023-01-03", }; - expect(component.dateFilter.getFilter()).toEqual(expectedDataFilter); + expectedDateFilter = { + test: testFilter, + }; + expect(component.dateFilter.getFilter()).toEqual(expectedDateFilter); }); it("should set the correct date filter when changing the date range manually", () => { diff --git a/src/app/core/basic-datatypes/date/date-range-filter/date-range-filter.component.ts b/src/app/core/basic-datatypes/date/date-range-filter/date-range-filter.component.ts index 73786c7689..be2a4a83ef 100644 --- a/src/app/core/basic-datatypes/date/date-range-filter/date-range-filter.component.ts +++ b/src/app/core/basic-datatypes/date/date-range-filter/date-range-filter.component.ts @@ -31,7 +31,10 @@ export class DateRangeFilterComponent { private initDates() { const range = this.dateFilter.getDateRange(); - if (range.start !== this.fromDate && range.end !== this.toDate) { + if ( + (range.start !== this.fromDate || range.start === undefined) && + (range.end !== this.toDate || range.end === undefined) + ) { this.fromDate = range.start; this.toDate = range.end; this.selectedOptionChange.emit(this.dateFilter.selectedOption); @@ -39,10 +42,10 @@ export class DateRangeFilterComponent { } dateChangedManually() { - if (isValidDate(this.fromDate) && isValidDate(this.toDate)) { - this.dateFilter.selectedOption = - dateToString(this.fromDate) + "_" + dateToString(this.toDate); - } + this.dateFilter.selectedOption = + (isValidDate(this.fromDate) ? dateToString(this.fromDate) : "") + + "_" + + (isValidDate(this.toDate) ? dateToString(this.toDate) : ""); this.selectedOptionChange.emit(this.dateFilter.selectedOption); } diff --git a/src/app/core/filter/filters/filters.ts b/src/app/core/filter/filters/filters.ts index d8177a0347..cdf68bcec5 100644 --- a/src/app/core/filter/filters/filters.ts +++ b/src/app/core/filter/filters/filters.ts @@ -63,23 +63,29 @@ export class DateFilter extends Filter { if (dates?.length == 2) { const firstDate = new Date(dates[0]); const secondDate = new Date(dates[1]); - if (isValidDate(firstDate) && isValidDate(secondDate)) { - return new DateRange(firstDate, secondDate); - } + return new DateRange( + isValidDate(firstDate) ? firstDate : undefined, + isValidDate(secondDate) ? secondDate : undefined, + ); } return new DateRange(undefined, undefined); } getFilter(): DataFilter { const range = this.getDateRange(); - if (range.start && range.end) { + const filterObject: { $gte?: string; $lte?: string } = {}; + if (range.start) { + filterObject.$gte = moment(range.start).format("YYYY-MM-DD"); + } + if (range.end) { + filterObject.$lte = moment(range.end).format("YYYY-MM-DD"); + } + if (filterObject.$gte || filterObject.$lte) { return { - [this.name]: { - $gte: moment(range.start).format("YYYY-MM-DD"), - $lte: moment(range.end).format("YYYY-MM-DD"), - }, + [this.name]: filterObject, } as DataFilter; } + return {} as DataFilter; } getSelectedOption() {