EVOgeek
/
Vmeda.Online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

main
Pau Ferrer Ocaña 2023-10-17 11:40:40 +02:00
parent f986937424
commit 0e31b8214a
4 changed files with 44 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/core/components/infinite-loading/infinite-loading.ts
View File

@ -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',

2
src/core/features/course/pages/contents/contents.ts
View File

@ -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));
}

29
src/core/features/course/pages/list-mod-type/list-mod-type.html
View File

@ -17,21 +17,24 @@
</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" [showIndentation]="false">
</core-course-module>
<ng-container *ngFor="let section of sections; index as i">
<ng-container *ngIf="i <= lastShownSectionIndex">
<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" [showIndentation]="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>

30
src/core/features/course/pages/list-mod-type/list-mod-type.ts
View File

@ -34,10 +34,14 @@ import { CoreAnalytics, CoreAnalyticsEventType } from '@services/analytics';
})
export class CoreCourseListModTypePage implements OnInit {
private static readonly PAGE_LENGTH = 10; // How many activities should load each time showMoreActivities is called.
sections: CoreCourseSection[] = [];
title = '';
loaded = false;
courseId = 0;
canLoadMore = false;
lastShownSectionIndex = -1;
protected modName?: string;
protected archetypes: Record<string, number> = {}; // To speed up the check of modules.
@ -84,8 +88,6 @@ export class CoreCourseListModTypePage implements OnInit {
/**
* Fetches the data.
*
* @returns Resolved when done.
*/
protected async fetchData(): Promise<void> {
if (!this.courseId) {
@ -97,7 +99,7 @@ export class CoreCourseListModTypePage implements OnInit {
let sections = await CoreCourse.getSections(this.courseId, false, true);
sections = sections.filter((section) => {
if (!section.modules) {
if (!section.modules.length || section.hiddenbynumsections) {
return false;
}
@ -134,16 +136,36 @@ export class CoreCourseListModTypePage implements OnInit {
const result = await CoreCourseHelper.addHandlerDataForModules(sections, this.courseId);
this.sections = result.sections;
this.lastShownSectionIndex = -1;
this.showMoreActivities();
} catch (error) {
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.
*
* @param refresher Refresher.
* @returns Promise resolved when done.
*/
async refreshData(refresher: IonRefresher): Promise<void> {
await CoreUtils.ignoreErrors(CoreCourse.invalidateSections(this.courseId));