i18n fixes (#1614)

* i18n fixes

- fix issue with default (fallback) language set to browser language
- fix issue with fallback language loading when browser language set to
non-English locale

* code and UI fixes

- move document list i18n strings into own scope
- replace MDL menu with @angular/material menu (fixes issue with menu
items translation, not supported by MDL)
- minor improvements

* fix unit tests

* improve i18n docs and code

- provide basic documentation for Translation service
- remove custom Login component localisation in favour of documentation
sample
- simplified i18n setup for demo shell (single path for dev/prod env)

* remove unnecessary comments

ng2-components/ng2-alfresco-core/README.md

@@ -64,7 +64,7 @@ npm install --save ng2-alfresco-core
 - **ContextMenuService**, global context menu APIs
 
 
-#### Alfresco Api Service
+## Alfresco Api Service
 
 Provides access to initialized **AlfrescoJSApi** instance.
 
@@ -96,7 +96,7 @@ let apiService: any = this.authService.getAlfrescoApi();
 apiService.nodes.addNode('-root-', body, {});
 ```
 
-#### Notification Service
+## Notification Service
 
 The Notification Service is implemented on top of the Angular 2 Material Design snackbar.
 Use this service to show a notification message, and optionaly get feedback from it.
@@ -133,7 +133,7 @@ export class MyComponent implements OnInit {
 }
 ```
 
-#### Context Menu directive
+## Context Menu directive
 
 _See **Demo Shell** or **DocumentList** implementation for more details and use cases._
 
@@ -169,7 +169,7 @@ export class MyComponent implements OnInit {
 }
 ```
 
-#### Authentication Service
+## Authentication Service
 
 The authentication service is used inside the [login component](../ng2-alfresco-login) and is possible to find there an example of how to use it.
 
@@ -182,27 +182,24 @@ import { CoreModule, AlfrescoSettingsService, AlfrescoAuthenticationService } fr
 @Component({
     selector: 'alfresco-app-demo',
     template: `
-               <div *ngIf="!authenticated" >
-                    Authentication failed to ip {{ ecmHost }} with user: admin, admin
-               </div>
-               <div *ngIf="authenticated">
-                    <H5>ECM</H5>
-                    Authentication successfull to ip {{ ecmHost }} with user: admin, admin<br> 
-                    your token is {{ tokenEcm }}<br>
-                    <H5>BPM</H5>
-                    Authentication successfull to ip {{ bpmHost }} with user: admin, admin<br> 
-                    your token is {{ tokenBpm }}<br>
-               </div>`
+        <div *ngIf="!authenticated" >
+            Authentication failed to ip {{ ecmHost }} with user: admin, admin
+        </div>
+        <div *ngIf="authenticated">
+            <H5>ECM</H5>
+            Authentication successfull to ip {{ ecmHost }} with user: admin, admin<br> 
+            your token is {{ tokenEcm }}<br>
+            <H5>BPM</H5>
+            Authentication successfull to ip {{ bpmHost }} with user: admin, admin<br> 
+            your token is {{ tokenBpm }}<br>
+        </div>
+    `
 })
 class MyDemoApp {
     authenticated: boolean = false;
-
-    public ecmHost: string = 'http://localhost:8080';
-
-    public bpmHost: string = 'http://localhost:9999';
-
+    ecmHost: string = 'http://localhost:8080';
+    bpmHost: string = 'http://localhost:9999';
     tokenBpm: string;
-
     tokenEcm: string;
 
     constructor(public alfrescoAuthenticationService: AlfrescoAuthenticationService,
@@ -246,7 +243,51 @@ export class AppModule {
 platformBrowserDynamic().bootstrapModule(AppModule);
 ```
 
-#### Renditions Service
+## AlfrescoTranslationService
+
+In order to enable localisation support you will need creating a `/resources/i18n/en.json` file 
+and registering path to it's parent `i18n` folder:
+
+```ts
+class MainApplication {
+    constructor(private translateService: AlfrescoTranslationService) {
+        translateService.addTranslationFolder('app', 'resources');
+    }
+}
+```
+
+Service also allows changing current language for entire application.
+Imagine you got a language picker that invokes `onLanguageClicked` method:
+
+```ts
+class MyComponent {
+    constructor(private translateService: AlfrescoTranslationService) {
+    }
+
+    onLanguageClicked(lang: string) {
+        this.translateService.use('en');
+    }
+}
+```
+
+It is also possible providing custom translations for existing components by overriding their resource paths:
+
+```ts
+class MyComponent {
+    constructor(private translateService: AlfrescoTranslationService) {
+        translateService.addTranslationFolder(
+            'ng2-alfresco-login', 
+            'i18n/custom-translation/alfresco-login'
+        );
+    }
+}
+```
+
+**Important note**: `addTranslationFolder` method redirects **all** languages to a new folder, you may need implementing multiple languages 
+or copying existing translation files to a new path.
+
+
+## Renditions Service
 
 * getRenditionsListByNodeId(nodeId: string)
 * createRendition(nodeId: string, encoding: string)

ng2-components/ng2-alfresco-core/src/services/alfresco-translate-loader.service.ts

@@ -44,6 +44,9 @@ export class AlfrescoTranslateLoader implements TranslateLoader {
 
     getComponentToFetch(lang: string) {
         let observableBatch = [];
+        if (!this.queue[lang]) {
+            this.queue[lang] = [];
+        }
         this._componentList.forEach((component) => {
             if (!this.isComponentInQueue(lang, component.name)) {
                 this.queue[lang].push(component.name);
@@ -67,7 +70,7 @@ export class AlfrescoTranslateLoader implements TranslateLoader {
     }
 
     isComponentInQueue(lang: string, name: string) {
-        return this.queue[lang].find(x => x === name) ? true : false;
+        return (this.queue[lang] || []).find(x => x === name) ? true : false;
     }
 
     getFullTranslationJSON(lang: string) {

ng2-components/ng2-alfresco-core/src/services/alfresco-translation.service.ts

@@ -22,24 +22,35 @@ import { AlfrescoTranslateLoader } from './alfresco-translate-loader.service';
 
 @Injectable()
 export class AlfrescoTranslationService {
+    defaultLang: string = 'en';
     userLang: string = 'en';
     customLoader: AlfrescoTranslateLoader;
 
     constructor(public translate: TranslateService) {
-        this.userLang = translate.getBrowserLang() || 'en';
-        translate.setDefaultLang(this.userLang);
+        this.userLang = translate.getBrowserLang() || this.defaultLang;
+        translate.setDefaultLang(this.defaultLang);
         this.customLoader = <AlfrescoTranslateLoader> this.translate.currentLoader;
-        this.customLoader.init(this.userLang);
+        this.use(this.userLang);
     }
 
     addTranslationFolder(name: string = '', path: string = '') {
         if (!this.customLoader.existComponent(name)) {
             this.customLoader.addComponentList(name, path);
-            this.translate.getTranslation(this.userLang).subscribe(
-                () => {
-                    this.translate.use(this.userLang);
-                }
-            );
+            if (this.userLang !== this.defaultLang) {
+                this.translate.getTranslation(this.defaultLang).subscribe(() => {
+                    this.translate.getTranslation(this.userLang).subscribe(
+                        () => {
+                            this.translate.use(this.userLang);
+                        }
+                    );
+                });
+            } else {
+                this.translate.getTranslation(this.userLang).subscribe(
+                    () => {
+                        this.translate.use(this.userLang);
+                    }
+                );
+            }
         }
     }