[ADF-1694] Datepicker should be localizable (#2471)

* Add locate as user preference property * The datepicker should be localizable. Save the locale as user preference The app should get the default locale from the store or appcongif or Browser or en * Fix build error * Fix unit test date widget * Needs more investigation * Fix import UserPreference * Rollback date format change
2025-07-31 17:38:48 +00:00 · 2017-10-17 14:12:07 +01:00
parent 415d6c7a4a
commit fa7f89c75f
24 changed files with 298 additions and 70 deletions
--- a/ng2-components/ng2-alfresco-core/src/components/view/card-view-dateitem.component.spec.ts
+++ b/ng2-components/ng2-alfresco-core/src/components/view/card-view-dateitem.component.spec.ts
@@ -16,11 +16,16 @@
 */

 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { HttpModule } from '@angular/http';
 import { MatDatepickerModule, MatInputModule, MatNativeDateModule } from '@angular/material';
 import { By } from '@angular/platform-browser';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
 import * as moment from 'moment';
+import { AppConfigService, providers } from '../../../index';
 import { CardViewDateItemModel } from '../../models/card-view-dateitem.model';
 import { CardViewUpdateService } from '../../services/card-view-update.service';
+import { AlfrescoTranslateLoader } from '../../services/translate-loader.service';
+
 import { CardViewDateItemComponent } from './card-view-dateitem.component';

 describe('CardViewDateItemComponent', () => {
@@ -31,15 +36,24 @@ describe('CardViewDateItemComponent', () => {
    beforeEach(async(() => {
        TestBed.configureTestingModule({
            imports: [
+                HttpModule,
                MatDatepickerModule,
                MatInputModule,
-                MatNativeDateModule
+                MatNativeDateModule,
+                TranslateModule.forRoot({
+                    loader: {
+                        provide: TranslateLoader,
+                        useClass: AlfrescoTranslateLoader
+                    }
+                })
            ],
            declarations: [
                CardViewDateItemComponent
            ],
            providers: [
-                CardViewUpdateService
+                CardViewUpdateService,
+                AppConfigService,
+                ...providers()
            ]
        }).compileComponents();
    }));
--- a/ng2-components/ng2-alfresco-core/src/components/view/card-view-dateitem.component.ts
+++ b/ng2-components/ng2-alfresco-core/src/components/view/card-view-dateitem.component.ts
@@ -22,6 +22,7 @@ import * as moment from 'moment';
 import { Moment } from 'moment';
 import { CardViewDateItemModel } from '../../models/card-view-dateitem.model';
 import { CardViewUpdateService } from '../../services/card-view-update.service';
+import { UserPreferencesService } from '../../services/user-preferences.service';
 import { MOMENT_DATE_FORMATS, MomentDateAdapter } from '../../utils/momentDateAdapter';

@Component({
@@ -47,10 +48,16 @@ export class CardViewDateItemComponent implements OnInit {

    valueDate: Moment;

-    constructor(private cardViewUpdateService: CardViewUpdateService, public dateAdapter: DateAdapter<Moment>) {
+    constructor(
+        private cardViewUpdateService: CardViewUpdateService,
+        private dateAdapter: DateAdapter<Moment>,
+        private preferences: UserPreferencesService) {
    }

    ngOnInit() {
+        this.preferences.locale$.subscribe( (locale) => {
+            this.dateAdapter.setLocale(locale);
+        });
        let momentDateAdapter = <MomentDateAdapter> this.dateAdapter;
        momentDateAdapter.overrideDisplyaFormat = this.SHOW_FORMAT;

--- a/ng2-components/ng2-alfresco-core/src/components/view/card-view.component.spec.ts
+++ b/ng2-components/ng2-alfresco-core/src/components/view/card-view.component.spec.ts
@@ -16,13 +16,21 @@
 */

 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
 import { FormsModule } from '@angular/forms';
+import { HttpModule } from '@angular/http';
 import { MatDatepickerModule, MatIconModule, MatInputModule, MatNativeDateModule } from '@angular/material';
 import { By } from '@angular/platform-browser';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { AppConfigService, providers } from '../../../index';
+
 import { BrowserDynamicTestingModule } from '@angular/platform-browser-dynamic/testing';
+
 import { CardViewDateItemModel } from '../../models/card-view-dateitem.model';
 import { CardViewTextItemModel } from '../../models/card-view-textitem.model';
 import { CardViewUpdateService } from '../../services/card-view-update.service';
+
+import { AlfrescoTranslateLoader } from '../../services/translate-loader.service';
 import { CardViewContentProxyDirective } from './card-view-content-proxy.directive';
 import { CardViewDateItemComponent } from './card-view-dateitem.component';
 import { CardViewItemDispatcherComponent } from './card-view-item-dispatcher.component';
@@ -37,11 +45,18 @@ describe('AdfCardView', () => {
    beforeEach(async(() => {
        TestBed.configureTestingModule({
            imports: [
+                HttpModule,
                MatDatepickerModule,
                MatIconModule,
                MatInputModule,
                MatNativeDateModule,
-                FormsModule
+                FormsModule,
+                TranslateModule.forRoot({
+                    loader: {
+                        provide: TranslateLoader,
+                        useClass: AlfrescoTranslateLoader
+                    }
+                })
            ],
            declarations: [
                CardViewComponent,
@@ -51,7 +66,9 @@ describe('AdfCardView', () => {
                CardViewDateItemComponent
            ],
            providers: [
-                CardViewUpdateService
+                CardViewUpdateService,
+                AppConfigService,
+                ...providers()
            ]
        });

--- a/ng2-components/ng2-alfresco-core/src/services/alfresco-content.service.spec.ts
+++ b/ng2-components/ng2-alfresco-core/src/services/alfresco-content.service.spec.ts
@@ -16,6 +16,7 @@
 */

 import { async, TestBed } from '@angular/core/testing';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
 import { CookieServiceMock } from './../assets/cookie.service.mock';
 import { AlfrescoApiService } from './alfresco-api.service';
 import { AlfrescoContentService } from './alfresco-content.service';
@@ -25,6 +26,7 @@ import { AuthenticationService } from './authentication.service';
 import { CookieService } from './cookie.service';
 import { LogService } from './log.service';
 import { StorageService } from './storage.service';
+import { AlfrescoTranslateLoader } from './translate-loader.service';
 import { UserPreferencesService } from './user-preferences.service';

 declare let jasmine: any;
@@ -42,7 +44,13 @@ describe('AlfrescoContentService', () => {
    beforeEach(async(() => {
        TestBed.configureTestingModule({
            imports: [
-                AppConfigModule
+                AppConfigModule,
+                TranslateModule.forRoot({
+                    loader: {
+                        provide: TranslateLoader,
+                        useClass: AlfrescoTranslateLoader
+                    }
+                })
            ],
            declarations: [],
            providers: [
--- a/ng2-components/ng2-alfresco-core/src/services/alfresco-settings.service.spec.ts
+++ b/ng2-components/ng2-alfresco-core/src/services/alfresco-settings.service.spec.ts
@@ -16,11 +16,13 @@
 */

 import { async, TestBed } from '@angular/core/testing';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
 import { AlfrescoApiService } from './alfresco-api.service';
 import { AlfrescoSettingsService } from './alfresco-settings.service';
 import { AppConfigModule } from './app-config.service';
 import { LogService } from './log.service';
 import { StorageService } from './storage.service';
+import { AlfrescoTranslateLoader } from './translate-loader.service';
 import { UserPreferencesService } from './user-preferences.service';

 describe('AlfrescoSettingsService', () => {
@@ -30,7 +32,13 @@ describe('AlfrescoSettingsService', () => {
    beforeEach(async(() => {
        TestBed.configureTestingModule({
            imports: [
-                AppConfigModule
+                AppConfigModule,
+                TranslateModule.forRoot({
+                    loader: {
+                        provide: TranslateLoader,
+                        useClass: AlfrescoTranslateLoader
+                    }
+                })
            ],
            providers: [
                AlfrescoApiService,
--- a/ng2-components/ng2-alfresco-core/src/services/auth-guard-bpm.service.spec.ts
+++ b/ng2-components/ng2-alfresco-core/src/services/auth-guard-bpm.service.spec.ts
@@ -18,7 +18,7 @@
 import { async, inject, TestBed } from '@angular/core/testing';
 import { Router } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
-
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
 import { CookieServiceMock } from './../assets/cookie.service.mock';
 import { AlfrescoApiService } from './alfresco-api.service';
 import { AlfrescoSettingsService } from './alfresco-settings.service';
@@ -28,6 +28,7 @@ import { AuthenticationService } from './authentication.service';
 import { CookieService } from './cookie.service';
 import { LogService } from './log.service';
 import { StorageService } from './storage.service';
+import { AlfrescoTranslateLoader } from './translate-loader.service';
 import { UserPreferencesService } from './user-preferences.service';

 describe('AuthGuardService BPM', () => {
@@ -36,9 +37,13 @@ describe('AuthGuardService BPM', () => {
        TestBed.configureTestingModule({
            imports: [
                AppConfigModule,
-                RouterTestingModule
-            ],
-            declarations: [
+                RouterTestingModule,
+                TranslateModule.forRoot({
+                    loader: {
+                        provide: TranslateLoader,
+                        useClass: AlfrescoTranslateLoader
+                    }
+                })
            ],
            providers: [
                AuthGuardBpm,
--- a/ng2-components/ng2-alfresco-core/src/services/auth-guard.service.spec.ts
+++ b/ng2-components/ng2-alfresco-core/src/services/auth-guard.service.spec.ts
@@ -18,6 +18,7 @@
 import { async, inject, TestBed } from '@angular/core/testing';
 import { Router } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';

 import { CookieServiceMock } from './../assets/cookie.service.mock';
 import { AlfrescoApiService } from './alfresco-api.service';
@@ -28,6 +29,7 @@ import { AuthenticationService } from './authentication.service';
 import { CookieService } from './cookie.service';
 import { LogService } from './log.service';
 import { StorageService } from './storage.service';
+import { AlfrescoTranslateLoader } from './translate-loader.service';
 import { UserPreferencesService } from './user-preferences.service';

 describe('AuthGuardService', () => {
@@ -36,7 +38,13 @@ describe('AuthGuardService', () => {
        TestBed.configureTestingModule({
            imports: [
                AppConfigModule,
-                RouterTestingModule
+                RouterTestingModule,
+                TranslateModule.forRoot({
+                    loader: {
+                        provide: TranslateLoader,
+                        useClass: AlfrescoTranslateLoader
+                    }
+                })
            ],
            providers: [
                AuthGuard,
--- a/ng2-components/ng2-alfresco-core/src/services/authentication.service.spec.ts
+++ b/ng2-components/ng2-alfresco-core/src/services/authentication.service.spec.ts
@@ -16,6 +16,7 @@
 */

 import { async, TestBed } from '@angular/core/testing';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
 import { CookieServiceMock } from './../assets/cookie.service.mock';
 import { AlfrescoApiService } from './alfresco-api.service';
 import { AlfrescoSettingsService } from './alfresco-settings.service';
@@ -24,6 +25,7 @@ import { AuthenticationService } from './authentication.service';
 import { CookieService } from './cookie.service';
 import { LogService } from './log.service';
 import { StorageService } from './storage.service';
+import { AlfrescoTranslateLoader } from './translate-loader.service';
 import { UserPreferencesService } from './user-preferences.service';

 declare let jasmine: any;
@@ -39,7 +41,13 @@ describe('AuthenticationService', () => {
    beforeEach(async(() => {
        TestBed.configureTestingModule({
            imports: [
-                AppConfigModule
+                AppConfigModule,
+                TranslateModule.forRoot({
+                    loader: {
+                        provide: TranslateLoader,
+                        useClass: AlfrescoTranslateLoader
+                    }
+                })
            ],
            providers: [
                AlfrescoSettingsService,
--- a/ng2-components/ng2-alfresco-core/src/services/search.service.spec.ts
+++ b/ng2-components/ng2-alfresco-core/src/services/search.service.spec.ts
@@ -16,6 +16,7 @@
 */

 import { async, TestBed } from '@angular/core/testing';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
 import { fakeApi, fakeError, fakeSearch } from '../assets/search.service.mock';
 import { CookieServiceMock } from './../assets/cookie.service.mock';
 import { AlfrescoApiService } from './alfresco-api.service';
@@ -26,6 +27,7 @@ import { CookieService } from './cookie.service';
 import { LogService } from './log.service';
 import { SearchService } from './search.service';
 import { StorageService } from './storage.service';
+import { AlfrescoTranslateLoader } from './translate-loader.service';
 import { UserPreferencesService } from './user-preferences.service';

 describe('SearchService', () => {
@@ -36,7 +38,13 @@ describe('SearchService', () => {
    beforeEach(async(() => {
        TestBed.configureTestingModule({
            imports: [
-                AppConfigModule
+                AppConfigModule,
+                TranslateModule.forRoot({
+                    loader: {
+                        provide: TranslateLoader,
+                        useClass: AlfrescoTranslateLoader
+                    }
+                })
            ],
            providers: [
                SearchService,
--- a/ng2-components/ng2-alfresco-core/src/services/sites-api.service.spec.ts
+++ b/ng2-components/ng2-alfresco-core/src/services/sites-api.service.spec.ts
@@ -16,12 +16,15 @@
 */

 import { async, TestBed } from '@angular/core/testing';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
 import { AlfrescoApiService } from './alfresco-api.service';
 import { AlfrescoSettingsService } from './alfresco-settings.service';
 import { AppConfigModule, AppConfigService } from './app-config.service';
 import { AuthenticationService } from './authentication.service';
+import { LogService } from './log.service';
 import { SitesApiService } from './sites-api.service';
 import { StorageService } from './storage.service';
+import { AlfrescoTranslateLoader } from './translate-loader.service';
 import { UserPreferencesService } from './user-preferences.service';

 declare let jasmine: any;
@@ -33,7 +36,13 @@ describe('Sites service', () => {
    beforeEach(async(() => {
        TestBed.configureTestingModule({
            imports: [
-                AppConfigModule
+                AppConfigModule,
+                TranslateModule.forRoot({
+                    loader: {
+                        provide: TranslateLoader,
+                        useClass: AlfrescoTranslateLoader
+                    }
+                })
            ],
            providers: [
                SitesApiService,
@@ -41,7 +50,8 @@ describe('Sites service', () => {
                UserPreferencesService,
                AuthenticationService,
                AlfrescoSettingsService,
-                StorageService
+                StorageService,
+                LogService
            ]
        }).compileComponents();
    }));
--- a/ng2-components/ng2-alfresco-core/src/services/thumbnail.service.spec.ts
+++ b/ng2-components/ng2-alfresco-core/src/services/thumbnail.service.spec.ts
@@ -17,6 +17,7 @@

 import { async, TestBed } from '@angular/core/testing';
 import { HttpModule } from '@angular/http';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
 import { CookieServiceMock } from './../assets/cookie.service.mock';
 import { AlfrescoApiService } from './alfresco-api.service';
 import { AlfrescoContentService } from './alfresco-content.service';
@@ -27,6 +28,7 @@ import { CookieService } from './cookie.service';
 import { LogService } from './log.service';
 import { StorageService } from './storage.service';
 import { ThumbnailService } from './thumbnail.service';
+import { AlfrescoTranslateLoader } from './translate-loader.service';
 import { UserPreferencesService } from './user-preferences.service';

 describe('ThumbnailService', () => {
@@ -36,7 +38,13 @@ describe('ThumbnailService', () => {
    beforeEach(async(() => {
        TestBed.configureTestingModule({
            imports: [
-                HttpModule
+                HttpModule,
+                TranslateModule.forRoot({
+                    loader: {
+                        provide: TranslateLoader,
+                        useClass: AlfrescoTranslateLoader
+                    }
+                })
            ],
            providers: [
                UserPreferencesService,
--- a/ng2-components/ng2-alfresco-core/src/services/translate-loader.spec.ts
+++ b/ng2-components/ng2-alfresco-core/src/services/translate-loader.spec.ts
@@ -20,10 +20,14 @@ import { getTestBed, TestBed } from '@angular/core/testing';
 import { HttpModule, Response, ResponseOptions, XHRBackend } from '@angular/http';
 import { MockBackend, MockConnection } from '@angular/http/testing';
 import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { AppConfigService } from './app-config.service';

+import { AlfrescoApiService } from '../services/alfresco-api.service';
 import { LogService } from './log.service';
+import { StorageService } from './storage.service';
 import { AlfrescoTranslateLoader } from './translate-loader.service';
 import { TRANSLATION_PROVIDER, TranslationService } from './translation.service';
+import { UserPreferencesService } from './user-preferences.service';

 let componentJson1 = ' {"TEST": "This is a test", "TEST2": "This is another test"} ' ;

@@ -52,6 +56,10 @@ describe('TranslateLoader', () => {
            providers: [
                TranslationService,
                LogService,
+                AlfrescoApiService,
+                StorageService,
+                UserPreferencesService,
+                AppConfigService,
                { provide: XHRBackend, useClass: MockBackend },
                {
                    provide: TRANSLATION_PROVIDER,
--- a/ng2-components/ng2-alfresco-core/src/services/translation.service.spec.ts
+++ b/ng2-components/ng2-alfresco-core/src/services/translation.service.spec.ts
@@ -21,9 +21,13 @@ import { HttpModule, Response, ResponseOptions, XHRBackend } from '@angular/http
 import { MockBackend, MockConnection } from '@angular/http/testing';
 import { TranslateLoader, TranslateModule } from '@ngx-translate/core';

+import { AlfrescoApiService } from '../services/alfresco-api.service';
+import { AppConfigService } from './app-config.service';
 import { LogService } from './log.service';
+import { StorageService } from './storage.service';
 import { AlfrescoTranslateLoader } from './translate-loader.service';
 import { TRANSLATION_PROVIDER, TranslationService } from './translation.service';
+import { UserPreferencesService } from './user-preferences.service';

 const mockBackendResponse = (connection: MockConnection, response: string) => {
    connection.mockRespond(new Response(new ResponseOptions({body: response})));
@@ -49,6 +53,10 @@ describe('TranslationService', () => {
            providers: [
                TranslationService,
                LogService,
+                AlfrescoApiService,
+                StorageService,
+                UserPreferencesService,
+                AppConfigService,
                { provide: XHRBackend, useClass: MockBackend },
                {
                    provide: TRANSLATION_PROVIDER,
--- a/ng2-components/ng2-alfresco-core/src/services/translation.service.ts
+++ b/ng2-components/ng2-alfresco-core/src/services/translation.service.ts
@@ -19,6 +19,7 @@ import { Inject, Injectable, OpaqueToken } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 import { Observable } from 'rxjs/Rx';
 import { AlfrescoTranslateLoader } from './translate-loader.service';
+import { UserPreferencesService } from './user-preferences.service';

 export const TRANSLATION_PROVIDER = new OpaqueToken('Injection token for translation providers.');

@@ -29,17 +30,22 @@ export interface TranslationProvider {

@Injectable()
 export class TranslationService {
-    defaultLang: string = 'en';
-    userLang: string = 'en';
+    defaultLang: string;
+    userLang: string;
    customLoader: AlfrescoTranslateLoader;

    constructor(public translate: TranslateService,
+                private userPreference: UserPreferencesService,
                @Inject(TRANSLATION_PROVIDER) providers: TranslationProvider[]) {
-        this.userLang = translate.getBrowserLang() || this.defaultLang;
+        this.customLoader = <AlfrescoTranslateLoader> this.translate.currentLoader;
+
+        this.defaultLang = this.userPreference.getDefaultLocale();
        translate.setDefaultLang(this.defaultLang);

-        this.customLoader = <AlfrescoTranslateLoader> this.translate.currentLoader;
-        this.use(this.userLang);
+        this.userPreference.locale$.subscribe( (locale) => {
+            this.userLang = locale;
+            this.use(this.userLang);
+        });

        if (providers && providers.length > 0) {
            for (let provider of providers) {
--- a/ng2-components/ng2-alfresco-core/src/services/user-preferences.service.spec.ts
+++ b/ng2-components/ng2-alfresco-core/src/services/user-preferences.service.spec.ts
@@ -16,9 +16,12 @@
 */

 import { async, TestBed } from '@angular/core/testing';
-import { AlfrescoApiService } from './alfresco-api.service';
+import { TranslateLoader, TranslateModule, TranslateService } from '@ngx-translate/core';
+import { providers } from '../../index';
+
 import { AppConfigModule, AppConfigService } from './app-config.service';
 import { StorageService } from './storage.service';
+import { AlfrescoTranslateLoader } from './translate-loader.service';
 import { UserPreferencesService } from './user-preferences.service';

 describe('UserPreferencesService', () => {
@@ -26,27 +29,37 @@ describe('UserPreferencesService', () => {
    const defaultPaginationSize: number = 10;
    let preferences: UserPreferencesService;
    let storage: StorageService;
+    let appConfig: AppConfigService;
+    let translate: TranslateService;

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            imports: [
-                AppConfigModule
+                AppConfigModule,
+                TranslateModule.forRoot({
+                    loader: {
+                        provide: TranslateLoader,
+                        useClass: AlfrescoTranslateLoader
+                    }
+                })
            ],
            providers: [
-                AlfrescoApiService,
-                StorageService,
+                ...providers(),
                UserPreferencesService
            ]
        }).compileComponents();
    }));

    beforeEach(() => {
-        let appConfig: AppConfigService = TestBed.get(AppConfigService);
-        appConfig.config.pagination = {
-            size: 10
+        appConfig = TestBed.get(AppConfigService);
+        appConfig.config = {
+            pagination: {
+                size: 10
+            }
        };
        preferences = TestBed.get(UserPreferencesService);
        storage = TestBed.get(StorageService);
+        translate = TestBed.get(TranslateService);
    });

    it('should get default pagination from app config', () => {
@@ -95,4 +108,27 @@ describe('UserPreferencesService', () => {
        expect(preferences.paginationSize).toBe(defaultPaginationSize);
    });

+    it('should return as default locale the app.config locate as first', () => {
+        appConfig.config.locale = 'fake-locate-config';
+        spyOn(translate, 'getBrowserLang').and.returnValue('fake-locate-browser');
+        expect(preferences.getDefaultLocale()).toBe('fake-locate-config');
+    });
+
+    it('should return as default locale the browser locale as second', () => {
+        spyOn(translate, 'getBrowserLang').and.returnValue('fake-locate-browser');
+        expect(preferences.getDefaultLocale()).toBe('fake-locate-browser');
+    });
+
+    it('should return as default locale the component propery as third ', () => {
+        spyOn(translate, 'getBrowserLang').and.stub();
+        expect(preferences.getDefaultLocale()).toBe('en');
+    });
+
+    it('should return as locale the store locate', () => {
+        preferences.locale = 'fake-store-locate';
+        appConfig.config.locale = 'fake-locate-config';
+        spyOn(translate, 'getBrowserLang').and.returnValue('fake-locate-browser');
+        expect(preferences.locale).toBe('fake-store-locate');
+    });
+
 });
--- a/ng2-components/ng2-alfresco-core/src/services/user-preferences.service.ts
+++ b/ng2-components/ng2-alfresco-core/src/services/user-preferences.service.ts
@@ -16,6 +16,9 @@
 */

 import { Injectable } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+import { BehaviorSubject } from 'rxjs/BehaviorSubject';
+import { Observable } from 'rxjs/Rx';
 import { AlfrescoApiService } from './alfresco-api.service';
 import { AppConfigService } from './app-config.service';
 import { StorageService } from './storage.service';
@@ -24,27 +27,32 @@ import { StorageService } from './storage.service';
 export class UserPreferencesService {

    private defaults = {
-        paginationSize: 25
+        paginationSize: 25,
+        locale: 'en'
    };

-    getStoragePrefix(): string {
-        return this.storage.getItem('USER_PROFILE') || 'GUEST';
-    }
-
-    setStoragePrefix(value: string) {
-        this.storage.setItem('USER_PROFILE', value || 'GUEST');
-    }
+    private localeSubject: BehaviorSubject<string> ;
+    locale$: Observable<string>;

    constructor(
-        appConfig: AppConfigService,
+        public translate: TranslateService,
+        private appConfig: AppConfigService,
        private storage: StorageService,
        private apiService: AlfrescoApiService
    ) {
+        const currentLocale = this.locale || this.getDefaultLocale();
+        this.localeSubject = new BehaviorSubject(currentLocale);
+        this.locale$ = this.localeSubject.asObservable();
        this.defaults.paginationSize = appConfig.get('pagination.size', 25);
    }

-    getPropertyKey(property: string): string {
-        return `${this.getStoragePrefix()}__${property}`;
+    get(property: string, defaultValue?: string): string {
+        const key = this.getPropertyKey(property);
+        const value = this.storage.getItem(key);
+        if (value === undefined) {
+            return defaultValue;
+        }
+        return value;
    }

    set(property: string, value: any) {
@@ -56,13 +64,16 @@ export class UserPreferencesService {
        );
    }

-    get(property: string, defaultValue?: string): string {
-        const key = this.getPropertyKey(property);
-        const value = this.storage.getItem(key);
-        if (value === undefined) {
-            return defaultValue;
-        }
-        return value;
+    getStoragePrefix(): string {
+        return this.storage.getItem('USER_PROFILE') || 'GUEST';
+    }
+
+    setStoragePrefix(value: string) {
+        this.storage.setItem('USER_PROFILE', value || 'GUEST');
+    }
+
+    getPropertyKey(property: string): string {
+        return `${this.getStoragePrefix()}__${property}`;
    }

    set authType(value: string) {
@@ -91,4 +102,18 @@ export class UserPreferencesService {
        return Number(this.get('PAGINATION_SIZE')) || this.defaults.paginationSize;
    }

+    get locale(): string {
+        const locale = this.get('LOCALE');
+        return locale;
+    }
+
+    set locale(value: string) {
+        this.localeSubject.next(value);
+        this.set('LOCALE', value);
+    }
+
+    public getDefaultLocale(): string {
+        return this.appConfig.get<string>('locale') || this.translate.getBrowserLang() || 'en';
+    }
+
 }