Daterangepicker fixes

src/app/core/basic-datatypes/date/date-range-filter/date-range-filter-panel/date-range-filter-panel.component.html

@@ -10,8 +10,20 @@
     >
     </mat-calendar>
     <div class="panel">
+      <div>
+        <button
+          class="button"
+          mat-button
+          color="primary"
+          (mouseenter)="preselectAllRange()"
+          (mouseleave)="unselectRange()"
+          (click)="selectRangeAndClose('all')"
+          [class.selected-option]="filter.selectedOption === '_'"
+        >
+          All
+        </button>
+      </div>
       <div
-        class="button-div"
         *ngFor="
           let item of filter.rangeOptions;
           let selectedIndexOfDateRanges = index

src/app/core/basic-datatypes/date/date-range-filter/date-range-filter-panel/date-range-filter-panel.component.scss

@@ -11,12 +11,6 @@
   margin: auto;
 }
 
-.button-div {
-  display: block;
-  text-align: left;
-  line-height: 100%;
-}
-
 .button {
   display: block;
   text-align: left;

src/app/core/basic-datatypes/date/date-range-filter/date-range-filter-panel/date-range-filter-panel.component.spec.ts

@@ -1,8 +1,8 @@
 import { ComponentFixture, TestBed } from "@angular/core/testing";
 
 import {
-  DateRangeFilterPanelComponent,
   calculateDateRange,
+  DateRangeFilterPanelComponent,
   defaultDateFilters,
 } from "./date-range-filter-panel.component";
 import { MatNativeDateModule } from "@angular/material/core";
@@ -105,6 +105,20 @@ describe("DateRangeFilterPanelComponent", () => {
     }
   });
 
+  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();

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<Date> = 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<Date> = 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();
   }
 

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", () => {

src/app/core/basic-datatypes/date/date-range-filter/date-range-filter.component.ts

@@ -31,18 +31,21 @@ export class DateRangeFilterComponent<T extends Entity> {
 
   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);
     }
   }
 
   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);
   }
 

src/app/core/filter/filters/filters.ts

@@ -63,23 +63,29 @@ export class DateFilter<T extends Entity> extends Filter<T> {
     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<T> {
     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<T>;
     }
+    return {} as DataFilter<T>;
   }
 
   getSelectedOption() {