Merge pull request #4554 from crazyserver/MOBILE-4842

Mobile 4842

Author: dpalou

src/addons/badges/pages/badge-class/badge-class.html

@@ -1,80 +1,81 @@
+@let badgeToShow = badge();
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-title>
-            @if (badge) {
-                <h1>{{ badge.name }}</h1>
+            @if (badgeToShow) {
+                <h1>{{ badgeToShow.name }}</h1>
             } @else {
                 <h1>{{ 'addon.badges.badgedetails' | translate }}</h1>
             }
         </ion-title>
     </ion-toolbar>
 </ion-header>
 <ion-content class="limited-width">
-    <ion-refresher slot="fixed" [disabled]="!badgeLoaded" (ionRefresh)="refreshBadgeClass($event.target)">
+    <ion-refresher slot="fixed" [disabled]="!loaded()" (ionRefresh)="refreshBadgeClass($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
     </ion-refresher>
-    <core-loading [hideUntil]="badgeLoaded" placeholderType="imageandboxes">
-        @if (badge) {
+    <core-loading [hideUntil]="loaded()" placeholderType="imageandboxes">
+        @if (badgeToShow) {
             <ion-item-group>
                 <ion-item class="ion-text-wrap ion-text-center">
                     <ion-label>
-                        @if (badge.image) {
-                            <img class="large-avatar" [url]="badge.image" core-external-content [alt]="badge.name" />
+                        @if (badgeToShow.image) {
+                            <img class="large-avatar" [url]="badgeToShow.image" core-external-content [alt]="badgeToShow.name" />
                         }
                     </ion-label>
                 </ion-item>
-                @if (badge.name) {
+                @if (badgeToShow.name) {
                     <ion-item class="ion-text-wrap">
                         <ion-label>
                             <p class="item-heading">{{ 'core.name' | translate}}</p>
-                            <p>{{ badge.name }}</p>
+                            <p>{{ badgeToShow.name }}</p>
                         </ion-label>
                     </ion-item>
                 }
-                @if (badge.issuer) {
+                @if (badgeToShow.issuer) {
                     <ion-item class="ion-text-wrap">
                         <ion-label>
                             <p class="item-heading">{{ 'addon.badges.issuername' | translate}}</p>
                             <p>
-                                <core-format-text [text]="badge.issuer" contextLevel="system" [contextInstanceId]="0"
+                                <core-format-text [text]="badgeToShow.issuer" contextLevel="system" [contextInstanceId]="0"
                                     [wsNotFiltered]="true" />
                             </p>
                         </ion-label>
                     </ion-item>
                 }
-                @if (badge.coursefullname) {
+                @if (badgeToShow.coursefullname) {
                     <ion-item class="ion-text-wrap">
                         <ion-label>
                             <p class="item-heading">{{ 'core.course' | translate}}</p>
                             <p>
-                                <core-format-text [text]="badge.coursefullname" contextLevel="course"
-                                    [contextInstanceId]="badge.courseid" />
+                                <core-format-text [text]="badgeToShow.coursefullname" contextLevel="course"
+                                    [contextInstanceId]="badgeToShow.courseid" />
                             </p>
                         </ion-label>
                     </ion-item>
                 }
-                @if (badge.description) {
+                @if (badgeToShow.description) {
                     <ion-item class="ion-text-wrap">
                         <ion-label>
                             <p class="item-heading">{{ 'core.description' | translate}}</p>
-                            <p>{{ badge.description }}</p>
+                            <p>{{ badgeToShow.description }}</p>
                         </ion-label>
                     </ion-item>
                 }
             </ion-item-group>
 
             <!-- Competencies alignment -->
-            @if (badge.alignment?.length) {
+            @if (badgeToShow.alignment?.length) {
                 <ion-item-group>
                     <ion-item-divider>
                         <ion-label>
                             <h2>{{ 'addon.badges.alignment' | translate}}</h2>
                         </ion-label>
                     </ion-item-divider>
-                    <ion-item class="ion-text-wrap" *ngFor="let alignment of badge.alignment" [href]="alignment.targetUrl" core-link
+                    <ion-item class="ion-text-wrap" *ngFor="let alignment of badgeToShow.alignment" [href]="alignment.targetUrl" core-link
                         [autoLogin]="false">
                         <ion-label>
                             <p class="item-heading">{{ alignment.targetName }}</p>

src/addons/badges/pages/badge-class/badge-class.ts

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Component, OnInit, inject } from '@angular/core';
+import { Component, OnInit, inject, signal } from '@angular/core';
 import { CorePromiseUtils } from '@singletons/promise-utils';
 import { CoreNavigator } from '@services/navigator';
 import { ActivatedRoute } from '@angular/router';
@@ -38,9 +38,8 @@ export default class AddonBadgesBadgeClassPage implements OnInit {
     protected badgeId = 0;
     protected logView: (badge: AddonBadgesBadgeClass) => void;
 
-    badge?: AddonBadgesBadgeClass;
-    badgeLoaded = false;
-    currentTime = 0;
+    readonly badge = signal<AddonBadgesBadgeClass | undefined>(undefined);
+    readonly loaded = signal(false);
 
     constructor() {
         this.badgeId = CoreNavigator.getRequiredRouteNumberParam('badgeId');
@@ -59,22 +58,20 @@ export default class AddonBadgesBadgeClassPage implements OnInit {
     /**
      * @inheritdoc
      */
-    ngOnInit(): void {
-        this.fetchBadgeClass().finally(() => {
-            this.badgeLoaded = true;
-        });
+    async ngOnInit(): Promise<void> {
+        await this.fetchBadgeClass();
+
+        this.loaded.set(true);
     }
 
     /**
      * Fetch the badge class required for the view.
-     *
-     * @returns Promise resolved when done.
      */
     async fetchBadgeClass(): Promise<void> {
         try {
-            this.badge = await AddonBadges.getBadgeClass(this.badgeId);
-
-            this.logView(this.badge);
+            const badge = await AddonBadges.getBadgeClass(this.badgeId);
+            this.badge.set(badge);
+            this.logView(badge);
         } catch (message) {
             CoreAlerts.showError(message, { default: 'Error getting badge data.' });
         }