MOBILE-4842 coursecompletion: Use signals in report

crazyserver · crazyserver · commit c291861a7b48 · 2025-09-25T17:30:18.000+02:00
diff --git a/src/addons/coursecompletion/constants.ts b/src/addons/coursecompletion/constants.ts
@@ -0,0 +1,35 @@
+// (C) Copyright 2015 Moodle Pty Ltd.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+/**
+ * Course completion criteria aggregation method.
+ */
+export enum AddonCourseCompletionAggregation {
+    ALL = 1,
+    ANY = 2,
+}
+
+/**
+ * Criteria type constant, primarily for storing criteria type in the database.
+ */
+export enum AddonCourseCompletionCriteriaType {
+    SELF = 1, // Self completion criteria type.
+    DATE = 2, // Date completion criteria type.
+    UNENROL = 3, // Unenrol completion criteria type.
+    ACTIVITY = 4, // Activity completion criteria type.
+    DURATION = 5, // Duration completion criteria type.
+    GRADE = 6, // Grade completion criteria type.
+    ROLE = 7, // Role completion criteria type.
+    COURSE = 8, // Course completion criteria type.
+}
diff --git a/src/addons/coursecompletion/pages/report/report.html b/src/addons/coursecompletion/pages/report/report.html
@@ -9,34 +9,35 @@ <h1>{{ 'addon.coursecompletion.coursecompletion' | translate }}</h1>
     </ion-toolbar>
 </ion-header>
 <ion-content>
-    <ion-refresher slot="fixed" [disabled]="!completionLoaded" (ionRefresh)="refreshCompletion($event.target)">
+    <ion-refresher slot="fixed" [disabled]="!loaded()" (ionRefresh)="refreshCompletion($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
     </ion-refresher>
-    <core-loading [hideUntil]="completionLoaded">
-        @if (user) {
+    <core-loading [hideUntil]="loaded()">
+        @let userDisplay = user();
+        @if (userDisplay) {
             <ion-item class="ion-text-wrap">
-                <core-user-avatar [user]="user" [courseId]="courseId" slot="start" [linkProfile]="false" />
+                <core-user-avatar [user]="userDisplay" [courseId]="courseId()" slot="start" [linkProfile]="false" />
                 <ion-label>
-                    <p class="item-heading">{{user.fullname}}</p>
+                    <p class="item-heading">{{userDisplay.fullname}}</p>
                 </ion-label>
             </ion-item>
         }
 
-        @if (completion && tracked) {
+        @let completionDisplay = completion();
+        @if (completionDisplay && tracked()) {
             <ion-card>
                 <ion-item class="ion-text-wrap">
                     <ion-label>
                         <p class="item-heading">{{ 'addon.coursecompletion.status' | translate }}</p>
-                        <p>{{ statusText! | translate }}</p>
+                        <p>{{ statusText() | translate }}</p>
                     </ion-label>
                 </ion-item>
                 <ion-item class="ion-text-wrap">
                     <ion-label>
                         <p class="item-heading">{{ 'addon.coursecompletion.required' | translate }}</p>
-                        @if (completion.aggregation === 1) {
+                        @if (completionDisplay.aggregation === aggregationType.ALL) {
                             <p>{{ 'addon.coursecompletion.criteriarequiredall' | translate }}</p>
-                        }
-                        @if (completion.aggregation === 2) {
+                        } @else if (completionDisplay.aggregation === aggregationType.ANY) {
                             <p>{{ 'addon.coursecompletion.criteriarequiredany' | translate }}</p>
                         }
                     </ion-label>
@@ -48,21 +49,25 @@ <h1>{{ 'addon.coursecompletion.coursecompletion' | translate }}</h1>
                         <h2>{{ 'addon.coursecompletion.requiredcriteria' | translate }}</h2>
                     </ion-label>
                 </ion-item-divider>
-                <ion-item class="ion-hide-md-up ion-text-wrap" *ngFor="let criteria of completion.completions">
-                    <ion-label>
-                        <p class="item-heading">
-                            <core-format-text clean="true" [text]="criteria.details.criteria" [filter]="false" />
-                        </p>
-                        <p>
-                            <core-format-text clean="true" [text]="criteria.details.requirement" [filter]="false" />
-                        </p>
-                    </ion-label>
-                    @if (criteria.complete) {
-                        <strong slot="end">{{ 'core.yes' | translate }}</strong>
-                    } @else {
-                        <strong slot="end">{{ 'core.no' | translate }}</strong>
-                    }
-                </ion-item>
+                @for (criteria of completionDisplay.completions; track criteria) {
+                    <ion-item class="ion-hide-md-up ion-text-wrap">
+                        <ion-label>
+                            <p class="item-heading">
+                                <core-format-text clean="true" [text]="criteria.details.criteria" [filter]="false" />
+                            </p>
+                            <p>
+                                <core-format-text clean="true" [text]="criteria.details.requirement" [filter]="false" />
+                            </p>
+                        </ion-label>
+                            <strong slot="end">
+                                @if (criteria.complete) {
+                                    {{ 'core.yes' | translate }}
+                                } @else {
+                                    {{ 'core.no' | translate }}
+                                }
+                            </strong>
+                    </ion-item>
+                }
                 <ion-item class="ion-hide-md-down ion-text-wrap">
                     <ion-label>
                         <ion-row>
@@ -73,7 +78,8 @@ <h2>{{ 'addon.coursecompletion.requiredcriteria' | translate }}</h2>
                             <ion-col><strong>{{ 'addon.coursecompletion.complete' | translate }}</strong></ion-col>
                             <ion-col><strong>{{ 'addon.coursecompletion.completiondate' | translate }}</strong></ion-col>
                         </ion-row>
-                        <ion-row *ngFor="let criteria of completion.completions">
+                        @for (criteria of completionDisplay.completions; track criteria) {
+                        <ion-row>
                             <ion-col>
                                 <core-format-text clean="true" [text]="criteria.details.type" [filter]="false" />
                             </ion-col>
@@ -86,24 +92,25 @@ <h2>{{ 'addon.coursecompletion.requiredcriteria' | translate }}</h2>
                             <ion-col>
                                 <core-format-text [text]="criteria.details.status" [filter]="false" />
                             </ion-col>
-                            @if (criteria.complete) {
-                                <ion-col>{{ 'core.yes' | translate }}</ion-col>
-                            } @else {
-                                <ion-col>{{ 'core.no' | translate }}</ion-col>
-                            }
-                            @if (criteria.timecompleted) {
-                                <ion-col>
+                            <ion-col>
+                                @if (criteria.complete) {
+                                    {{ 'core.yes' | translate }}
+                                } @else {
+                                    {{ 'core.no' | translate }}
+                                }
+                            </ion-col>
+                            <ion-col>
+                                @if (criteria.timecompleted) {
                                     {{ criteria.timecompleted * 1000 | coreFormatDate :'strftimedatetimeshort' }}
-                                </ion-col>
-                            } @else {
-                                <ion-col />
-                            }
+                                }
+                            </ion-col>
                         </ion-row>
+                    }
                     </ion-label>
                 </ion-item>
             </ion-card>
         }
-        @if (showSelfComplete && tracked) {
+        @if (showSelfComplete() && tracked()) {
             <ion-card>
                 <ion-item-divider>
                     <ion-label>
@@ -118,7 +125,7 @@ <h2>{{ 'addon.coursecompletion.manualselfcompletion' | translate }}</h2>
                     </ion-label>
                 </ion-item>
             </ion-card>
-        } @else if (!tracked) {
+        } @else if (!tracked()) {
             <ion-card class="core-warning-card">
                 <ion-item>
                     <ion-icon name="fas-triangle-exclamation" slot="start" aria-hidden="true" />
diff --git a/src/addons/coursecompletion/pages/report/report.ts b/src/addons/coursecompletion/pages/report/report.ts
@@ -16,7 +16,7 @@ import {
     AddonCourseCompletion,
     AddonCourseCompletionCourseCompletionStatus,
 } from '@addons/coursecompletion/services/coursecompletion';
-import { Component, OnInit } from '@angular/core';
+import { Component, computed, OnInit, signal } from '@angular/core';
 import { CoreUser, CoreUserProfile } from '@features/user/services/user';
 import { CoreAnalytics, CoreAnalyticsEventType } from '@services/analytics';
 import { CoreLoadings } from '@services/overlays/loadings';
@@ -26,6 +26,7 @@ import { Translate } from '@singletons';
 import { CoreTime } from '@singletons/time';
 import { CoreAlerts } from '@services/overlays/alerts';
 import { CoreSharedModule } from '@/core/shared.module';
+import { AddonCourseCompletionAggregation } from '@addons/coursecompletion/constants';
 
 /**
  * Page that displays the course completion report.
@@ -39,16 +40,36 @@ import { CoreSharedModule } from '@/core/shared.module';
 })
 export default class AddonCourseCompletionReportPage implements OnInit {
 
-    protected userId!: number;
-    protected logView: () => void;
+    protected readonly aggregationType = AddonCourseCompletionAggregation;
+    protected readonly userId = signal(0);
+    protected logView!: () => void;
 
-    courseId!: number;
-    completionLoaded = false;
-    completion?: AddonCourseCompletionCourseCompletionStatus;
-    showSelfComplete = false;
-    tracked = true; // Whether completion is tracked.
-    statusText?: string;
-    user?: CoreUserProfile;
+    readonly courseId = signal(0);
+    readonly loaded = signal(false);
+    readonly completion = signal<AddonCourseCompletionCourseCompletionStatus | undefined>(undefined);
+
+    readonly showSelfComplete = computed(() => {
+        const completion = this.completion();
+        const userId = this.userId();
+
+        if (!completion) {
+            return false;
+        }
+
+        return AddonCourseCompletion.canMarkSelfCompleted(userId, completion);
+    });
+
+    readonly tracked = signal(true); // Whether completion is tracked.
+    readonly statusText = computed(() => {
+        const completion = this.completion();
+        if (!completion) {
+            return '';
+        }
+
+        return AddonCourseCompletion.getCompletedStatusText(completion);
+    });
+
+    readonly user = signal<CoreUserProfile | undefined>(undefined);
 
     constructor() {
         this.logView = CoreTime.once(() => {
@@ -57,8 +78,8 @@ export default class AddonCourseCompletionReportPage implements OnInit {
                 ws: 'core_completion_get_course_completion_status',
                 name: Translate.instant('addon.coursecompletion.coursecompletion'),
                 data: {
-                    course: this.courseId,
-                    user: this.userId,
+                    course: this.courseId(),
+                    user: this.userId(),
                 },
                 url: `/blocks/completionstatus/details.php?course=${this.courseId}&user=${this.userId}`,
             });
@@ -70,8 +91,8 @@ export default class AddonCourseCompletionReportPage implements OnInit {
      */
     ngOnInit(): void {
         try {
-            this.courseId = CoreNavigator.getRequiredRouteNumberParam('courseId');
-            this.userId = CoreNavigator.getRouteNumberParam('userId') || CoreSites.getCurrentSiteUserId();
+            this.courseId.set(CoreNavigator.getRequiredRouteNumberParam('courseId'));
+            this.userId.set(CoreNavigator.getRouteNumberParam('userId') || CoreSites.getCurrentSiteUserId());
         } catch (error) {
             CoreAlerts.showError(error);
             CoreNavigator.back();
@@ -80,7 +101,7 @@ export default class AddonCourseCompletionReportPage implements OnInit {
         }
 
         this.fetchCompletion().finally(() => {
-            this.completionLoaded = true;
+            this.loaded.set(true);
         });
     }
 
@@ -89,19 +110,16 @@ export default class AddonCourseCompletionReportPage implements OnInit {
      */
     protected async fetchCompletion(): Promise<void> {
         try {
-            this.user = await CoreUser.getProfile(this.userId, this.courseId, true);
-
-            this.completion = await AddonCourseCompletion.getCompletion(this.courseId, this.userId);
+            this.user.set(await CoreUser.getProfile(this.userId(), this.courseId(), true));
 
-            this.statusText = AddonCourseCompletion.getCompletedStatusText(this.completion);
-            this.showSelfComplete = AddonCourseCompletion.canMarkSelfCompleted(this.userId, this.completion);
+            this.completion.set(await AddonCourseCompletion.getCompletion(this.courseId(), this.userId()));
 
-            this.tracked = true;
+            this.tracked.set(true);
             this.logView();
         } catch (error) {
-            if (error && error.errorcode == 'notenroled') {
+            if (error?.errorcode === 'notenroled') {
                 // Not enrolled error, probably a teacher.
-                this.tracked = false;
+                this.tracked.set(false);
             } else {
                 CoreAlerts.showError(error, { default: Translate.instant('addon.coursecompletion.couldnotloadreport') });
             }
@@ -114,7 +132,7 @@ export default class AddonCourseCompletionReportPage implements OnInit {
      * @param refresher Refresher instance.
      */
     async refreshCompletion(refresher?: HTMLIonRefresherElement): Promise<void> {
-        await AddonCourseCompletion.invalidateCourseCompletion(this.courseId, this.userId).finally(() => {
+        await AddonCourseCompletion.invalidateCourseCompletion(this.courseId(), this.userId()).finally(() => {
             this.fetchCompletion().finally(() => {
                 refresher?.complete();
             });
@@ -134,7 +152,7 @@ export default class AddonCourseCompletionReportPage implements OnInit {
             const modal = await CoreLoadings.show('core.sending', true);
 
             try {
-                await AddonCourseCompletion.markCourseAsSelfCompleted(this.courseId);
+                await AddonCourseCompletion.markCourseAsSelfCompleted(this.courseId());
 
                 await this.refreshCompletion();
             } catch (error) {
diff --git a/src/addons/coursecompletion/services/coursecompletion.ts b/src/addons/coursecompletion/services/coursecompletion.ts
@@ -27,6 +27,7 @@ import { CoreSiteWSPreSets, WSObservable } from '@classes/sites/authenticated-si
 import { firstValueFrom } from 'rxjs';
 import { CoreCacheUpdateFrequency } from '@/core/constants';
 import { CoreCourseCompletion } from '@features/course/services/course-completion';
+import { AddonCourseCompletionAggregation, AddonCourseCompletionCriteriaType } from '../constants';
 
 /**
  * Service to handle course completion.
@@ -70,15 +71,15 @@ export class AddonCourseCompletionProvider {
      * @returns True if user can mark course as self completed, false otherwise.
      */
     canMarkSelfCompleted(userId: number, completion: AddonCourseCompletionCourseCompletionStatus): boolean {
-        if (CoreSites.getCurrentSiteUserId() != userId) {
+        if (CoreSites.getCurrentSiteUserId() !== userId) {
             return false;
         }
 
         let selfCompletionActive = false;
         let alreadyMarked = false;
 
         completion.completions.forEach((criteria) => {
-            if (criteria.type === 1) {
+            if (criteria.type === AddonCourseCompletionCriteriaType.SELF) {
                 // Self completion criteria found.
                 selfCompletionActive = true;
                 alreadyMarked = criteria.complete;
@@ -313,9 +314,9 @@ export const AddonCourseCompletion = makeSingleton(AddonCourseCompletionProvider
  */
 export type AddonCourseCompletionCourseCompletionStatus = {
     completed: boolean; // True if the course is complete, false otherwise.
-    aggregation: number; // Aggregation method 1 means all, 2 means any.
+    aggregation: AddonCourseCompletionAggregation; // Aggregation method 1 means all, 2 means any.
     completions: {
-        type: number; // Completion criteria type.
+        type: AddonCourseCompletionCriteriaType; // Completion criteria type.
         title: string; // Completion criteria Title.
         status: string; // Completion status (Yes/No) a % or number.
         complete: boolean; // Completion status (true/false).
