Download as
Browse Code »

Commit 2655bbbcdb5a92826af8d93b96ddf8b04c04ffec

Authored by Victor Costa
1 parent 5633c308
Exists in master and in 1 other branch dev-fixes

Allow users to change the language

Showing 9 changed files with 115 additions and 7 deletions   Show diff stats
src/app/components/language-selector/language-selector.component.spec.ts 0 → 100644
  Diff comments   View file @2655bbb
@@ -0,0 +1,45 @@ @@ -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 +});
src/app/components/language-selector/language-selector.component.ts 0 → 100644
  Diff comments   View file @2655bbb
@@ -0,0 +1,29 @@ @@ -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 +}
src/app/components/language-selector/language-selector.html 0 → 100644
  Diff comments   View file @2655bbb
@@ -0,0 +1,13 @@ @@ -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>
src/app/components/navbar/navbar.html
  Diff comments   View file @2655bbb
@@ -40,6 +40,9 @@ @@ -40,6 +40,9 @@
40 </ul> 40 </ul>
41 </li> 41 </li>
42 </ul> 42 </ul>
  43 + <ul>
  44 + <language-selector class="nav navbar-nav navbar-right"></language-selector>
  45 + </ul>
43 <div ui-view="actions"></div> 46 <div ui-view="actions"></div>
44 </div> 47 </div>
45 </div> 48 </div>
src/app/components/navbar/navbar.spec.ts
  Diff comments   View file @2655bbb
@@ -71,6 +71,9 @@ describe(&quot;Components&quot;, () =&gt; { @@ -71,6 +71,9 @@ describe(&quot;Components&quot;, () =&gt; {
71 useValue: { 71 useValue: {
72 AUTH_EVENTS 72 AUTH_EVENTS
73 } 73 }
  74 + }),
  75 + provide('$translate', {
  76 + useValue: helpers.mocks.$translate
74 }) 77 })
75 ].concat(helpers.provideFilters("translateFilter")), 78 ].concat(helpers.provideFilters("translateFilter")),
76 directives: [Navbar], 79 directives: [Navbar],
src/app/components/navbar/navbar.ts
  Diff comments   View file @2655bbb
1 import {Component, Inject} from "ng-forward"; 1 import {Component, Inject} from "ng-forward";
  2 +import {LanguageSelector} from "../language-selector/language-selector.component";
2 3
3 4
4 import {Session, AuthService, AuthController, IAuthEvents, AUTH_EVENTS} from "./../auth"; 5 import {Session, AuthService, AuthController, IAuthEvents, AUTH_EVENTS} from "./../auth";
@@ -7,6 +8,7 @@ import {User} from &quot;./../../models/interfaces&quot;; @@ -7,6 +8,7 @@ import {User} from &quot;./../../models/interfaces&quot;;
7 @Component({ 8 @Component({
8 selector: "acme-navbar", 9 selector: "acme-navbar",
9 templateUrl: "app/components/navbar/navbar.html", 10 templateUrl: "app/components/navbar/navbar.html",
  11 + directives: [LanguageSelector],
10 providers: [AuthService, Session] 12 providers: [AuthService, Session]
11 }) 13 })
12 @Inject("$modal", AuthService, "Session", "$scope", "$state") 14 @Inject("$modal", AuthService, "Session", "$scope", "$state")
src/languages/en.json
  Diff comments   View file @2655bbb
@@ -4,5 +4,8 @@ @@ -4,5 +4,8 @@
4 "navbar.profile": "Profile", 4 "navbar.profile": "Profile",
5 "navbar.settings": "Settings", 5 "navbar.settings": "Settings",
6 "navbar.logout": "Log Out", 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 }
src/languages/pt.json
  Diff comments   View file @2655bbb
@@ -4,5 +4,8 @@ @@ -4,5 +4,8 @@
4 "navbar.profile": "Perfil", 4 "navbar.profile": "Perfil",
5 "navbar.settings": "Configurações", 5 "navbar.settings": "Configurações",
6 "navbar.logout": "Sair", 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 }
src/spec/mocks.ts
  Diff comments   View file @2655bbb
1 1
2 class ScopeWithEvents { 2 class ScopeWithEvents {
3 - listeners = {}; 3 + listeners = {};
4 constructor() { 4 constructor() {
5 5
6 } 6 }
@@ -17,9 +17,9 @@ class ScopeWithEvents { @@ -17,9 +17,9 @@ class ScopeWithEvents {
17 17
18 public $emit(message: string, arg?: any) { 18 public $emit(message: string, arg?: any) {
19 console.log("Emitted " + message); 19 console.log("Emitted " + message);
20 - if ( (<any>this.listeners)[message]) { 20 + if ((<any>this.listeners)[message]) {
21 console.log("LISTENERS:", (<any>this.listeners)[message]); 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 f(arg); 23 f(arg);
24 }); 24 });
25 } 25 }
@@ -42,6 +42,13 @@ export var mocks = { @@ -42,6 +42,13 @@ export var mocks = {
42 return { 42 return {
43 currentUser: () => { return user; } 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 \ No newline at end of file 54 \ No newline at end of file
  55 +};