refactor: i18n for settings module

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>;
-    this.translator = new SCThingTranslator(this.language);
-
-    translateService.onLangChange.subscribe((event: LangChangeEvent) => {
+    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>
-    <span>
-      {{ translatedSetting.name | titlecase }}
-      <ion-icon *ngIf="compactView" name="information-circle-outline" (click)="presentAlert(translator.translate(setting).name, translator.translate(setting).description)"></ion-icon>
-    </span>
+  <ion-card-header *ngIf="{ name: ('name' | thingTranslate: setting | titlecase), desc: ('description' | thingTranslate: setting | titlecase) } let vals">
+    <ion-card-subtitle>
+      {{ vals.name }}
+      <ion-icon *ngIf="compactView" name="information-circle-outline" (click)="presentAlert( vals.name , vals.desc )"></ion-icon>
+    </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>