MOBILE-2554 course: Add infinite scroll on course all sections

src/addon/calendar/pages/list/list.html

@@ -29,9 +29,12 @@
                 </a>
             </ion-list>
 
-            <ion-infinite-scroll [enabled]="canLoadMore" (ionInfinite)="$event.waitFor(fetchEvents())">
+            <div *ngIf="canLoadMore" padding>
-               <ion-infinite-scroll-content></ion-infinite-scroll-content>
+                <button ion-button block (click)="fetchEvents()" color="light">{{'core.loadmore' | translate }}</button>
-            </ion-infinite-scroll>
+                <ion-infinite-scroll [enabled]="canLoadMore" (ionInfinite)="$event.waitFor(fetchEvents())">
+                   <ion-infinite-scroll-content></ion-infinite-scroll-content>
+                </ion-infinite-scroll>
+            </div>
         </core-loading>
     </ion-content>
 </core-split-view>

src/addon/messages/pages/discussion/discussion.html

@@ -15,9 +15,12 @@
 <ion-content class="has-footer">
     <core-loading [hideUntil]="loaded">
         <!-- Load previous messages. -->
-        <ion-infinite-scroll [enabled]="canLoadMore" (ionInfinite)="loadPrevious($event)" position="top">
+        <div *ngIf="canLoadMore" padding>
-           <ion-infinite-scroll-content></ion-infinite-scroll-content>
+            <ion-infinite-scroll [enabled]="canLoadMore" (ionInfinite)="loadPrevious($event)" position="top">
-        </ion-infinite-scroll>
+               <ion-infinite-scroll-content></ion-infinite-scroll-content>
+            </ion-infinite-scroll>
+            <button ion-button block (click)="loadPrevious()" color="light">{{'core.loadmore' | translate }}</button>
+        </div>
         <ion-list class="addon-messages-discussion-container" [attr.aria-live]="polite">
             <ng-container *ngFor="let message of messages; index as index; last as last">
                 <ion-chip *ngIf="showDate(message, messages[index - 1])" class="addon-messages-date" color="light">

src/addon/mod/forum/components/index/addon-mod-forum-index.html

@@ -88,9 +88,12 @@
                 </div>
             </core-empty-box>
 
-            <ion-infinite-scroll [enabled]="canLoadMore" (ionInfinite)="$event.waitFor(fetchMoreDiscussions())">
+            <div *ngIf="canLoadMore" padding>
-                <ion-infinite-scroll-content></ion-infinite-scroll-content>
+                <button ion-button block (click)="fetchMoreDiscussions()" color="light">{{'core.loadmore' | translate }}</button>
-            </ion-infinite-scroll>
+                <ion-infinite-scroll [enabled]="canLoadMore" (ionInfinite)="$event.waitFor(fetchMoreDiscussions())">
+                    <ion-infinite-scroll-content></ion-infinite-scroll-content>
+                </ion-infinite-scroll>
+            </div>
         </core-loading>
 
         <ion-fab bottom end *ngIf="forum && forum.cancreatediscussions">

src/addon/mod/glossary/components/index/addon-mod-glossary-index.html

@@ -56,9 +56,12 @@
 
             <core-empty-box *ngIf="!entries.length && !offlineEntries.length" icon="list" [message]="'addon.mod_glossary.noentriesfound' | translate"></core-empty-box>
 
-            <ion-infinite-scroll [enabled]="canLoadMore" (ionInfinite)="$event.waitFor(loadMoreEntries())">
+            <div *ngIf="canLoadMore" padding>
-                <ion-infinite-scroll-content></ion-infinite-scroll-content>
+                <button ion-button block (click)="loadMoreEntries()" color="light">{{'core.loadmore' | translate }}</button>
-            </ion-infinite-scroll>
+                <ion-infinite-scroll [enabled]="canLoadMore" (ionInfinite)="$event.waitFor(loadMoreEntries())">
+                    <ion-infinite-scroll-content></ion-infinite-scroll-content>
+                </ion-infinite-scroll>
+            </div>
         </core-loading>
 
         <ion-fab bottom end *ngIf="canAdd">

src/addon/notifications/pages/list/list.html

@@ -32,8 +32,11 @@
             <addon-notifications-actions [contextUrl]="notification.contexturl" [courseId]="notification.courseid"></addon-notifications-actions>
         </ion-card>
         <core-empty-box *ngIf="!notifications || notifications.length <= 0" icon="notifications" [message]="'addon.notifications.therearentnotificationsyet' | translate"></core-empty-box>
-        <ion-infinite-scroll [enabled]="canLoadMore" (ionInfinite)="loadMoreNotifications($event)">
+        <div *ngIf="canLoadMore" padding>
-            <ion-infinite-scroll-content></ion-infinite-scroll-content>
+            <button ion-button block (click)="loadMoreNotifications()" color="light">{{'core.loadmore' | translate }}</button>
-        </ion-infinite-scroll>
+            <ion-infinite-scroll [enabled]="canLoadMore" (ionInfinite)="loadMoreNotifications($event)">
+                <ion-infinite-scroll-content></ion-infinite-scroll-content>
+            </ion-infinite-scroll>
+        </div>
     </core-loading>
 </ion-content>

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

@@ -44,10 +44,19 @@
         <!-- Multiple sections. -->
         <div *ngIf="selectedSection && selectedSection.id == allSectionsId">
             <core-dynamic-component [component]="allSectionsComponent" [data]="data">
-                <ng-container *ngFor="let section of sections">
+                <ng-container *ngFor="let section of sections; index as i">
-                    <ng-container *ngTemplateOutlet="sectionTemplate; context: {section: section}"></ng-container>
+                    <ng-container *ngIf="i <= showSectionId">
+                        <ng-container *ngTemplateOutlet="sectionTemplate; context: {section: section}"></ng-container>
+                    </ng-container>
                 </ng-container>
             </core-dynamic-component>
+
+            <div *ngIf="canLoadMore" padding>
+                <button ion-button block (click)="showMoreActivities()" color="light">{{'core.loadmore' | translate }}</button>
+                <ion-infinite-scroll [enabled]="canLoadMore" (ionInfinite)="$event.waitFor(showMoreActivities())">
+                   <ion-infinite-scroll-content></ion-infinite-scroll-content>
+                </ion-infinite-scroll>
+            </div>
         </div>
     </core-loading>
     <ion-buttons padding end class="core-course-section-nav-buttons" *ngIf="displaySectionSelector && sections && sections.length">

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

@@ -41,6 +41,8 @@ import { CoreDynamicComponent } from '@components/dynamic-component/dynamic-comp
     templateUrl: 'core-course-format.html'
 })
 export class CoreCourseFormatComponent implements OnInit, OnChanges, OnDestroy {
+    static LOAD_MORE_ACTIVITIES = 20; // How many activities should load each time showMoreActivities is called.
+
     @Input() course: any; // The course to render.
     @Input() sections: any[]; // List of course sections.
     @Input() downloadEnabled?: boolean; // Whether the download of sections and modules is enabled.
@@ -57,6 +59,8 @@ export class CoreCourseFormatComponent implements OnInit, OnChanges, OnDestroy {
     sectionSelectorComponent: any;
     singleSectionComponent: any;
     allSectionsComponent: any;
+    canLoadMore = false;
+    showSectionId = 0;
 
     // Data to pass to the components.
     data: any = {};
@@ -273,6 +277,9 @@ export class CoreCourseFormatComponent implements OnInit, OnChanges, OnDestroy {
         } else {
             this.previousSection = null;
             this.nextSection = null;
+            this.canLoadMore = false;
+            this.showSectionId = 0;
+            this.showMoreActivities();
         }
 
         if (this.moduleId && typeof previousValue == 'undefined') {
@@ -363,6 +370,46 @@ export class CoreCourseFormatComponent implements OnInit, OnChanges, OnDestroy {
         return Promise.all(promises);
     }
 
+    /**
+     * Show more activities (only used when showing all the sections at the same time).
+     *
+     * @return {Promise<void>} Resolved when done to change infinite loading status.
+     */
+    showMoreActivities(): Promise<void> {
+        this.canLoadMore = false;
+
+        let modulesLoaded = 0,
+            i;
+        for (i = this.showSectionId + 1; i < this.sections.length; i++) {
+            if (this.sections[i].hasContent && this.sections[i].modules) {
+                modulesLoaded += this.sections[i].modules.reduce((total, module) => {
+                    return module.visibleoncoursepage !== 0 ? total + 1 : total;
+                }, 0);
+
+                if (modulesLoaded >= CoreCourseFormatComponent.LOAD_MORE_ACTIVITIES) {
+                    this.showSectionId = i;
+                    break;
+                }
+            }
+        }
+
+        this.canLoadMore = i < this.sections.length;
+
+        if (this.canLoadMore) {
+            // Check if any of the following sections have any content.
+            let thereAreMore = false;
+            for (i++; i < this.sections.length; i++) {
+                if (this.sections[i].hasContent && this.sections[i].modules) {
+                    thereAreMore = true;
+                    break;
+                }
+            }
+            this.canLoadMore = thereAreMore;
+        }
+
+        return Promise.resolve();
+    }
+
     /**
      * Component destroyed.
      */

src/core/courses/pages/search/search.html

@@ -10,9 +10,12 @@
         <ion-item-divider color="light">{{ 'core.courses.totalcoursesearchresults' | translate:{$a: total} }}</ion-item-divider>
         <core-empty-box *ngIf="total == 0" icon="search" [message]="'core.courses.nosearchresults' | translate"></core-empty-box>
         <core-courses-course-list-item *ngFor="let course of courses" [course]="course"></core-courses-course-list-item>
-        <ion-infinite-scroll [enabled]="canLoadMore" (ionInfinite)="loadMoreResults($event)">
+        <div *ngIf="canLoadMore" padding>
-            <ion-infinite-scroll-content></ion-infinite-scroll-content>
+            <button ion-button block (click)="loadMoreResults()" color="light">{{'core.loadmore' | translate }}</button>
-        </ion-infinite-scroll>
+            <ion-infinite-scroll [enabled]="canLoadMore" (ionInfinite)="loadMoreResults($event)">
+                <ion-infinite-scroll-content></ion-infinite-scroll-content>
+            </ion-infinite-scroll>
+        </div>
     </div>
 </ion-content>
 

src/core/user/components/participants/core-user-participants.html

@@ -17,9 +17,12 @@
                 </a>
             </ion-list>
 
-            <ion-infinite-scroll [enabled]="canLoadMore" (ionInfinite)="$event.waitFor(fetchData())">
+            <div *ngIf="canLoadMore" padding>
-               <ion-infinite-scroll-content></ion-infinite-scroll-content>
+                <button ion-button block (click)="fetchData()" color="light">{{'core.loadmore' | translate }}</button>
-            </ion-infinite-scroll>
+                <ion-infinite-scroll [enabled]="canLoadMore" (ionInfinite)="$event.waitFor(fetchData())">
+                   <ion-infinite-scroll-content></ion-infinite-scroll-content>
+                </ion-infinite-scroll>
+            </div>
         </core-loading>
     </ion-content>
 </core-split-view>