[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

demo-shell-ng2/app/components/app-layout/app-layout.component.html

@@ -37,7 +37,7 @@
         <mat-menu #langMenu="matMenu">
             <button mat-menu-item (click)="changeLanguage('en')">English</button>
             <button mat-menu-item (click)="changeLanguage('it')">Italian</button>
-            <button mat-menu-item (click)="changeLanguage('ru')">Russian</button>
+            <button mat-menu-item (click)="changeLanguage('ja-JP')">Japanese</button>
         </mat-menu>
 
         <button mat-icon-button (click)="sidenav.open()">

demo-shell-ng2/app/components/app-layout/app-layout.component.ts

@@ -16,7 +16,7 @@
  */
 
 import { Component, ViewEncapsulation } from '@angular/core';
-import { AlfrescoTranslationService } from 'ng2-alfresco-core';
+import { AlfrescoTranslationService, UserPreferencesService } from 'ng2-alfresco-core';
 
 @Component({
     templateUrl: 'app-layout.component.html',
@@ -45,9 +45,9 @@ export class AppLayoutComponent {
         { href: '/about', icon: 'info_outline', title: 'About' }
     ];
 
-    constructor(private translateService: AlfrescoTranslationService) {}
+    constructor(private translateService: AlfrescoTranslationService, private preferences: UserPreferencesService) {}
 
     changeLanguage(lang: string) {
-        this.translateService.use(lang);
+        this.preferences.locale = lang;
     }
 }

ng2-components/ng2-activiti-analytics/src/components/widgets/date-range/date-range.widget.ts

@@ -20,7 +20,7 @@ import { AbstractControl, FormControl, FormGroup, Validators } from '@angular/fo
 import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material';
 import * as moment from 'moment';
 import { Moment } from 'moment';
-import { MOMENT_DATE_FORMATS, MomentDateAdapter } from 'ng2-alfresco-core';
+import { MOMENT_DATE_FORMATS, MomentDateAdapter, UserPreferencesService } from 'ng2-alfresco-core';
 
 @Component({
     selector: 'adf-date-range-widget',
@@ -50,10 +50,15 @@ export class DateRangeWidgetComponent implements OnInit {
     startDatePicker: Moment = moment();
     endDatePicker: Moment = moment();
 
-    constructor(public dateAdapter: DateAdapter<Moment>) {
+    constructor(
+        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;
 

ng2-components/ng2-activiti-form/src/components/widgets/date/date.widget.spec.ts

@@ -143,7 +143,7 @@ describe('DateWidgetComponent', () => {
                     expect(element.querySelector('#date-field-id')).toBeDefined();
                     expect(element.querySelector('#date-field-id')).not.toBeNull();
                     let dateElement: any = element.querySelector('#date-field-id');
-                    expect(dateElement.value).toEqual('9-9-9999');
+                    expect(dateElement.value).toContain('9-9-9999');
                 });
         }));
 
@@ -168,7 +168,7 @@ describe('DateWidgetComponent', () => {
                         expect(element.querySelector('#date-field-id')).toBeDefined();
                         expect(element.querySelector('#date-field-id')).not.toBeNull();
                         let dateElement: any = element.querySelector('#date-field-id');
-                        expect(dateElement.value).toEqual('9-9-9999');
+                        expect(dateElement.value).toContain('9-9-9999');
                     });
             });
             widget.checkVisibility(widget.field);

ng2-components/ng2-activiti-form/src/components/widgets/date/date.widget.ts

@@ -21,7 +21,7 @@ import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material';
 import * as moment from 'moment';
 import { Moment } from 'moment';
-import { MOMENT_DATE_FORMATS, MomentDateAdapter } from 'ng2-alfresco-core';
+import { MOMENT_DATE_FORMATS, MomentDateAdapter, UserPreferencesService } from 'ng2-alfresco-core';
 import { FormService } from './../../../services/form.service';
 import { baseHost , WidgetComponent } from './../widget.component';
 
@@ -42,11 +42,17 @@ export class DateWidgetComponent extends WidgetComponent implements OnInit {
 
     displayDate: Moment;
 
-    constructor(public formService: FormService, public dateAdapter: DateAdapter<Moment>) {
+    constructor(
+        public formService: FormService,
+        private dateAdapter: DateAdapter<Moment>,
+        private preferences: UserPreferencesService) {
         super(formService);
     }
 
     ngOnInit() {
+        this.preferences.locale$.subscribe( (locale) => {
+            this.dateAdapter.setLocale(locale);
+        });
         let momentDateAdapter = <MomentDateAdapter> this.dateAdapter;
         momentDateAdapter.overrideDisplyaFormat = this.field.dateDisplayFormat;
 

ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/date/date.editor.spec.ts

@@ -15,24 +15,41 @@
  * limitations under the License.
  */
 
+import { DebugElement } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import * as moment from 'moment';
-import { MomentDateAdapter } from 'ng2-alfresco-core';
+import { CoreModule } from 'ng2-alfresco-core';
+import { MaterialModule } from '../../../../material.module';
 import { FormFieldModel, FormModel } from '../../../index';
 import { DynamicTableColumn, DynamicTableModel, DynamicTableRow } from './../../dynamic-table.widget.model';
 import { DateEditorComponent } from './date.editor';
 
 describe('DateEditorComponent', () => {
-
+    let debugElement: DebugElement;
-    let nativeElement: any;
+    let element: HTMLElement;
     let component: DateEditorComponent;
+    let fixture: ComponentFixture<DateEditorComponent>;
     let row: DynamicTableRow;
     let column: DynamicTableColumn;
     let table: DynamicTableModel;
 
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            declarations: [
+                DateEditorComponent
+            ],
+            imports: [
+                CoreModule,
+                MaterialModule
+            ]
+        }).compileComponents();
+    }));
+
     beforeEach(() => {
-        nativeElement = {
+        fixture = TestBed.createComponent(DateEditorComponent);
-            querySelector: function () { return null; }
+        component = fixture.componentInstance;
-        };
+        element = fixture.nativeElement;
+        debugElement = fixture.debugElement;
 
         row = <DynamicTableRow> { value: { date: '1879-03-14T00:00:00.000Z' } };
         column = <DynamicTableColumn> { id: 'date', type: 'Date' };
@@ -40,12 +57,15 @@ describe('DateEditorComponent', () => {
         table = new DynamicTableModel(field, null);
         table.rows.push(row);
         table.columns.push(column);
-        component = new DateEditorComponent(new MomentDateAdapter());
         component.table = table;
         component.row = row;
         component.column = column;
     });
 
+    it('should create instance of DateEditorComponent', () => {
+        expect(fixture.componentInstance instanceof DateEditorComponent).toBe(true, 'should create DateEditorComponent');
+    });
+
     it('should update fow value on change', () => {
         component.ngOnInit();
         let newDate = moment('14-03-1879', 'DD-MM-YYYY');
@@ -72,4 +92,5 @@ describe('DateEditorComponent', () => {
 
         expect(table.flushValue).toHaveBeenCalled();
     });
+
 });

ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/date/date.editor.ts

@@ -21,7 +21,7 @@ import { Component, Input, OnInit } from '@angular/core';
 import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material';
 import * as moment from 'moment';
 import { Moment } from 'moment';
-import { MOMENT_DATE_FORMATS, MomentDateAdapter } from 'ng2-alfresco-core';
+import { MOMENT_DATE_FORMATS, MomentDateAdapter, UserPreferencesService } from 'ng2-alfresco-core';
 import { DynamicTableColumn, DynamicTableModel, DynamicTableRow } from './../../dynamic-table.widget.model';
 
 @Component({
@@ -50,10 +50,15 @@ export class DateEditorComponent implements OnInit {
     minDate: Moment;
     maxDate: Moment;
 
-    constructor(public dateAdapter: DateAdapter<Moment>) {
+    constructor(
+        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.DATE_FORMAT;
 

ng2-components/ng2-activiti-tasklist/src/components/start-task.component.ts

@@ -18,8 +18,9 @@
 import { Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
 import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material';
 import * as moment from 'moment';
+import { Moment } from 'moment';
 import { LightUserRepresentation, LogService, MOMENT_DATE_FORMATS,
-    MomentDateAdapter, PeopleProcessService } from 'ng2-alfresco-core';
+    MomentDateAdapter, PeopleProcessService, UserPreferencesService } from 'ng2-alfresco-core';
 import { Observable } from 'rxjs/Rx';
 import { Form } from '../models/form.model';
 import { StartTaskModel } from '../models/start-task.model';
@@ -71,12 +72,18 @@ export class StartTaskComponent implements OnInit {
      * @param translate
      * @param taskService
      */
-    constructor(private taskService: TaskListService,
+    constructor(
+        private taskService: TaskListService,
         private peopleService: PeopleProcessService,
+        private dateAdapter: DateAdapter<Moment>,
+        private preferences: UserPreferencesService,
         private logService: LogService) {
     }
 
     ngOnInit() {
+        this.preferences.locale$.subscribe( (locale) => {
+            this.dateAdapter.setLocale(locale);
+        });
         this.loadFormsTask();
         this.getUsers();
     }

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();
     }));

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;
 

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()
             ]
         });
 

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: [

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,

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
+                RouterTestingModule,
-            ],
+                TranslateModule.forRoot({
-            declarations: [
+                    loader: {
+                        provide: TranslateLoader,
+                        useClass: AlfrescoTranslateLoader
+                    }
+                })
             ],
             providers: [
                 AuthGuardBpm,

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,

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,

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,

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();
     }));

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,

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,

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,

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';
+    defaultLang: string;
-    userLang: string = 'en';
+    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.userPreference.locale$.subscribe( (locale) => {
+            this.userLang = locale;
             this.use(this.userLang);
+        });
 
         if (providers && providers.length > 0) {
             for (let provider of providers) {

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,
+                ...providers(),
-                StorageService,
                 UserPreferencesService
             ]
         }).compileComponents();
     }));
 
     beforeEach(() => {
-        let appConfig: AppConfigService = TestBed.get(AppConfigService);
+        appConfig = TestBed.get(AppConfigService);
-        appConfig.config.pagination = {
+        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');
+    });
+
 });

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 {
+    private localeSubject: BehaviorSubject<string> ;
-        return this.storage.getItem('USER_PROFILE') || 'GUEST';
+    locale$: Observable<string>;
-    }
-
-    setStoragePrefix(value: string) {
-        this.storage.setItem('USER_PROFILE', value || 'GUEST');
-    }
 
     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 {
+    get(property: string, defaultValue?: string): string {
-        return `${this.getStoragePrefix()}__${property}`;
+        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 {
+    getStoragePrefix(): string {
-        const key = this.getPropertyKey(property);
+        return this.storage.getItem('USER_PROFILE') || 'GUEST';
-        const value = this.storage.getItem(key);
-        if (value === undefined) {
-            return defaultValue;
     }
-        return value;
+
+    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';
+    }
+
 }