From 6f42ed6df95b92c66e53425904e56731105338f0 Mon Sep 17 00:00:00 2001
From: mauriziovitale84 <maurizio.vitale@alfresco.com>
Date: Wed, 27 Apr 2016 11:39:39 +0100
Subject: [PATCH] #17 Added ng2-translate plugin

---
 demo-shell-ng2/app/app.component.html | 11 +++++++++++
 demo-shell-ng2/app/app.component.ts   | 24 +++++++++++++++++++++++-
 demo-shell-ng2/app/main.ts            |  2 ++
 demo-shell-ng2/i18n/en.json           |  9 +++++++++
 demo-shell-ng2/i18n/it.json           |  9 +++++++++
 demo-shell-ng2/index.html             | 10 +++++++++-
 demo-shell-ng2/package.json           |  1 +
 7 files changed, 64 insertions(+), 2 deletions(-)
 create mode 100644 demo-shell-ng2/i18n/en.json
 create mode 100644 demo-shell-ng2/i18n/it.json

diff --git a/demo-shell-ng2/app/app.component.html b/demo-shell-ng2/app/app.component.html
index d3729187c9..3150d11bd9 100644
--- a/demo-shell-ng2/app/app.component.html
+++ b/demo-shell-ng2/app/app.component.html
@@ -61,6 +61,17 @@
                 <a class="mdl-navigation__link" href="" [routerLink]="['Login']">Login</a>
             </nav>
             <!-- Right aligned menu below button -->
+            <button id="demo-menu-language-right"
+                    class="mdl-button mdl-js-button mdl-button--icon">
+                <i class="material-icons">Language</i>
+            </button>
+
+            <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
+                for="demo-menu-language-right">
+                <li class="mdl-menu__item" (click)="changeLanguage('en')">En</li>
+                <li class="mdl-menu__item" (click)="changeLanguage('it')">Ita</li>
+            </ul>
+            <!-- Right aligned menu below button -->
             <button id="demo-menu-lower-right"
                     class="mdl-button mdl-js-button mdl-button--icon">
                 <i class="material-icons">more_vert</i>
diff --git a/demo-shell-ng2/app/app.component.ts b/demo-shell-ng2/app/app.component.ts
index 7e817d440f..f4f859dca4 100644
--- a/demo-shell-ng2/app/app.component.ts
+++ b/demo-shell-ng2/app/app.component.ts
@@ -23,13 +23,15 @@ import {Login} from 'ng2-alfresco-login/ng2-alfresco-login';
 import {AuthRouterOutlet} from './components/router/AuthRouterOutlet';
 import {UploaderComponent} from './components/uploader/uploader.component';
 import {AlfrescoSettingsService} from 'ng2-alfresco-core/services';
+import {TranslateService, TranslatePipe} from 'ng2-translate/ng2-translate';
 
 declare var document: any;
 
 @Component({
     selector: 'my-app',
     templateUrl: 'app/app.component.html',
-    directives: [ROUTER_DIRECTIVES, AuthRouterOutlet, MDL]
+    directives: [ROUTER_DIRECTIVES, AuthRouterOutlet, MDL],
+    pipes: [TranslatePipe]
 })
 @RouteConfig([
     {path: '/home', name: 'Home', component: FilesComponent},
@@ -38,11 +40,15 @@ declare var document: any;
     {path: '/login', name: 'Login', component: Login}
 ])
 export class AppComponent {
+    translate: TranslateService;
 
     constructor(public auth:Authentication,
                 public router:Router,
+                translate: TranslateService,
                 alfrescoSettingsService:AlfrescoSettingsService) {
         alfrescoSettingsService.host = 'http://192.168.99.100:8080';
+
+        this.translationInit(translate);
     }
 
     isActive(instruction:any[]):boolean {
@@ -61,6 +67,22 @@ export class AppComponent {
             );
     }
 
+    changeLanguage(lang:string) {
+        this.translate.use(lang);
+    }
+
+    translationInit(translate: TranslateService) {
+        this.translate = translate;
+        let userLang = navigator.language.split('-')[0]; // use navigator lang if available
+        userLang = /(fr|en)/gi.test(userLang) ? userLang : 'en';
+
+        // this language will be used as a fallback when a translation isn't found in the current language
+        this.translate.setDefaultLang('en');
+
+        // the lang to use, if the lang isn't available, it will use the current loader to get them
+        this.translate.use(userLang);
+    }
+
     hideDrawer() {
         // todo: workaround for drawer closing
         document.querySelector('.mdl-layout').MaterialLayout.toggleDrawer();
diff --git a/demo-shell-ng2/app/main.ts b/demo-shell-ng2/app/main.ts
index 16791cf2f9..b35060163f 100644
--- a/demo-shell-ng2/app/main.ts
+++ b/demo-shell-ng2/app/main.ts
@@ -19,12 +19,14 @@ import {bootstrap}    from 'angular2/platform/browser';
 import {AppComponent} from './app.component';
 import {ROUTER_PROVIDERS} from 'angular2/router';
 import {HTTP_PROVIDERS}    from 'angular2/http';
+import {TRANSLATE_PROVIDERS} from 'ng2-translate/ng2-translate';
 import {ALFRESCO_AUTHENTICATION} from 'ng2-alfresco-login/ng2-alfresco-login';
 import {ALFRESCO_CORE_PROVIDERS} from 'ng2-alfresco-core/services';
 
 bootstrap(AppComponent, [
     ROUTER_PROVIDERS,
     HTTP_PROVIDERS,
+    TRANSLATE_PROVIDERS,
     ALFRESCO_AUTHENTICATION,
     ALFRESCO_CORE_PROVIDERS
 ]);
diff --git a/demo-shell-ng2/i18n/en.json b/demo-shell-ng2/i18n/en.json
new file mode 100644
index 0000000000..9032f991df
--- /dev/null
+++ b/demo-shell-ng2/i18n/en.json
@@ -0,0 +1,9 @@
+{
+  "title" : "Welcome",
+  "login" : "Login",
+  "username" : "Username",
+  "input-required-message": "Required",
+  "input-min-message": "Your username needs to be at least 4 characters.",
+  "login-button": "Login",
+  "login-error-message": "You have entered an invalid username or password"
+}
\ No newline at end of file
diff --git a/demo-shell-ng2/i18n/it.json b/demo-shell-ng2/i18n/it.json
new file mode 100644
index 0000000000..2391a2e18d
--- /dev/null
+++ b/demo-shell-ng2/i18n/it.json
@@ -0,0 +1,9 @@
+{
+  "title" : "Benvenuto",
+  "login" : "Autenticazione",
+  "username" : "Nome utente",
+  "input-required-message": "Campo obbligatorio",
+  "input-min-message": "Inserire un nome utente di 4 caratteri minimo.",
+  "login-button": "Accedi",
+  "login-error-message": "Nome utente o password non validi"
+}
\ No newline at end of file
diff --git a/demo-shell-ng2/index.html b/demo-shell-ng2/index.html
index 439f1d9c2f..2781afae4a 100644
--- a/demo-shell-ng2/index.html
+++ b/demo-shell-ng2/index.html
@@ -38,7 +38,9 @@
                 'ng2-uploader': 'node_modules/ng2-uploader',
                 'ng2-alfresco-core': 'node_modules/ng2-alfresco-core',
                 'ng2-alfresco-documentlist': 'node_modules/ng2-alfresco-documentlist',
-                'ng2-alfresco-login': 'node_modules/ng2-alfresco-login'
+                'ng2-alfresco-login': 'node_modules/ng2-alfresco-login',
+                'ng2-translate': 'node_modules/ng2-translate',
+                'rxjs': 'node_modules/rxjs'
             },
             packages: {
                 app: {
@@ -56,6 +58,12 @@
                 },
                 'ng2-alfresco-login': {
                     defaultExtension: 'js'
+                },
+                'ng2-translate': {
+                    defaultExtension: 'js'
+                },
+                'rxjs': {
+                    defaultExtension: 'js'
                 }
             }
         });
diff --git a/demo-shell-ng2/package.json b/demo-shell-ng2/package.json
index 489df3eb60..cb51cfd14c 100644
--- a/demo-shell-ng2/package.json
+++ b/demo-shell-ng2/package.json
@@ -46,6 +46,7 @@
     "font-awesome": "^4.5.0",
     "jquery": "^2.2.2",
     "material-design-lite": "^1.1.3",
+    "ng2-translate": "^1.11.2",
     "ng2-uploader": "denisvuyka/ng2-uploader",
     "reflect-metadata": "0.1.2",
     "rxjs": "5.0.0-beta.2",