Add dateRange filter

src/app/components/table/table.component.ts

@@ -439,6 +439,8 @@ export class TableComponent implements AfterViewInit {
         value: null,
         minValue: {},
         maxValue: {},
+        fromValue: {},
+        toValue: {},
         type: column.type,
         options: {},
       };

src/app/components/tableComponents/date-range-cell/date-range-cell.component.html

@@ -7,7 +7,7 @@
   <mat-form-field class="date-range-input">
     <input
       matInput
-      placeholder="Startdatum"
+      [placeholder]="placeholderFrom"
       [matDatepicker]="fromPicker"
       [value]="stringToDate(from)"
       disabled
@@ -31,7 +31,7 @@
   <mat-form-field class="date-range-input">
     <input
       matInput
-      placeholder="Enddatum"
+      [placeholder]="placeholderFrom"
       [matDatepicker]="toPicker"
       [value]="stringToDate(to)"
       disabled

src/app/components/tableComponents/date-range-cell/date-range-cell.component.ts

@@ -31,6 +31,12 @@ export class DateRangeCellComponent implements OnInit {
   required = false;
   @Input()
   label: string = null;
+  @Input()
+  placeholderFrom = "Startdatum";
+  @Input()
+  placeholderTo = "Enddatum";
+
+
   @Output() validityChange = new EventEmitter<boolean>();
   isValid = true;
 

src/app/components/tableComponents/filter-row/filter-row.component.html

@@ -90,3 +90,27 @@
   (toChange)="newFilterValue()"
 >
 </app-date-range-cell>
+
+<!-- DateRange Filter -->
+<ng-container *ngIf="column.type === 'DateRange'">
+  <app-date-range-cell
+    [editable]="true"
+    [(from)]="filter.fromValue.from"
+    (fromChange)="newFilterValue()"
+    [(to)]="filter.fromValue.to"
+    (toChange)="newFilterValue()"
+    placeholderFrom="Startdatum von"
+    placeholderTo="Startdatum bis"
+  >
+  </app-date-range-cell>
+  <app-date-range-cell
+    [editable]="true"
+    [(from)]="filter.toValue.from"
+    (fromChange)="newFilterValue()"
+    [(to)]="filter.toValue.to"
+    (toChange)="newFilterValue()"
+    placeholderFrom="Enddatum von"
+    placeholderTo="Enddatum bis"
+  >
+  </app-date-range-cell>
+</ng-container>

src/app/helperFunctions/customTableFilterFunction.ts

@@ -59,30 +59,91 @@ export function customTableFilterFunction(data: any, filter: any) {
         if (dataElementMin == null && dataElementMax == null) {
           return false;
         }
-        if (filterElement.minValue.min != null && dataElementMin < filterElement.minValue.min) {
+        if (
+          filterElement.minValue.min != null &&
+          dataElementMin < filterElement.minValue.min
+        ) {
           return false;
         }
-        if (filterElement.minValue.max != null && dataElementMin > filterElement.minValue.max) {
+        if (
+          filterElement.minValue.max != null &&
+          dataElementMin > filterElement.minValue.max
+        ) {
           return false;
         }
-        if (filterElement.maxValue.min != null && dataElementMax < filterElement.maxValue.min) {
+        if (
+          filterElement.maxValue.min != null &&
+          dataElementMax < filterElement.maxValue.min
+        ) {
           return false;
         }
-        if (filterElement.maxValue.max != null && dataElementMax > filterElement.maxValue.max) {
+        if (
+          filterElement.maxValue.max != null &&
+          dataElementMax > filterElement.maxValue.max
+        ) {
           return false;
         }
       }
     }
     // Date Filter
-    if (filterElement.from != null || filterElement.to != null) {
+    if (
+      filterElement.type === 'Date' &&
+      (filterElement.from != null || filterElement.to != null)
+    ) {
       let dataElement = data[filterElementName];
       if (dataElement == null) {
         return false;
       }
-        if (filterElement.from != null && new Date(dataElement) < new Date(filterElement.from)) {
+      if (
+        filterElement.from != null &&
+        new Date(dataElement) < new Date(filterElement.from)
+      ) {
         return false;
       }
-        if (filterElement.to != null && new Date(dataElement) > new Date(filterElement.to)) {
+      if (
+        filterElement.to != null &&
+        new Date(dataElement) > new Date(filterElement.to)
+      ) {
+        return false;
+      }
+    }
+    // DateRange Filter
+    if (
+      filterElement.type === 'DateRange' &&
+      (filterElement.fromValue.from != null ||
+        filterElement.fromValue.to != null ||
+        filterElement.toValue.from != null ||
+        filterElement.toValue.to != null)
+    ) {
+      let dataElementFrom = data[filterElementName + '.from'];
+      let dataElementTo = data[filterElementName + '.to'];
+      if (!dataElementFrom && !dataElementTo) {
+        return false;
+      }
+      if (
+        filterElement.fromValue.from != null &&
+        (!dataElementFrom ||
+          new Date(dataElementFrom) < new Date(filterElement.fromValue.from))
+      ) {
+        return false;
+      }
+      if (
+        filterElement.fromValue.to != null &&
+        new Date(dataElementFrom) > new Date(filterElement.fromValue.to)
+      ) {
+        return false;
+      }
+      if (
+        filterElement.toValue.from != null &&
+        new Date(dataElementTo) < new Date(filterElement.toValue.from)
+      ) {
+        return false;
+      }
+      if (
+        filterElement.toValue.to != null &&
+        (!dataElementTo ||
+          new Date(dataElementTo) > new Date(filterElement.toValue.to))
+      ) {
         return false;
       }
     }