MOBILE-4770 overview: Support site plugins items in overview

Author: dpalou

src/core/features/course/classes/module-base-handler.ts

@@ -16,7 +16,7 @@ import { CoreNavigationOptions, CoreNavigator } from '@services/navigator';
 import { CoreCourseModuleHelper } from '../services/course-module-helper';
 import { CoreCourseModuleData } from '../services/course-helper';
 import { CoreCourseModuleHandler, CoreCourseModuleHandlerData, CoreCourseOverviewItemContent } from '../services/module-delegate';
-import { CoreCourseOverviewItem } from '../services/course-overview';
+import { CoreCourseOverviewActivity, CoreCourseOverviewItem } from '../services/course-overview';
 
 /**
  * Base module handler to be registered.
@@ -94,7 +94,11 @@ export class CoreModuleHandlerBase implements Partial<CoreCourseModuleHandler> {
     /**
      * @inheritdoc
      */
-    async getOverviewItemContent(item: CoreCourseOverviewItem): Promise<CoreCourseOverviewItemContent | undefined> {
+    async getOverviewItemContent(
+        item: CoreCourseOverviewItem,
+        activity: CoreCourseOverviewActivity, // eslint-disable-line @typescript-eslint/no-unused-vars
+        courseId: number, // eslint-disable-line @typescript-eslint/no-unused-vars
+    ): Promise<CoreCourseOverviewItemContent | undefined> {
         // Handle items common to all modules or items using common renderables.
         if (item.key === 'name') {
             const { CoreCourseOverviewItemNameComponent } =

src/core/features/course/pages/overview/overview.ts

@@ -262,7 +262,7 @@ export default class CoreCourseOverviewPage implements OnInit {
                 }
 
                 // Get the data to render the item.
-                const content = await CoreCourseModuleDelegate.getOverviewItemContent(modName, item);
+                const content = await CoreCourseModuleDelegate.getOverviewItemContent(modName, item, activity, this.courseId);
 
                 if (content === undefined) {
                     // The app doesn't know how to render the item, mark the mod type as not supported and render an empty item.

src/core/features/course/services/module-delegate.ts

@@ -27,7 +27,7 @@ import { CoreNavigationOptions } from '@services/navigator';
 import { DownloadStatus } from '@/core/constants';
 import { CORE_COURSE_MODULE_FEATURE_PREFIX } from '../constants';
 import { ModFeature } from '@addons/mod/constants';
-import { CoreCourseOverviewItem } from './course-overview';
+import { CoreCourseOverviewActivity, CoreCourseOverviewItem } from './course-overview';
 
 /**
  * Interface that all course module handlers must implement.
@@ -129,9 +129,15 @@ export interface CoreCourseModuleHandler extends CoreDelegateHandler {
      * Get the data to render a course overview item.
      *
      * @param item Item to get the content for.
+     * @param activity Activity data the item belongs to.
+     * @param courseId Course ID the item belongs to.
      * @returns Data to render the item content. If undefined it means the app doesn't know how to render the item.
      */
-    getOverviewItemContent?(item: CoreCourseOverviewItem): Promise<CoreCourseOverviewItemContent | undefined>;
+    getOverviewItemContent?(
+        item: CoreCourseOverviewItem,
+        activity: CoreCourseOverviewActivity,
+        courseId: number,
+    ): Promise<CoreCourseOverviewItemContent | undefined>;
 }
 
 /**
@@ -422,14 +428,22 @@ export class CoreCourseModuleDelegateService extends CoreDelegate<CoreCourseModu
      *
      * @param modname The name of the module type.
      * @param item Overview item data.
+     * @param activity Activity data the item belongs to.
+     * @param courseId Course ID the item belongs to.
      * @returns Data to render the item.
      */
     async getOverviewItemContent(
         modname: string,
         item: CoreCourseOverviewItem,
+        activity: CoreCourseOverviewActivity,
+        courseId: number,
     ): Promise<CoreCourseOverviewItemContent | undefined> {
         // Support overview even if the handler is disabled.
-        return await this.executeFunction<CoreCourseOverviewItemContent>(modname, 'getOverviewItemContent', [item]);
+        return await this.executeFunction<CoreCourseOverviewItemContent>(
+            modname,
+            'getOverviewItemContent',
+            [item, activity, courseId],
+        );
     }
 
     /**

src/core/features/siteplugins/classes/handlers/module-handler.ts

@@ -16,7 +16,11 @@ import { Type } from '@angular/core';
 
 import { CoreCourseModuleHelper } from '@features/course/services/course-module-helper';
 import { CoreCourseHelper, CoreCourseModuleData } from '@features/course/services/course-helper';
-import { CoreCourseModuleHandler, CoreCourseModuleHandlerData } from '@features/course/services/module-delegate';
+import {
+    CoreCourseModuleHandler,
+    CoreCourseModuleHandlerData,
+    CoreCourseOverviewItemContent,
+} from '@features/course/services/module-delegate';
 import {
     CoreSitePlugins,
     CoreSitePluginsContent,
@@ -25,30 +29,31 @@ import {
 } from '@features/siteplugins/services/siteplugins';
 import { CoreNavigationOptions, CoreNavigator } from '@services/navigator';
 import { CoreLogger } from '@singletons/logger';
-import { CoreSitePluginsBaseHandler } from './base-handler';
 import { CoreEvents } from '@singletons/events';
 import { CorePromiseUtils } from '@singletons/promise-utils';
 import { CORE_SITE_PLUGINS_UPDATE_COURSE_CONTENT } from '@features/siteplugins/constants';
 import { ModFeature } from '@addons/mod/constants';
+import { CoreCourseOverviewActivity, CoreCourseOverviewItem } from '@features/course/services/course-overview';
+import { CoreModuleHandlerBase } from '@features/course/classes/module-base-handler';
 
 /**
  * Handler to support a module using a site plugin.
  */
-export class CoreSitePluginsModuleHandler extends CoreSitePluginsBaseHandler implements CoreCourseModuleHandler {
+export class CoreSitePluginsModuleHandler extends CoreModuleHandlerBase implements CoreCourseModuleHandler {
 
     supportedFeatures?: Record<ModFeature, unknown>;
     supportsFeature?: (feature: ModFeature) => unknown;
 
     protected logger: CoreLogger;
 
     constructor(
-        name: string,
+        public name: string,
         public modName: string,
         protected plugin: CoreSitePluginsPlugin,
         protected handlerSchema: CoreSitePluginsCourseModuleHandlerData,
         protected initResult: CoreSitePluginsContent | null,
     ) {
-        super(name);
+        super();
 
         this.logger = CoreLogger.getInstance('CoreSitePluginsModuleHandler');
         this.supportedFeatures = handlerSchema.supportedfeatures;
@@ -244,4 +249,50 @@ export class CoreSitePluginsModuleHandler extends CoreSitePluginsBaseHandler imp
         CoreNavigator.navigateToSitePath(`siteplugins/module/${courseId}/${module.id}`, options);
     }
 
+    /**
+     * @inheritdoc
+     */
+    async getOverviewItemContent(
+        item: CoreCourseOverviewItem,
+        activity: CoreCourseOverviewActivity,
+        courseId: number,
+    ): Promise<CoreCourseOverviewItemContent | undefined> {
+        const content = await this.getOverviewItemContentFromInitTemplates(item, activity, courseId);
+
+        return content ?? super.getOverviewItemContent(item, activity, courseId);
+    }
+
+    /**
+     * If there is a template in the init result to render the item, use it to render the content.
+     *
+     * @param item Item to render.
+     * @param activity Activity data the item belongs to.
+     * @param courseId Course ID the item belongs to.
+     * @returns Content to render, undefined if no template found.
+     */
+    protected async getOverviewItemContentFromInitTemplates(
+        item: CoreCourseOverviewItem,
+        activity: CoreCourseOverviewActivity,
+        courseId: number,
+    ): Promise<CoreCourseOverviewItemContent | undefined> {
+        const template = this.initResult?.templates?.find(template => template.id === item.key);
+        if (!template) {
+            return;
+        }
+
+        const { CoreSitePluginsOverviewItemComponent } =
+                await import('@features/siteplugins/components/overview-item/overview-item');
+
+        return {
+            component: CoreSitePluginsOverviewItemComponent,
+            componentData: {
+                item,
+                activity,
+                courseId,
+                html: template.html,
+                otherData: this.initResult?.otherdata,
+            },
+        };
+    }
+
 }

src/core/features/siteplugins/components/overview-item/core-siteplugins-overview-item.html

@@ -0,0 +1 @@
+<core-compile-html [text]="html()" [jsData]="jsData()" />

src/core/features/siteplugins/components/overview-item/overview-item.ts

@@ -0,0 +1,48 @@
+// (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 { CoreSharedModule } from '@/core/shared.module';
+import { Component, computed, input } from '@angular/core';
+import { CoreCompileHtmlComponent } from '@features/compile/components/compile-html/compile-html';
+import { CoreCourseOverviewActivity, CoreCourseOverviewItem } from '@features/course/services/course-overview';
+
+/**
+ * Component to render a site plugin overview item.
+ */
+@Component({
+    selector: 'core-site-plugins-overview-item',
+    templateUrl: 'core-siteplugins-overview-item.html',
+    imports: [
+        CoreSharedModule,
+        CoreCompileHtmlComponent,
+    ],
+})
+export class CoreSitePluginsOverviewItemComponent {
+
+    readonly courseId = input.required<number>();
+    readonly activity = input.required<CoreCourseOverviewActivity>();
+    readonly item = input.required<CoreCourseOverviewItem<unknown>>();
+    readonly html = input.required<string>();
+    readonly otherData = input<Record<string,unknown>>();
+
+    // Pass jsData even if there's no JS code because the JS variables can be used in the HTML.
+    readonly jsData = computed(() => ({
+        courseId: this.courseId(),
+        activity: this.activity(),
+        item: this.item(),
+        // Make a copy of otherdata to make it unique for each item and activity.
+        INIT_OTHERDATA: { ...(this.otherData() ?? {}) }, // eslint-disable-line @typescript-eslint/naming-convention
+    }));
+
+}

src/core/features/siteplugins/services/siteplugins-init.ts

@@ -89,6 +89,7 @@ import { CoreEnrolAction, CoreEnrolDelegate } from '@features/enrol/services/enr
 import { CoreSitePluginsEnrolHandler } from '../classes/handlers/enrol-handler';
 import { CORE_SITE_PLUGINS_COMPONENT } from '../constants';
 import { CORE_COURSES_MY_COURSES_CHANGED_EVENT } from '@features/courses/constants';
+import { CoreSitePluginsBaseHandler } from '../classes/handlers/base-handler';
 
 /**
  * Helper service to provide functionalities regarding site plugins. It basically has the features to load and register site
@@ -598,18 +599,7 @@ export class CoreSitePluginsInitService {
             handlerSchema.methodJSResult = result.jsResult;
             handlerSchema.methodOtherdata = result.otherdata;
 
-            if (result.jsResult) {
-                // Override default handler functions with the result of the method JS.
-                const jsResult = <Record<string, unknown>> result.jsResult;
-                const handlerProperties = CoreObject.getAllPropertyNames(handler);
-
-                for (const property of handlerProperties) {
-                    if (property !== 'constructor' && typeof handler[property] === 'function' &&
-                            typeof jsResult[property] === 'function') {
-                        handler[property] = (<Function> jsResult[property]).bind(handler);
-                    }
-                }
-            }
+            this.overrideHandlerFunctions(handler, result);
 
             delegate.registerHandler(handler);
 
@@ -821,18 +811,7 @@ export class CoreSitePluginsInitService {
                 return;
             }
 
-            if (result.jsResult) {
-                // Override default handler functions with the result of the method JS.
-                const jsResult = <Record<string, unknown>> result.jsResult;
-                const handlerProperties = CoreObject.getAllPropertyNames(handler);
-
-                for (const property of handlerProperties) {
-                    if (property !== 'constructor' && typeof handler[property] === 'function' &&
-                            typeof jsResult[property] === 'function') {
-                        handler[property] = (<Function> jsResult[property]).bind(handler);
-                    }
-                }
-            }
+            this.overrideHandlerFunctions(handler, result);
         }
 
         CoreEnrolDelegate.registerHandler(handler);
@@ -1240,6 +1219,33 @@ export class CoreSitePluginsInitService {
         return uniqueName;
     }
 
+    /**
+     * Override some functions in a handler with the result of the JS returned by a get_content call.
+     *
+     * @param handler Handler to override.
+     * @param result Result of the get_content call.
+     */
+    protected overrideHandlerFunctions(handler: CoreSitePluginsBaseHandler, result: CoreSitePluginsContent | null): void {
+        if (!result || !result.jsResult) {
+            // No JS result, nothing to do.
+            return;
+        }
+
+        // Override default handler functions with the result of the method JS.
+        const jsResult = <Record<string, unknown>> result.jsResult;
+        const handlerProperties = CoreObject.getAllPropertyNames(handler);
+
+        for (const property of handlerProperties) {
+            if (
+                property !== 'constructor' &&
+                typeof handler[property] === 'function' &&
+                typeof jsResult[property] === 'function'
+            ) {
+                handler[property] = (<Function> jsResult[property]).bind(handler);
+            }
+        }
+    }
+
 }
 
 export const CoreSitePluginsInit = makeSingleton(CoreSitePluginsInitService);