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

MOBILE-4081 grades: Improve grades performance by loading chunks of data

main
Pau Ferrer Ocaña 2022-12-02 11:44:52 +01:00
parent 20ed414550
commit 28b7466fd0
2 changed files with 39 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/core/features/grades/pages/course/course.html
View File

@ -13,9 +13,9 @@
<ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
</ion-refresher>
<core-loading [hideUntil]="columns && rows">
<core-empty-box *ngIf="rows && rows.length === 0" icon="fas-chart-bar" [message]="'core.grades.nogradesreturned' | translate">
<core-empty-box *ngIf="!rows.length" icon="fas-chart-bar" [message]="'core.grades.nogradesreturned' | translate">
</core-empty-box>
<div *ngIf="rows && rows.length > 0" class="core-grades-container">
<div *ngIf="rows.length" class="core-grades-container">
<table class="core-grades-table" [class.summary]="showSummary">
<thead>
<tr>
@ -26,7 +26,7 @@
</tr>
</thead>
<tbody>
<ng-container *ngFor="let row of rows">
<ng-container *ngFor="let row of rows | slice:0:rowsOnView">
<tr *ngIf="row.itemtype === 'leader'">
<td [attr.rowspan]="row.rowspan" class="core-grades-table-leader"></td>
</tr>
@ -55,7 +55,7 @@
<ng-container *ngIf="row.itemtype !== 'category'">
<ng-container *ngFor="let column of columns">
<td *ngIf="column.name !== 'gradeitem' && column.name !== 'feedback' && column.name !== 'grade' &&
row[column.name] != undefined" [class]="'ion-text-start core-grades-table-' + column.name"
row[column.name] !== undefined" [class]="'ion-text-start core-grades-table-' + column.name"
[class.ion-hide-md-down]="column.hiddenPhone" [innerHTML]="row[column.name]">
</td>
<td *ngIf="column.name === 'feedback' && row.feedback !== undefined"
@ -74,61 +74,61 @@
</ng-container>
</ng-container>
</tr>
<tr *ngIf="row.expandable" [id]="row.detailsid" [class]="row.rowclass" [hidden]="!row.expanded">
<tr *ngIf="row.expandable && row.expanded" [id]="row.detailsid" [class]="row.rowclass">
<td [attr.colspan]="totalColumnsSpan">
<ion-list>
<ion-item class="ion-text-wrap" *ngIf="row.weight">
<ion-label>
<h2>{{ 'core.grades.weight' | translate}}</h2>
<p class="item-heading">{{ 'core.grades.weight' | translate}}</p>
<p [innerHTML]="row.weight"></p>
</ion-label>
</ion-item>
<ion-item class="ion-text-wrap" *ngIf="row.grade">
<ion-label>
<h2>{{ 'core.grades.grade' | translate}}</h2>
<p class="item-heading">{{ 'core.grades.grade' | translate}}</p>
<p [innerHTML]="row.grade"></p>
</ion-label>
</ion-item>
<ion-item class="ion-text-wrap" *ngIf="row.range">
<ion-label>
<h2>{{ 'core.grades.range' | translate}}</h2>
<p class="item-heading">{{ 'core.grades.range' | translate}}</p>
<p [innerHTML]="row.range"></p>
</ion-label>
</ion-item>
<ion-item class="ion-text-wrap" *ngIf="row.percentage">
<ion-label>
<h2>{{ 'core.grades.percentage' | translate}}</h2>
<p class="item-heading">{{ 'core.grades.percentage' | translate}}</p>
<p [innerHTML]="row.percentage"></p>
</ion-label>
</ion-item>
<ion-item class="ion-text-wrap" *ngIf="row.lettergrade">
<ion-label>
<h2>{{ 'core.grades.lettergrade' | translate}}</h2>
<p class="item-heading">{{ 'core.grades.lettergrade' | translate}}</p>
<p [innerHTML]="row.lettergrade"></p>
</ion-label>
</ion-item>
<ion-item class="ion-text-wrap" *ngIf="row.rank">
<ion-label>
<h2>{{ 'core.grades.rank' | translate}}</h2>
<p class="item-heading">{{ 'core.grades.rank' | translate}}</p>
<p [innerHTML]="row.rank"></p>
</ion-label>
</ion-item>
<ion-item class="ion-text-wrap" *ngIf="row.average">
<ion-label>
<h2>{{ 'core.grades.average' | translate}}</h2>
<p class="item-heading">{{ 'core.grades.average' | translate}}</p>
<p [innerHTML]="row.average"></p>
</ion-label>
</ion-item>
<ion-item class="ion-text-wrap" *ngIf="row.feedback">
<ion-label>
<h2>{{ 'core.grades.feedback' | translate}}</h2>
<p class="item-heading">{{ 'core.grades.feedback' | translate}}</p>
<p>
<core-format-text collapsible-item [text]="row.feedback" contextLevel="course"
[contextInstanceId]="courseId">
@ -139,7 +139,7 @@
<ion-item class="ion-text-wrap" *ngIf="row.contributiontocoursetotal">
<ion-label>
<h2>{{ 'core.grades.contributiontocoursetotal' | translate}}</h2>
<p class="item-heading">{{ 'core.grades.contributiontocoursetotal' | translate}}</p>
<p [innerHTML]="row.contributiontocoursetotal"></p>
</ion-label>
</ion-item>
@ -149,6 +149,7 @@
</ng-container>
</tbody>
</table>
<core-infinite-loading [enabled]="rowsOnView < rows.length" (action)="loadMore($event)"></core-infinite-loading>
</div>
</core-loading>
</ion-content>

26
src/core/features/grades/pages/course/course.page.ts
View File

@ -50,8 +50,9 @@ export class CoreGradesCoursePage implements AfterViewInit, OnDestroy {
collapseLabel!: string;
title?: string;
courses?: CoreSwipeNavigationItemsManager;
columns?: CoreGradesFormattedTableColumn[];
rows?: CoreGradesFormattedTableRow[];
columns: CoreGradesFormattedTableColumn[] = [];
rows: CoreGradesFormattedTableRow[] = [];
rowsOnView = 0;
totalColumnsSpan?: number;
withinSplitView?: boolean;
@ -196,6 +197,7 @@ export class CoreGradesCoursePage implements AfterViewInit, OnDestroy {
this.columns = [];
this.rows = [];
this.rowsOnView = 0;
}
}
@ -209,6 +211,7 @@ export class CoreGradesCoursePage implements AfterViewInit, OnDestroy {
this.title = formattedTable.rows[0]?.gradeitem ?? Translate.instant('core.grades.grades');
this.columns = formattedTable.columns;
this.rows = formattedTable.rows;
this.rowsOnView = this.getRowsOnHeight();
this.totalColumnsSpan = formattedTable.columns.reduce((total, column) => total + column.colspan, 0);
if (!this.fetchSuccess) {
@ -217,4 +220,23 @@ export class CoreGradesCoursePage implements AfterViewInit, OnDestroy {
}
}
/**
* Function to get the number of rows that can be shown on the screen.
*
* @returns The number of rows.
*/
protected getRowsOnHeight(): number {
return Math.floor(window.innerHeight / 44);
}
/**
* Function to load more rows.
*
* @param infiniteComplete Infinite scroll complete function. Only used from core-infinite-loading.
*/
loadMore(infiniteComplete?: () => void): void {
this.rowsOnView += this.getRowsOnHeight();
infiniteComplete && infiniteComplete();
}
}