MOBILE-4362 activity: Infinite loading on list mod type page

moodlehq · Oct 17, 2023 · 8824133 · 8824133
1 parent 80d439f
commit 8824133
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 15 deletions.
diff --git 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:
- * <core-infinite-loading [action]="loadingAction" [enabled]="dataLoaded"></core-inifinite-loading>
+ * <core-infinite-loading [action]="loadingAction" [enabled]="dataLoaded"></core-infinite-loading>
  */
 @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
@@ -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
@@ -17,21 +17,24 @@ <h1>{{ title }}</h1>
         </core-empty-box>
 
         <ion-list class="core-course-module-list-wrapper">
-            <ng-container *ngFor="let section of sections">
-                <ion-item-divider class="course-section ion-text-wrap" *ngIf="section.name">
-                    <ion-label>
-                        <h2>
-                            <core-format-text [text]="section.name" contextLevel="course" [contextInstanceId]="courseId">
-                            </core-format-text>
-                        </h2>
-                    </ion-label>
-                </ion-item-divider>
-                <ng-container *ngFor="let module of section.modules">
-                    <core-course-module [module]="module" [section]="section" [showActivityDates]="false" [showAvailability]="false"
-                        [showExtra]="false" [showDownloadStatus]="false" [showCompletion]="false">
-                    </core-course-module>
+            <ng-container *ngFor="let section of sections; index as i">
+                <ng-container *ngIf="i <= showSectionId">
+                    <ion-item-divider class="course-section ion-text-wrap" *ngIf="section.name">
+                        <ion-label>
+                            <h2>
+                                <core-format-text [text]="section.name" contextLevel="course" [contextInstanceId]="courseId">
+                                </core-format-text>
+                            </h2>
+                        </ion-label>
+                    </ion-item-divider>
+                    <ng-container *ngFor="let module of section.modules">
+                        <core-course-module [module]="module" [section]="section" [showActivityDates]="false" [showAvailability]="false"
+                            [showExtra]="false" [showDownloadStatus]="false" [showCompletion]="false">
+                        </core-course-module>
+                    </ng-container>
                 </ng-container>
             </ng-container>
         </ion-list>
+        <core-infinite-loading [enabled]="canLoadMore" (action)="showMoreActivities($event)"></core-infinite-loading>
     </core-loading>
 </ion-content>
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
@@ -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<string, number> = {}; // 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.
      *