refactor(setting): adjust setting module to new core translation

Closes #53

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

@@ -15,11 +15,11 @@
 import {Component} from '@angular/core';
 import {AlertController, ToastController} from '@ionic/angular';
 import {LangChangeEvent, TranslateService} from '@ngx-translate/core';
-import {SCSettingMeta, SCThingTranslator, SCTranslations} from '@openstapps/core';
+import {SCLanguage, SCSettingMeta, SCThingTranslator, SCTranslations} from '@openstapps/core';
 import {SettingsCache, SettingsProvider} from '../settings.provider';
 
   /**
-   * TODO
+   * Settings page component
    */
 @Component({
   selector: 'stapps-settings-page',
@@ -32,43 +32,43 @@ export class SettingsPageComponent {
   categoriesOrder: string[];
   /**
    * Possible languages to be used for translation
-   * 
+   *
    * limit to languages that are available in StApps Core
    */
-  language: keyof SCTranslations<any>;
+  language: keyof SCTranslations<SCLanguage>;
   /**
    * Meta information about settings
    */
   meta = SCSettingMeta;
   /**
-   * TODO
+   * Mapping of Object.keys for Html usage
    */
   objectKeys = Object.keys;
   /**
-   * TODO
+   * Container to cache settings from provider
    */
   settingsCache: SettingsCache;
   /**
-   * TODO
+   * Core translator
    */
   translator: SCThingTranslator;
 
   /**
-   * 
-   * @param alertController TODO
-   * @param settingsProvider TODO
-   * @param toastController TODO
-   * @param translateService TODO
+   *
+   * @param alertController AlertController
+   * @param settingsProvider SettingsProvider
+   * @param toastController ToastController
+   * @param translateService TranslateService
    */
   constructor(private readonly alertController: AlertController,
               private readonly settingsProvider: SettingsProvider,
               private readonly toastController: ToastController,
               private readonly translateService: TranslateService) {
-    this.language = translateService.currentLang as keyof SCTranslations<any>;
+    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<any>;
+      this.language = event.lang as keyof SCTranslations<SCLanguage>;
       this.translator = new SCThingTranslator(this.language);
     });
     this.settingsCache = {};
@@ -142,4 +142,27 @@ export class SettingsPageComponent {
     await this.loadSettings();
     await this.presentSettingsResetToast();
   }
+
+    /**
+     * Shows alert to reset settings
+     */
+  async showResetAlert() {
+    const alert = await this.alertController.create({
+      buttons: [
+        {
+          role: 'cancel',
+          text: this.translateService.instant('settings.resetAlert.buttonCancel'),
+        },
+        {
+          handler: async () => {
+            await this.resetSettings();
+          },
+          text: this.translateService.instant('settings.resetAlert.buttonYes'),
+        },
+      ],
+      header: this.translateService.instant('settings.resetAlert.title'),
+      message: this.translateService.instant('settings.resetAlert.message'),
+    });
+    alert.present();
+  }
 }

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

@@ -4,7 +4,7 @@
       <ion-back-button></ion-back-button>
       <ion-menu-button></ion-menu-button>
     </ion-buttons>
-    <ion-title>{{'settings.title' | translate}}</ion-title>
+    <ion-title>{{'settings.title' | translate | titlecase}}</ion-title>
   </ion-toolbar>
 </ion-header>
 
@@ -12,8 +12,7 @@
   <ion-list *ngFor="let categoryKey of categoriesOrder ">
     <div *ngIf="objectKeys(settingsCache).includes(categoryKey)">
       <ion-item-divider>
-        <h5>{{ settingsCache[categoryKey].settings[objectKeys(settingsCache[categoryKey].settings)[0]].translations[language].categories[0]}}
-        </h5>
+       <h5>{{ translator.translate(settingsCache[categoryKey]?.settings[objectKeys(settingsCache[categoryKey]?.settings)[0]]).categories()[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>