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

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

Browse Source
This commit is contained in:
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. * 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',

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

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

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

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 { 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));