MOBILE-4442 course: Open subsections as sections inside course

Author: crazyserver

src/addons/mod/subsection/services/handlers/index-link.ts

@@ -51,7 +51,7 @@ export class AddonModSubsectionIndexLinkHandlerService extends CoreContentLinksM
                     // Get the module.
                     const module = await CoreCourse.getModule(moduleId, courseId, undefined, true, false, siteId);
 
-                    await AddonModSubsection.openSubsection(module, module.course, siteId);
+                    await AddonModSubsection.openSubsection(module.section, module.course, siteId);
                 } catch (error) {
                     CoreDomUtils.showErrorModalDefault(error, 'Error opening link.');
                 } finally {

src/addons/mod/subsection/services/handlers/module.ts

@@ -59,9 +59,9 @@ export class AddonModSubsectionModuleHandlerService extends CoreModuleHandlerBas
             a11yTitle: '',
             class: 'addon-mod-subsection-handler',
             hasCustomCmListItem: true,
-            action: async(event, module, courseId) => {
+            action: async(event, module) => {
                 try {
-                    await AddonModSubsection.openSubsection(module, courseId);
+                    await AddonModSubsection.openSubsection(module.section, module.course);
                 } catch (error) {
                     CoreDomUtils.showErrorModalDefault(error, 'Error opening subsection.');
                 }

src/addons/mod/subsection/services/subsection.ts

@@ -14,7 +14,7 @@
 
 import { Injectable } from '@angular/core';
 import { CoreCourse } from '@features/course/services/course';
-import { CoreCourseModuleData, CoreCourseHelper } from '@features/course/services/course-helper';
+import { CoreCourseHelper } from '@features/course/services/course-helper';
 import { CoreSites } from '@services/sites';
 import { makeSingleton } from '@singletons';
 
@@ -26,14 +26,15 @@ export class AddonModSubsectionProvider {
 
     /**
      * Open a subsection.
+     *
+     * @param sectionId Section ID.
+     * @param courseId Course ID.
+     * @param siteId Site ID. If not defined, current site.
+     * @returns Promise resolved when done.
      */
-    async openSubsection(module: CoreCourseModuleData , courseId?: number, siteId?: string): Promise<void> {
-        if (!courseId) {
-            courseId = module.course;
-        }
-
+    async openSubsection(sectionId: number, courseId: number, siteId?: string): Promise<void> {
         const pageParams = {
-            sectionId: module.section,
+            sectionId,
         };
 
         if (

src/core/features/course/components/course-format/course-format.html

@@ -14,7 +14,7 @@
                     [value]="accordionMultipleValue">
                     <core-course-section *ngIf="!selectedSection.hiddenbynumsections && selectedSection.id !== stealthModulesSectionId &&
                         !selectedSection.component" [course]="course" [section]="selectedSection" [lastModuleViewed]="lastModuleViewed"
-                        [viewedModules]="viewedModules" [collapsible]="false" [sections]="subSections" />
+                        [viewedModules]="viewedModules" [collapsible]="false" [subSections]="subSections" />
                 </ion-accordion-group>
                 <core-empty-box *ngIf="!selectedSection.hasContent" icon="fas-table-cells-large"
                     [message]="'core.course.nocontentavailable' | translate" />
@@ -31,7 +31,7 @@
                             section.id !== stealthModulesSectionId && !section.component) {
                             <core-course-section
                                 [course]="course" [section]="section" [lastModuleViewed]="lastModuleViewed" [viewedModules]="viewedModules"
-                                [collapsible]="true" [sections]="subSections" />
+                                [collapsible]="true" [subSections]="subSections" />
                         }
                     }
                 </ion-accordion-group>

src/core/features/course/components/course-format/course-format.ts

@@ -88,7 +88,6 @@ export class CoreCourseFormatComponent implements OnInit, OnChanges, OnDestroy {
 
     @Input({ required: true }) course!: CoreCourseAnyCourseData; // The course to render.
     @Input() sections: CoreCourseSectionToDisplay[] = []; // List of course sections.
-    @Input() subSections: CoreCourseSectionToDisplay[] = []; // List of course subsections.
     @Input() initialSectionId?: number; // The section to load first (by ID).
     @Input() initialSectionNumber?: number; // The section to load first (by number).
     @Input() initialBlockInstanceId?: number; // The instance to focus.
@@ -125,6 +124,7 @@ export class CoreCourseFormatComponent implements OnInit, OnChanges, OnDestroy {
     displayCourseIndex = false;
     displayBlocks = false;
     hasBlocks = false;
+    subSections: CoreCourseSectionToDisplay[] = []; // List of course subsections.
     selectedSection?: CoreCourseSectionToDisplay;
     previousSection?: CoreCourseSectionToDisplay;
     nextSection?: CoreCourseSectionToDisplay;
@@ -326,6 +326,26 @@ export class CoreCourseFormatComponent implements OnInit, OnChanges, OnDestroy {
             this.loaded = true;
             this.sectionChanged(sections[0]);
         } else if (this.initialSectionId || this.initialSectionNumber !== undefined) {
+            const subSection = this.subSections.find((section) => section.id === this.initialSectionId ||
+                (section.section !== undefined && section.section === this.initialSectionNumber));
+            if (subSection) {
+                // The section is a subsection, load the parent section.
+                this.sections.some((section) => {
+                    const module = section.modules.find((module) =>
+                        subSection.itemid === module.instance && module.modname === 'subsection');
+                    if (module) {
+                        this.initialSectionId = module.section;
+                        this.initialSectionNumber = undefined;
+
+                        return true;
+                    }
+
+                    return false;
+                });
+
+                this.setInputData();
+            }
+
             // We have an input indicating the section ID to load. Search the section.
             const section = sections.find((section) =>
                 section.id === this.initialSectionId ||

src/core/features/course/components/course-section/course-section.html

@@ -1,6 +1,6 @@
-<ion-accordion *ngIf="!section.hiddenbynumsections" class="core-course-module-list-wrapper" [id]="section.id"
-    [attr.aria-labelledby]="section.name ? 'core-section-name-' + section.id : null" [value]="collapsible ? section.id : 'non-collapsible'"
-    toggleIconSlot="start">
+<ion-accordion *ngIf="collapsible" class="core-course-module-list-wrapper" [id]="section.id"
+    [attr.aria-labelledby]="section.name ? 'core-section-name-' + section.id : null" [value]="section.id" toggleIconSlot="start">
+
     <ion-item class="course-section divider" [class.item-dimmed]="section.visible === 0 || section.uservisible === false" slot="header">
         <ion-label class="ion-text-wrap">
             <h2 *ngIf="section.name" class="big" [id]="'core-section-name-' + section.id">
@@ -36,13 +36,69 @@ <h2 *ngIf="section.name" class="big" [id]="'core-section-name-' + section.id">
                 </ion-label>
             </ion-item>
 
-            <ng-container *ngFor="let module of section.modules">
+            <ng-container *ngFor="let module of modules">
+                @if (module.subsection) {
+                <core-course-section [course]="course" [section]="module.subsection" [lastModuleViewed]="lastModuleViewed"
+                    [viewedModules]="viewedModules" [collapsible]="true" />
+                } @else {
                 <core-course-module *ngIf="module.visibleoncoursepage !== 0" [module]="module" [section]="section"
                     [showActivityDates]="course.showactivitydates" [showCompletionConditions]="course.showcompletionconditions"
                     [isLastViewed]="lastModuleViewed && lastModuleViewed.cmId === module.id" [class.core-course-module-not-viewed]="
                         !viewedModules[module.id] &&
                         (!module.completiondata || module.completiondata.state === completionStatusIncomplete)" />
+                }
             </ng-container>
         </ng-container>
     </div>
 </ion-accordion>
+
+
+<div *ngIf="!collapsible" class="core-course-module-list-wrapper" [id]="section.id"
+    [attr.aria-labelledby]="section.name ? 'core-section-name-' + section.id : null">
+
+    <ion-item class="course-section divider" [class.item-dimmed]="section.visible === 0 || section.uservisible === false">
+        <ion-label class="ion-text-wrap">
+            <h2 *ngIf="section.name" class="big" [id]="'core-section-name-' + section.id">
+                <core-format-text [text]="section.name" contextLevel="course" [contextInstanceId]="course.id" />
+            </h2>
+            <div *ngIf="section.visible === 0 && section.uservisible !== false">
+                <ion-badge color="warning">
+                    {{ 'core.course.hiddenfromstudents' | translate }}
+                </ion-badge>
+            </div>
+            <div *ngIf="section.visible === 0 && section.uservisible === false">
+                <ion-badge color="warning">
+                    {{ 'core.notavailable' | translate }}
+                </ion-badge>
+            </div>
+            <div *ngIf="section.availabilityinfo">
+                <ion-chip class="clickable">
+                    <ion-icon name="fas-lock" [attr.aria-label]="'core.restricted' | translate" />
+                    <ion-label>
+                        <core-format-text [text]=" section.availabilityinfo" contextLevel="course" [contextInstanceId]="course.id" />
+                    </ion-label>
+                </ion-chip>
+            </div>
+        </ion-label>
+        <ion-badge *ngIf="section.highlighted && highlightedName" slot="end">{{highlightedName}}</ion-badge>
+    </ion-item>
+
+    <ion-item class="ion-text-wrap section-summary" *ngIf="section.summary">
+        <ion-label>
+            <core-format-text [text]="section.summary" contextLevel="course" [contextInstanceId]="course.id" />
+        </ion-label>
+    </ion-item>
+
+    <ng-container *ngFor="let module of modules">
+        @if (module.subsection) {
+        <core-course-section [course]="course" [section]="module.subsection" [lastModuleViewed]="lastModuleViewed"
+            [viewedModules]="viewedModules" [collapsible]="true" />
+        } @else {
+        <core-course-module *ngIf="module.visibleoncoursepage !== 0" [module]="module" [section]="section"
+            [showActivityDates]="course.showactivitydates" [showCompletionConditions]="course.showcompletionconditions"
+            [isLastViewed]="lastModuleViewed && lastModuleViewed.cmId === module.id" [class.core-course-module-not-viewed]="
+                    !viewedModules[module.id] &&
+                    (!module.completiondata || module.completiondata.state === completionStatusIncomplete)" />
+        }
+    </ng-container>
+</div>

src/core/features/course/components/course-section/course-section.ts

@@ -15,9 +15,12 @@ import {
     Component,
     HostBinding,
     Input,
+    OnChanges,
     OnInit,
+    SimpleChange,
 } from '@angular/core';
 import {
+    CoreCourseModuleData,
     CoreCourseSection,
 } from '@features/course/services/course-helper';
 import { CoreSharedModule } from '@/core/shared.module';
@@ -41,10 +44,11 @@ import { CoreCourseFormatDelegate } from '@features/course/services/format-deleg
         CoreCourseComponentsModule,
     ],
 })
-export class CoreCourseSectionComponent implements OnInit {
+export class CoreCourseSectionComponent implements OnInit, OnChanges {
 
     @Input({ required: true }) course!: CoreCourseAnyCourseData; // The course to render.
     @Input({ required: true }) section!: CoreCourseSectionToDisplay;
+    @Input() subSections: CoreCourseSectionToDisplay[] = []; // List of subsections in the course.
     @Input({ transform: toBoolean }) collapsible = true; // Whether the section can be collapsed.
     @Input() lastModuleViewed?: CoreCourseViewedModulesDBRecord;
     @Input() viewedModules: Record<number, boolean> = {};
@@ -54,6 +58,7 @@ export class CoreCourseSectionComponent implements OnInit {
             return this.collapsible ? 'collapsible' : 'non-collapsible';
         }
 
+    modules: CoreCourseModuleToDisplay[] = [];
     completionStatusIncomplete = CoreCourseModuleCompletionStatus.COMPLETION_INCOMPLETE;
     highlightedName?: string; // Name to highlight.
 
@@ -66,8 +71,28 @@ export class CoreCourseSectionComponent implements OnInit {
             : undefined;
     }
 
+    /**
+     * @inheritdoc
+     */
+    ngOnChanges(changes: { [name: string]: SimpleChange }): void {
+        if (changes.section && this.section) {
+            this.modules = this.section.modules;
+
+            this.modules.forEach((module) => {
+                if (module.modname === 'subsection') {
+                    module.subSection = this.subSections.find((section) =>
+                        section.component === 'mod_subsection' && section.itemid === module.instance);
+                }
+            });
+        }
+    }
+
 }
 
+type CoreCourseModuleToDisplay = CoreCourseModuleData & {
+    subSection?: CoreCourseSectionToDisplay;
+};
+
 export type CoreCourseSectionToDisplay = CoreCourseSection & {
     highlighted?: boolean;
     expanded?: boolean; // The aim of this property is to avoid DOM overloading.

src/core/features/course/services/course.ts

@@ -990,7 +990,7 @@ export class CoreCourseProvider {
                 map(sections => {
                     const siteHomeId = site.getSiteHomeId();
                     let showSections = true;
-                    if (courseId == siteHomeId) {
+                    if (courseId === siteHomeId) {
                         const storedNumSections = site.getStoredConfig('numsections');
                         showSections = storedNumSections !== undefined && !!storedNumSections;
                     }
@@ -1770,6 +1770,8 @@ type CoreCourseGetContentsWSSection = {
     uservisible?: boolean; // Is the section visible for the user?.
     availabilityinfo?: string; // Availability information.
     modules: CoreCourseGetContentsWSModule[]; // List of module.
+    component?: string; // @since 4.5 The delegate component of this section if any.
+    itemid?: number; // @since 4.5 The optional item id delegate component can use to identify its instance.
 };
 
 /**