MOBILE-3931 grades: Fix navigate to gradeId

src/core/features/grades/grades.module.ts

@@ -22,7 +22,7 @@ import { CoreMainMenuTabRoutingModule } from '@features/mainmenu/mainmenu-tab-ro
 import { CoreUserDelegate } from '@features/user/services/user-delegate';
 import { PARTICIPANTS_PAGE_NAME } from '@features/user/user.module';
 import { CoreGradesProvider } from './services/grades';
-import { CoreGradesHelperProvider } from './services/grades-helper';
+import { CoreGradesHelperProvider, GRADES_PAGE_NAME } from './services/grades-helper';
 import { CoreGradesCourseOptionHandler } from './services/handlers/course-option';
 import { CoreGradesOverviewLinkHandler } from './services/handlers/overview-link';
 import { CoreGradesUserHandler } from './services/handlers/user';
@@ -33,8 +33,6 @@ export const CORE_GRADES_SERVICES: Type<unknown>[] = [
     CoreGradesHelperProvider,
 ];
 
-export const GRADES_PAGE_NAME = 'grades';
-
 const mainMenuChildrenRoutes: Routes = [
     {
         path: GRADES_PAGE_NAME,

src/core/features/grades/pages/course/course.html

@@ -31,7 +31,7 @@
                             [attr.tabindex]="row.expandable && showSummary && 0" [attr.aria-expanded]="row.expanded"
                             [attr.aria-label]="rowAriaLabel(row)" [attr.aria-controls]="row.detailsid"
                             (ariaButtonClick)="row.expandable && showSummary && toggleRow(row)" [class]="row.rowclass"
-                            [class.core-grades-grade-clickable]="row.expandable && showSummary">
+                            [class.core-grades-grade-clickable]="row.expandable && showSummary" [id]="'grade-'+row.id">
                             <ng-container *ngIf="row.itemtype">
                                 <td *ngIf="row.itemtype == 'category'" class="core-grades-table-category" [attr.rowspan]="row.rowspan">
                                 </td>
@@ -71,40 +71,6 @@
                         <tr *ngIf="row.expandable" [id]="row.detailsid" [class]="row.rowclass" [hidden]="!row.expanded">
                             <td [attr.colspan]="totalColumnsSpan">
                                 <ion-list>
-                                    <ion-item *ngIf="row.itemname && row.link" class="ion-text-wrap" detail="true" [href]="row.link"
-                                        core-link capture="true">
-                                        <ion-icon *ngIf="row.icon" name="{{row.icon}}" slot="start" [attr.aria-label]="row.iconAlt">
-                                        </ion-icon>
-                                        <img *ngIf="row.image && !row.itemmodule" [src]="row.image && row.itemmodule" slot="start"
-                                            [alt]="row.iconAlt" />
-                                        <core-mod-icon *ngIf="row.image && row.itemmodule" [modicon]="row.image" slot="start"
-                                            [modname]="row.itemmodule">
-                                        </core-mod-icon>
-                                        <ion-label>
-                                            <h2>
-                                                <core-format-text [text]="row.itemname" contextLevel="course"
-                                                    [contextInstanceId]="courseId">
-                                                </core-format-text>
-                                            </h2>
-                                        </ion-label>
-                                    </ion-item>
-
-                                    <ion-item *ngIf="row.itemname && !row.link" class="ion-text-wrap">
-                                        <ion-icon *ngIf="row.icon" name="{{row.icon}}" slot="start" [attr.aria-label]="row.iconAlt">
-                                        </ion-icon>
-                                        <img *ngIf="row.image && !row.itemmodule" [src]="row.image" slot="start" [alt]="row.iconAlt" />
-                                        <core-mod-icon *ngIf="row.image && row.itemmodule" [modicon]="row.image" slot="start"
-                                            [modname]="row.itemmodule">
-                                        </core-mod-icon>
-                                        <ion-label>
-                                            <h2>
-                                                <core-format-text [text]="row.itemname" contextLevel="course"
-                                                    [contextInstanceId]="courseId">
-                                                </core-format-text>
-                                            </h2>
-                                        </ion-label>
-                                    </ion-item>
-
                                     <ion-item class="ion-text-wrap" *ngIf="row.weight">
                                         <ion-label>
                                             <h2>{{ 'core.grades.weight' | translate}}</h2>

src/core/features/grades/pages/course/course.page.ts

@@ -13,8 +13,8 @@
 // limitations under the License.
 
 import { ActivatedRoute } from '@angular/router';
-import { AfterViewInit, Component, ElementRef, OnDestroy } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, OnDestroy, Optional } from '@angular/core';
-import { IonRefresher } from '@ionic/angular';
+import { IonContent, IonRefresher } from '@ionic/angular';
 
 import { CoreDomUtils } from '@services/utils/dom';
 import { CoreGrades } from '@features/grades/services/grades';
@@ -44,6 +44,7 @@ export class CoreGradesCoursePage implements AfterViewInit, OnDestroy {
 
     courseId!: number;
     userId!: number;
+    gradeId?: number;
     expandLabel!: string;
     collapseLabel!: string;
     title?: string;
@@ -53,10 +54,16 @@ export class CoreGradesCoursePage implements AfterViewInit, OnDestroy {
     totalColumnsSpan?: number;
     withinSplitView?: boolean;
 
-    constructor(protected route: ActivatedRoute, protected element: ElementRef<HTMLElement>) {
+    constructor(
+        protected route: ActivatedRoute,
+        protected element: ElementRef<HTMLElement>,
+        @Optional() protected content?: IonContent,
+    ) {
         try {
             this.courseId = CoreNavigator.getRequiredRouteNumberParam('courseId', { route });
             this.userId = CoreNavigator.getRouteNumberParam('userId', { route }) ?? CoreSites.getCurrentSiteUserId();
+            this.gradeId = CoreNavigator.getRouteNumberParam('gradeId', { route });
+
             this.expandLabel = Translate.instant('core.expand');
             this.collapseLabel = Translate.instant('core.collapse');
 
@@ -116,13 +123,14 @@ export class CoreGradesCoursePage implements AfterViewInit, OnDestroy {
      * Toggle whether a row is expanded or collapsed.
      *
      * @param row Row.
+     * @param expand If defined, force expand or collapse.
      */
-    toggleRow(row: CoreGradesFormattedTableRow): void {
+    toggleRow(row: CoreGradesFormattedTableRow, expand?: boolean): void {
         if (!this.rows || !this.columns) {
             return;
         }
 
-        row.expanded = !row.expanded;
+        row.expanded = expand ?? !row.expanded;
 
         let colspan: number = this.columns.length + (row.colspan ?? 0) - 1;
         for (let i = this.rows.indexOf(row) - 1; i >= 0; i--) {
@@ -155,6 +163,22 @@ export class CoreGradesCoursePage implements AfterViewInit, OnDestroy {
     private async fetchInitialGrades(): Promise<void> {
         try {
             await this.fetchGrades();
+
+            if (this.gradeId && this.rows) {
+                const row = this.rows.find((row) => row.id == this.gradeId);
+
+                if (row) {
+                    this.toggleRow(row, true);
+                    await CoreUtils.nextTick();
+
+                    CoreDomUtils.scrollToElementBySelector(
+                        this.element.nativeElement,
+                        this.content,
+                        '#grade-' + row.id,
+                    );
+                    this.gradeId = undefined;
+                }
+            }
         } catch (error) {
             CoreDomUtils.showErrorModalDefault(error, 'Error loading course');
 

src/core/features/grades/services/grades-helper.ts

@@ -35,7 +35,8 @@ import { CoreNavigator } from '@services/navigator';
 import { makeSingleton, Translate } from '@singletons';
 import { CoreError } from '@classes/errors/error';
 import { CoreCourseHelper } from '@features/course/services/course-helper';
-import { GRADES_PAGE_NAME } from '../grades.module';
+
+export const GRADES_PAGE_NAME = 'grades';
 
 /**
  * Service that provides some features regarding grades information.
@@ -497,9 +498,12 @@ export class CoreGradesHelperProvider {
             const gradeId = item.id;
 
             await CoreUtils.ignoreErrors(
-                CoreNavigator.navigateToSitePath(`/${GRADES_PAGE_NAME}/${courseId}/${gradeId}`, { siteId }),
+                CoreNavigator.navigateToSitePath(
+                    `/${GRADES_PAGE_NAME}/${courseId}`,
+                    { params: { gradeId }, siteId },
+                ),
             );
-        } catch (error) {
+        } catch {
             try {
                 // Cannot get grade items or there's no need to.
                 if (userId && userId != currentUserId) {
@@ -519,7 +523,7 @@ export class CoreGradesHelperProvider {
 
                 // Open the course with the grades tab selected.
                 await CoreCourseHelper.getAndOpenCourse(courseId, { selectedTab: 'CoreGrades' }, siteId);
-            } catch (error) {
+            } catch {
                 // Cannot get course for some reason, just open the grades page.
                 await CoreNavigator.navigateToSitePath(`/${GRADES_PAGE_NAME}/${courseId}`, { siteId });
             }

src/core/features/grades/services/grades.ts

@@ -199,7 +199,7 @@ export class CoreGradesProvider {
         const table = await site.read<CoreGradesGetUserGradesTableWSResponse>('gradereport_user_get_grades_table', params, preSets);
 
         if (!table?.tables?.[0]) {
-            throw new CoreError('Coudln\'t get course grades table');
+            throw new CoreError('Couldn\'t get course grades table');
         }
 
         return table.tables[0];

src/core/features/grades/services/handlers/overview-link.ts

@@ -15,10 +15,10 @@
 import { Injectable } from '@angular/core';
 import { CoreContentLinksHandlerBase } from '@features/contentlinks/classes/base-handler';
 import { CoreContentLinksAction } from '@features/contentlinks/services/contentlinks-delegate';
-import { GRADES_PAGE_NAME } from '@features/grades/grades.module';
 import { CoreNavigator } from '@services/navigator';
 import { makeSingleton } from '@singletons';
 import { CoreGrades } from '../grades';
+import { GRADES_PAGE_NAME } from '../grades-helper';
 
 /**
  * Handler to treat links to overview courses grades.

src/core/features/grades/services/handlers/user.ts

@@ -14,7 +14,6 @@
 
 import { Injectable } from '@angular/core';
 import { COURSE_PAGE_NAME } from '@features/course/course.module';
-import { GRADES_PAGE_NAME } from '@features/grades/grades.module';
 
 import { CoreGrades } from '@features/grades/services/grades';
 import { CoreUserProfile } from '@features/user/services/user';
@@ -29,6 +28,7 @@ import { CoreNavigator } from '@services/navigator';
 import { CoreSites } from '@services/sites';
 import { CoreUtils } from '@services/utils/utils';
 import { makeSingleton } from '@singletons';
+import { GRADES_PAGE_NAME } from '../grades-helper';
 
 /**
  * Profile grades handler.