SHIBUI-814 Implemented service for messages

ui/src/app/app.component.ts

@@ -8,7 +8,7 @@ import * as fromRoot from './core/reducer';
 import { VersionInfo } from './core/model/version';
 import { VersionInfoLoadRequestAction } from './core/action/version.action';
 import { I18nService } from './core/service/i18n.service';
-import { SetLanguage } from './core/action/message.action';
+import { SetLocale } from './core/action/message.action';
 
 @Component({
     selector: 'app-root',
@@ -34,6 +34,6 @@ export class AppComponent implements OnInit {
 
     ngOnInit(): void {
         this.store.dispatch(new VersionInfoLoadRequestAction());
-        this.store.dispatch(new SetLanguage(this.i18nService.getCurrentLanguage()));
+        this.store.dispatch(new SetLocale(this.i18nService.getCurrentLocale()));
     }
 }

ui/src/app/app.module.ts

@@ -24,7 +24,7 @@ import { SharedModule } from './shared/shared.module';
 import { WizardModule } from './wizard/wizard.module';
 import { FormModule } from './schema-form/schema-form.module';
 import { environment } from '../environments/environment.prod';
-import { getCurrentLanguage } from './shared/util';
+import { getCurrentLocale } from './shared/util';
 
 @NgModule({
     declarations: [
@@ -55,7 +55,7 @@ import { getCurrentLanguage } from './shared/util';
         AppRoutingModule
     ],
     providers: [
-        { provide: LOCALE_ID, useValue: getCurrentLanguage() },
+        { provide: LOCALE_ID, useValue: getCurrentLocale(null) },
         NavigatorService,
         { provide: RouterStateSerializer, useClass: CustomRouterStateSerializer },
         {

ui/src/app/core/action/message.action.ts

@@ -5,7 +5,7 @@ export enum MessagesActionTypes {
     MESSAGES_LOAD_SUCCESS = '[Messages] Load SUCCESS',
     MESSAGES_LOAD_ERROR = '[Messages] Load ERROR',
 
-    SET_LANGUAGE = '[Messages] Set Language'
+    SET_LOCALE = '[Messages] Set Locale'
 }
 
 export class MessagesLoadRequestAction implements Action {
@@ -26,8 +26,8 @@ export class MessagesLoadErrorAction implements Action {
     constructor(public payload: { message: string, type: string }) { }
 }
 
-export class SetLanguage implements Action {
-    readonly type = MessagesActionTypes.SET_LANGUAGE;
+export class SetLocale implements Action {
+    readonly type = MessagesActionTypes.SET_LOCALE;
 
     constructor(public payload: string) {}
 }
@@ -36,4 +36,4 @@ export type Actions =
     | MessagesLoadRequestAction
     | MessagesLoadSuccessAction
     | MessagesLoadErrorAction
-    | SetLanguage;
+    | SetLocale;

ui/src/app/core/effect/message.effect.ts

@@ -9,7 +9,7 @@ import {
     MessagesLoadErrorAction,
     MessagesLoadRequestAction,
     MessagesLoadSuccessAction,
-    SetLanguage
+    SetLocale
 } from '../action/message.action';
 import { I18nService } from '../service/i18n.service';
 import * as fromCore from '../reducer';
@@ -21,18 +21,21 @@ export class MessageEffects {
     @Effect()
     loadMessages$ = this.actions$.pipe(
         ofType<MessagesLoadRequestAction>(MessagesActionTypes.MESSAGES_LOAD_REQUEST),
-        withLatestFrom(this.store.select(fromCore.getLanguage)),
-        switchMap(([action, lang]) => {
-            return this.i18nService.get(lang)
+        withLatestFrom(
+            this.store.select(fromCore.getLocale)
+        ),
+        map(([action, locale]) => locale.replace('-', '_')),
+        switchMap(locale =>
+            this.i18nService.get(locale)
                 .pipe(
                     map(u => new MessagesLoadSuccessAction({ ...u })),
                     catchError(error => of(new MessagesLoadErrorAction(error)))
-                );
-        })
+                )
+        )
     );
     @Effect()
     setLanguage$ = this.actions$.pipe(
-        ofType<SetLanguage>(MessagesActionTypes.SET_LANGUAGE),
+        ofType<SetLocale>(MessagesActionTypes.SET_LOCALE),
         map(action => action.payload),
         map(language => new MessagesLoadRequestAction())
     );

ui/src/app/core/reducer/index.ts

@@ -12,6 +12,7 @@ import * as fromUser from './user.reducer';
 import * as fromVersion from './version.reducer';
 import * as fromMessages from './message.reducer';
 import * as fromRoot from '../../app.reducer';
+import { getCurrentLanguage, getCurrentCountry } from '../../shared/util';
 
 export interface CoreState {
     user: fromUser.UserState;
@@ -45,6 +46,9 @@ export const getVersionLoading = createSelector(getVersionState, fromVersion.get
 export const getVersionError = createSelector(getVersionState, fromVersion.getVersionError);
 
 export const getMessageState = createSelector(getCoreFeature, getMessageStateFn);
-export const getLanguage = createSelector(getMessageState, fromMessages.getLanguage);
+export const getLocale = createSelector(getMessageState, fromMessages.getLocale);
+export const getLanguage = createSelector(getLocale, locale => getCurrentLanguage(locale));
+export const getCountry = createSelector(getLocale, locale => getCurrentCountry(locale));
+
 export const getMessages = createSelector(getMessageState, fromMessages.getMessages);
 export const getFetchingMessages = createSelector(getMessageState, fromMessages.isFetching);

ui/src/app/core/reducer/message.reducer.ts

@@ -8,14 +8,14 @@ export interface MessageState {
     fetching: boolean;
     messages: any;
     error: any;
-    language: string;
+    locale: string;
 }
 
 export const initialState: MessageState = {
     fetching: false,
     messages: null,
     error: null,
-    language: 'en'
+    locale: null
 };
 
 export function reducer(state = initialState, action: Actions): MessageState {
@@ -41,10 +41,10 @@ export function reducer(state = initialState, action: Actions): MessageState {
                 error: action.payload
             };
         }
-        case MessagesActionTypes.SET_LANGUAGE: {
+        case MessagesActionTypes.SET_LOCALE: {
             return {
                 ...state,
-                language: action.payload
+                locale: action.payload
             };
         }
         default: {
@@ -55,6 +55,6 @@ export function reducer(state = initialState, action: Actions): MessageState {
 
 
 export const getMessages = (state: MessageState) => state.messages;
-export const getLanguage = (state: MessageState) => state.language;
+export const getLocale = (state: MessageState) => state.locale;
 export const getError = (state: MessageState) => state.error;
 export const isFetching = (state: MessageState) => state.fetching;

ui/src/app/core/service/i18n.service.ts

@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
 import { HttpClient, HttpParams } from '@angular/common/http';
 import { NavigatorService } from './navigator.service';
-import { getCurrentLanguage } from '../../shared/util';
+import { getCurrentLanguage, getCurrentCountry, getCurrentLocale } from '../../shared/util';
 
 @Injectable()
 export class I18nService {
@@ -15,11 +15,9 @@ export class I18nService {
         private navigator: NavigatorService
     ) {}
 
-    get(language: string = null): Observable<any> {
+    get(locale: string): Observable<any> {
         let params: HttpParams = new HttpParams();
-        if (!!language) {
-            params = params.set('lang', language);
-        }
+        params = params.set('lang', locale);
         return this.http.get(`${ this.base }${this.path}`, {
             params
         });
@@ -28,4 +26,12 @@ export class I18nService {
     getCurrentLanguage(): string {
         return getCurrentLanguage(this.navigator.native);
     }
+
+    getCurrentCountry(): string {
+        return getCurrentCountry(this.navigator.native);
+    }
+
+    getCurrentLocale(): string {
+        return getCurrentLocale(this.navigator.native);
+    }
 }

ui/src/app/shared/util.ts

@@ -62,7 +62,15 @@ export function array_move(arr, old_index, new_index): any[] {
     return arr;
 }
 
-export function getCurrentLanguage(nav: any = null): string {
+export function getCurrentLanguage(locale: string): string {
+    return getCurrentLocale(locale).split('-', 1)[0];
+}
+
+export function getCurrentCountry(locale: string): string {
+    return getCurrentLocale(locale).split('-', 1)[1];
+}
+
+export function getCurrentLocale(nav: any = null): string {
     nav = nav || navigator;
     const getLocaleId = (lang: string) => lang.trim();
     // supported regional languages