Development: Migrate exam exercises client code to signals

src/main/webapp/app/exam/manage/student-exams/student-exam-timeline/student-exam-timeline.component.ts

@@ -160,7 +160,7 @@ export class StudentExamTimelineComponent implements OnInit, AfterViewInit, OnDe
     private updateFileUploadExerciseView() {
         const fileUploadComponent = this.activePageComponent as FileUploadExamSubmissionComponent;
         if (fileUploadComponent) {
-            fileUploadComponent.studentSubmission = this.currentSubmission as FileUploadSubmission;
+            fileUploadComponent.studentSubmission.update(() => this.currentSubmission as FileUploadSubmission);
             fileUploadComponent.updateViewFromSubmission();
         }
     }

src/main/webapp/app/exam/participate/exercises/exam-exercise-update-highlighter/exam-exercise-update-highlighter.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, OnDestroy, OnInit, Output, inject } from '@angular/core';
+import { Component, OnDestroy, OnInit, inject, input, output } from '@angular/core';
 import { Subscription } from 'rxjs';
 import { ExamExerciseUpdateService } from 'app/exam/manage/exam-exercise-update.service';
 import { Exercise, ExerciseType } from 'app/entities/exercise.model';
@@ -23,9 +23,9 @@ export class ExamExerciseUpdateHighlighterComponent implements OnInit, OnDestroy
     updatedProblemStatement: string;
     showHighlightedDifferences = true;
     isHidden = true;
-    @Input() exercise: Exercise;
+    exercise = input.required<Exercise>();
 
-    @Output() problemStatementUpdateEvent: EventEmitter<string> = new EventEmitter<string>();
+    problemStatementUpdateEvent = output<string>();
 
     ngOnInit(): void {
         this.subscriptionToLiveExamExerciseUpdates = this.examExerciseUpdateService.currentExerciseIdAndProblemStatement.subscribe((update) => {
@@ -64,14 +64,14 @@ export class ExamExerciseUpdateHighlighterComponent implements OnInit, OnDestroy
      * @param updatedProblemStatement is the new problem statement that should replace the old one.
      */
     updateExerciseProblemStatementById(exerciseId: number, updatedProblemStatement: string) {
-        if (updatedProblemStatement != undefined && exerciseId === this.exercise.id) {
-            this.outdatedProblemStatement = this.exercise.problemStatement!;
+        if (updatedProblemStatement != undefined && exerciseId === this.exercise().id) {
+            this.outdatedProblemStatement = this.exercise().problemStatement!;
             this.updatedProblemStatement = updatedProblemStatement;
-            this.exercise.problemStatement = updatedProblemStatement;
+            this.exercise().problemStatement = updatedProblemStatement;
             this.showHighlightedDifferences = true;
             // Highlighting of the changes in the problem statement of a programming exercise id handled
             // in ProgrammingExerciseInstructionComponent
-            if (this.exercise.type !== ExerciseType.PROGRAMMING) {
+            if (this.exercise().type !== ExerciseType.PROGRAMMING) {
                 this.highlightProblemStatementDifferences();
             }
             this.isHidden = false;

src/main/webapp/app/exam/participate/exercises/exam-submission.component.ts

@@ -1,7 +1,7 @@
 import { Submission } from 'app/entities/submission.model';
 import { Exercise, ExerciseType } from 'app/entities/exercise.model';
 import { ExamPageComponent } from 'app/exam/participate/exercises/exam-page.component';
-import { Directive, Input } from '@angular/core';
+import { Directive, input } from '@angular/core';
 import { SubmissionVersion } from 'app/entities/submission-version.model';
 
 @Directive()
@@ -29,8 +29,8 @@ export abstract class ExamSubmissionComponent extends ExamPageComponent {
     abstract getSubmission(): Submission | undefined;
     abstract getExerciseId(): number | undefined;
     abstract getExercise(): Exercise;
-    @Input() readonly = false;
-    @Input() examTimeline = false;
+    readonly = input(false);
+    examTimeline = input(false);
     // needs to be public so that it can be accessed in the tests
     submissionVersion: SubmissionVersion;
     abstract setSubmissionVersion(submissionVersion: SubmissionVersion): void;

src/main/webapp/app/exam/participate/exercises/exercise-overview-page/exam-exercise-overview-page.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, OnChanges, OnInit, Output, inject } from '@angular/core';
+import { ChangeDetectorRef, Component, OnChanges, OnInit, inject, input, output } from '@angular/core';
 import { Exercise, ExerciseType, getIcon, getIconTooltip } from 'app/entities/exercise.model';
 import { ExamPageComponent } from 'app/exam/participate/exercises/exam-page.component';
 import { StudentExam } from 'app/entities/student-exam.model';
@@ -21,18 +21,23 @@ import { ArtemisTranslatePipe } from 'app/shared/pipes/artemis-translate.pipe';
     imports: [TranslateDirective, FaIconComponent, NgbTooltip, NgClass, UpdatingResultComponent, ArtemisTranslatePipe],
 })
 export class ExamExerciseOverviewPageComponent extends ExamPageComponent implements OnInit, OnChanges {
+    protected changeDetectorReference: ChangeDetectorRef = inject(ChangeDetectorRef);
     private examParticipationService = inject(ExamParticipationService);
 
-    @Input() studentExam: StudentExam;
-    @Output() onPageChanged = new EventEmitter<{ overViewChange: boolean; exercise: Exercise; forceSave: boolean }>();
+    studentExam = input.required<StudentExam>();
+    onPageChanged = output<{
+        overViewChange: boolean;
+        exercise: Exercise;
+        forceSave: boolean;
+    }>();
     getIcon = getIcon;
     getIconTooltip = getIconTooltip;
     showResultWidth = 10;
 
     examExerciseOverviewItems: ExamExerciseOverviewItem[] = [];
 
     ngOnInit() {
-        this.studentExam.exercises?.forEach((exercise) => {
+        this.studentExam().exercises?.forEach((exercise) => {
             const item = new ExamExerciseOverviewItem();
             item.exercise = exercise;
             item.icon = faHourglassHalf;

src/main/webapp/app/exam/participate/exercises/file-upload/file-upload-exam-submission.component.html

@@ -1,24 +1,24 @@
-@if (exercise) {
+@if (exercise()) {
     <h3 class="text-align-left fw-normal">
         <span>
-            {{ exercise.exerciseGroup?.title }}
+            {{ exercise().exerciseGroup?.title }}
         </span>
         <span
-            [jhiTranslate]="exercise.bonusPoints ? 'artemisApp.examParticipation.bonus' : 'artemisApp.examParticipation.points'"
-            [translateValues]="{ points: exercise.maxPoints, bonusPoints: exercise.bonusPoints }"
+            [jhiTranslate]="exercise().bonusPoints ? 'artemisApp.examParticipation.bonus' : 'artemisApp.examParticipation.points'"
+            [translateValues]="{ points: exercise().maxPoints, bonusPoints: exercise().bonusPoints }"
         >
         </span>
-        @if (exercise.includedInOverallScore !== IncludedInOverallScore.INCLUDED_COMPLETELY) {
-            <jhi-included-in-score-badge [includedInOverallScore]="exercise.includedInOverallScore" />
+        @if (exercise().includedInOverallScore !== IncludedInOverallScore.INCLUDED_COMPLETELY) {
+            <jhi-included-in-score-badge [includedInOverallScore]="exercise().includedInOverallScore" />
         }
     </h3>
     <hr />
-    <jhi-resizeable-container [examTimeline]="examTimeline">
+    <jhi-resizeable-container [examTimeline]="examTimeline()">
         <!--region Left Panel-->
-        <span class="exercise-title" left-header>{{ examTimeline ? exercise.title : ('artemisApp.exam.yourSolution' | artemisTranslate) }}</span>
+        <span class="exercise-title" left-header>{{ examTimeline() ? exercise().title : ('artemisApp.exam.yourSolution' | artemisTranslate) }}</span>
         <div left-body class="px-2 pb-2 w-100">
             <div class="row">
-                @if (isActive && !result && exercise && studentSubmission && !readonly) {
+                @if (isActive && !result && exercise() && studentSubmission() && !readonly()) {
                     <div class="col-12 col-md-10">
                         <div class="form-group">
                             <label for="fileUploadInput" class="form-control-label" jhiTranslate="artemisApp.fileUploadSubmission.selectFile"></label>
@@ -36,7 +36,7 @@ <h3 class="text-align-left fw-normal">
                                 </div>
                             </div>
                             <p class="d-inline-block" jhiTranslate="artemisApp.fileUploadExercise.supportedFileExtensions"></p>
-                            @for (extension of exercise.filePattern!.split(','); track extension) {
+                            @for (extension of exercise().filePattern!.split(','); track extension) {
                                 <div class="d-inline-block">
                                     <span class="ms-1 badge bg-info">
                                         {{ extension | uppercase }}
@@ -47,18 +47,18 @@ <h3 class="text-align-left fw-normal">
                     </div>
                 }
             </div>
-            @if (submittedFileName && studentSubmission?.filePath) {
+            @if (submittedFileName && studentSubmission()?.filePath) {
                 <div class="card-text">
                     <h6 jhiTranslate="artemisApp.fileUploadSubmission.submittedFile" [translateValues]="{ filename: submittedFileName }"></h6>
-                    <a class="text-primary" (click)="downloadFile(studentSubmission!.filePath!)" jhiTranslate="artemisApp.fileUploadSubmission.download"></a>
+                    <a class="text-primary" (click)="downloadFile(studentSubmission()!.filePath!)" jhiTranslate="artemisApp.fileUploadSubmission.download"></a>
                     @if (submittedFileExtension) {
                         <span class="ms-2 badge bg-info">
                             {{ submittedFileExtension | uppercase }}
                         </span>
                     }
                 </div>
             }
-            @if (!submittedFileName && examTimeline) {
+            @if (!submittedFileName && examTimeline()) {
                 <div>
                     <h6 jhiTranslate="artemisApp.timeline.fileUploadNotSubmitted"></h6>
                 </div>
@@ -70,8 +70,8 @@ <h6 jhiTranslate="artemisApp.timeline.fileUploadNotSubmitted"></h6>
         <span id="problem-statement" right-header jhiTranslate="artemisApp.exercise.problemStatement"></span>
         <ng-container right-body>
             <!-- problem statement update & difference highlighter -->
-            @if (exercise) {
-                <jhi-exam-exercise-update-highlighter [exercise]="exercise" (problemStatementUpdateEvent)="updateProblemStatement($event)" />
+            @if (exercise()) {
+                <jhi-exam-exercise-update-highlighter [exercise]="exercise()" (problemStatementUpdateEvent)="updateProblemStatement($event)" />
             }
             @if (problemStatementHtml) {
                 <p class="mb-3 markdown-preview">

src/main/webapp/app/exam/participate/exercises/file-upload/file-upload-exam-submission.component.ts

@@ -1,4 +1,4 @@
-import { Component, ElementRef, Input, OnInit, ViewChild, inject } from '@angular/core';
+import { Component, ElementRef, OnInit, inject, input, model, viewChild } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 import { AlertService } from 'app/core/util/alert.service';
 import dayjs from 'dayjs/esm';
@@ -46,10 +46,10 @@ export class FileUploadExamSubmissionComponent extends ExamSubmissionComponent i
 
     exerciseType = ExerciseType.FILE_UPLOAD;
 
-    @ViewChild('fileInput', { static: false }) fileInput: ElementRef;
+    fileInput = viewChild<ElementRef>('fileInput');
 
-    @Input() studentSubmission: FileUploadSubmission;
-    @Input() exercise: FileUploadExercise;
+    studentSubmission = model.required<FileUploadSubmission>();
+    exercise = input.required<FileUploadExercise>();
     problemStatementHtml: string;
 
     submittedFileName: string;
@@ -71,7 +71,7 @@ export class FileUploadExamSubmissionComponent extends ExamSubmissionComponent i
      */
     ngOnInit() {
         // show submission answers in UI
-        this.problemStatementHtml = htmlForMarkdown(this.exercise?.problemStatement);
+        this.problemStatementHtml = htmlForMarkdown(this.exercise()?.problemStatement);
         this.updateViewFromSubmission();
     }
 
@@ -93,14 +93,14 @@ export class FileUploadExamSubmissionComponent extends ExamSubmissionComponent i
         if (event.target.files.length) {
             const fileList: FileList = event.target.files;
             const submissionFile = fileList[0];
-            const allowedFileExtensions = this.exercise.filePattern!.split(',');
+            const allowedFileExtensions = this.exercise().filePattern!.split(',');
             if (!allowedFileExtensions.some((extension) => submissionFile.name.toLowerCase().endsWith(extension))) {
                 this.alertService.error('artemisApp.fileUploadSubmission.fileExtensionError');
             } else if (submissionFile.size > MAX_SUBMISSION_FILE_SIZE) {
                 this.alertService.error('artemisApp.fileUploadSubmission.fileTooBigError', { fileName: submissionFile.name });
             } else {
                 this.submissionFile = submissionFile;
-                this.studentSubmission.isSynced = false;
+                this.studentSubmission().isSynced = false;
             }
         }
     }
@@ -113,22 +113,22 @@ export class FileUploadExamSubmissionComponent extends ExamSubmissionComponent i
      * The exercise is still active if it's due date hasn't passed yet.
      */
     get isActive(): boolean {
-        return this.exercise && (!this.exercise.dueDate || dayjs(this.exercise.dueDate).isSameOrAfter(dayjs()));
+        return this.exercise() && (!this.exercise().dueDate || dayjs(this.exercise().dueDate).isSameOrAfter(dayjs()));
     }
 
     getExerciseId(): number | undefined {
-        return this.exercise.id;
+        return this.exercise().id;
     }
     getExercise(): Exercise {
-        return this.exercise;
+        return this.exercise();
     }
 
     public hasUnsavedChanges(): boolean {
-        return !this.studentSubmission.isSynced!;
+        return !this.studentSubmission().isSynced!;
     }
 
     getSubmission(): Submission {
-        return this.studentSubmission;
+        return this.studentSubmission();
     }
 
     updateSubmissionFromView(): void {
@@ -139,10 +139,10 @@ export class FileUploadExamSubmissionComponent extends ExamSubmissionComponent i
      *  Here the new filePath, which was received from the server, is used to display the name and type of the just uploaded file.
      */
     updateViewFromSubmission(): void {
-        if ((this.studentSubmission.isSynced && this.studentSubmission.filePath) || (this.examTimeline && this.studentSubmission.filePath)) {
+        if ((this.studentSubmission().isSynced && this.studentSubmission().filePath) || (this.examTimeline() && this.studentSubmission().filePath)) {
             // clear submitted file so that it is not displayed in the input (this might be confusing)
             this.submissionFile = undefined;
-            const filePath = this.studentSubmission!.filePath!.split('/');
+            const filePath = this.studentSubmission()!.filePath!.split('/');
             this.submittedFileName = filePath.last()!;
             const fileName = this.submittedFileName.split('.');
             this.submittedFileExtension = fileName.last()!;
@@ -157,12 +157,12 @@ export class FileUploadExamSubmissionComponent extends ExamSubmissionComponent i
         if (!this.submissionFile) {
             return;
         }
-        this.fileUploadSubmissionService.update(this.studentSubmission as FileUploadSubmission, this.exercise.id!, this.submissionFile).subscribe({
+        this.fileUploadSubmissionService.update(this.studentSubmission() as FileUploadSubmission, this.exercise().id!, this.submissionFile).subscribe({
             next: (res) => {
                 const submissionFromServer = res.body!;
-                this.studentSubmission.filePath = submissionFromServer.filePath;
-                this.studentSubmission.isSynced = true;
-                this.studentSubmission.submitted = true;
+                this.studentSubmission().filePath = submissionFromServer.filePath;
+                this.studentSubmission().isSynced = true;
+                this.studentSubmission().submitted = true;
                 this.updateViewFromSubmission();
             },
             error: () => this.onError(),

src/main/webapp/app/exam/participate/exercises/modeling/modeling-exam-submission.component.html

@@ -1,35 +1,35 @@
-@if (exercise) {
+@if (exercise()) {
     <div class="d-flex justify-content-between align-items-center">
         <h3 class="text-align-left fw-normal mb-0">
             <span>
-                {{ exercise.exerciseGroup?.title }}
+                {{ exercise().exerciseGroup?.title }}
             </span>
             <span
-                [jhiTranslate]="exercise.bonusPoints ? 'artemisApp.examParticipation.bonus' : 'artemisApp.examParticipation.points'"
-                [translateValues]="{ points: exercise.maxPoints, bonusPoints: exercise.bonusPoints }"
+                [jhiTranslate]="exercise().bonusPoints ? 'artemisApp.examParticipation.bonus' : 'artemisApp.examParticipation.points'"
+                [translateValues]="{ points: exercise().maxPoints, bonusPoints: exercise().bonusPoints }"
             >
             </span>
-            @if (exercise.includedInOverallScore !== IncludedInOverallScore.INCLUDED_COMPLETELY) {
-                <jhi-included-in-score-badge [includedInOverallScore]="exercise.includedInOverallScore" />
+            @if (exercise().includedInOverallScore !== IncludedInOverallScore.INCLUDED_COMPLETELY) {
+                <jhi-included-in-score-badge [includedInOverallScore]="exercise().includedInOverallScore" />
             }
         </h3>
-        <jhi-exercise-save-button [submission]="studentSubmission" (save)="notifyTriggerSave()" />
+        <jhi-exercise-save-button [submission]="studentSubmission()" (save)="notifyTriggerSave()" />
     </div>
     <hr />
 
-    <jhi-resizeable-container class="col-12" [examTimeline]="examTimeline">
+    <jhi-resizeable-container class="col-12" [examTimeline]="examTimeline()">
         <!--region Left Panel-->
-        <span class="exercise-title" left-header>{{ examTimeline ? exercise.title : ('artemisApp.exam.yourSolution' | artemisTranslate) }}</span>
+        <span class="exercise-title" left-header>{{ examTimeline() ? exercise().title : ('artemisApp.exam.yourSolution' | artemisTranslate) }}</span>
         <div left-body class="submission-container d-flex flex-column ps-2 mt-3 w-100">
             <jhi-fullscreen>
                 <div class="row flex-grow-1">
-                    @if (studentSubmission && isActive) {
+                    @if (studentSubmission() && isActive) {
                         <div class="col-12 editor-large">
                             <jhi-modeling-editor
                                 [umlModel]="umlModel"
-                                [diagramType]="exercise.diagramType!"
+                                [diagramType]="exercise().diagramType!"
                                 (onModelChanged)="modelChanged($event)"
-                                [readOnly]="readonly"
+                                [readOnly]="readonly()"
                                 [withExplanation]="true"
                                 [explanation]="explanationText"
                                 (explanationChange)="explanationChanged($event)"
@@ -45,8 +45,8 @@ <h3 class="text-align-left fw-normal mb-0">
         <span right-header jhiTranslate="artemisApp.modelingSubmission.problemStatement"></span>
         <!-- problem statement update & difference highlighter -->
         <ng-container right-body>
-            @if (exercise) {
-                <jhi-exam-exercise-update-highlighter [exercise]="exercise" (problemStatementUpdateEvent)="updateProblemStatement($event)" />
+            @if (exercise()) {
+                <jhi-exam-exercise-update-highlighter [exercise]="exercise()" (problemStatementUpdateEvent)="updateProblemStatement($event)" />
             }
             @if (problemStatementHtml) {
                 <p class="mb-3 markdown-preview">