Change locale of angular moment when change the language

Victor Costa
1 parent a2e78a1a
Showing 6 changed files with 49 additions and 6 deletions Show diff stats
bower.json
src/app/components/language-selector/language-selector.component.spec.ts
src/app/components/language-selector/language-selector.component.ts
src/app/components/navbar/navbar.spec.ts
src/app/index.ts
src/spec/mocks.ts
@@ -20,7 +20,7 @@
     "font-awesome": "fontawesome#~4.5.0",
     "ngstorage": "~0.3.10",
     "bootswatch": "~3.3.6",
-    "angular-moment": "~0.10.3",
+    "angular-moment": "~1.0.0-beta.4",
     "lodash": "3.10.1",
     "angular-filter": "~0.5.8",
     "angular-deckgrid": "~0.5.0",
@@ -32,7 +32,8 @@
     "angular-translate-loader-static-files": "^2.10.0",
     "angular-translate-handler-log": "^2.10.0",
     "angular-dynamic-locale": "^0.1.30",
-    "angular-i18n": "^1.5.0"
+    "angular-i18n": "^1.5.0",
+    "angular-load": "^0.4.1"
   },
   "devDependencies": {
     "angular-mocks": "~1.5.0"
@@ -25,13 +25,24 @@ describe(&quot;Components&quot;, () =&gt; {
                 }),
                 provide('tmhDynamicLocale', {
                     useValue: helpers.mocks.tmhDynamicLocale
+                }),
+                provide('amMoment', {
+                    useValue: helpers.mocks.amMoment
+                }),
+                provide('angularLoad', {
+                    useValue: helpers.mocks.angularLoad
                 })
             ].concat(helpers.provideFilters("translateFilter"))
         })
         class BlockContainerComponent { }
  
         it("set available languages when change language", () => {
-            let component: LanguageSelector = new LanguageSelector(<any>helpers.mocks.$translate, <any>helpers.mocks.tmhDynamicLocale);
+            let component: LanguageSelector = new LanguageSelector(
+                <any>helpers.mocks.$translate,
+                <any>helpers.mocks.tmhDynamicLocale,
+                <any>helpers.mocks.amMoment,
+                <any>helpers.mocks.angularLoad
+            );
             component.availableLanguages = null;
             expect(component.availableLanguages).toBeNull();
             component.changeLanguage('en');
@@ -4,12 +4,16 @@ import {Component, Inject} from &quot;ng-forward&quot;;
     selector: "language-selector",
     templateUrl: "app/components/language-selector/language-selector.html"
 })
-@Inject("$translate", "tmhDynamicLocale")
+@Inject("$translate", "tmhDynamicLocale", "amMoment", "angularLoad")
 export class LanguageSelector {
  
     availableLanguages: any;
  
-    constructor(private $translate: angular.translate.ITranslateService, private tmhDynamicLocale: any) {
+    constructor(private $translate: angular.translate.ITranslateService,
+        private tmhDynamicLocale: any,
+        private amMoment: any,
+        private angularLoad: any) {
+
         this.changeLanguage(tmhDynamicLocale.get() || $translate.use());
     }
  
@@ -18,6 +22,7 @@ export class LanguageSelector {
     }
  
     changeLanguage(language: string) {
+        this.changeMomentLocale(language);
         this.tmhDynamicLocale.set(language);
         this.$translate.use(language).then((lang) => {
             this.availableLanguages = {
@@ -27,4 +32,14 @@ export class LanguageSelector {
         });
     }
  
+    private changeMomentLocale(language: string) {
+        let localePromise = Promise.resolve();
+        if (language != "en") {
+            // FIXME fix locale path
+            localePromise = this.angularLoad.loadScript(`/bower_components/moment/locale/${language}.js`);
+        }
+        localePromise.then(() => {
+            this.amMoment.changeLocale(language);
+        });
+    }
 }
@@ -77,6 +77,12 @@ describe(&quot;Components&quot;, () =&gt; {
                     }),
                     provide('tmhDynamicLocale', {
                         useValue: helpers.mocks.tmhDynamicLocale
+                    }),
+                    provide('amMoment', {
+                        useValue: helpers.mocks.amMoment
+                    }),
+                    provide('angularLoad', {
+                        useValue: helpers.mocks.angularLoad
                     })
                 ].concat(helpers.provideFilters("translateFilter")),
                 directives: [Navbar],
@@ -18,7 +18,7 @@ let noosferoApp: any = bundle(&quot;noosferoApp&quot;, Main, [&quot;ngAnimate&quot;, &quot;ngCookies&quot;, &quot;n
     "ui.router", "ui.bootstrap", "toastr",
     "angularMoment", "angular.filter", "akoenig.deckgrid",
     "angular-timeline", "duScroll", "oitozero.ngSweetAlert",
-    "pascalprecht.translate", "tmh.dynamicLocale"]).publish();
+    "pascalprecht.translate", "tmh.dynamicLocale", "angularLoad"]).publish();
  
 NoosferoApp.angularModule = noosferoApp;
  
@@ -54,5 +54,15 @@ export var mocks = {
     tmhDynamicLocale: {
         get: () => { },
         set: (lang: string) => { }
+    },
+    amMoment: {
+        changeLocale: () => { }
+    },
+    angularLoad: {
+        loadScript: (script?: string) => {
+            return {
+                then: (func?: any) => { if (func) func() }
+            }
+        }
     }
 };
...	...	@@ -20,7 +20,7 @@
20	20	"font-awesome": "fontawesome#~4.5.0",
21	21	"ngstorage": "~0.3.10",
22	22	"bootswatch": "~3.3.6",
23		- "angular-moment": "~0.10.3",
	23	+ "angular-moment": "~1.0.0-beta.4",
24	24	"lodash": "3.10.1",
25	25	"angular-filter": "~0.5.8",
26	26	"angular-deckgrid": "~0.5.0",
...	...	@@ -32,7 +32,8 @@
32	32	"angular-translate-loader-static-files": "^2.10.0",
33	33	"angular-translate-handler-log": "^2.10.0",
34	34	"angular-dynamic-locale": "^0.1.30",
35		- "angular-i18n": "^1.5.0"
	35	+ "angular-i18n": "^1.5.0",
	36	+ "angular-load": "^0.4.1"
36	37	},
37	38	"devDependencies": {
38	39	"angular-mocks": "~1.5.0"
...	...
...	...	@@ -25,13 +25,24 @@ describe("Components", () => {
25	25	}),
26	26	provide('tmhDynamicLocale', {
27	27	useValue: helpers.mocks.tmhDynamicLocale
	28	+ }),
	29	+ provide('amMoment', {
	30	+ useValue: helpers.mocks.amMoment
	31	+ }),
	32	+ provide('angularLoad', {
	33	+ useValue: helpers.mocks.angularLoad
28	34	})
29	35	].concat(helpers.provideFilters("translateFilter"))
30	36	})
31	37	class BlockContainerComponent { }
32	38
33	39	it("set available languages when change language", () => {
34		- let component: LanguageSelector = new LanguageSelector(<any>helpers.mocks.$translate, <any>helpers.mocks.tmhDynamicLocale);
	40	+ let component: LanguageSelector = new LanguageSelector(
	41	+ <any>helpers.mocks.$translate,
	42	+ <any>helpers.mocks.tmhDynamicLocale,
	43	+ <any>helpers.mocks.amMoment,
	44	+ <any>helpers.mocks.angularLoad
	45	+ );
35	46	component.availableLanguages = null;
36	47	expect(component.availableLanguages).toBeNull();
37	48	component.changeLanguage('en');
...	...
...	...	@@ -4,12 +4,16 @@ import {Component, Inject} from "ng-forward";
4	4	selector: "language-selector",
5	5	templateUrl: "app/components/language-selector/language-selector.html"
6	6	})
7		-@Inject("$translate", "tmhDynamicLocale")
	7	+@Inject("$translate", "tmhDynamicLocale", "amMoment", "angularLoad")
8	8	export class LanguageSelector {
9	9
10	10	availableLanguages: any;
11	11
12		- constructor(private $translate: angular.translate.ITranslateService, private tmhDynamicLocale: any) {
	12	+ constructor(private $translate: angular.translate.ITranslateService,
	13	+ private tmhDynamicLocale: any,
	14	+ private amMoment: any,
	15	+ private angularLoad: any) {
	16	+
13	17	this.changeLanguage(tmhDynamicLocale.get() \|\| $translate.use());
14	18	}
15	19
...	...	@@ -18,6 +22,7 @@ export class LanguageSelector {
18	22	}
19	23
20	24	changeLanguage(language: string) {
	25	+ this.changeMomentLocale(language);
21	26	this.tmhDynamicLocale.set(language);
22	27	this.$translate.use(language).then((lang) => {
23	28	this.availableLanguages = {
...	...	@@ -27,4 +32,14 @@ export class LanguageSelector {
27	32	});
28	33	}
29	34
	35	+ private changeMomentLocale(language: string) {
	36	+ let localePromise = Promise.resolve();
	37	+ if (language != "en") {
	38	+ // FIXME fix locale path
	39	+ localePromise = this.angularLoad.loadScript(`/bower_components/moment/locale/${language}.js`);
	40	+ }
	41	+ localePromise.then(() => {
	42	+ this.amMoment.changeLocale(language);
	43	+ });
	44	+ }
30	45	}
...	...
...	...	@@ -77,6 +77,12 @@ describe("Components", () => {
77	77	}),
78	78	provide('tmhDynamicLocale', {
79	79	useValue: helpers.mocks.tmhDynamicLocale
	80	+ }),
	81	+ provide('amMoment', {
	82	+ useValue: helpers.mocks.amMoment
	83	+ }),
	84	+ provide('angularLoad', {
	85	+ useValue: helpers.mocks.angularLoad
80	86	})
81	87	].concat(helpers.provideFilters("translateFilter")),
82	88	directives: [Navbar],
...	...
...	...	@@ -18,7 +18,7 @@ let noosferoApp: any = bundle("noosferoApp", Main, ["ngAnimate", "ngCookies", "n
18	18	"ui.router", "ui.bootstrap", "toastr",
19	19	"angularMoment", "angular.filter", "akoenig.deckgrid",
20	20	"angular-timeline", "duScroll", "oitozero.ngSweetAlert",
21		- "pascalprecht.translate", "tmh.dynamicLocale"]).publish();
	21	+ "pascalprecht.translate", "tmh.dynamicLocale", "angularLoad"]).publish();
22	22
23	23	NoosferoApp.angularModule = noosferoApp;
24	24
...	...
...	...	@@ -54,5 +54,15 @@ export var mocks = {
54	54	tmhDynamicLocale: {
55	55	get: () => { },
56	56	set: (lang: string) => { }
	57	+ },
	58	+ amMoment: {
	59	+ changeLocale: () => { }
	60	+ },
	61	+ angularLoad: {
	62	+ loadScript: (script?: string) => {
	63	+ return {
	64	+ then: (func?: any) => { if (func) func() }
	65	+ }
	66	+ }
57	67	}
58	68	};
...	...