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

See: #1213

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'));
+  }
+
+}