From 7a3dd22189ca391afac468f72348d1da24b886c4 Mon Sep 17 00:00:00 2001
From: Noel De Martin <noel@moodle.com>
Date: Mon, 2 Nov 2020 15:16:40 +0100
Subject: [PATCH] MOBILE-3320 routes: Define dynamic mainmenu routes

---
 src/app/app.module.ts                         |  2 +
 .../core/mainmenu/mainmenu-routing.module.ts  | 74 ++++++++++++-------
 src/app/core/mainmenu/pages/more/more.html    | 20 ++---
 src/app/core/settings/pages/about/about.html  |  2 +-
 .../settings/pages/about/about.page.module.ts |  6 ++
 src/app/core/settings/pages/app/app.page.ts   |  2 +-
 src/app/core/settings/settings-init.module.ts | 31 ++++++++
 .../core/settings/settings-routing.module.ts  | 11 +--
 8 files changed, 101 insertions(+), 47 deletions(-)
 create mode 100644 src/app/core/settings/settings-init.module.ts

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index daf0e9600..2c865e6c2 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -59,6 +59,7 @@ import { initCoreSyncDB } from '@services/sync.db';
 import { CoreEmulatorModule } from '@core/emulator/emulator.module';
 import { CoreLoginModule } from '@core/login/login.module';
 import { CoreCoursesModule } from '@core/courses/courses.module';
+import { CoreSettingsInitModule } from '@core/settings/settings-init.module';
 
 import { setSingletonsInjector } from '@singletons/core.singletons';
 
@@ -88,6 +89,7 @@ export function createTranslateLoader(http: HttpClient): TranslateHttpLoader {
         CoreEmulatorModule,
         CoreLoginModule,
         CoreCoursesModule,
+        CoreSettingsInitModule,
     ],
     providers: [
         { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
diff --git a/src/app/core/mainmenu/mainmenu-routing.module.ts b/src/app/core/mainmenu/mainmenu-routing.module.ts
index 9e45e3e5e..1afad8941 100644
--- a/src/app/core/mainmenu/mainmenu-routing.module.ts
+++ b/src/app/core/mainmenu/mainmenu-routing.module.ts
@@ -12,36 +12,60 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
+import { InjectionToken, Injector, ModuleWithProviders, NgModule } from '@angular/core';
+import { RouterModule, ROUTES, Routes } from '@angular/router';
+
+import { CoreArray } from '@/app/singletons/array';
 
 import { CoreMainMenuPage } from './pages/menu/menu.page';
 import { CoreMainMenuMorePage } from './pages/more/more.page';
 
-const routes: Routes = [
-    {
-        path: '',
-        component: CoreMainMenuPage,
-        children: [
-            {
-                path: 'home', // @todo: Add this route dynamically.
-                loadChildren: () => import('./pages/home/home.page.module').then( m => m.CoreHomePageModule),
-            },
-            {
-                path: 'more',
-                children: [
-                    {
-                        path: '',
-                        component: CoreMainMenuMorePage,
-                    },
-                ],
-            },
-        ],
-    },
-];
+function buildMainMenuRoutes(injector: Injector): Routes {
+    const routes = CoreArray.flatten(injector.get<Routes[]>(MAIN_MENU_ROUTES, []));
+
+    return [
+        {
+            path: '',
+            component: CoreMainMenuPage,
+            children: [
+                {
+                    path: 'home', // @todo: Add this route dynamically.
+                    loadChildren: () => import('./pages/home/home.page.module').then(m => m.CoreHomePageModule),
+                },
+                {
+                    path: 'more',
+                    children: [
+                        {
+                            path: '',
+                            component: CoreMainMenuMorePage,
+                        },
+                        ...routes,
+                    ],
+                },
+                ...routes,
+                // @todo handle 404.
+            ],
+        },
+    ];
+}
+
+export const MAIN_MENU_ROUTES = new InjectionToken('MAIN_MENU_ROUTES');
 
 @NgModule({
-    imports: [RouterModule.forChild(routes)],
+    providers: [
+        { provide: ROUTES, multi: true, useFactory: buildMainMenuRoutes, deps: [Injector] },
+    ],
     exports: [RouterModule],
 })
-export class CoreMainMenuRoutingModule {}
+export class CoreMainMenuRoutingModule {
+
+    static forChild(routes: Routes): ModuleWithProviders<CoreMainMenuRoutingModule> {
+        return {
+            ngModule: CoreMainMenuRoutingModule,
+            providers: [
+                { provide: MAIN_MENU_ROUTES, multi: true, useValue: routes },
+            ],
+        };
+    }
+
+}
diff --git a/src/app/core/mainmenu/pages/more/more.html b/src/app/core/mainmenu/pages/more/more.html
index 92ed80e86..96b7bbbd4 100644
--- a/src/app/core/mainmenu/pages/more/more.html
+++ b/src/app/core/mainmenu/pages/more/more.html
@@ -25,7 +25,7 @@
             <ion-spinner></ion-spinner>
         </ion-item>
         <ion-item button *ngFor="let handler of handlers" [ngClass]="['core-moremenu-handler', handler.class || '']"
-            (click)="openHandler(handler)" title="{{ handler.title | translate }}" detail="true" details>
+            (click)="openHandler(handler)" title="{{ handler.title | translate }}" detail="true" detail>
             <ion-icon [name]="handler.icon" slot="start"></ion-icon>
             <ion-label>
                 <h2>{{ handler.title | translate}}</h2>
@@ -36,55 +36,55 @@
         </ion-item>
         <ng-container *ngFor="let item of customItems">
             <ion-item button *ngIf="item.type != 'embedded'" [href]="item.url" title="{{item.label}}" core-link
-                [capture]="item.type == 'app'" [inApp]="item.type == 'inappbrowser'" class="core-moremenu-customitem" details>
+                [capture]="item.type == 'app'" [inApp]="item.type == 'inappbrowser'" class="core-moremenu-customitem" detail>
                 <ion-icon [name]="item.icon" slot="start"></ion-icon>
                 <ion-label>
                     <h2>{{item.label}}</h2>
                 </ion-label>
             </ion-item>
             <ion-item button *ngIf="item.type == 'embedded'" (click)="openItem(item)" title="{{item.label}}"
-                class="core-moremenu-customitem" details>
+                class="core-moremenu-customitem" detail>
                 <ion-icon [name]="item.icon" slot="start"></ion-icon>
                 <ion-label>
                     <h2>{{item.label}}</h2>
                 </ion-label>
             </ion-item>
         </ng-container>
-        <ion-item button *ngIf="showScanQR" (click)="scanQR()" details>
+        <ion-item button *ngIf="showScanQR" (click)="scanQR()" detail>
             <ion-icon name="fa-qrcode" slot="start" aria-hidden="true"></ion-icon>
             <ion-label>
                 <h2>{{ 'core.scanqr' | translate }}</h2>
             </ion-label>
         </ion-item>
         <ion-item button *ngIf="showWeb && siteInfo" [href]="siteInfo.siteurl" core-link autoLogin="yes"
-            title="{{ 'core.mainmenu.website' | translate }}" details>
+            title="{{ 'core.mainmenu.website' | translate }}" detail>
             <ion-icon name="globe" slot="start" aria-hidden="true"></ion-icon>
             <ion-label>
                 <h2>{{ 'core.mainmenu.website' | translate }}</h2>
             </ion-label>
         </ion-item>
         <ion-item button *ngIf="showHelp" [href]="docsUrl" core-link autoLogin="no"
-            title="{{ 'core.mainmenu.help' | translate }}" details>
+            title="{{ 'core.mainmenu.help' | translate }}" detail>
             <ion-icon name="help-buoy" slot="start" aria-hidden="true"></ion-icon>
             <ion-label>
                 <h2>{{ 'core.mainmenu.help' | translate }}</h2>
             </ion-label>
         </ion-item>
-        <ion-item button (click)="openSitePreferences()" title="{{ 'core.settings.preferences' | translate }}" details>
+        <ion-item button (click)="openSitePreferences()" title="{{ 'core.settings.preferences' | translate }}" detail>
             <ion-icon name="fa-wrench" slot="start"></ion-icon>
             <ion-label>
                 <h2>{{ 'core.settings.preferences' | translate }}</h2>
             </ion-label>
         </ion-item>
-        <ion-item button (click)="logout()" title="{{ logoutLabel | translate }}" details>
+        <ion-item button (click)="logout()" title="{{ logoutLabel | translate }}" detail>
             <ion-icon name="log-out" slot="start" aria-hidden="true"></ion-icon>
             <ion-label>
                 <h2>{{ logoutLabel | translate }}</h2>
             </ion-label>
         </ion-item>
         <ion-item-divider></ion-item-divider>
-        <ion-item button router-direction="forward" routerLink="/settings/app"
-            title="{{ 'core.settings.appsettings' | translate }}" details>
+        <ion-item button router-direction="forward" routerLink="settings"
+            title="{{ 'core.settings.appsettings' | translate }}" detail>
             <ion-icon name="fa-cogs" slot="start"></ion-icon>
             <ion-label>
                 <h2>{{ 'core.settings.appsettings' | translate }}</h2>
diff --git a/src/app/core/settings/pages/about/about.html b/src/app/core/settings/pages/about/about.html
index 8a47fbf42..081653499 100644
--- a/src/app/core/settings/pages/about/about.html
+++ b/src/app/core/settings/pages/about/about.html
@@ -21,7 +21,7 @@
         <ion-icon name="fa-user-shield" slot="start"></ion-icon>
         <ion-label>{{ 'core.settings.privacypolicy' | translate }}</ion-label>
     </ion-item>
-    <ion-item button class="ion-text-wrap" (click)="openPage('deviceinfo')" detail>
+    <ion-item button class="ion-text-wrap" router-direction="forward" routerLink="deviceinfo" detail>
         <ion-icon name="fa-mobile" slot="start"></ion-icon>
         <ion-label>{{ 'core.settings.deviceinfo' | translate }}</ion-label>
     </ion-item>
diff --git a/src/app/core/settings/pages/about/about.page.module.ts b/src/app/core/settings/pages/about/about.page.module.ts
index b63096fc8..82fb94b64 100644
--- a/src/app/core/settings/pages/about/about.page.module.ts
+++ b/src/app/core/settings/pages/about/about.page.module.ts
@@ -28,6 +28,12 @@ const routes: Routes = [
         path: '',
         component: CoreSettingsAboutPage,
     },
+    {
+        path: 'deviceinfo',
+        loadChildren: () =>
+            import('@core/settings/pages/deviceinfo/deviceinfo.page.module')
+                .then(m => m.CoreSettingsDeviceInfoPageModule),
+    },
 ];
 
 @NgModule({
diff --git a/src/app/core/settings/pages/app/app.page.ts b/src/app/core/settings/pages/app/app.page.ts
index 01b9fd442..7caeb0245 100644
--- a/src/app/core/settings/pages/app/app.page.ts
+++ b/src/app/core/settings/pages/app/app.page.ts
@@ -59,7 +59,7 @@ export class CoreSettingsAppPage {
     openSettings(page: string, params?: Params): void {
         this.selectedPage = page;
         // this.splitviewCtrl!.push(page, params);
-        this.router.navigate(['../'+page], { relativeTo: this.route, queryParams: params });
+        this.router.navigate([page], { relativeTo: this.route, queryParams: params });
     }
 
 }
diff --git a/src/app/core/settings/settings-init.module.ts b/src/app/core/settings/settings-init.module.ts
new file mode 100644
index 000000000..6810084e2
--- /dev/null
+++ b/src/app/core/settings/settings-init.module.ts
@@ -0,0 +1,31 @@
+// (C) Copyright 2015 Moodle Pty Ltd.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { NgModule } from '@angular/core';
+import { Routes } from '@angular/router';
+
+import { CoreMainMenuRoutingModule } from '@core/mainmenu/mainmenu-routing.module';
+
+const routes: Routes = [
+    {
+        path: 'settings',
+        loadChildren: () => import('@core/settings/settings.module').then(m => m.CoreSettingsModule),
+    },
+];
+
+@NgModule({
+    imports: [CoreMainMenuRoutingModule.forChild(routes)],
+    exports: [CoreMainMenuRoutingModule],
+})
+export class CoreSettingsInitModule {}
diff --git a/src/app/core/settings/settings-routing.module.ts b/src/app/core/settings/settings-routing.module.ts
index a391ebf1b..20554d6dd 100644
--- a/src/app/core/settings/settings-routing.module.ts
+++ b/src/app/core/settings/settings-routing.module.ts
@@ -20,18 +20,9 @@ const routes: Routes = [
         path: 'about',
         loadChildren: () => import('./pages/about/about.page.module').then( m => m.CoreSettingsAboutPageModule),
     },
-    {
-        path: 'deviceinfo',
-        loadChildren: () => import('./pages/deviceinfo/deviceinfo.page.module').then( m => m.CoreSettingsDeviceInfoPageModule),
-    },
-    {
-        path: 'app',
-        loadChildren: () => import('./pages/app/app.page.module').then( m => m.CoreSettingsAppPageModule),
-    },
     {
         path: '',
-        redirectTo: 'app',
-        pathMatch: 'full',
+        loadChildren: () => import('./pages/app/app.page.module').then( m => m.CoreSettingsAppPageModule),
     },
 ];