MOBILE-4362 activity: Infinite loading on list mod type page
This commit is contained in:
parent
f986937424
commit
0e31b8214a
@ -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.
|
* Component to show a infinite loading trigger and spinner while more data is being loaded.
|
||||||
*
|
*
|
||||||
* Usage:
|
* Usage:
|
||||||
* <core-infinite-loading [action]="loadingAction" [enabled]="dataLoaded"></core-inifinite-loading>
|
* <core-infinite-loading [action]="loadingAction" [enabled]="dataLoaded"></core-infinite-loading>
|
||||||
*/
|
*/
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'core-infinite-loading',
|
selector: 'core-infinite-loading',
|
||||||
|
@ -298,7 +298,7 @@ export class CoreCourseContentsPage implements OnInit, OnDestroy, CoreRefreshCon
|
|||||||
await this.loadData(true, true);
|
await this.loadData(true, true);
|
||||||
} finally {
|
} finally {
|
||||||
// Do not call doRefresh on the format component if the refresher is defined in the format component
|
// 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) {
|
if (this.displayRefresher && this.formatComponent) {
|
||||||
await CoreUtils.ignoreErrors(this.formatComponent.doRefresh(refresher));
|
await CoreUtils.ignoreErrors(this.formatComponent.doRefresh(refresher));
|
||||||
}
|
}
|
||||||
|
@ -17,21 +17,24 @@
|
|||||||
</core-empty-box>
|
</core-empty-box>
|
||||||
|
|
||||||
<ion-list class="core-course-module-list-wrapper">
|
<ion-list class="core-course-module-list-wrapper">
|
||||||
<ng-container *ngFor="let section of sections">
|
<ng-container *ngFor="let section of sections; index as i">
|
||||||
<ion-item-divider class="course-section ion-text-wrap" *ngIf="section.name">
|
<ng-container *ngIf="i <= lastShownSectionIndex">
|
||||||
<ion-label>
|
<ion-item-divider class="course-section ion-text-wrap" *ngIf="section.name">
|
||||||
<h2>
|
<ion-label>
|
||||||
<core-format-text [text]="section.name" contextLevel="course" [contextInstanceId]="courseId">
|
<h2>
|
||||||
</core-format-text>
|
<core-format-text [text]="section.name" contextLevel="course" [contextInstanceId]="courseId">
|
||||||
</h2>
|
</core-format-text>
|
||||||
</ion-label>
|
</h2>
|
||||||
</ion-item-divider>
|
</ion-label>
|
||||||
<ng-container *ngFor="let module of section.modules">
|
</ion-item-divider>
|
||||||
<core-course-module [module]="module" [section]="section" [showActivityDates]="false" [showAvailability]="false"
|
<ng-container *ngFor="let module of section.modules">
|
||||||
[showExtra]="false" [showDownloadStatus]="false" [showCompletion]="false" [showIndentation]="false">
|
<core-course-module [module]="module" [section]="section" [showActivityDates]="false" [showAvailability]="false"
|
||||||
</core-course-module>
|
[showExtra]="false" [showDownloadStatus]="false" [showCompletion]="false" [showIndentation]="false">
|
||||||
|
</core-course-module>
|
||||||
|
</ng-container>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
</ion-list>
|
</ion-list>
|
||||||
|
<core-infinite-loading [enabled]="canLoadMore" (action)="showMoreActivities($event)"></core-infinite-loading>
|
||||||
</core-loading>
|
</core-loading>
|
||||||
</ion-content>
|
</ion-content>
|
||||||
|
@ -34,10 +34,14 @@ import { CoreAnalytics, CoreAnalyticsEventType } from '@services/analytics';
|
|||||||
})
|
})
|
||||||
export class CoreCourseListModTypePage implements OnInit {
|
export class CoreCourseListModTypePage implements OnInit {
|
||||||
|
|
||||||
|
private static readonly PAGE_LENGTH = 10; // How many activities should load each time showMoreActivities is called.
|
||||||
|
|
||||||
sections: CoreCourseSection[] = [];
|
sections: CoreCourseSection[] = [];
|
||||||
title = '';
|
title = '';
|
||||||
loaded = false;
|
loaded = false;
|
||||||
courseId = 0;
|
courseId = 0;
|
||||||
|
canLoadMore = false;
|
||||||
|
lastShownSectionIndex = -1;
|
||||||
|
|
||||||
protected modName?: string;
|
protected modName?: string;
|
||||||
protected archetypes: Record<string, number> = {}; // To speed up the check of modules.
|
protected archetypes: Record<string, number> = {}; // To speed up the check of modules.
|
||||||
@ -84,8 +88,6 @@ export class CoreCourseListModTypePage implements OnInit {
|
|||||||
|
|
||||||
/**
|
/**
|
||||||
* Fetches the data.
|
* Fetches the data.
|
||||||
*
|
|
||||||
* @returns Resolved when done.
|
|
||||||
*/
|
*/
|
||||||
protected async fetchData(): Promise<void> {
|
protected async fetchData(): Promise<void> {
|
||||||
if (!this.courseId) {
|
if (!this.courseId) {
|
||||||
@ -97,7 +99,7 @@ export class CoreCourseListModTypePage implements OnInit {
|
|||||||
let sections = await CoreCourse.getSections(this.courseId, false, true);
|
let sections = await CoreCourse.getSections(this.courseId, false, true);
|
||||||
|
|
||||||
sections = sections.filter((section) => {
|
sections = sections.filter((section) => {
|
||||||
if (!section.modules) {
|
if (!section.modules.length || section.hiddenbynumsections) {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -134,16 +136,36 @@ export class CoreCourseListModTypePage implements OnInit {
|
|||||||
const result = await CoreCourseHelper.addHandlerDataForModules(sections, this.courseId);
|
const result = await CoreCourseHelper.addHandlerDataForModules(sections, this.courseId);
|
||||||
|
|
||||||
this.sections = result.sections;
|
this.sections = result.sections;
|
||||||
|
|
||||||
|
this.lastShownSectionIndex = -1;
|
||||||
|
this.showMoreActivities();
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
CoreDomUtils.showErrorModalDefault(error, 'Error getting data');
|
CoreDomUtils.showErrorModalDefault(error, 'Error getting data');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Show more activities.
|
||||||
|
*
|
||||||
|
* @param infiniteComplete Infinite scroll complete function. Only used from core-infinite-loading.
|
||||||
|
*/
|
||||||
|
showMoreActivities(infiniteComplete?: () => void): void {
|
||||||
|
let modulesLoaded = 0;
|
||||||
|
while (this.lastShownSectionIndex < this.sections.length - 1 && modulesLoaded < CoreCourseListModTypePage.PAGE_LENGTH) {
|
||||||
|
this.lastShownSectionIndex++;
|
||||||
|
|
||||||
|
modulesLoaded += this.sections[this.lastShownSectionIndex].modules.length;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.canLoadMore = this.lastShownSectionIndex < this.sections.length - 1;
|
||||||
|
|
||||||
|
infiniteComplete?.();
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Refresh the data.
|
* Refresh the data.
|
||||||
*
|
*
|
||||||
* @param refresher Refresher.
|
* @param refresher Refresher.
|
||||||
* @returns Promise resolved when done.
|
|
||||||
*/
|
*/
|
||||||
async refreshData(refresher: IonRefresher): Promise<void> {
|
async refreshData(refresher: IonRefresher): Promise<void> {
|
||||||
await CoreUtils.ignoreErrors(CoreCourse.invalidateSections(this.courseId));
|
await CoreUtils.ignoreErrors(CoreCourse.invalidateSections(this.courseId));
|
||||||
|
Loading…
x
Reference in New Issue
Block a user