changed datepicker dialog

frontend/src/app/app.module.ts

@@ -44,7 +44,6 @@ import {MatBadgeModule} from '@angular/material/badge';
 import { CustomPaginatorIntl } from './custom-paginator-intl.service';
 
 
-
 @NgModule({
   declarations: [
     AppComponent,
@@ -88,10 +87,8 @@ import { CustomPaginatorIntl } from './custom-paginator-intl.service';
     MatButtonToggleModule,
     MatCardModule,
     MatBadgeModule
-
   ],
 
-
   providers: [ToolbarService,
               EditService,
               SelectionService,
@@ -99,6 +96,7 @@ import { CustomPaginatorIntl } from './custom-paginator-intl.service';
               SortService,
               FilterService,
               { provide: MatPaginatorIntl, useClass: CustomPaginatorIntl },
+              ReactiveFormsModule
             ],
   bootstrap: [AppComponent]
 })

frontend/src/app/filter-dialog/filter-dialog.component.html

@@ -68,6 +68,27 @@
               [matBadge]="''" class="dot-badge"></mat-badge></mat-panel-title>
           <mat-panel-description>{{this.languageService.lMap.get('filterDilogDateText')}}</mat-panel-description>
         </mat-expansion-panel-header>
+
+        <mat-form-field appearance="fill" style="width: 100%;">
+          <mat-label>{{this.languageService.lMap.get('filterDilogDate')}}</mat-label>
+          <mat-date-range-input [formGroup]="range" [rangePicker]="picker">
+            <input matStartDate formControlName="start"
+              placeholder="{{this.languageService.lMap.get('filterDilogSearchFrom')}}">
+            <input matEndDate formControlName="end"
+              placeholder="{{this.languageService.lMap.get('filterDilogSearchTo')}}">
+          </mat-date-range-input>
+          <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
+          <mat-date-range-picker #picker></mat-date-range-picker>
+        </mat-form-field>
+      </mat-expansion-panel>
+
+      <!-- <mat-expansion-panel>
+        <mat-expansion-panel-header>
+          <mat-panel-title>{{this.languageService.lMap.get('filterDilogDate')}}<mat-badge *ngIf="DateEnabled"
+              [matBadge]="''" class="dot-badge"></mat-badge></mat-panel-title>
+          <mat-panel-description>{{this.languageService.lMap.get('filterDilogDateText')}}</mat-panel-description>
+        </mat-expansion-panel-header>
+
         <mat-form-field appearance="fill" style="width: 48%;">
           <mat-label>{{this.languageService.lMap.get('filterDilogSearchFrom')}}</mat-label>
           <input (input)="this.onDateSelect()" matInput [matDatepicker]="picker1" [(ngModel)]="filterStartDate">
@@ -83,7 +104,7 @@
           <mat-datepicker-toggle matIconSuffix [for]="picker2"></mat-datepicker-toggle>
           <mat-datepicker #picker2></mat-datepicker>
         </mat-form-field>
-      </mat-expansion-panel>
+      </mat-expansion-panel> -->
 
       <mat-expansion-panel>
         <mat-expansion-panel-header>

frontend/src/app/filter-dialog/filter-dialog.component.ts

@@ -4,6 +4,7 @@ import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { DataService } from '../data.service';
 import { MAT_DATE_FORMATS } from '@angular/material/core'
+import { FormGroup, FormBuilder } from '@angular/forms';
 
 export interface FilterAttribute {
   name: string,
@@ -75,6 +76,7 @@ export class FilterDialogComponent implements OnInit {
   public IntervallEnabled: boolean = false;
 
   public filterObj;
+  public range: FormGroup;
 
 
   /**
@@ -84,8 +86,12 @@ export class FilterDialogComponent implements OnInit {
   * @param data contains an array of Changes which should be sent to the backend for a status transition
   * @param dataService injects the dataService for data management and backend communication
   */
-  constructor(public languageService: LanguageService, public dialogRef: MatDialogRef<FilterDialogComponent>, @Inject(MAT_DIALOG_DATA) public data: any, private dataService: DataService, private _snackBar: MatSnackBar) {
+  constructor(public languageService: LanguageService, public dialogRef: MatDialogRef<FilterDialogComponent>, @Inject(MAT_DIALOG_DATA) public data: any, private dataService: DataService, private _snackBar: MatSnackBar, private fb: FormBuilder) {
     //dialogRef.beforeClosed().subscribe(() => dialogRef.close(this.dataToReturn));
+    this.range = this.fb.group({
+      start: [null],
+      end: [null]
+    });
 
     if (data[0].filters) {
       ////console.log(data[0].filters.filterElement);
@@ -278,8 +284,7 @@ export class FilterDialogComponent implements OnInit {
   }
 
   public onDateSelect() {
-    console.log("################################")
-    if(this.filterStartDate && this.filterEndDate){
+    if (this.range.controls['start'].value && this.range.controls['end'].value) {
       this.DateEnabled = true;
     } else {
       this.DateEnabled = false;
@@ -287,7 +292,6 @@ export class FilterDialogComponent implements OnInit {
   }
 
 
-
   /**
   * The function mapFilter builds a filterElement out of all the selected filters, delivers it back and closes the dialog
   */
@@ -296,63 +300,68 @@ export class FilterDialogComponent implements OnInit {
     if (this.paketTypesFilter.length > 0) {
       filterElement.push({
         "column": "PackageType",
-         "filter": "equals",
-         "criteria": this.paketTypesFilter
+        "filter": "equals",
+        "criteria": this.paketTypesFilter
       });
     }
-
     if (this.statesFilter.length > 0) {
       filterElement.push({
         "column": "State",
-         "filter": "equals",
-         "criteria": this.statesFilter
+        "filter": "equals",
+        "criteria": this.statesFilter
       });
     }
-
-
     if (this.contractsFilter.length > 0) {
       filterElement.push({
         "column": "Contract",
-        "filter": "equals",
-        "criteria": this.contractsFilter
+        "filter": "equals",
+        "criteria": this.contractsFilter
       });
     }
     if (this.supportGroupsFilter.length > 0) {
       filterElement.push({
         "column": "SupportGroup",
-        "filter": "equals",
-        "criteria": this.supportGroupsFilter
+        "filter": "equals",
+        "criteria": this.supportGroupsFilter
       });
       //console.log(this.supportGroupsFilter);
     } else {
       filterElement.push({
         "column": "SupportGroup",
-        "filter": "equals",
-        "criteria": [this.userSupportGroup]
+        "filter": "equals",
+        "criteria": [this.userSupportGroup]
+      });
+    }
+
+    if (this.range.controls['start'].value && this.range.controls['end'].value) {
+      filterElement.push({
+        "column": "D2",
+        "filter": "dateRange",
+        "criteria": [new Date(this.range.controls['start'].value), new Date(this.range.controls['end'].value)]
       });
     }
     
     if (this.filterStartDate != null && this.filterEndDate != null) {
       filterElement.push({
         "column": "D2",
-        "filter": "dateRange",
-        "criteria": [new Date(this.filterStartDate), new Date(this.filterEndDate)]
+        "filter": "dateRange",
+        "criteria": [new Date(this.filterStartDate), new Date(this.filterEndDate)]
       });
     }
 
     if (this.criteria != null && this.criteria != "") {
       filterElement.push({
         "column": "ResourceName",
-        "filter": "contains",
-        "criteria": [this.criteria]
+        "filter": "contains",
+        "criteria": [this.criteria]
       });
     }
 
     if (this.intervallFilter) {
       filterElement.push({
         "column": "ASF_WI_HighestIntervall",
-        "filter": ">",
-        "criteria": [365]
+        "filter": ">",
+        "criteria": [365]
       });
     }