Programming exercises: Add information box to exercise details page

src/main/webapp/app/exam/participate/exam-start-information/exam-start-information.component.html

@@ -3,14 +3,11 @@
         <div class="me-3">
             <jhi-information-box [informationBoxData]="informationBoxData">
                 <ng-container contentComponent>
-                    @if (informationBoxData.contentComponent === 'formatedDate') {
-                        <span>
-                            {{ informationBoxData.content | artemisDate: 'long-date' }}
-                            -
-                            {{ informationBoxData.content | artemisDate: 'time' }}
-                        </span>
-                    } @else if (informationBoxData.contentComponent === 'workingTime') {
-                        <jhi-student-exam-working-time [studentExam]="studentExam" />
+                    @if (informationBoxData.content.type === 'dateTime') {
+                        <span contentComponent>{{ informationBoxData.content.value | artemisDate }}</span>
+                    }
+                    @if (informationBoxData.content.type === 'workingTime') {
+                        <jhi-student-exam-working-time [studentExam]="informationBoxData.content.value" />
                     }
                 </ng-container>
             </jhi-information-box>

src/main/webapp/app/exam/participate/exam-start-information/exam-start-information.component.ts

@@ -1,7 +1,7 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { ArtemisSharedModule } from 'app/shared/shared.module';
 import { ArtemisSharedComponentModule } from 'app/shared/components/shared-component.module';
-import { InformationBox, InformationBoxComponent } from 'app/shared/information-box/information-box.component';
+import { InformationBox, InformationBoxComponent, InformationBoxContent } from 'app/shared/information-box/information-box.component';
 import { Exam } from 'app/entities/exam/exam.model';
 import { StudentExam } from 'app/entities/student-exam.model';
 import { ArtemisExamSharedModule } from 'app/exam/shared/exam-shared.module';
@@ -45,45 +45,78 @@ export class ExamStartInformationComponent implements OnInit {
         this.prepareInformationBoxData();
     }
 
-    buildInformationBox(boxTitle: string, boxContent: string | number, boxContentComponent?: string): InformationBox {
+    buildInformationBox(boxTitle: string, boxContent: InformationBoxContent, isContentComponent = false): InformationBox {
         const examInformationBoxData: InformationBox = {
             title: boxTitle ?? '',
-            content: boxContent ?? '',
-            contentComponent: boxContentComponent,
+            content: boxContent,
+            isContentComponent: isContentComponent,
         };
         return examInformationBoxData;
     }
 
     prepareInformationBoxData(): void {
         if (this.moduleNumber) {
-            const informationBoxModuleNumber = this.buildInformationBox('artemisApp.exam.moduleNumber', this.moduleNumber!);
+            const boxContentModuleNumber: InformationBoxContent = {
+                type: 'string',
+                value: this.moduleNumber,
+            };
+            const informationBoxModuleNumber = this.buildInformationBox('artemisApp.exam.moduleNumber', boxContentModuleNumber);
             this.examInformationBoxData.push(informationBoxModuleNumber);
         }
         if (this.courseName) {
-            const informationBoxCourseName = this.buildInformationBox('artemisApp.exam.course', this.courseName!);
+            const boxContentCourseName: InformationBoxContent = {
+                type: 'string',
+                value: this.courseName,
+            };
+            const informationBoxCourseName = this.buildInformationBox('artemisApp.exam.course', boxContentCourseName);
             this.examInformationBoxData.push(informationBoxCourseName);
         }
         if (this.examiner) {
-            const informationBoxExaminer = this.buildInformationBox('artemisApp.examManagement.examiner', this.examiner!);
+            const boxContentExaminer: InformationBoxContent = {
+                type: 'string',
+                value: this.examiner,
+            };
+            const informationBoxExaminer = this.buildInformationBox('artemisApp.examManagement.examiner', boxContentExaminer);
             this.examInformationBoxData.push(informationBoxExaminer);
         }
         if (this.examinedStudent) {
-            const informationBoxExaminedStudent = this.buildInformationBox('artemisApp.exam.examinedStudent', this.examinedStudent!);
+            const boxContentExaminedStudent: InformationBoxContent = {
+                type: 'string',
+                value: this.examinedStudent,
+            };
+            const informationBoxExaminedStudent = this.buildInformationBox('artemisApp.exam.examinedStudent', boxContentExaminedStudent);
             this.examInformationBoxData.push(informationBoxExaminedStudent);
         }
         if (this.startDate) {
-            const informationBoxStartDate = this.buildInformationBox('artemisApp.exam.date', this.startDate.toString(), 'formatedDate');
+            const boxContentStartDate: InformationBoxContent = {
+                type: 'dateTime',
+                value: this.startDate,
+            };
+            const informationBoxStartDate = this.buildInformationBox('artemisApp.exam.date', boxContentStartDate, true);
             this.examInformationBoxData.push(informationBoxStartDate);
         }
 
-        const informationBoxTotalWorkingTime = this.buildInformationBox('artemisApp.exam.workingTime', this.exam.workingTime!, 'workingTime');
+        const boxContentExamWorkingTime: InformationBoxContent = {
+            type: 'workingTime',
+            value: this.studentExam,
+        };
+
+        const informationBoxTotalWorkingTime = this.buildInformationBox('artemisApp.exam.workingTime', boxContentExamWorkingTime, true);
         this.examInformationBoxData.push(informationBoxTotalWorkingTime);
+        const boxContentTotalPoints: InformationBoxContent = {
+            type: 'string',
+            value: this.totalPoints?.toString() ?? '',
+        };
 
-        const informationBoxTotalPoints = this.buildInformationBox('artemisApp.exam.points', this.totalPoints!.toString());
+        const informationBoxTotalPoints = this.buildInformationBox('artemisApp.exam.points', boxContentTotalPoints);
         this.examInformationBoxData.push(informationBoxTotalPoints);
 
         if (this.numberOfExercisesInExam) {
-            const informationBoxNumberOfExercises = this.buildInformationBox('artemisApp.exam.exercises', this.numberOfExercisesInExam!.toString());
+            const boxContent: InformationBoxContent = {
+                type: 'string',
+                value: this.numberOfExercisesInExam?.toString(),
+            };
+            const informationBoxNumberOfExercises = this.buildInformationBox('artemisApp.exam.exercises', boxContent);
             this.examInformationBoxData.push(informationBoxNumberOfExercises);
         }
     }

src/main/webapp/app/exercises/shared/exercise-headers/exercise-headers-information/exercise-headers-information.component.html

@@ -0,0 +1,39 @@
+@if (exercise) {
+    <div id="exercise-headers-information" class="d-flex flex-row flex-wrap column-gap-3 overflow-auto">
+        @for (informationBoxItem of informationBoxItems; track informationBoxItem) {
+            <jhi-information-box [informationBoxData]="informationBoxItem">
+                @switch (informationBoxItem.content.type) {
+                    @case ('difficultyLevel') {
+                        <jhi-difficulty-level contentComponent [difficultyLevel]="informationBoxItem.content.value" />
+                    }
+                    @case ('categories') {
+                        <jhi-exercise-categories
+                            contentComponent
+                            [exercise]="informationBoxItem.content.value"
+                            [showTags]="{ difficulty: false, notReleased: true, includedInScore: true }"
+                            [ngClass]="'badge-row'"
+                            [isSmall]="true"
+                        />
+                    }
+                    @case ('timeAgo') {
+                        <span [ngClass]="'text-' + informationBoxItem.contentColor" contentComponent>{{ informationBoxItem.content.value | artemisTimeAgo }}</span>
+                    }
+                    @case ('dateTime') {
+                        <span contentComponent>{{ informationBoxItem.content.value | artemisDate }}</span>
+                    }
+                    @case ('submissionStatus') {
+                        <jhi-submission-result-status
+                            contentComponent
+                            class="text-truncate result"
+                            [exercise]="informationBoxItem.content.value"
+                            [studentParticipation]="studentParticipation"
+                            [triggerLastGraded]="false"
+                            [showCompletion]="false"
+                            [showBadge]="false"
+                        />
+                    }
+                }
+            </jhi-information-box>
+        }
+    </div>
+}