feat: initialize language and date-format settings (#1214)

See: #1213

src/app/organization/offices/create-office/create-office.component.ts

@@ -6,6 +6,7 @@ import { DatePipe } from '@angular/common';
 
 /** Custom Services */
 import { OrganizationService } from '../../organization.service';
+import { SettingsService } from 'app/settings/settings.service';
 
 /**
  * Create Office component.
@@ -36,6 +37,7 @@ export class CreateOfficeComponent implements OnInit {
    */
   constructor(private formBuilder: FormBuilder,
               private organizationService: OrganizationService,
+              private settingsService: SettingsService,
               private router: Router,
               private route: ActivatedRoute,
               private datePipe: DatePipe) {
@@ -67,12 +69,12 @@ export class CreateOfficeComponent implements OnInit {
   submit() {
     const prevOpeningDate: Date = this.officeForm.value.openingDate;
     // TODO: Update once language and date settings are setup
-    const dateFormat = 'yyyy-MM-dd';
+    const dateFormat = this.settingsService.dateFormat;
     this.officeForm.patchValue({
       openingDate: this.datePipe.transform(prevOpeningDate, dateFormat)
     });
     const office = this.officeForm.value;
-    office.locale = 'en';
+    office.locale = this.settingsService.language.code;
     office.dateFormat = dateFormat;
     this.organizationService.createOffice(office).subscribe(response => {
       this.router.navigate(['../'], { relativeTo: this.route });

src/app/settings/settings.component.html

@@ -32,16 +32,16 @@
 
         <mat-form-field>
           <mat-label>Default Language</mat-label>
-          <mat-select>
+          <mat-select [formControl]="language" [compareWith]="compareOptions">
             <mat-option *ngFor="let language of languages" [value]="language">
-              {{ language }}
+              {{ language.name }}
             </mat-option>
           </mat-select>
         </mat-form-field>
 
         <mat-form-field>
           <mat-label>Default Date Format</mat-label>
-          <mat-select>
+          <mat-select [formControl]="dateFormat">
             <mat-option *ngFor="let dateFormat of dateFormats" [value]="dateFormat">
               {{ dateFormat }}
             </mat-option>

src/app/settings/settings.component.ts

@@ -1,6 +1,10 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
 
+/** Custom Service */
+import { SettingsService } from './settings.service';
+import { FormControl } from '@angular/forms';
+
 /**
  * Settings component.
  */
@@ -11,16 +15,64 @@ import { Component, OnInit } from '@angular/core';
 })
 export class SettingsComponent implements OnInit {
 
-  /** Placeholder for languages. */
-  languages: any;
-  /** Placeholder for date formats. */
-  dateFormats: any;
+  /** Placeholder for languages. update once translations are set up */
+  languages: any[] = [
+    {
+      name: 'English',
+      code: 'en'
+    }
+  ];
+  /** Date formats. */
+  dateFormats: string[] = [
+    'dd MMMM yyyy',
+    'dd/MMMM/yyyy',
+    'dd-MMMM-yyyy',
+    'dd-MM-yy',
+    'MMMM-dd-yyyy',
+    'MMMM dd yyyy',
+    'MMMM/dd/yyyy',
+    'MM-dd-yy',
+    'yyyy-MM-dd'
+  ];
   /** Placeholder for fonts. */
   fonts: any;
 
-  constructor() { }
+  /** Language Setting */
+  language = new FormControl('');
+  /** Date Format Setting */
+  dateFormat =  new FormControl('');
+
+  /**
+   * @param {SettingsService} settingsService Settings Service
+   */
+  constructor(private settingsService: SettingsService) { }
 
   ngOnInit() {
+    this.language.patchValue(this.settingsService.language);
+    this.dateFormat.patchValue(this.settingsService.dateFormat);
+    this.buildDependencies();
+  }
+
+  /**
+   * Subscribe to value changes.
+   */
+  buildDependencies() {
+    this.language.valueChanges.subscribe((language: any) => {
+      this.settingsService.setLanguage(language);
+    });
+    this.dateFormat.valueChanges.subscribe((dateFormat: string) => {
+      this.settingsService.setDateFormat(dateFormat);
+    });
+  }
+
+  /**
+   * Compare function for mat-select.
+   * Useful in patching values if value is an object.
+   * @param {any} option1 option 1
+   * @param {any} option2 option 2.
+   */
+  compareOptions(option1: any, option2: any) {
+    return option1 && option2 && option1.code === option2.code;
   }
 
 }

src/app/settings/settings.service.spec.ts

@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { SettingsService } from './settings.service';
+
+describe('SettingsService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: SettingsService = TestBed.get(SettingsService);
+    expect(service).toBeTruthy();
+  });
+});

src/app/settings/settings.service.ts

@@ -0,0 +1,44 @@
+/** Angular Imports */
+import { Injectable } from '@angular/core';
+
+/**
+ * Settings Service
+ */
+@Injectable({
+  providedIn: 'root'
+})
+export class SettingsService {
+
+  constructor() { }
+
+  /**
+   * Sets date format setting throughout the app.
+   * @param {string} dateFormat Date Format
+   */
+  setDateFormat(dateFormat: string) {
+    localStorage.setItem('mifosXDateFormat', JSON.stringify(dateFormat));
+  }
+
+  /**
+   * Sets language setting throughout the app.
+   * @param {any} language Language.
+   */
+  setLanguage(language: { name: string, code: string }) {
+    localStorage.setItem('mifosXLanguage', JSON.stringify(language));
+  }
+
+  /**
+   * Returns date format setting.
+   */
+  get dateFormat() {
+    return JSON.parse(localStorage.getItem('mifosXDateFormat'));
+  }
+
+  /**
+   * Returns language setting
+   */
+  get language() {
+    return JSON.parse(localStorage.getItem('mifosXLanguage'));
+  }
+
+}

src/app/web-app.component.ts

@@ -19,11 +19,12 @@ import { Logger } from './core/logger/logger.service';
 import { I18nService } from './core/i18n/i18n.service';
 import { ThemeStorageService } from './shared/theme-picker/theme-storage.service';
 import { AlertService } from './core/alert/alert.service';
-import { KeyboardShortcutsConfiguration } from './keyboards-shortcut-config';
-
-/** Custom Models */
-import { Alert } from './core/alert/alert.model';
 import { AuthenticationService } from './core/authentication/authentication.service';
+import { SettingsService } from './settings/settings.service';
+
+/** Custom Items */
+import { Alert } from './core/alert/alert.model';
+import { KeyboardShortcutsConfiguration } from './keyboards-shortcut-config';
 
 /** Initialize Logger */
 const log = new Logger('MifosX');
@@ -59,6 +60,7 @@ export class WebAppComponent implements OnInit {
               private themeStorageService: ThemeStorageService,
               public snackBar: MatSnackBar,
               private alertService: AlertService,
+              private settingsService: SettingsService,
               private authenticationService: AuthenticationService) { }
 
   /**
@@ -133,6 +135,17 @@ export class WebAppComponent implements OnInit {
       });
     });
     this.buttonConfig = new KeyboardShortcutsConfiguration();
+
+    // initialize language and date format if they are null.
+    if (!localStorage.getItem('mifosXLanguage')) {
+      this.settingsService.setLanguage({
+        name: 'English',
+        code: 'en'
+      });
+    }
+    if (!localStorage.getItem('mifosXDateFormat')) {
+      this.settingsService.setDateFormat('dd MMMM yyyy');
+    }
   }
 
   logout() {