diff --git a/src/core/components/infinite-loading/infinite-loading.ts b/src/core/components/infinite-loading/infinite-loading.ts index ab0a4b7fa55..87e2125b7a7 100644 --- a/src/core/components/infinite-loading/infinite-loading.ts +++ b/src/core/components/infinite-loading/infinite-loading.ts @@ -22,7 +22,7 @@ const THRESHOLD = .15; // % of the scroll element height that must be close to t * Component to show a infinite loading trigger and spinner while more data is being loaded. * * Usage: - * + * */ @Component({ selector: 'core-infinite-loading', diff --git a/src/core/features/course/pages/contents/contents.ts b/src/core/features/course/pages/contents/contents.ts index 31d6a537bac..88345545b60 100644 --- a/src/core/features/course/pages/contents/contents.ts +++ b/src/core/features/course/pages/contents/contents.ts @@ -298,7 +298,7 @@ export class CoreCourseContentsPage implements OnInit, OnDestroy, CoreRefreshCon await this.loadData(true, true); } finally { // Do not call doRefresh on the format component if the refresher is defined in the format component - // to prevent an inifinite loop. + // to prevent an infinite loop. if (this.displayRefresher && this.formatComponent) { await CoreUtils.ignoreErrors(this.formatComponent.doRefresh(refresher)); } diff --git a/src/core/features/course/pages/list-mod-type/list-mod-type.html b/src/core/features/course/pages/list-mod-type/list-mod-type.html index 7ad47b303eb..84fc6897a38 100644 --- a/src/core/features/course/pages/list-mod-type/list-mod-type.html +++ b/src/core/features/course/pages/list-mod-type/list-mod-type.html @@ -17,21 +17,24 @@

{{ title }}

- - - -

- - -

-
-
- - - + + + + +

+ + +

+
+
+ + + +
+ diff --git a/src/core/features/course/pages/list-mod-type/list-mod-type.ts b/src/core/features/course/pages/list-mod-type/list-mod-type.ts index 73d8801c131..d65246c29a5 100644 --- a/src/core/features/course/pages/list-mod-type/list-mod-type.ts +++ b/src/core/features/course/pages/list-mod-type/list-mod-type.ts @@ -34,10 +34,14 @@ import { CoreAnalytics, CoreAnalyticsEventType } from '@services/analytics'; }) export class CoreCourseListModTypePage implements OnInit { + static readonly LOAD_MORE_ACTIVITIES = 20; // How many activities should load each time showMoreActivities is called. + sections: CoreCourseSection[] = []; title = ''; loaded = false; courseId = 0; + canLoadMore = false; + showSectionId = 0; protected modName?: string; protected archetypes: Record = {}; // To speed up the check of modules. @@ -137,11 +141,56 @@ export class CoreCourseListModTypePage implements OnInit { const result = await CoreCourseHelper.addHandlerDataForModules(sections, this.courseId); this.sections = result.sections; + + this.canLoadMore = false; + this.showSectionId = 0; + this.showMoreActivities(); } catch (error) { CoreDomUtils.showErrorModalDefault(error, 'Error getting data'); } } + /** + * Show more activities (only used when showing all the sections at the same time). + * + * @param infiniteComplete Infinite scroll complete function. Only used from core-infinite-loading. + */ + showMoreActivities(infiniteComplete?: () => void): void { + this.canLoadMore = false; + + const sections = this.sections || []; + let modulesLoaded = 0; + let i: number; + for (i = this.showSectionId + 1; i < sections.length; i++) { + if (!sections[i].hasContent || !sections[i].modules) { + continue; + } + + modulesLoaded += sections[i].modules.length; + + if (modulesLoaded >= CoreCourseListModTypePage.LOAD_MORE_ACTIVITIES) { + break; + } + } + + this.showSectionId = i; + this.canLoadMore = i < sections.length; + + if (this.canLoadMore) { + // Check if any of the following sections have any content. + let thereAreMore = false; + for (i++; i < sections.length; i++) { + if (sections[i].hasContent && sections[i].modules && sections[i].modules?.length > 0) { + thereAreMore = true; + break; + } + } + this.canLoadMore = thereAreMore; + } + + infiniteComplete && infiniteComplete(); + } + /** * Refresh the data. *