refactor: i18n for settings module

src/app/app.module.ts

@@ -23,6 +23,8 @@ import {StatusBar} from '@ionic-native/status-bar/ngx';
 import {IonicModule, IonicRouteStrategy} from '@ionic/angular';
 import {TranslateLoader, TranslateModule} from '@ngx-translate/core';
 import {TranslateHttpLoader} from '@ngx-translate/http-loader';
+import moment from 'moment';
+import 'moment/min/locales';
 import {LoggerModule, NgxLoggerLevel} from 'ngx-logger';
 import {environment} from '../environments/environment';
 import {AppRoutingModule} from './app-routing.module';
@@ -36,6 +38,7 @@ import {StorageModule} from './modules/storage/storage.module';
 import {ThingTranslateModule} from './translation/thing-translate.module';
 import {fakeBackendProvider} from './_helpers/fake-backend.interceptor';
 
+moment.locale('de');
 registerLocaleData(localeDe);
 
 /**

src/app/modules/settings/item/settings-item.component.ts

@@ -12,17 +12,14 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-import {Component, Input, OnInit} from '@angular/core';
+import {Component, Input} from '@angular/core';
 import {AlertController} from '@ionic/angular';
 import {LangChangeEvent, TranslateService} from '@ngx-translate/core';
 import {
-  SCLanguage,
   SCLanguageCode,
   SCSetting,
   SCSettingValue,
   SCSettingValues,
-  SCThingTranslator,
-  SCTranslations,
 } from '@openstapps/core';
 import {SettingsProvider} from '../settings.provider';
 
@@ -33,7 +30,7 @@ import {SettingsProvider} from '../settings.provider';
   selector: 'stapps-settings-item',
   templateUrl: 'settings-item.html',
 })
-export class SettingsItemComponent implements OnInit {
+export class SettingsItemComponent {
 
   /**
    * If set the setting will be shown as compact view
@@ -44,26 +41,11 @@ export class SettingsItemComponent implements OnInit {
    * Flag for workaround for selected 'select option' not updating translation
    */
   isVisible = true;
-  /**
-   * current language
-   */
-  language: keyof SCTranslations<SCLanguage>;
   /**
    * The setting to handle
    */
   @Input() setting: SCSetting;
 
-  /**
-   * Translated setting from SCThingTranslator
-   */
-  // tslint:disable-next-line:no-any
-  translatedSetting: any;
-
-  /**
-   * Core translator
-   */
-  translator: SCThingTranslator;
-
   /**
    *
    * @param alertCtrl AlertController
@@ -73,13 +55,8 @@ export class SettingsItemComponent implements OnInit {
   constructor(private readonly alertCtrl: AlertController,
               private readonly translateService: TranslateService,
               private readonly settingsProvider: SettingsProvider) {
-    this.language = translateService.currentLang as keyof SCTranslations<SCLanguage>;
+    translateService.onLangChange.subscribe((_event: LangChangeEvent) => {
-    this.translator = new SCThingTranslator(this.language);
-
-    translateService.onLangChange.subscribe((event: LangChangeEvent) => {
       this.isVisible = false;
-      this.language = event.lang as keyof SCTranslations<SCLanguage>;
-      this.translator.language = this.language;
       // TODO: Issue #53 check workaround for selected 'select option' not updating translation
       setTimeout(() => this.isVisible = true);
     });
@@ -109,13 +86,6 @@ export class SettingsItemComponent implements OnInit {
     await this.presentAlert(title, message);
   }
 
-  /**
-   * NgInit
-   */
-  ngOnInit(): void {
-    this.translatedSetting = this.translator.translate(this.setting);
-  }
-
   /**
    * Shows alert with given title and message and a 'ok' button
    *

src/app/modules/settings/item/settings-item.html

@@ -1,12 +1,12 @@
 <ion-card *ngIf="setting">
-  <ion-card-header>
+  <ion-card-header *ngIf="{ name: ('name' | thingTranslate: setting | titlecase), desc: ('description' | thingTranslate: setting | titlecase) } let vals">
-    <span>
+    <ion-card-subtitle>
-      {{ translatedSetting.name | titlecase }}
+      {{ vals.name }}
-      <ion-icon *ngIf="compactView" name="information-circle-outline" (click)="presentAlert(translator.translate(setting).name, translator.translate(setting).description)"></ion-icon>
+      <ion-icon *ngIf="compactView" name="information-circle-outline" (click)="presentAlert( vals.name , vals.desc )"></ion-icon>
-    </span>
+    </ion-card-subtitle>
   </ion-card-header>
   <ion-card-content>
-    <ion-note *ngIf="!compactView">{{ translatedSetting.description }}</ion-note>
+    <ion-note *ngIf="!compactView">{{ 'description' | thingTranslate: setting | titlecase }}</ion-note>
 
     <div [ngSwitch]="setting.inputType" *ngIf="isVisible" >
       <ion-item *ngSwitchCase="'number'">
@@ -31,7 +31,7 @@
         <!--    else show select input    -->
         <ion-select *ngIf="typeOf(setting.defaultValue) !== 'boolean'" interface="popover" [(ngModel)]="setting.value" (ionChange)="settingChanged()">
           <ion-select-option *ngFor="let val of setting.values, index as i" [value]="val">
-            <div *ngIf="typeOf(val) !== 'number'">{{ translatedSetting.values[i] | titlecase }}</div>
+            <div *ngIf="typeOf(val) !== 'number'">{{ ('values' | thingTranslate: setting)[i] | titlecase }}</div>
             <div *ngIf="typeOf(val) === 'number'">{{ val }}</div>
           </ion-select-option>
         </ion-select>
@@ -41,7 +41,7 @@
         <ion-label></ion-label>
         <ion-select [(ngModel)]="setting.value" multiple="true" (ionChange)="settingChanged()">
           <ion-select-option *ngFor="let val of setting.values, index as i" [value]="val">
-            <div *ngIf="typeOf(val) !== 'number'">{{ translatedSetting.values[i] }}</div>
+            <div *ngIf="typeOf(val) !== 'number'">{{ ('values' | thingTranslate: setting)[i] | titlecase }}</div>
             <div *ngIf="typeOf(val) === 'number'">{{ val }}</div>
           </ion-select-option>
         </ion-select>

src/app/modules/settings/page/settings-page.component.ts

@@ -14,8 +14,8 @@
  */
 import {ChangeDetectorRef, Component} from '@angular/core';
 import {AlertController, ToastController} from '@ionic/angular';
-import {LangChangeEvent, TranslateService} from '@ngx-translate/core';
+import {TranslateService} from '@ngx-translate/core';
-import {SCLanguage, SCSettingMeta, SCThingTranslator, SCTranslations} from '@openstapps/core';
+import {SCSettingMeta} from '@openstapps/core';
 import {SettingsCache, SettingsProvider} from '../settings.provider';
   /**
    * Settings page component
@@ -29,12 +29,6 @@ export class SettingsPageComponent {
    * Order of the categories
    */
   categoriesOrder: string[];
-  /**
-   * Possible languages to be used for translation
-   *
-   * limit to languages that are available in StApps Core
-   */
-  language: keyof SCTranslations<SCLanguage>;
   /**
    * Meta information about settings
    */
@@ -47,10 +41,6 @@ export class SettingsPageComponent {
    * Container to cache settings from provider
    */
   settingsCache: SettingsCache;
-  /**
-   * Core translator
-   */
-  translator: SCThingTranslator;
 
   /**
    *
@@ -65,13 +55,6 @@ export class SettingsPageComponent {
               private readonly toastController: ToastController,
               private readonly translateService: TranslateService,
               private readonly changeDetectorRef: ChangeDetectorRef) {
-    this.language = translateService.currentLang as keyof SCTranslations<SCLanguage>;
-    this.translator = new SCThingTranslator(this.language);
-
-    translateService.onLangChange.subscribe((event: LangChangeEvent) => {
-      this.language = event.lang as keyof SCTranslations<SCLanguage>;
-      this.translator = new SCThingTranslator(this.language);
-    });
     this.settingsCache = {};
   }
 

src/app/modules/settings/page/settings-page.html

@@ -12,7 +12,7 @@
   <ion-list *ngFor="let categoryKey of categoriesOrder ">
     <div *ngIf="objectKeys(settingsCache).includes(categoryKey)">
       <ion-item-divider>
-       <h5>{{ translator.translate(settingsCache[categoryKey]?.settings[objectKeys(settingsCache[categoryKey]?.settings)[0]]).categories[0] | titlecase}}</h5>
+        <h5>{{ 'categories[0]' | thingTranslate: settingsCache[categoryKey]?.settings[objectKeys(settingsCache[categoryKey]?.settings)[0]] | titlecase }} </h5>
       </ion-item-divider>
       <stapps-settings-item *ngFor="let settingKeys of objectKeys(settingsCache[categoryKey].settings)" [setting]="settingsCache[categoryKey].settings[settingKeys]"></stapps-settings-item>
     </div>

src/app/modules/settings/settings.module.ts

@@ -20,6 +20,7 @@ import {Geolocation} from '@ionic-native/geolocation/ngx';
 import {IonicModule} from '@ionic/angular';
 import {TranslateModule} from '@ngx-translate/core';
 
+import {ThingTranslateModule} from '../../translation/thing-translate.module';
 import {ConfigProvider} from '../config/config.provider';
 import {SettingsItemComponent} from './item/settings-item.component';
 import {SettingsPageComponent} from './page/settings-page.component';
@@ -45,6 +46,7 @@ const settingsRoutes: Routes = [
     FormsModule,
     IonicModule.forRoot(),
     TranslateModule.forChild(),
+    ThingTranslateModule.forChild(),
     RouterModule.forChild(settingsRoutes),
   ],
   providers: [

src/app/translation/thing-translate.module.ts

@@ -20,6 +20,7 @@ import {ThingPropertyNameTranslatePipe, ThingTranslatePipe} from './thing-transl
 import {ThingTranslateService} from './thing-translate.service';
 
 
+// tslint:disable: completed-docs
 export interface ThingTranslateModuleConfig {
   parser?: Provider;
 }

src/app/translation/thing-translate.service.ts

@@ -16,6 +16,7 @@
 import {Injectable, OnDestroy} from '@angular/core';
 import {LangChangeEvent, TranslateService} from '@ngx-translate/core';
 import {SCLanguage, SCThings, SCThingTranslator, SCThingType, SCTranslations} from '@openstapps/core';
+import moment from 'moment';
 import {Subscription} from 'rxjs';
 import {isDefined, ThingTranslateParser} from './thing-translate.parser';
 
@@ -41,10 +42,12 @@ export class ThingTranslateService implements OnDestroy {
               public parser: ThingTranslateParser){
 
     this.translator = new SCThingTranslator('de' ?? this.translateService.currentLang as keyof SCTranslations<SCLanguage>);
+    moment.updateLocale(this.translator.language);
 
     /** set the default language from configuration */
     this.onLangChange = this.translateService.onLangChange.subscribe((event: LangChangeEvent) => {
       this.translator.language = event.lang as keyof SCTranslations<SCLanguage>;
+      moment.updateLocale(event.lang);
     });
 
   }