WEB-693: Implement Date and Datetime Global Variables (#3123)

Signed-off-by: DeathGun44 <krishnamewara841@gmail.com>

src/app/core/utils/dates.spec.ts

@@ -0,0 +1,102 @@
+import { TestBed } from '@angular/core/testing';
+import { DatePipe } from '@angular/common';
+import { Dates } from './dates';
+
+describe('Dates', () => {
+  let service: Dates;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [
+        Dates,
+        DatePipe
+      ]
+    });
+    service = TestBed.inject(Dates);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+
+  describe('angularToMomentFormat', () => {
+    it('should convert dd/MM/yyyy to DD/MM/YYYY', () => {
+      expect(service.angularToMomentFormat('dd/MM/yyyy')).toBe('DD/MM/YYYY');
+    });
+
+    it('should convert d MMMM yy to D MMMM YY', () => {
+      expect(service.angularToMomentFormat('d MMMM yy')).toBe('D MMMM YY');
+    });
+
+    it('should convert yyyy-MM-dd HH:mm:ss to YYYY-MM-DD HH:mm:ss', () => {
+      expect(service.angularToMomentFormat('yyyy-MM-dd HH:mm:ss')).toBe('YYYY-MM-DD HH:mm:ss');
+    });
+
+    it('should handle single characters d/M/y to D/M/Y', () => {
+      expect(service.angularToMomentFormat('d/M/y')).toBe('D/M/Y');
+    });
+
+    it('should preserve other characters like HH:mm a to HH:mm A', () => {
+      expect(service.angularToMomentFormat('HH:mm a')).toBe('HH:mm A');
+    });
+
+    it('should convert dd MMMM yyyy to DD MMMM YYYY', () => {
+      expect(service.angularToMomentFormat('dd MMMM yyyy')).toBe('DD MMMM YYYY');
+    });
+
+    it('should convert all y variants: y, yy, yyy, yyyy', () => {
+      expect(service.angularToMomentFormat('y')).toBe('Y');
+      expect(service.angularToMomentFormat('yy')).toBe('YY');
+      expect(service.angularToMomentFormat('yyy')).toBe('YYY');
+      expect(service.angularToMomentFormat('yyyy')).toBe('YYYY');
+    });
+
+    it('should convert all d variants: d, dd', () => {
+      expect(service.angularToMomentFormat('d')).toBe('D');
+      expect(service.angularToMomentFormat('dd')).toBe('DD');
+    });
+
+    it('should handle complex format with all patterns', () => {
+      expect(service.angularToMomentFormat('dd-MM-yyyy HH:mm:ss a')).toBe('DD-MM-YYYY HH:mm:ss A');
+    });
+
+    it('should preserve MM (month) unchanged', () => {
+      expect(service.angularToMomentFormat('MM')).toBe('MM');
+    });
+
+    it('should preserve time components HH, mm, ss unchanged', () => {
+      expect(service.angularToMomentFormat('HH:mm:ss')).toBe('HH:mm:ss');
+    });
+
+    describe('App-Supported Formats', () => {
+      const formats = [
+        // HH:mm:ss variants
+        { angular: 'dd MMMM yyyy HH:mm:ss', moment: 'DD MMMM YYYY HH:mm:ss' },
+        { angular: 'dd/MMMM/yyyy HH:mm:ss', moment: 'DD/MMMM/YYYY HH:mm:ss' },
+        { angular: 'dd-MMMM-yyyy HH:mm:ss', moment: 'DD-MMMM-YYYY HH:mm:ss' },
+        { angular: 'dd-MM-yy HH:mm:ss', moment: 'DD-MM-YY HH:mm:ss' },
+        { angular: 'MMMM-dd-yyyy HH:mm:ss', moment: 'MMMM-DD-YYYY HH:mm:ss' },
+        { angular: 'MMMM dd yyyy HH:mm:ss', moment: 'MMMM DD YYYY HH:mm:ss' },
+        { angular: 'MMMM/dd/yyyy HH:mm:ss', moment: 'MMMM/DD/YYYY HH:mm:ss' },
+        { angular: 'MM-dd-yy HH:mm:ss', moment: 'MM-DD-YY HH:mm:ss' },
+        { angular: 'yyyy-MM-dd HH:mm:ss', moment: 'YYYY-MM-DD HH:mm:ss' },
+        // HH:mm variants
+        { angular: 'dd MMMM yyyy HH:mm', moment: 'DD MMMM YYYY HH:mm' },
+        { angular: 'dd/MMMM/yyyy HH:mm', moment: 'DD/MMMM/YYYY HH:mm' },
+        { angular: 'dd-MMMM-yyyy HH:mm', moment: 'DD-MMMM-YYYY HH:mm' },
+        { angular: 'dd-MM-yy HH:mm', moment: 'DD-MM-YY HH:mm' },
+        { angular: 'MMMM-dd-yyyy HH:mm', moment: 'MMMM-DD-YYYY HH:mm' },
+        { angular: 'MMMM dd yyyy HH:mm', moment: 'MMMM DD YYYY HH:mm' },
+        { angular: 'MMMM/dd/yyyy HH:mm', moment: 'MMMM/DD/YYYY HH:mm' },
+        { angular: 'MM-dd-yy HH:mm', moment: 'MM-DD-YY HH:mm' },
+        { angular: 'yyyy-MM-dd HH:mm', moment: 'YYYY-MM-DD HH:mm' }
+      ];
+
+      formats.forEach((f) => {
+        it(`should convert "${f.angular}" to "${f.moment}"`, () => {
+          expect(service.angularToMomentFormat(f.angular)).toBe(f.moment);
+        });
+      });
+    });
+  });
+});

src/app/core/utils/dates.ts

@@ -29,10 +29,21 @@ export class Dates {
   }
 
   public formatDateAsString(value: Date, dateFormat: string): string {
-    const momentFormat = dateFormat.replace(/y/g, 'Y').replace(/d/g, 'D').replace(/a/g, 'A');
+    const momentFormat = this.angularToMomentFormat(dateFormat);
     return moment(value).format(momentFormat);
   }
 
+  public angularToMomentFormat(angularFormat: string): string {
+    return angularFormat.replace(/y/g, 'Y').replace(/d/g, 'D').replace(/a/g, 'A');
+  }
+
+  public getMomentLocale(language?: { code: string }): string {
+    const langCode = language?.code;
+    if (!langCode) return 'en';
+    if (langCode.includes('-')) return langCode.split('-')[0];
+    return langCode;
+  }
+
   public parseDate(value: any): Date {
     if (value instanceof Array) {
       return moment(value.join('-'), 'YYYY-MM-DD').toDate();
@@ -46,7 +57,7 @@ export class Dates {
   }
 
   public convertToDate(value: any, format: string): Date {
-    const momentFormat = format.replace(/y/g, 'Y').replace(/d/g, 'D').replace(/a/g, 'A');
+    const momentFormat = this.angularToMomentFormat(format);
     return moment(value, momentFormat).toDate();
   }
 

src/app/pipes/date-format.pipe.ts

@@ -9,6 +9,7 @@
 import { Pipe, PipeTransform, inject, OnDestroy } from '@angular/core';
 import { SettingsService } from 'app/settings/settings.service';
 import { TranslateService } from '@ngx-translate/core';
+import { Dates } from 'app/core/utils/dates';
 import { Subscription } from 'rxjs';
 import moment from 'moment';
 
@@ -29,6 +30,7 @@ import 'moment/locale/cs'; // Czech
 export class DateFormatPipe implements PipeTransform, OnDestroy {
   private settingsService = inject(SettingsService);
   private translateService = inject(TranslateService);
+  private dateUtils = inject(Dates);
   private onLangChange: Subscription;
 
   constructor() {
@@ -45,24 +47,12 @@ export class DateFormatPipe implements PipeTransform, OnDestroy {
   }
 
   transform(value: any, dateFormat?: string): any {
-    const defaultDateFormat = this.settingsService.dateFormat.replace('dd', 'DD');
+    const defaultDateFormat = this.dateUtils.angularToMomentFormat(this.settingsService.dateFormat);
     if (typeof value === 'undefined' || value === null) {
       return '';
     }
 
-    // Map SettingsService language code to a moment.js locale identifier
-    const langCode = this.settingsService.language.code;
-    let momentLocale: string;
-
-    if (!langCode) {
-      momentLocale = 'en';
-    } else if (langCode.includes('-')) {
-      // Convert codes like 'ne-NE' or 'es-MX' to base language 'ne', 'es'
-      momentLocale = langCode.split('-')[0];
-    } else {
-      momentLocale = langCode;
-    }
-
+    const momentLocale = this.dateUtils.getMomentLocale(this.settingsService.language);
     moment.locale(momentLocale);
 
     let dateVal;

src/app/pipes/datetime-format.pipe.ts

@@ -6,13 +6,38 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { Pipe, PipeTransform } from '@angular/core';
+import { Pipe, PipeTransform, inject, OnDestroy } from '@angular/core';
+import { SettingsService } from 'app/settings/settings.service';
+import { TranslateService } from '@ngx-translate/core';
+import { Dates } from 'app/core/utils/dates';
+import { Subscription } from 'rxjs';
 import moment, { Moment } from 'moment';
 
-@Pipe({ name: 'datetimeFormat', standalone: true })
-export class DatetimeFormatPipe implements PipeTransform {
+@Pipe({ name: 'datetimeFormat', pure: false })
+export class DatetimeFormatPipe implements PipeTransform, OnDestroy {
+  private settingsService = inject(SettingsService);
+  private translateService = inject(TranslateService);
+  private dateUtils = inject(Dates);
+  private onLangChange: Subscription;
+
+  constructor() {
+    this.onLangChange = this.translateService.onLangChange.subscribe(() => {});
+  }
+
+  ngOnDestroy(): void {
+    if (this.onLangChange) {
+      this.onLangChange.unsubscribe();
+    }
+  }
+
   transform(value: unknown, datetimeFormat?: string): string {
+    const defaultDatetimeFormat = this.dateUtils.angularToMomentFormat(this.settingsService.datetimeFormat);
+
     if (value == null || value === '') return '';
+
+    const momentLocale = this.dateUtils.getMomentLocale(this.settingsService.language);
+    moment.locale(momentLocale);
+
     let dateVal: Moment;
     if (Array.isArray(value)) {
       const [
@@ -24,17 +49,31 @@ export class DatetimeFormatPipe implements PipeTransform {
         ss
       ] = value as number[];
       if (hh != null) {
-        dateVal = moment({ year: y, month: (m ?? 1) - 1, date: d, hour: hh, minute: mm ?? 0, second: ss ?? 0 });
+        dateVal = moment({
+          year: y,
+          month: (m ?? 1) - 1,
+          date: d,
+          hour: hh,
+          minute: mm ?? 0,
+          second: ss ?? 0
+        });
       } else {
         dateVal = moment({ year: y, month: (m ?? 1) - 1, date: d });
       }
     } else if (typeof value === 'number' && value < 1e12) {
-      // epoch seconds
       dateVal = moment.unix(value);
     } else {
       dateVal = moment(value as any);
     }
-    const fmt = datetimeFormat ?? 'YYYY-MM-DDTHH:mm:ssZ';
-    return dateVal.format(fmt);
+
+    if (!dateVal.isValid()) {
+      return '';
+    }
+
+    if (!datetimeFormat) {
+      return dateVal.format(defaultDatetimeFormat);
+    }
+
+    return dateVal.format(datetimeFormat);
   }
 }

src/app/settings/settings.component.html

@@ -41,6 +41,17 @@
           </mat-select>
         </mat-form-field>
 
+        <mat-form-field>
+          <mat-label>{{ 'labels.inputs.Default Datetime Format' | translate }}</mat-label>
+          <mat-select [formControl]="datetimeFormat">
+            @for (datetimeFormat of datetimeFormats; track datetimeFormat) {
+              <mat-option [value]="datetimeFormat">
+                {{ datetimeFormat }}
+              </mat-option>
+            }
+          </mat-select>
+        </mat-form-field>
+
         <mat-form-field>
           <mat-label>{{ 'labels.inputs.Decimals to Display' | translate }}</mat-label>
           <mat-select [formControl]="decimalsToDisplay">

src/app/settings/settings.component.ts

@@ -7,11 +7,13 @@
  */
 
 /** Angular Imports */
-import { Component, OnInit, inject } from '@angular/core';
+import { Component, OnInit, OnDestroy, inject } from '@angular/core';
 
 /** Custom Service */
 import { SettingsService } from './settings.service';
-import { UntypedFormControl, ReactiveFormsModule } from '@angular/forms';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 import {
   MatAccordion,
   MatExpansionPanel,
@@ -39,8 +41,9 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
     ThemePickerComponent
   ]
 })
-export class SettingsComponent implements OnInit {
+export class SettingsComponent implements OnInit, OnDestroy {
   private settingsService = inject(SettingsService);
+  private destroy$ = new Subject<void>();
 
   /** Placeholder for languages. update once translations are set up */
   languages: any[] = [
@@ -61,6 +64,28 @@ export class SettingsComponent implements OnInit {
     'MM-dd-yy',
     'yyyy-MM-dd'
   ];
+  datetimeFormats: string[] = [
+    // All date formats with HH:mm:ss (seconds)
+    'dd MMMM yyyy HH:mm:ss',
+    'dd/MMMM/yyyy HH:mm:ss',
+    'dd-MMMM-yyyy HH:mm:ss',
+    'dd-MM-yy HH:mm:ss',
+    'MMMM-dd-yyyy HH:mm:ss',
+    'MMMM dd yyyy HH:mm:ss',
+    'MMMM/dd/yyyy HH:mm:ss',
+    'MM-dd-yy HH:mm:ss',
+    'yyyy-MM-dd HH:mm:ss',
+    // All date formats with HH:mm (no seconds)
+    'dd MMMM yyyy HH:mm',
+    'dd/MMMM/yyyy HH:mm',
+    'dd-MMMM-yyyy HH:mm',
+    'dd-MM-yy HH:mm',
+    'MMMM-dd-yyyy HH:mm',
+    'MMMM dd yyyy HH:mm',
+    'MMMM/dd/yyyy HH:mm',
+    'MM-dd-yy HH:mm',
+    'yyyy-MM-dd HH:mm'
+  ];
   /** Decimals. */
   decimals: string[] = [
     '0',
@@ -77,15 +102,18 @@ export class SettingsComponent implements OnInit {
   fonts: any;
 
   /** Language Setting */
-  language = new UntypedFormControl('');
+  language = new FormControl('');
   /** Date Format Setting */
-  dateFormat = new UntypedFormControl('');
+  dateFormat = new FormControl('');
+  /** Datetime Format Setting */
+  datetimeFormat = new FormControl('');
   /** Decimals to Display Setting */
-  decimalsToDisplay = new UntypedFormControl('');
+  decimalsToDisplay = new FormControl('');
 
   ngOnInit() {
     this.language.patchValue(this.settingsService.language);
     this.dateFormat.patchValue(this.settingsService.dateFormat);
+    this.datetimeFormat.patchValue(this.settingsService.datetimeFormat);
     this.decimalsToDisplay.patchValue(this.settingsService.decimals);
     this.buildDependencies();
   }
@@ -94,17 +122,25 @@ export class SettingsComponent implements OnInit {
    * Subscribe to value changes.
    */
   buildDependencies() {
-    this.language.valueChanges.subscribe((language: any) => {
+    this.language.valueChanges.pipe(takeUntil(this.destroy$)).subscribe((language: any) => {
       this.settingsService.setLanguage(language);
     });
-    this.dateFormat.valueChanges.subscribe((dateFormat: string) => {
+    this.dateFormat.valueChanges.pipe(takeUntil(this.destroy$)).subscribe((dateFormat: string) => {
       this.settingsService.setDateFormat(dateFormat);
     });
-    this.decimalsToDisplay.valueChanges.subscribe((decimals: string) => {
+    this.datetimeFormat.valueChanges.pipe(takeUntil(this.destroy$)).subscribe((datetimeFormat: string) => {
+      this.settingsService.setDatetimeFormat(datetimeFormat);
+    });
+    this.decimalsToDisplay.valueChanges.pipe(takeUntil(this.destroy$)).subscribe((decimals: string) => {
       this.settingsService.setDecimalToDisplay(decimals);
     });
   }
 
+  ngOnDestroy() {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
   /**
    * Compare function for mat-select.
    * Useful in patching values if value is an object.

src/app/settings/settings.service.ts

@@ -39,6 +39,10 @@ export class SettingsService {
     localStorage.setItem('mifosXDateFormat', JSON.stringify(dateFormat));
   }
 
+  setDatetimeFormat(datetimeFormat: string) {
+    localStorage.setItem('mifosXDatetimeFormat', JSON.stringify(datetimeFormat));
+  }
+
   /**
    * Sets language setting throughout the app.
    * @param {any} language Language.
@@ -112,10 +116,37 @@ export class SettingsService {
   }
 
   /**
-   * Returns date format setting.
+   * Returns date format setting with fallback precedence:
+   * 1. User setting (localStorage)
+   * 2. Global env var
+   * 3. Hardcoded default
    */
   get dateFormat() {
-    return JSON.parse(localStorage.getItem('mifosXDateFormat'));
+    const userSetting = localStorage.getItem('mifosXDateFormat');
+    if (userSetting) {
+      return JSON.parse(userSetting);
+    }
+    if (environment.defaultFormatDate) {
+      return environment.defaultFormatDate;
+    }
+    return 'dd MMMM yyyy';
+  }
+
+  /**
+   * Returns datetime format setting with fallback precedence:
+   * 1. User setting (localStorage)
+   * 2. Global env var
+   * 3. Hardcoded default
+   */
+  get datetimeFormat() {
+    const userSetting = localStorage.getItem('mifosXDatetimeFormat');
+    if (userSetting) {
+      return JSON.parse(userSetting);
+    }
+    if (environment.defaultFormatDatetime) {
+      return environment.defaultFormatDatetime;
+    }
+    return 'dd MMMM yyyy HH:mm:ss';
   }
 
   /**

src/app/web-app.component.ts

@@ -223,9 +223,6 @@ export class WebAppComponent implements OnInit, OnDestroy {
     if (!localStorage.getItem('mifosXLanguage')) {
       this.settingsService.setDefaultLanguage();
     }
-    if (!localStorage.getItem('mifosXDateFormat')) {
-      this.settingsService.setDateFormat('dd MMMM yyyy');
-    }
     // Set default max date picker as Today
     this.settingsService.setBusinessDate(this.dateUtils.formatDate(new Date(), SettingsService.businessDateFormat));
     // Set the server list from the env var FINERACT_API_URLS, but avoid overwriting "Add new server" user choice