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
2025-07-31 17:38:48 +00:00 · 2017-02-10 11:22:25 +00:00
parent 8edd2a2d23
commit 07bad77547
20 changed files with 127 additions and 228 deletions
--- a/demo-shell-ng2/app/app.component.html
+++ b/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">
--- a/demo-shell-ng2/app/app.component.ts
+++ b/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('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');
-            }
+            translateService.addTranslationFolder('app', 'resources');
        }
    }

@@ -75,7 +69,7 @@ export class AppComponent {
            );
    }

-    navigateToLogin(){
+    navigateToLogin() {
        this.router.navigate(['/login']);
        this.hideDrawer();
    }
--- a/demo-shell-ng2/config/webpack.prod.js
+++ b/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
        {
--- a/demo-shell-ng2/custom-translation/alfresco-login/i18n/en.json
+++ b/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"
-        }
-    }
-}
--- a/demo-shell-ng2/custom-translation/alfresco-login/i18n/it.json
+++ b/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"
-        }
-    }
-}
--- a/demo-shell-ng2/custom-translation/i18n/en.json
+++ b/demo-shell-ng2/custom-translation/i18n/en.json
--- a/demo-shell-ng2/custom-translation/i18n/it.json
+++ b/demo-shell-ng2/custom-translation/i18n/it.json
--- a/ng2-components/ng2-activiti-tasklist/src/components/activiti-checklist.component.spec.ts
+++ b/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);
            });

--- a/ng2-components/ng2-activiti-tasklist/src/components/activiti-people-search.component.spec.ts
+++ b/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;
--- a/ng2-components/ng2-activiti-tasklist/src/components/activiti-people.component.spec.ts
+++ b/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;
--- a/ng2-components/ng2-activiti-tasklist/src/components/activiti-start-task.component.spec.ts
+++ b/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;
--- a/ng2-components/ng2-activiti-tasklist/src/components/activiti-task-details.component.spec.ts
+++ b/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(() => {
--- a/ng2-components/ng2-activiti-tasklist/src/components/activiti-task-header.component.spec.ts
+++ b/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(() => {
--- a/ng2-components/ng2-alfresco-core/README.md
+++ b/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.

@@ -192,17 +192,14 @@ import { CoreModule, AlfrescoSettingsService, AlfrescoAuthenticationService } fr
            <H5>BPM</H5>
            Authentication successfull to ip {{ bpmHost }} with user: admin, admin<br> 
            your token is {{ tokenBpm }}<br>
-               </div>`
+        </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)
--- a/ng2-components/ng2-alfresco-core/src/services/alfresco-translate-loader.service.ts
+++ b/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) {
--- a/ng2-components/ng2-alfresco-core/src/services/alfresco-translation.service.ts
+++ b/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);
+            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);
+                    }
+                );
+            }
        }
    }

--- a/ng2-components/ng2-alfresco-documentlist/src/components/document-menu-action.component.css
+++ b/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;
-}
--- a/ng2-components/ng2-alfresco-documentlist/src/components/document-menu-action.component.html
+++ b/ng2-components/ng2-alfresco-documentlist/src/components/document-menu-action.component.html
@@ -1,21 +1,18 @@
 <div class="container">
-    <div class="action">
-        <button id="actions" class="mdl-button mdl-js-button mdl-button--raised">
-            <i class="material-icons">add</i> {{ 'BUTTON.ACTION_CREATE' | translate }}
+    <button md-button [mdMenuTriggerFor]="menu">
+        <md-icon>add</md-icon>
+        <span>{{ 'ALFRESCO_DOCUMENT_LIST.BUTTON.ACTION_CREATE' | translate }}</span>
    </button>
-        <ul alfresco-mdl-menu class="mdl-menu--bottom-left"
-            [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>
+    <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>
+    </md-menu>
 </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" (click)="cancel()" class="mdl-button close">{{ 'BUTTON.CANCEL' | 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">{{ 'ALFRESCO_DOCUMENT_LIST.BUTTON.CANCEL' | translate}}</button>
    </div>
 </dialog>
--- a/ng2-components/ng2-alfresco-documentlist/src/i18n/en.json
+++ b/ng2-components/ng2-alfresco-documentlist/src/i18n/en.json
@@ -1,22 +1,10 @@
 {
-    "ICONS": {
-        "ft_ic_folder": "Folder",
-        "ft_ic_raster_image": "Image file",
-        "ft_ic_pdf": "PDF document",
-        "ft_ic_ms_excel": "Microsoft Excel file",
-        "ft_ic_ms_word": "Microsoft Word document",
-        "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"
-    },
+    "ALFRESCO_DOCUMENT_LIST": {
        "BUTTON": {
            "ACTION_CREATE": "Create...",
            "ACTION_NEW_FOLDER": "New Folder",
            "CREATE": "Create",
            "CANCEL": "Cancel"
        }
+    }
 }
--- a/ng2-components/ng2-alfresco-documentlist/src/i18n/ru.json
+++ b/ng2-components/ng2-alfresco-documentlist/src/i18n/ru.json
@@ -1,22 +1,10 @@
 {
-    "ICONS": {
-        "ft_ic_folder": "Пака",
-        "ft_ic_raster_image": "Картинка",
-        "ft_ic_pdf": "PDF документ",
-        "ft_ic_ms_excel": "Microsoft Excel файл",
-        "ft_ic_ms_word": "Microsoft Word документ",
-        "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": "Таблица"
-    },
+    "ALFRESCO_DOCUMENT_LIST": {
        "BUTTON": {
            "ACTION_CREATE": "Создать...",
            "ACTION_NEW_FOLDER": "Новая папка",
            "CREATE": "Создать",
            "CANCEL": "Отмена"
        }
+    }
 }