From e7cf303a854e5d573bc8b6c25ec77e7359e18ee8 Mon Sep 17 00:00:00 2001
From: Said Gedik <said.gedik@nttdata.com>
Date: Wed, 31 Jul 2024 16:00:45 +0200
Subject: [PATCH] english date picker format

---
 .../filter-dialog/filter-dialog.component.ts  | 32 ++++++++++++++++---
 1 file changed, 27 insertions(+), 5 deletions(-)

diff --git a/frontend/src/app/filter-dialog/filter-dialog.component.ts b/frontend/src/app/filter-dialog/filter-dialog.component.ts
index 41a65ca..bc0e972 100644
--- a/frontend/src/app/filter-dialog/filter-dialog.component.ts
+++ b/frontend/src/app/filter-dialog/filter-dialog.component.ts
@@ -3,7 +3,7 @@ import { Component, Inject, OnInit } from '@angular/core';
 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 { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core'
 import { FormGroup, FormBuilder } from '@angular/forms';
 
 export interface FilterAttribute {
@@ -27,8 +27,26 @@ export const MY_DATE_FORMATS = {
   templateUrl: './filter-dialog.component.html',
   styleUrls: ['./filter-dialog.component.css'],
   providers: [
-    { provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMATS }
-  ]
+    {
+      provide: MAT_DATE_FORMATS,
+      useFactory: (languageService: LanguageService) => {
+        const isEnglish = languageService.language === 'EN';
+        return {
+          parse: {
+            dateInput: isEnglish ? 'MM/DD/YYYY' : 'DD.MM.YYYY',
+          },
+          display: {
+            dateInput: isEnglish ? 'M/D/YYYY' : 'DD.MM.YYYY',
+            monthYearLabel: isEnglish ? 'MMM YYYY' : 'MMMM YYYY',
+            dateA11yLabel: isEnglish ? 'MMMM D, YYYY' : 'LL',
+            monthYearA11yLabel: isEnglish ? 'MMMM YYYY' : 'MMMM YYYY',
+          },
+        };
+      },
+      deps: [LanguageService],
+    },
+    { provide: MAT_DATE_LOCALE, useFactory: (languageService: LanguageService) => languageService.language === 'EN' ? 'en-US' : 'de-DE', deps: [LanguageService] },
+  ],
 })
 
 /**
@@ -86,7 +104,7 @@ 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, private fb: FormBuilder) {
+  constructor(public languageService: LanguageService, private dateAdapter: DateAdapter<any>, 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],
@@ -104,6 +122,10 @@ export class FilterDialogComponent implements OnInit {
       console.log("\nNEW FETCHED USER SG IN FILTERCOMPONEN");
       this.userSupportGroup = res.name;
     });
+
+    this.languageService.languageChangeEmitter.subscribe((language) => {
+      this.dateAdapter.setLocale(language === 'EN' ? 'en-US' : 'de-DE');
+    });
   }
 
   /**
@@ -340,7 +362,7 @@ export class FilterDialogComponent implements OnInit {
         "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",