Allow users to change the language

Victor Costa
1 parent 5633c308
Showing 9 changed files with 115 additions and 7 deletions Show diff stats
src/app/components/language-selector/language-selector.component.spec.ts
src/app/components/language-selector/language-selector.component.ts
src/app/components/language-selector/language-selector.html
src/app/components/navbar/navbar.html
src/app/components/navbar/navbar.spec.ts
src/app/components/navbar/navbar.ts
src/languages/en.json
src/languages/pt.json
src/spec/mocks.ts
@@ -0,0 +1,45 @@
+import {TestComponentBuilder, ComponentFixture} from 'ng-forward/cjs/testing/test-component-builder';
+import {Pipe, Input, provide, Component} from 'ng-forward';
+
+import {LanguageSelector} from './language-selector.component';
+
+import * as helpers from "../../../spec/helpers";
+
+const tcb = new TestComponentBuilder();
+
+const htmlTemplate: string = '<language-selector></language-selector>';
+
+describe("Components", () => {
+
+    describe("Language Selector Component", () => {
+
+        beforeEach(angular.mock.module("templates"));
+
+        @Component({
+            selector: 'test-container-component',
+            template: htmlTemplate,
+            directives: [LanguageSelector],
+            providers: [
+                provide('$translate', {
+                    useValue: helpers.mocks.$translate
+                })
+            ].concat(helpers.provideFilters("translateFilter"))
+        })
+        class BlockContainerComponent { }
+
+        it("set available languages when change language", () => {
+            let component: LanguageSelector = new LanguageSelector(<any>helpers.mocks.$translate);
+            component.availableLanguages = null;
+            expect(component.availableLanguages).toBeNull();
+            component.changeLanguage('en');
+            expect(component.availableLanguages).toBeDefined();
+        });
+
+        it("display language options", () => {
+            helpers.createComponentFromClass(BlockContainerComponent).then(fixture => {
+                expect(fixture.debugElement.queryAll('li.language').length).toEqual(2);
+            });
+        });
+
+    });
+});
@@ -0,0 +1,29 @@
+import {Component, Inject} from "ng-forward";
+
+@Component({
+    selector: "language-selector",
+    templateUrl: "app/components/language-selector/language-selector.html"
+})
+@Inject("$translate")
+export class LanguageSelector {
+
+    availableLanguages: any;
+
+    constructor(private $translate: angular.translate.ITranslateService) {
+        this.changeLanguage($translate.use());
+    }
+
+    currentLanguage() {
+        return this.$translate.use();
+    }
+
+    changeLanguage(language: string) {
+        this.$translate.use(language).then((lang) => {
+            this.availableLanguages = {
+                "en": this.$translate.instant("language.en"),
+                "pt": this.$translate.instant("language.pt")
+            };
+        });
+    }
+
+}
@@ -0,0 +1,13 @@
+<li class="dropdown profile-menu" dropdown>
+  <a href="#" class="dropdown-toggle" aria-expanded="false" dropdown-toggle>
+    <span>{{"language.selector" | translate}}</span> <b class="caret"></b>
+  </a>
+  <ul class="dropdown-menu" dropdown-menu>
+    <li ng-repeat="(language, description) in ctrl.availableLanguages"
+      class="language language-{{language}}" ng-class="{'active': language==ctrl.currentLanguage()}">
+      <a href="#" ng-click="ctrl.changeLanguage(language)">
+        {{description}}
+      </a>
+    </li>
+  </ul>
+</li>
@@ -40,6 +40,9 @@
           </ul>
         </li>
       </ul>
+      <ul>
+        <language-selector class="nav navbar-nav navbar-right"></language-selector>
+      </ul>
       <div ui-view="actions"></div>
     </div>
   </div>
@@ -71,6 +71,9 @@ describe(&quot;Components&quot;, () =&gt; {
                         useValue: {
                             AUTH_EVENTS
                         }
+                    }),
+                    provide('$translate', {
+                        useValue: helpers.mocks.$translate
                     })
                 ].concat(helpers.provideFilters("translateFilter")),
                 directives: [Navbar],
 import {Component, Inject} from "ng-forward";
+import {LanguageSelector} from "../language-selector/language-selector.component";
  
  
 import {Session, AuthService, AuthController, IAuthEvents, AUTH_EVENTS} from "./../auth";
@@ -7,6 +8,7 @@ import {User} from &quot;./../../models/interfaces&quot;;
 @Component({
     selector: "acme-navbar",
     templateUrl: "app/components/navbar/navbar.html",
+    directives: [LanguageSelector],
     providers: [AuthService, Session]
 })
 @Inject("$modal", AuthService, "Session", "$scope", "$state")
@@ -4,5 +4,8 @@
   "navbar.profile": "Profile",
   "navbar.settings": "Settings",
   "navbar.logout": "Log Out",
-  "navbar.login": "Login"
+  "navbar.login": "Login",
+  "language.en": "English",
+  "language.pt": "Portuguese",
+  "language.selector": "Language"
 }
@@ -4,5 +4,8 @@
   "navbar.profile": "Perfil",
   "navbar.settings": "Configurações",
   "navbar.logout": "Sair",
-  "navbar.login": "Login"
+  "navbar.login": "Login",
+  "language.en": "Inglês",
+  "language.pt": "Português",
+  "language.selector": "Idioma"
 }
  
 class ScopeWithEvents {
-    listeners =  {};
+    listeners = {};
     constructor() {
  
     }
@@ -17,9 +17,9 @@ class ScopeWithEvents {
  
     public $emit(message: string, arg?: any) {
         console.log("Emitted " + message);
-        if ( (<any>this.listeners)[message]) {
+        if ((<any>this.listeners)[message]) {
             console.log("LISTENERS:", (<any>this.listeners)[message]);
-             (<any>this.listeners)[message].forEach((f: Function) => {
+            (<any>this.listeners)[message].forEach((f: Function) => {
                 f(arg);
             });
         }
@@ -42,6 +42,13 @@ export var mocks = {
         return {
             currentUser: () => { return user; }
         };
+    },
+    $translate: {
+        use: (lang?: string) => {
+            return {
+                then: (func?: any) => { if (func) func() }
+            }
+        },
+        instant: () => { }
     }
-
-};
 \ No newline at end of file
+};
...	...	@@ -0,0 +1,45 @@
	1	+import {TestComponentBuilder, ComponentFixture} from 'ng-forward/cjs/testing/test-component-builder';
	2	+import {Pipe, Input, provide, Component} from 'ng-forward';
	3	+
	4	+import {LanguageSelector} from './language-selector.component';
	5	+
	6	+import * as helpers from "../../../spec/helpers";
	7	+
	8	+const tcb = new TestComponentBuilder();
	9	+
	10	+const htmlTemplate: string = '<language-selector></language-selector>';
	11	+
	12	+describe("Components", () => {
	13	+
	14	+ describe("Language Selector Component", () => {
	15	+
	16	+ beforeEach(angular.mock.module("templates"));
	17	+
	18	+ @Component({
	19	+ selector: 'test-container-component',
	20	+ template: htmlTemplate,
	21	+ directives: [LanguageSelector],
	22	+ providers: [
	23	+ provide('$translate', {
	24	+ useValue: helpers.mocks.$translate
	25	+ })
	26	+ ].concat(helpers.provideFilters("translateFilter"))
	27	+ })
	28	+ class BlockContainerComponent { }
	29	+
	30	+ it("set available languages when change language", () => {
	31	+ let component: LanguageSelector = new LanguageSelector(<any>helpers.mocks.$translate);
	32	+ component.availableLanguages = null;
	33	+ expect(component.availableLanguages).toBeNull();
	34	+ component.changeLanguage('en');
	35	+ expect(component.availableLanguages).toBeDefined();
	36	+ });
	37	+
	38	+ it("display language options", () => {
	39	+ helpers.createComponentFromClass(BlockContainerComponent).then(fixture => {
	40	+ expect(fixture.debugElement.queryAll('li.language').length).toEqual(2);
	41	+ });
	42	+ });
	43	+
	44	+ });
	45	+});
...	...
...	...	@@ -0,0 +1,29 @@
	1	+import {Component, Inject} from "ng-forward";
	2	+
	3	+@Component({
	4	+ selector: "language-selector",
	5	+ templateUrl: "app/components/language-selector/language-selector.html"
	6	+})
	7	+@Inject("$translate")
	8	+export class LanguageSelector {
	9	+
	10	+ availableLanguages: any;
	11	+
	12	+ constructor(private $translate: angular.translate.ITranslateService) {
	13	+ this.changeLanguage($translate.use());
	14	+ }
	15	+
	16	+ currentLanguage() {
	17	+ return this.$translate.use();
	18	+ }
	19	+
	20	+ changeLanguage(language: string) {
	21	+ this.$translate.use(language).then((lang) => {
	22	+ this.availableLanguages = {
	23	+ "en": this.$translate.instant("language.en"),
	24	+ "pt": this.$translate.instant("language.pt")
	25	+ };
	26	+ });
	27	+ }
	28	+
	29	+}
...	...
...	...	@@ -0,0 +1,13 @@
	1	+<li class="dropdown profile-menu" dropdown>
	2	+ <a href="#" class="dropdown-toggle" aria-expanded="false" dropdown-toggle>
	3	+ <span>{{"language.selector" \| translate}}</span> <b class="caret"></b>
	4	+ </a>
	5	+ <ul class="dropdown-menu" dropdown-menu>
	6	+ <li ng-repeat="(language, description) in ctrl.availableLanguages"
	7	+ class="language language-{{language}}" ng-class="{'active': language==ctrl.currentLanguage()}">
	8	+ <a href="#" ng-click="ctrl.changeLanguage(language)">
	9	+ {{description}}
	10	+ </a>
	11	+ </li>
	12	+ </ul>
	13	+</li>
...	...
...	...	@@ -40,6 +40,9 @@
40	40	</ul>
41	41	</li>
42	42	</ul>
	43	+ <ul>
	44	+ <language-selector class="nav navbar-nav navbar-right"></language-selector>
	45	+ </ul>
43	46	<div ui-view="actions"></div>
44	47	</div>
45	48	</div>
...	...
...	...	@@ -71,6 +71,9 @@ describe("Components", () => {
71	71	useValue: {
72	72	AUTH_EVENTS
73	73	}
	74	+ }),
	75	+ provide('$translate', {
	76	+ useValue: helpers.mocks.$translate
74	77	})
75	78	].concat(helpers.provideFilters("translateFilter")),
76	79	directives: [Navbar],
...	...
1	1	import {Component, Inject} from "ng-forward";
	2	+import {LanguageSelector} from "../language-selector/language-selector.component";
2	3
3	4
4	5	import {Session, AuthService, AuthController, IAuthEvents, AUTH_EVENTS} from "./../auth";
...	...	@@ -7,6 +8,7 @@ import {User} from "./../../models/interfaces";
7	8	@Component({
8	9	selector: "acme-navbar",
9	10	templateUrl: "app/components/navbar/navbar.html",
	11	+ directives: [LanguageSelector],
10	12	providers: [AuthService, Session]
11	13	})
12	14	@Inject("$modal", AuthService, "Session", "$scope", "$state")
...	...
...	...	@@ -4,5 +4,8 @@
4	4	"navbar.profile": "Profile",
5	5	"navbar.settings": "Settings",
6	6	"navbar.logout": "Log Out",
7		- "navbar.login": "Login"
	7	+ "navbar.login": "Login",
	8	+ "language.en": "English",
	9	+ "language.pt": "Portuguese",
	10	+ "language.selector": "Language"
8	11	}
...	...
...	...	@@ -4,5 +4,8 @@
4	4	"navbar.profile": "Perfil",
5	5	"navbar.settings": "Configurações",
6	6	"navbar.logout": "Sair",
7		- "navbar.login": "Login"
	7	+ "navbar.login": "Login",
	8	+ "language.en": "Inglês",
	9	+ "language.pt": "Português",
	10	+ "language.selector": "Idioma"
8	11	}
...	...
1	1
2	2	class ScopeWithEvents {
3		- listeners = {};
	3	+ listeners = {};
4	4	constructor() {
5	5
6	6	}
...	...	@@ -17,9 +17,9 @@ class ScopeWithEvents {
17	17
18	18	public $emit(message: string, arg?: any) {
19	19	console.log("Emitted " + message);
20		- if ( (<any>this.listeners)[message]) {
	20	+ if ((<any>this.listeners)[message]) {
21	21	console.log("LISTENERS:", (<any>this.listeners)[message]);
22		- (<any>this.listeners)[message].forEach((f: Function) => {
	22	+ (<any>this.listeners)[message].forEach((f: Function) => {
23	23	f(arg);
24	24	});
25	25	}
...	...	@@ -42,6 +42,13 @@ export var mocks = {
42	42	return {
43	43	currentUser: () => { return user; }
44	44	};
	45	+ },
	46	+ $translate: {
	47	+ use: (lang?: string) => {
	48	+ return {
	49	+ then: (func?: any) => { if (func) func() }
	50	+ }
	51	+ },
	52	+ instant: () => { }
45	53	}
46		-
47		-};
48	54	\ No newline at end of file
	55	+};
...	...