From 1e4ccc4e7dcb9dc9d37d49a93174cc42a3dbcf98 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Stephan=20M=C3=BCller?= Date: Fri, 22 Mar 2019 17:46:35 +0100 Subject: [PATCH] mgr/dashboard: Localization for date picker module MIME-Version: 1.0 Content-Type: text/plain; charset=utf8 Content-Transfer-Encoding: 8bit Fixes: https://tracker.ceph.com/issues/39037 Signed-off-by: Stephan Müller --- src/pybind/mgr/dashboard/HACKING.rst | 13 +++-- .../language-selector.component.spec.ts | 48 ++++++++++++++++--- .../language-selector.component.ts | 24 ++++++++-- .../supported-languages.enum.ts | 26 ++++++++++ 4 files changed, 98 insertions(+), 13 deletions(-) diff --git a/src/pybind/mgr/dashboard/HACKING.rst b/src/pybind/mgr/dashboard/HACKING.rst index 4cea7c543e4..5cd0e1bbbc6 100644 --- a/src/pybind/mgr/dashboard/HACKING.rst +++ b/src/pybind/mgr/dashboard/HACKING.rst @@ -331,9 +331,16 @@ uncommitted translations. Supported languages ~~~~~~~~~~~~~~~~~~~ -All our supported languages should be registeredd in -``supported-languages.enum.ts``, this will then provide that list to both the -language selectors in the frontend. +All our supported languages should be registered in both exports in +``supported-languages.enum.ts`` and have a corresponding test in +``language-selector.component.spec.ts``. + +The ``SupportedLanguages`` enum will provide the list for the default language selection. + +The ``languageBootstrapMapping`` variable will provide the +`language support `_ +for ngx-bootstrap components like the +`date picker `_. Translating process ~~~~~~~~~~~~~~~~~~~ diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/language-selector/language-selector.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/language-selector/language-selector.component.spec.ts index efbb54bb973..189ecc53710 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/language-selector/language-selector.component.spec.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/language-selector/language-selector.component.spec.ts @@ -1,8 +1,10 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; import { FormsModule } from '@angular/forms'; +import { listLocales } from 'ngx-bootstrap/chronos'; +import { BsLocaleService } from 'ngx-bootstrap/datepicker'; + import { configureTestBed } from '../../../../testing/unit-test-helper'; -import { LocaleHelper } from '../../../locale.helper'; import { LanguageSelectorComponent } from './language-selector.component'; describe('LanguageSelectorComponent', () => { @@ -11,6 +13,7 @@ describe('LanguageSelectorComponent', () => { configureTestBed({ declarations: [LanguageSelectorComponent], + providers: [BsLocaleService], imports: [FormsModule] }); @@ -18,6 +21,7 @@ describe('LanguageSelectorComponent', () => { fixture = TestBed.createComponent(LanguageSelectorComponent); component = fixture.componentInstance; fixture.detectChanges(); + spyOn(window.location, 'reload').and.callFake(() => component.ngOnInit()); }); it('should create', () => { @@ -26,14 +30,44 @@ describe('LanguageSelectorComponent', () => { it('should read current language', () => { expect(component.selectedLanguage).toBe('en-US'); + expect(listLocales()).toEqual([]); + }); + + const expectLanguageChange = (lang) => { + component.changeLanguage(lang); + expect(component.selectedLanguage).toBe(lang); + expect(listLocales().includes(lang.slice(0, 2))).toBe(true); + }; + + it('should change to cs', () => { + expectLanguageChange('cs'); + }); + + it('should change to de-DE', () => { + expectLanguageChange('de-DE'); + }); + + it('should change to es-ES', () => { + expectLanguageChange('es-ES'); }); - it('should change language', () => { - // Removes error in jsdom - window.location.reload = jest.fn(); + it('should change to fr-FR', () => { + expectLanguageChange('fr-FR'); + }); + + it('should change to id-ID', () => { + expectLanguageChange('id-ID'); + }); + + it('should change to pl-PL', () => { + expectLanguageChange('pl-PL'); + }); + + it('should change to pt-PT', () => { + expectLanguageChange('pt-PT'); + }); - expect(LocaleHelper.getLocale()).toBe('en-US'); - component.changeLanguage('pt-PT'); - expect(LocaleHelper.getLocale()).toBe('pt-PT'); + it('should change to zh-CN', () => { + expectLanguageChange('zh-CN'); }); }); diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/language-selector/language-selector.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/language-selector/language-selector.component.ts index 4396de16657..cfc6e126f29 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/language-selector/language-selector.component.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/language-selector/language-selector.component.ts @@ -1,7 +1,10 @@ import { Component, Input, OnInit } from '@angular/core'; +import { defineLocale } from 'ngx-bootstrap/chronos'; +import { BsLocaleService } from 'ngx-bootstrap/datepicker'; + import { LocaleHelper } from '../../../locale.helper'; -import { SupportedLanguages } from './supported-languages.enum'; +import { languageBootstrapMapping, SupportedLanguages } from './supported-languages.enum'; @Component({ selector: 'cd-language-selector', @@ -15,14 +18,29 @@ export class LanguageSelectorComponent implements OnInit { supportedLanguages = SupportedLanguages; selectedLanguage: string; + constructor(private localeService: BsLocaleService) {} + ngOnInit() { this.selectedLanguage = LocaleHelper.getLocale(); + this.defineUsedLanguage(); + } + + /** + * Sets ngx-bootstrap local based on the current language selection + * + * ngx-bootstrap locals documentation: + * https://valor-software.com/ngx-bootstrap/#/datepicker#locales + */ + private defineUsedLanguage() { + const lang = this.selectedLanguage.slice(0, 2); + if (lang in languageBootstrapMapping) { + defineLocale(lang, languageBootstrapMapping[lang]); + this.localeService.use(lang); + } } changeLanguage(lang: string) { LocaleHelper.setLocale(lang); - - // Reload frontend window.location.reload(); } } diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/language-selector/supported-languages.enum.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/language-selector/supported-languages.enum.ts index 65c32a08e07..3bf456bcc97 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/language-selector/supported-languages.enum.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/language-selector/supported-languages.enum.ts @@ -1,3 +1,16 @@ +import { + csLocale, + deLocale, + esLocale, + frLocale, + idLocale, + plLocale, + ptBrLocale, + zhCnLocale +} from 'ngx-bootstrap/chronos'; + +// When adding a new supported language make sure to add a test for it in: +// language-selector.component.spec.ts export enum SupportedLanguages { 'cs' = 'Čeština', 'de-DE' = 'Deutsch', @@ -9,3 +22,16 @@ export enum SupportedLanguages { 'es-ES' = 'Español', 'zh-CN' = '中文' } + +// Supported languages: +// https://github.com/valor-software/ngx-bootstrap/tree/development/src/chronos/i18n +export let languageBootstrapMapping = { + cs: csLocale, + de: deLocale, + es: esLocale, + fr: frLocale, + id: idLocale, + pl: plLocale, + pt: ptBrLocale, + zh: zhCnLocale +}; -- 2.39.5