Merge pull request #4595 from crazyserver/MOBILE-4910

MOBILE-4910 mainmenu: Show custom menu items on user menu

Author: dpalou

src/core/constants.ts

@@ -169,6 +169,13 @@ export const enum CoreSyncIcon {
     SYNC = 'fas-rotate',
 };
 
+export enum CoreLinkOpenMethod {
+    APP = 'app',
+    INAPPBROWSER = 'inappbrowser',
+    BROWSER = 'browser',
+    EMBEDDED = 'embedded',
+};
+
 /**
  * Static class to contain all the core constants.
  */

src/core/directives/external-content.ts

@@ -32,7 +32,7 @@ import { CoreLogger } from '@singletons/logger';
 import { CoreError } from '@classes/errors/error';
 import { CoreSite } from '@classes/sites/site';
 import { CoreEventObserver, CoreEvents } from '@singletons/events';
-import { DownloadStatus } from '../constants';
+import { CoreLinkOpenMethod, DownloadStatus } from '../constants';
 import { CoreNetwork } from '@services/network';
 import { Translate } from '@singletons';
 import type { AsyncDirective } from '@coretypes/async-directive';
@@ -370,7 +370,7 @@ export class CoreExternalContentDirective implements AfterViewInit, OnChanges, O
         const tagName = this.element.tagName;
         const openIn = tagName === 'A' && this.element.getAttribute('data-open-in');
 
-        if (openIn === 'app' || openIn === 'browser') {
+        if (openIn === CoreLinkOpenMethod.APP || openIn === CoreLinkOpenMethod.BROWSER) {
             // The file is meant to be opened in browser or InAppBrowser, don't use the downloaded URL because it won't work.
             if (!site.isSitePluginFileUrl(url)) {
                 return url;

src/core/directives/format-text.ts

@@ -53,7 +53,7 @@ import { MediaElementController } from '@classes/element-controllers/MediaElemen
 import { FrameElement, FrameElementController } from '@classes/element-controllers/FrameElementController';
 import { CoreUrl } from '@singletons/url';
 import { CoreIcons } from '@singletons/icons';
-import { ContextLevel } from '../constants';
+import { ContextLevel, CoreLinkOpenMethod } from '../constants';
 import { CoreWait } from '@singletons/wait';
 import { toBoolean } from '../transforms/boolean';
 import { CoreViewer } from '@features/viewer/services/viewer';
@@ -839,7 +839,7 @@ export class CoreFormatTextDirective implements OnDestroy, AsyncDirective {
                 // Try to convert the URL to absolute if needed.
                 url = CoreUrl.toAbsoluteURL(site.getURL(), url);
                 const confirmMessage = element.dataset.appUrlConfirm;
-                const openInApp = element.dataset.openIn === 'app';
+                const openInApp = element.dataset.openIn === CoreLinkOpenMethod.APP;
                 const refreshOnResume = element.dataset.appUrlResumeAction === 'refresh';
 
                 if (confirmMessage) {

src/core/directives/link.ts

@@ -19,7 +19,7 @@ import { CoreFileHelper } from '@services/file-helper';
 import { CoreSites } from '@services/sites';
 import { CoreUrl } from '@singletons/url';
 import { CoreOpener } from '@singletons/opener';
-import { CoreConstants } from '@/core/constants';
+import { CoreConstants, CoreLinkOpenMethod } from '@/core/constants';
 import { CoreContentLinksHelper } from '@features/contentlinks/services/contentlinks-helper';
 import { CoreCustomURLSchemes } from '@services/urlschemes';
 import { DomSanitizer } from '@singletons';
@@ -187,8 +187,8 @@ export class CoreLinkDirective implements OnInit {
     protected async openExternalLink(href: string, openIn?: string | null): Promise<void> {
         // Priority order is: core-link inApp attribute > forceOpenLinksIn setting > data-open-in HTML attribute.
         const openInApp = this.inApp ??
-            (CoreConstants.CONFIG.forceOpenLinksIn !== 'browser' &&
-                (CoreConstants.CONFIG.forceOpenLinksIn === 'app' || openIn === 'app'));
+            (CoreConstants.CONFIG.forceOpenLinksIn !== CoreLinkOpenMethod.BROWSER &&
+                (CoreConstants.CONFIG.forceOpenLinksIn === CoreLinkOpenMethod.APP || openIn === CoreLinkOpenMethod.APP));
 
         // Check if we need to auto-login.
         if (!CoreSites.isLoggedIn()) {

src/core/features/mainmenu/components/custom-menu-item/custom-menu-item.html

@@ -0,0 +1,17 @@
+@if (type() !== 'embedded') {
+    <ion-item button [href]="url()" [attr.aria-label]="label()" core-link [capture]="type() === 'app'"
+        [inApp]="type() === 'inappbrowser'" class="core-custom-menu-item" [detail]="true"
+        [detailIcon]="type() === 'browser' ? 'open-outline' : 'chevron-forward'">
+        <ion-icon [name]="icon()" slot="start" aria-hidden="true" />
+        <ion-label>
+            <p class="item-heading">{{label()}}</p>
+        </ion-label>
+    </ion-item>
+} @else {
+    <ion-item button (click)="openItem()" [attr.aria-label]="label()" class="core-custom-menu-item" [detail]="true">
+        <ion-icon [name]="icon()" slot="start" aria-hidden="true" />
+        <ion-label>
+            <p class="item-heading">{{label()}}</p>
+        </ion-label>
+    </ion-item>
+}

src/core/features/mainmenu/components/custom-menu-item/custom-menu-item.ts

@@ -0,0 +1,59 @@
+// (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 { CoreLinkOpenMethod } from '@/core/constants';
+import { CoreSharedModule } from '@/core/shared.module';
+import { Component, input } from '@angular/core';
+import { CoreViewer } from '@features/viewer/services/viewer';
+
+/**
+ * Component to display a custom menu item.
+ */
+@Component({
+    selector: 'core-custom-menu-item',
+    templateUrl: 'custom-menu-item.html',
+    imports: [
+        CoreSharedModule,
+    ],
+})
+export class CoreCustomMenuItemComponent {
+
+    /**
+     * Type of the item: app, inappbrowser, browser or embedded.
+     */
+    readonly type = input.required<CoreLinkOpenMethod>();
+
+    /**
+     * Url of the item.
+     */
+    readonly url = input.required<string>();
+
+    /**
+     * Label to display for the item.
+     */
+    readonly label = input.required<string>();
+
+    /**
+     * Name of the icon to display for the item.
+     */
+    readonly icon = input.required<string>();
+
+    /**
+     * Open an embedded custom item.
+     */
+    openItem(): void {
+        CoreViewer.openIframeViewer(this.label(), this.url());
+    }
+
+}

src/core/features/mainmenu/components/user-menu/user-menu.html

@@ -50,6 +50,10 @@ <h1>
                 <ng-container *ngTemplateOutlet="menuHandler; context: { handler, class: 'core-user-menu-handler', addSeparator: false }" />
             }
 
+            @for (item of customItems; track item) {
+                <core-custom-menu-item [type]="item.type" [label]="item.label" [icon]="item.icon" [url]="item.url" />
+            }
+
             @for (handler of accountHandlers; track handler.name; let first = $first) {
                 <ng-container
                     *ngTemplateOutlet="menuHandler; context: { handler, class: 'core-user-account-menu-handler', addSeparator: first }" />

src/core/features/mainmenu/components/user-menu/user-menu.ts

@@ -38,6 +38,8 @@ import { CoreAlerts } from '@services/overlays/alerts';
 import { CoreDynamicComponent } from '@components/dynamic-component/dynamic-component';
 import { CorePromiseUtils } from '@singletons/promise-utils';
 import type { ReloadableComponent } from '@coretypes/reloadable-component';
+import { CoreCustomMenu, CoreCustomMenuItem } from '@features/mainmenu/services/custommenu';
+import { CoreCustomMenuItemComponent } from '../custom-menu-item/custom-menu-item';
 
 /**
  * Component to display a user menu.
@@ -49,6 +51,7 @@ import type { ReloadableComponent } from '@coretypes/reloadable-component';
     imports: [
         CoreSharedModule,
         CoreSiteLogoComponent,
+        CoreCustomMenuItemComponent,
     ],
 })
 export class CoreMainMenuUserMenuComponent implements OnInit, OnDestroy {
@@ -59,6 +62,7 @@ export class CoreMainMenuUserMenuComponent implements OnInit, OnDestroy {
     siteUrl?: string;
     displaySiteUrl = false;
     handlers: HandlerData[] = [];
+    customItems?: CoreCustomMenuItem[];
     accountHandlers: HandlerData[] = [];
     handlersLoaded = false;
     user?: CoreUserProfile;
@@ -84,6 +88,8 @@ export class CoreMainMenuUserMenuComponent implements OnInit, OnDestroy {
         this.removeAccountOnLogout = !!CoreConstants.CONFIG.removeaccountonlogout;
         this.displaySiteUrl = currentSite.shouldDisplayInformativeLinks();
 
+        await this.loadCustomMenuItems();
+
         await this.loadData();
     }
 
@@ -177,6 +183,13 @@ export class CoreMainMenuUserMenuComponent implements OnInit, OnDestroy {
         event?.complete();
     }
 
+    /**
+     * Load custom menu items.
+     */
+    protected async loadCustomMenuItems(): Promise<void> {
+        this.customItems = await CoreCustomMenu.getUserCustomMenuItems();
+    }
+
     /**
      * Opens User profile page.
      *

src/core/features/mainmenu/pages/more/more.html

@@ -52,25 +52,11 @@ <h1>{{ 'core.more' | translate }}</h1>
                 </ion-item>
             }
         }
-        <ng-container *ngFor="let item of customItems">
-            @if (item.type !== 'embedded') {
-                <ion-item button [href]="item.url" [attr.aria-label]="item.label" core-link [capture]="item.type === 'app'"
-                    [inApp]="item.type === 'inappbrowser'" class="core-moremenu-customitem" [detail]="true"
-                    [detailIcon]="item.type === 'browser' ? 'open-outline' : 'chevron-forward'">
-                    <ion-icon [name]="item.icon" slot="start" aria-hidden="true" />
-                    <ion-label>
-                        <p class="item-heading">{{item.label}}</p>
-                    </ion-label>
-                </ion-item>
-            } @else {
-                <ion-item button (click)="openItem(item)" [attr.aria-label]="item.label" class="core-moremenu-customitem" [detail]="true">
-                    <ion-icon [name]="item.icon" slot="start" aria-hidden="true" />
-                    <ion-label>
-                        <p class="item-heading">{{item.label}}</p>
-                    </ion-label>
-                </ion-item>
-            }
-        </ng-container>
+
+        @for (item of customItems; track item) {
+            <core-custom-menu-item [type]="item.type" [label]="item.label" [icon]="item.icon" [url]="item.url" />
+        }
+        
         @if (showScanQR) {
             <ion-item button (click)="scanQR()" [detail]="true">
                 <ion-icon name="fas-qrcode" slot="start" aria-hidden="true" />

src/core/features/mainmenu/pages/more/more.ts

@@ -22,7 +22,7 @@ import {
     CoreMainMenuHandlerToDisplay,
     CoreMainMenuPageNavHandlerToDisplay,
 } from '../../services/mainmenu-delegate';
-import { CoreMainMenu, CoreMainMenuCustomItem } from '../../services/mainmenu';
+import { CoreMainMenu } from '../../services/mainmenu';
 import { CoreEventObserver, CoreEvents } from '@singletons/events';
 import { CoreNavigator } from '@services/navigator';
 import { Translate } from '@singletons';
@@ -35,6 +35,8 @@ import { CoreUrl } from '@singletons/url';
 import { CoreDynamicComponent } from '@components/dynamic-component/dynamic-component';
 import { ReloadableComponent } from '@coretypes/reloadable-component';
 import { CorePromiseUtils } from '@singletons/promise-utils';
+import { CoreCustomMenu, CoreCustomMenuItem } from '@features/mainmenu/services/custommenu';
+import { CoreCustomMenuItemComponent } from '@features/mainmenu/components/custom-menu-item/custom-menu-item';
 
 /**
  * Page that displays the more page of the app.
@@ -46,6 +48,7 @@ import { CorePromiseUtils } from '@singletons/promise-utils';
     imports: [
         CoreSharedModule,
         CoreMainMenuUserButtonComponent,
+        CoreCustomMenuItemComponent,
     ],
 })
 export default class CoreMainMenuMorePage implements OnInit, OnDestroy {
@@ -55,7 +58,7 @@ export default class CoreMainMenuMorePage implements OnInit, OnDestroy {
     handlers?: CoreMainMenuHandlerToDisplay[];
     handlersLoaded = false;
     showScanQR: boolean;
-    customItems?: CoreMainMenuCustomItem[];
+    customItems?: CoreCustomMenuItem[];
     hasComponentHandlers = false;
 
     protected allHandlers?: CoreMainMenuHandlerToDisplay[];
@@ -68,7 +71,7 @@ export default class CoreMainMenuMorePage implements OnInit, OnDestroy {
         this.langObserver = CoreEvents.on(CoreEvents.LANGUAGE_CHANGED, () => this.loadCustomMenuItems());
 
         this.updateSiteObserver = CoreEvents.on(CoreEvents.SITE_UPDATED, async () => {
-            this.customItems = await CoreMainMenu.getCustomMenuItems();
+            this.customItems = await CoreCustomMenu.getCustomMainMenuItems();
         }, CoreSites.getCurrentSiteId());
 
         this.loadCustomMenuItems();
@@ -128,7 +131,7 @@ export default class CoreMainMenuMorePage implements OnInit, OnDestroy {
      * Load custom menu items.
      */
     protected async loadCustomMenuItems(): Promise<void> {
-        this.customItems = await CoreMainMenu.getCustomMenuItems();
+        this.customItems = await CoreCustomMenu.getCustomMainMenuItems();
     }
 
     /**
@@ -142,15 +145,6 @@ export default class CoreMainMenuMorePage implements OnInit, OnDestroy {
         CoreNavigator.navigateToSitePath(handler.page, { params });
     }
 
-    /**
-     * Open an embedded custom item.
-     *
-     * @param item Item to open.
-     */
-    openItem(item: CoreMainMenuCustomItem): void {
-        CoreViewer.openIframeViewer(item.label, item.url);
-    }
-
     /**
      * Open settings.
      */