diff --git a/src/app/organization/offices/create-office/create-office.component.ts b/src/app/organization/offices/create-office/create-office.component.ts
index a28727c5c..62afb72f8 100644
--- a/src/app/organization/offices/create-office/create-office.component.ts
+++ b/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 });
diff --git a/src/app/settings/settings.component.html b/src/app/settings/settings.component.html
index 7a99c0be9..10d0c3bd6 100644
--- a/src/app/settings/settings.component.html
+++ b/src/app/settings/settings.component.html
@@ -32,16 +32,16 @@
Default Language
-
+
- {{ language }}
+ {{ language.name }}
Default Date Format
-
+
{{ dateFormat }}
diff --git a/src/app/settings/settings.component.ts b/src/app/settings/settings.component.ts
index f34624697..9a16307cd 100644
--- a/src/app/settings/settings.component.ts
+++ b/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;
}
}
diff --git a/src/app/settings/settings.service.spec.ts b/src/app/settings/settings.service.spec.ts
new file mode 100644
index 000000000..81a7ca231
--- /dev/null
+++ b/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();
+ });
+});
diff --git a/src/app/settings/settings.service.ts b/src/app/settings/settings.service.ts
new file mode 100644
index 000000000..375da4f22
--- /dev/null
+++ b/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'));
+ }
+
+}
diff --git a/src/app/web-app.component.ts b/src/app/web-app.component.ts
index c86333ce7..a6e1da243 100644
--- a/src/app/web-app.component.ts
+++ b/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() {