refactor(menu): refactor main manu

src/app/_helpers/fake-backend.interceptor.ts

@@ -60,7 +60,118 @@ const sampleIndexResponse: SCIndexResponse = {
     features: {
       widgets: true,
     },
-    menus: [],
+    menus: [
+      {
+        icon: 'menu',
+        id: 'main',
+        items: [
+          {
+            icon: 'search',
+            route: '/search',
+            title: 'search',
+            translations: {
+              de: {
+                title: 'Suche',
+              },
+              en: {
+                title: 'search',
+              },
+            },
+          },
+          {
+            icon: 'map',
+            route: '/map',
+            title: 'campus map',
+            translations: {
+              de: {
+                title: 'Campus Karte',
+              },
+              en: {
+                title: 'campus map',
+              },
+            },
+          },
+          {
+            icon: 'cafe',
+            route: '/canteen',
+            title: 'canteen',
+            translations: {
+              de: {
+                title: 'Mensa',
+              },
+              en: {
+                title: 'canteen',
+              },
+            },
+          },
+        ],
+        name: '',
+        translations: {
+          de: {
+            name: 'Hauptmenü',
+          },
+          en: {
+            name: 'main menu',
+          },
+        },
+      },
+      {
+        icon: 'person',
+        id: 'personal',
+        items: [
+          {
+            icon: 'settings',
+            route: '/settings',
+            title: 'settings',
+            translations: {
+              de: {
+                title: 'Einstellungen',
+              },
+              en: {
+                title: 'settings',
+              },
+            },
+          },
+        ],
+        name: 'Your Study-App',
+        translations: {
+          de: {
+            name: 'Deine Studi-App',
+          },
+          en: {
+            name: 'Your Study-App',
+          },
+        },
+      },
+      {
+        icon: '',
+        id: 'meta',
+        items: [
+          {
+            icon: 'information',
+            route: '/about',
+            title: 'about',
+            translations: {
+              de: {
+                title: 'Über StApps',
+              },
+              en: {
+                title: 'About StApps',
+              },
+            },
+          },
+        ],
+        name: '',
+        translations: {
+          de: {
+            name: '',
+          },
+          en: {
+            name: '',
+          },
+        },
+      },
+    ],
     name: 'StApps - Technische Universität Berlin',
     privacyPolicyUrl: 'https://stappsbe01.innocampus.tu-berlin.de/_static/privacy.md',
     settings: [

src/app/modules/menu/navigation/navigation.component.ts

@@ -13,6 +13,17 @@
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
 import {Component} from '@angular/core';
+import {LangChangeEvent, TranslateService} from '@ngx-translate/core';
+import {
+  SCAppConfigurationMenuCategory,
+  SCThing,
+  SCThingTranslator,
+  SCTranslations,
+} from '@openstapps/core';
+import {Logger} from '@openstapps/logger';
+import {ConfigProvider} from '../../config/config.provider';
+
+const logger = new Logger();
 
 /**
  * Generated class for the MenuPage page.
@@ -20,22 +31,28 @@ import {Component} from '@angular/core';
  * See https://ionicframework.com/docs/components/#navigation for more info on
  * Ionic pages and navigation.
  */
-
 @Component({
   selector: 'stapps-navigation',
+  styleUrls: ['navigation.scss'],
   templateUrl: 'navigation.html',
 })
 export class NavigationComponent {
-  /**
+  language: keyof SCTranslations<SCThing> = 'en';
-   * TODO
+  menu: SCAppConfigurationMenuCategory[];
-   */
+  translator: SCThingTranslator;
-  public pages = [
-    {title: 'Search', url: '/search', icon: 'search'},
-    {title: 'Settings', url: '/settings', icon: 'settings'},
-  ];
 
-  constructor() {
+  constructor(private configProvider: ConfigProvider,
-    // Nothing yet.
+              public translateService: TranslateService) {
+    this.loadMenuEntries().then(() =>
+      logger.log('menuEntries loaded from config: ' + JSON.stringify(this.menu))).catch((error) => {
+      logger.error(error);
+
+    });
+    translateService.onLangChange.subscribe((event: LangChangeEvent) => {
+      this.language = event.lang as keyof SCTranslations<any>;
+      this.translator = new SCThingTranslator(this.language, 'en');
+    });
+    this.translator = new SCThingTranslator('en', 'en');
   }
 
   /**
@@ -46,6 +63,10 @@ export class NavigationComponent {
     // console.log('ionViewDidLoad MenuPage');
   }
 
+  async loadMenuEntries() {
+    this.menu = await this.configProvider.getValue('menus') as SCAppConfigurationMenuCategory[];
+  }
+
   // openPage(page) {
   //   this.nav.setRoot(page.component);
   // }

src/app/modules/menu/navigation/navigation.html

@@ -9,15 +9,40 @@
       </ion-toolbar>
     </ion-header>
     <ion-content>
-      <ion-list>
+      <ion-list *ngFor="let category of menu">
-        <ion-menu-toggle auto-hide="false" *ngFor="let p of pages">
+        <ion-list *ngIf="category.id === 'main'">
-          <ion-item [routerDirection]="'root'" [routerLink]="[p.url]">
+          <ion-list-header *ngIf="category.name !== ''">{{category.translations[language].name | titlecase}}</ion-list-header>
-            <ion-icon slot="start" [name]="p.icon"></ion-icon>
+          <ion-menu-toggle auto-hide="false" *ngFor="let item of category.items">
-            <ion-label>
+            <ion-item [routerDirection]="'root'" [routerLink]="[item.route]">
-              {{p.title}}
+              <ion-icon slot="end" [name]="item.icon"></ion-icon>
-            </ion-label>
+              <ion-label>
-          </ion-item>
+                {{item.translations[language].title | titlecase}}
-        </ion-menu-toggle>
+              </ion-label>
+            </ion-item>
+          </ion-menu-toggle>
+        </ion-list>
+        <ion-list *ngIf="category.id === 'personal'">
+          <ion-list-header *ngIf="category.name !== ''">{{category.translations[language].name | titlecase}}</ion-list-header>
+          <ion-menu-toggle auto-hide="false" *ngFor="let item of category.items">
+            <ion-item [routerDirection]="'root'" [routerLink]="[item.route]">
+              <ion-icon slot="end" [name]="item.icon"></ion-icon>
+              <ion-label>
+                {{item.translations[language].title | titlecase}}
+              </ion-label>
+            </ion-item>
+          </ion-menu-toggle>
+        </ion-list>
+        <ion-list *ngIf="category.id === 'meta'">
+          <ion-list-header *ngIf="category.name !== ''">{{category.translations[language].name | titlecase}}</ion-list-header>
+          <ion-menu-toggle auto-hide="false" *ngFor="let item of category.items">
+            <ion-item [routerDirection]="'root'" [routerLink]="[item.route]">
+              <ion-icon slot="end" [name]="item.icon"></ion-icon>
+              <ion-label>
+                {{item.translations[language].title | titlecase}}
+              </ion-label>
+            </ion-item>
+          </ion-menu-toggle>
+        </ion-list>
       </ion-list>
     </ion-content>
   </ion-menu>

src/assets/i18n/de.json

@@ -15,6 +15,13 @@
       }
     }
   },
+  "menu": {
+    "context": {
+      "title": "Kontext Menü",
+      "sort": "Sortierung",
+      "filter": "Filter"
+    }
+  },
   "settings": {
     "resetAlert.title": "Alle Einstellungen zurücksetzen?",
     "resetAlert.message": "Sind Sie sich sicher, alle Einstellungen auf ihre Anfangswerte zurückzusetzen?",

src/assets/i18n/en.json

@@ -15,6 +15,13 @@
       }
     }
   },
+  "menu": {
+    "context": {
+      "title": "Context Menu",
+      "sort": "Sort",
+      "filter": "Filter"
+    }
+  },
   "settings": {
     "resetAlert.title": "Reset all settings?",
     "resetAlert.message": "Are you shure to reset all settings to defaults values?",