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

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

@@ -39,14 +39,14 @@
                 <span class="flag-icon flag-icon-gb"></span>
                 <label tabindex="0"> English</label>
             </a>
-            <a class="mdl-navigation__link" (click)="changeLanguage('gr')">
-                <span class="flag-icon flag-icon-gr"></span>
-                <label tabindex="0"> Greek</label>
-            </a>
             <a class="mdl-navigation__link" (click)="changeLanguage('it')">
                 <span class="flag-icon flag-icon-it"></span>
                 <label tabindex="0"> Italian</label>
             </a>
+            <a class="mdl-navigation__link" (click)="changeLanguage('ru')">
+                <span class="flag-icon flag-icon-ru"></span>
+                <label tabindex="0"> Russian</label>
+            </a>
         </nav>
         <span class="mdl-layout-title">Components</span>
         <nav class="mdl-navigation">

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

@@ -43,13 +43,7 @@ export class AppComponent {
         this.setProvider();
 
         if (translateService) {
-            if (process.env.ENV === 'production') {
+            translateService.addTranslationFolder('app', 'resources');
-                translateService.addTranslationFolder('custom', 'i18n/custom-translation');
-                translateService.addTranslationFolder('ng2-alfresco-login', 'i18n/custom-translation/alfresco-login');
-            } else {
-                translateService.addTranslationFolder('custom', 'custom-translation');
-                translateService.addTranslationFolder('ng2-alfresco-login', 'custom-translation/alfresco-login');
-            }
         }
     }
 
@@ -75,7 +69,7 @@ export class AppComponent {
             );
     }
 
-    navigateToLogin(){
+    navigateToLogin() {
         this.router.navigate(['/login']);
         this.hideDrawer();
     }

demo-shell-ng2/config/webpack.prod.js

@@ -66,9 +66,9 @@ module.exports = webpackMerge(commonConfig, {
             to: 'pdf.worker.js'
         },
         {
-            context: 'custom-translation',
+            context: 'resources/i18n',
             from: '**/*.json',
-            to: 'i18n/custom-translation'
+            to: 'resources/i18n'
         },
         // Copy i18n folders for all modules with ng2-alfresco- prefix
         {

demo-shell-ng2/custom-translation/alfresco-login/i18n/en.json

@@ -1,29 +0,0 @@
-{
-    "LOGIN": {
-        "LOGO": "Alfresco",
-        "LABEL": {
-            "LOGIN": "Login",
-            "USERNAME": "Username",
-            "PASSWORD": "Password",
-            "REMEMBER": "Remember"
-        },
-        "MESSAGES": {
-            "USERNAME-REQUIRED": "Required",
-            "USERNAME-MIN": "Your username needs to be at least {{customMinLenght}} characters.",
-            "PASSWORD-REQUIRED": "Enter your password to sign in",
-            "LOGIN-ERROR-CREDENTIALS": "You have entered an invalid username or password",
-            "LOGIN-ERROR-PROVIDERS": "Providers cannot be undefined",
-            "LOGIN-SUCCESS": "Login successful",
-            "LOGIN-ERROR-CORS": "CORS exception, check your server configuration",
-            "LOGIN-ERROR-CSRF": "CSRF exception, set [disableCsrf]=\"true\" in alfresco-login component",
-            "LOGIN-ECM-LICENSE": "The ECM is in read-only mode"
-        },
-        "BUTTON": {
-            "LOGIN": "SIGN IN"
-        },
-        "ACTION": {
-            "HELP": "NEED HELP?",
-            "REGISTER": "REGISTER"
-        }
-    }
-}

demo-shell-ng2/custom-translation/alfresco-login/i18n/it.json

@@ -1,28 +0,0 @@
-{
-    "LOGIN": {
-        "LABEL": {
-            "LOGIN": "Autenticazione",
-            "USERNAME": "Nome utente",
-            "PASSWORD": "Password",
-            "REMEMBER": "Ricordami"
-        },
-        "MESSAGES": {
-            "USERNAME-REQUIRED": "Campo obbligatorio",
-            "USERNAME-MIN": "Inserire un nome utente di minimo 4 caratteri.",
-            "PASSWORD-REQUIRED": "Campo obbligatorio",
-            "LOGIN-ERROR-CREDENTIALS": "Nome utente o password non validi",
-            "LOGIN-ERROR-PROVIDERS": "Providers non può essere nullo",
-            "LOGIN-SUCCESS": "Login effettuata con successo",
-            "LOGIN-ERROR-CORS": "CORS exception, controlla le configurazioni del tuo server",
-            "LOGIN-ERROR-CSRF": "CSRF exception, set [disableCsrf]=\"true\" in alfresco-login component",
-            "LOGIN-ECM-LICENSE": "l'ECM e' in read-only mode"
-        },
-        "BUTTON": {
-            "LOGIN": "Accedi"
-        },
-        "ACTION": {
-            "HELP": "BISOGNO DI AIUTO?",
-            "REGISTER": "REGISTRATI"
-        }
-    }
-}

ng2-components/ng2-activiti-tasklist/src/components/activiti-checklist.component.spec.ts

@@ -51,7 +51,7 @@ describe('ActivitiChecklist', () => {
         }).compileComponents().then(() => {
             let translateService = TestBed.get(AlfrescoTranslationService);
             spyOn(translateService, 'addTranslationFolder').and.stub();
-            spyOn(translateService, 'get').and.callFake((key) => {
+            spyOn(translateService.translate, 'get').and.callFake((key) => {
                 return Observable.of(key);
             });
 

ng2-components/ng2-activiti-tasklist/src/components/activiti-people-search.component.spec.ts

@@ -58,7 +58,7 @@ describe('ActivitiPeopleSearch', () => {
 
             let translateService = TestBed.get(AlfrescoTranslationService);
             spyOn(translateService, 'addTranslationFolder').and.stub();
-            spyOn(translateService, 'get').and.callFake((key) => { return Observable.of(key); });
+            spyOn(translateService.translate, 'get').and.callFake((key) => { return Observable.of(key); });
 
             fixture = TestBed.createComponent(ActivitiPeopleSearch);
             activitiPeopleSearchComponent = fixture.componentInstance;

ng2-components/ng2-activiti-tasklist/src/components/activiti-people.component.spec.ts

@@ -64,7 +64,7 @@ describe('ActivitiPeople', () => {
 
             let translateService = TestBed.get(AlfrescoTranslationService);
             spyOn(translateService, 'addTranslationFolder').and.stub();
-            spyOn(translateService, 'get').and.callFake((key) => { return Observable.of(key); });
+            spyOn(translateService.translate, 'get').and.callFake((key) => { return Observable.of(key); });
 
             fixture = TestBed.createComponent(ActivitiPeople);
             activitiPeopleComponent = fixture.componentInstance;

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

@@ -45,7 +45,7 @@ describe('ActivitiStartTaskButton', () => {
         }).compileComponents().then(() => {
             let translateService = TestBed.get(AlfrescoTranslationService);
             spyOn(translateService, 'addTranslationFolder').and.stub();
-            spyOn(translateService, 'get').and.callFake((key) => { return Observable.of(key); });
+            spyOn(translateService.translate, 'get').and.callFake((key) => { return Observable.of(key); });
 
             fixture = TestBed.createComponent(ActivitiStartTaskButton);
             activitiStartTaskButton = fixture.componentInstance;

ng2-components/ng2-activiti-tasklist/src/components/activiti-task-details.component.spec.ts

@@ -59,7 +59,7 @@ describe('ActivitiTaskDetails', () => {
 
         let translateService = TestBed.get(AlfrescoTranslationService);
         spyOn(translateService, 'addTranslationFolder').and.stub();
-        spyOn(translateService, 'get').and.callFake((key) => { return Observable.of(key); });
+        spyOn(translateService.translate, 'get').and.callFake((key) => { return Observable.of(key); });
     }));
 
     beforeEach(() => {

ng2-components/ng2-activiti-tasklist/src/components/activiti-task-header.component.spec.ts

@@ -47,7 +47,7 @@ describe('ActivitiTaskHeader', () => {
 
         let translateService = TestBed.get(AlfrescoTranslationService);
         spyOn(translateService, 'addTranslationFolder').and.stub();
-        spyOn(translateService, 'get').and.callFake((key) => { return Observable.of(key); });
+        spyOn(translateService.translate, 'get').and.callFake((key) => { return Observable.of(key); });
     }));
 
     beforeEach(() => {

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" >
+        <div *ngIf="!authenticated" >
-                    Authentication failed to ip {{ ecmHost }} with user: admin, admin
+            Authentication failed to ip {{ ecmHost }} with user: admin, admin
-               </div>
+        </div>
-               <div *ngIf="authenticated">
+        <div *ngIf="authenticated">
-                    <H5>ECM</H5>
+            <H5>ECM</H5>
-                    Authentication successfull to ip {{ ecmHost }} with user: admin, admin<br> 
+            Authentication successfull to ip {{ ecmHost }} with user: admin, admin<br> 
-                    your token is {{ tokenEcm }}<br>
+            your token is {{ tokenEcm }}<br>
-                    <H5>BPM</H5>
+            <H5>BPM</H5>
-                    Authentication successfull to ip {{ bpmHost }} with user: admin, admin<br> 
+            Authentication successfull to ip {{ bpmHost }} with user: admin, admin<br> 
-                    your token is {{ tokenBpm }}<br>
+            your token is {{ tokenBpm }}<br>
-               </div>`
+        </div>
+    `
 })
 class MyDemoApp {
     authenticated: boolean = false;
-
+    ecmHost: string = 'http://localhost:8080';
-    public ecmHost: string = 'http://localhost:8080';
+    bpmHost: string = 'http://localhost:9999';
-
-    public 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';
+        this.userLang = translate.getBrowserLang() || this.defaultLang;
-        translate.setDefaultLang(this.userLang);
+        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(
+            if (this.userLang !== this.defaultLang) {
-                () => {
+                this.translate.getTranslation(this.defaultLang).subscribe(() => {
-                    this.translate.use(this.userLang);
+                    this.translate.getTranslation(this.userLang).subscribe(
-                }
+                        () => {
-            );
+                            this.translate.use(this.userLang);
+                        }
+                    );
+                });
+            } else {
+                this.translate.getTranslation(this.userLang).subscribe(
+                    () => {
+                        this.translate.use(this.userLang);
+                    }
+                );
+            }
         }
     }
 

ng2-components/ng2-alfresco-documentlist/src/components/document-menu-action.component.css

@@ -17,69 +17,3 @@
     transition: height .35s cubic-bezier(0.4,0.0,1,1),border-color .4s;
     z-index: 5;
 }
-
-.action {
-    max-width: 394px;
-    min-width: 150px;
-}
-
-.action {
-    -webkit-align-items: flex-end;
-    align-items: flex-end;
-    display: -webkit-box;
-    display: -moz-box;
-    display: -ms-flexbox;
-    display: -webkit-flex;
-    display: flex;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    padding: 13px 0 11px 30px;
-    -webkit-transition: padding .35s cubic-bezier(0.4, 0.0, 1, 1);
-    transition: padding .35s cubic-bezier(0.4, 0.0, 1, 1);
-}
-
-.mdl-menu__item-primary-content {
-    box-sizing: border-box;
-    display: -webkit-flex;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-align-items: center;
-    -ms-flex-align: center;
-    align-items: center;
-}
-
-.mdl-menu__item-primary-content {
-    -webkit-order: 0;
-    -ms-flex-order: 0;
-    order: 0;
-    -webkit-flex-grow: 2;
-    -ms-flex-positive: 2;
-    flex-grow: 2;
-    text-decoration: none;
-}
-
-.mdl-menu__item-primary-content {
-    box-sizing: border-box;
-    display: -webkit-flex;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-align-items: center;
-    -ms-flex-align: center;
-    align-items: center;
-
-}
-
-.mdl-menu__item-icon {
-    margin-right: 32px;
-    margin-top: 10px;
-    margin-left: 10px;
-}
-
-.mdl-menu--bottom-left {
-    width: 200px;
-}
-
-.mdl-menu__text {
-    float: right;
-    margin-right: 22px;
-}

ng2-components/ng2-alfresco-documentlist/src/components/document-menu-action.component.html

@@ -1,21 +1,18 @@
 <div class="container">
-    <div class="action">
+    <button md-button [mdMenuTriggerFor]="menu">
-        <button id="actions" class="mdl-button mdl-js-button mdl-button--raised">
+        <md-icon>add</md-icon>
-            <i class="material-icons">add</i> {{ 'BUTTON.ACTION_CREATE' | translate }}
+        <span>{{ 'ALFRESCO_DOCUMENT_LIST.BUTTON.ACTION_CREATE' | translate }}</span>
+    </button>
+    <md-menu #menu="mdMenu">
+        <button md-menu-item (click)="showDialog()">
+            <md-icon>create_new_folder</md-icon>
+            <span>{{ 'ALFRESCO_DOCUMENT_LIST.BUTTON.ACTION_NEW_FOLDER' | translate }}</span>
         </button>
-        <ul alfresco-mdl-menu class="mdl-menu--bottom-left"
+    </md-menu>
-            [attr.for]="'actions'">
-            <li class="mdl-menu__item"
-                (click)="showDialog()" >
-                <i style="float: left;" class="material-icons mdl-menu__item-icon">folder</i>
-                <span class="mdl-menu__text">{{ 'BUTTON.ACTION_NEW_FOLDER' | translate }}</span>
-            </li>
-        </ul>
-    </div>
 </div>
 
 <dialog class="mdl-dialog" #dialog>
-    <h4 class="mdl-dialog__title">{{ 'BUTTON.ACTION_NEW_FOLDER' | translate }}</h4>
+    <h4 class="mdl-dialog__title">{{ 'ALFRESCO_DOCUMENT_LIST.BUTTON.ACTION_NEW_FOLDER' | translate }}</h4>
     <div class="mdl-dialog__content">
         <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
             <input
@@ -30,7 +27,7 @@
         </div>
     </div>
     <div class="mdl-dialog__actions">
-        <button type="button" [disabled]="isFolderNameEmpty()" (click)="createFolder(folderName)" class="mdl-button">{{ 'BUTTON.CREATE' | translate }}</button>
+        <button type="button" [disabled]="isFolderNameEmpty()" (click)="createFolder(folderName)" class="mdl-button">{{ 'ALFRESCO_DOCUMENT_LIST.BUTTON.CREATE' | translate }}</button>
-        <button type="button" (click)="cancel()" class="mdl-button close">{{ 'BUTTON.CANCEL' | translate}}</button>
+        <button type="button" (click)="cancel()" class="mdl-button close">{{ 'ALFRESCO_DOCUMENT_LIST.BUTTON.CANCEL' | translate}}</button>
     </div>
-</dialog>
+</dialog>

ng2-components/ng2-alfresco-documentlist/src/i18n/en.json

@@ -1,22 +1,10 @@
 {
-    "ICONS": {
+    "ALFRESCO_DOCUMENT_LIST": {
-        "ft_ic_folder": "Folder",
+        "BUTTON": {
-        "ft_ic_raster_image": "Image file",
+            "ACTION_CREATE": "Create...",
-        "ft_ic_pdf": "PDF document",
+            "ACTION_NEW_FOLDER": "New Folder",
-        "ft_ic_ms_excel": "Microsoft Excel file",
+            "CREATE": "Create",
-        "ft_ic_ms_word": "Microsoft Word document",
+            "CANCEL": "Cancel"
-        "ft_ic_ms_powerpoint": "Microsoft PowerPoint file",
+        }
-        "ft_ic_video": "Video file",
-        "ft_ic_document": "Document file",
-        "ft_ic_website": "Web resource",
-        "ft_ic_archive": "Archive file",
-        "ft_ic_presentation": "Presentation file",
-        "ft_ic_spreadsheet": "Spreadsheet file"
-    },
-    "BUTTON": {
-        "ACTION_CREATE": "Create...",
-        "ACTION_NEW_FOLDER": "New Folder",
-        "CREATE": "Create",
-        "CANCEL": "Cancel"
     }
 }

ng2-components/ng2-alfresco-documentlist/src/i18n/ru.json

@@ -1,22 +1,10 @@
 {
-    "ICONS": {
+    "ALFRESCO_DOCUMENT_LIST": {
-        "ft_ic_folder": "Пака",
+        "BUTTON": {
-        "ft_ic_raster_image": "Картинка",
+            "ACTION_CREATE": "Создать...",
-        "ft_ic_pdf": "PDF документ",
+            "ACTION_NEW_FOLDER": "Новая папка",
-        "ft_ic_ms_excel": "Microsoft Excel файл",
+            "CREATE": "Создать",
-        "ft_ic_ms_word": "Microsoft Word документ",
+            "CANCEL": "Отмена"
-        "ft_ic_ms_powerpoint": "Microsoft PowerPoint файл",
+        }
-        "ft_ic_video": "Видео",
-        "ft_ic_document": "Документ",
-        "ft_ic_website": "Web-ресурс",
-        "ft_ic_archive": "Архив",
-        "ft_ic_presentation": "Презентация",
-        "ft_ic_spreadsheet": "Таблица"
-    },
-    "BUTTON": {
-        "ACTION_CREATE": "Создать...",
-        "ACTION_NEW_FOLDER": "Новая папка",
-        "CREATE": "Создать",
-        "CANCEL": "Отмена"
     }
 }