From 199a8b6c9c44c7c8a7303f82022bbf8956b2deed Mon Sep 17 00:00:00 2001 From: Karan Takalkar Date: Sun, 16 Aug 2020 20:08:28 +0530 Subject: [PATCH] feat: initialize language and date-format settings (#1214) See: #1213 --- .../create-office/create-office.component.ts | 6 +- src/app/settings/settings.component.html | 6 +- src/app/settings/settings.component.ts | 62 +++++++++++++++++-- src/app/settings/settings.service.spec.ts | 12 ++++ src/app/settings/settings.service.ts | 44 +++++++++++++ src/app/web-app.component.ts | 21 +++++-- 6 files changed, 137 insertions(+), 14 deletions(-) create mode 100644 src/app/settings/settings.service.spec.ts create mode 100644 src/app/settings/settings.service.ts 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() {