Exam mode: Fix an issue where individual working time is not displaye…

…d in sidebar (ls1intum#9026)

src/main/webapp/app/overview/course-exams/course-exams.component.ts

@@ -12,6 +12,7 @@ import { CourseStorageService } from 'app/course/manage/course-storage.service';
 import { AccordionGroups, CollapseState, SidebarCardElement, SidebarData } from 'app/types/sidebar';
 import { CourseOverviewService } from '../course-overview.service';
 import { cloneDeep } from 'lodash-es';
+import { lastValueFrom } from 'rxjs';
 
 const DEFAULT_UNIT_GROUPS: AccordionGroups = {
     real: { entityData: [] },
@@ -36,6 +37,7 @@ export class CourseExamsComponent implements OnInit, OnDestroy {
     private studentExamTestExamUpdateSubscription?: Subscription;
     private examStartedSubscription?: Subscription;
     private studentExams: StudentExam[];
+    private studentExamsForRealExams = new Map<number, StudentExam>();
     public expandAttemptsMap = new Map<number, boolean>();
     public realExamsOfCourse: Exam[] = [];
     public testExamsOfCourse: Exam[] = [];
@@ -126,6 +128,16 @@ export class CourseExamsComponent implements OnInit, OnDestroy {
 
             this.realExamsOfCourse = exams.filter((exam) => !exam.testExam);
             this.testExamsOfCourse = exams.filter((exam) => exam.testExam);
+            // get student exams for real exams
+            const studentExamPromisesForRealExams = this.realExamsOfCourse.map((realExam) =>
+                lastValueFrom(this.examParticipationService.getOwnStudentExam(this.courseId, realExam.id!)).then((studentExam) => {
+                    this.studentExamsForRealExams.set(realExam.id!, studentExam);
+                }),
+            );
+            // Ensure that we prepare sidebardata after all studentexams are loaded
+            Promise.all(studentExamPromisesForRealExams).then(() => {
+                this.prepareSidebarData();
+            });
         }
     }
 
@@ -196,7 +208,7 @@ export class CourseExamsComponent implements OnInit, OnDestroy {
         const groupedExamGroups = cloneDeep(DEFAULT_UNIT_GROUPS) as AccordionGroups;
 
         for (const realExam of realExams) {
-            const examCardItem = this.courseOverviewService.mapExamToSidebarCardElement(realExam);
+            const examCardItem = this.courseOverviewService.mapExamToSidebarCardElement(realExam, this.studentExamsForRealExams.get(realExam.id!));
             groupedExamGroups['real'].entityData.push(examCardItem);
         }
         for (const testExam of testExams) {
@@ -234,7 +246,7 @@ export class CourseExamsComponent implements OnInit, OnDestroy {
         this.sortedRealExams = this.realExamsOfCourse.sort((a, b) => this.sortExamsByStartDate(a, b));
         this.sortedTestExams = this.testExamsOfCourse.sort((a, b) => this.sortExamsByStartDate(a, b));
 
-        const sidebarRealExams = this.courseOverviewService.mapExamsToSidebarCardElements(this.sortedRealExams);
+        const sidebarRealExams = this.courseOverviewService.mapExamsToSidebarCardElements(this.sortedRealExams, this.getAllStudentExamsForRealExams());
         const sidebarTestExams = this.courseOverviewService.mapExamsToSidebarCardElements(this.sortedTestExams);
 
         this.sidebarExams = [...sidebarRealExams, ...sidebarTestExams];
@@ -249,4 +261,8 @@ export class CourseExamsComponent implements OnInit, OnDestroy {
         }
         this.navigateToExam();
     }
+
+    getAllStudentExamsForRealExams(): StudentExam[] {
+        return [...this.studentExamsForRealExams.values()];
+    }
 }

src/main/webapp/app/overview/course-overview.service.ts

@@ -17,6 +17,7 @@ import { faBullhorn, faHashtag } from '@fortawesome/free-solid-svg-icons';
 import { isOneToOneChatDTO } from 'app/entities/metis/conversation/one-to-one-chat.model';
 import { isGroupChatDTO } from 'app/entities/metis/conversation/group-chat.model';
 import { ConversationService } from 'app/shared/metis/conversations/conversation.service';
+import { StudentExam } from 'app/entities/student-exam.model';
 
 const DEFAULT_UNIT_GROUPS: AccordionGroups = {
     future: { entityData: [] },
@@ -238,8 +239,8 @@ export class CourseOverviewService {
     mapExercisesToSidebarCardElements(exercises: Exercise[]) {
         return exercises.map((exercise) => this.mapExerciseToSidebarCardElement(exercise));
     }
-    mapExamsToSidebarCardElements(exams: Exam[]) {
-        return exams.map((exam) => this.mapExamToSidebarCardElement(exam));
+    mapExamsToSidebarCardElements(exams: Exam[], studentExams?: StudentExam[]) {
+        return exams.map((exam, index) => this.mapExamToSidebarCardElement(exam, studentExams?.[index]));
     }
 
     mapConversationsToSidebarCardElements(conversations: ConversationDTO[]) {
@@ -292,14 +293,15 @@ export class CourseOverviewService {
         return exerciseCardItem;
     }
 
-    mapExamToSidebarCardElement(exam: Exam): SidebarCardElement {
+    mapExamToSidebarCardElement(exam: Exam, studentExam?: StudentExam): SidebarCardElement {
         const examCardItem: SidebarCardElement = {
             title: exam.title ?? '',
             id: exam.id ?? '',
             icon: faGraduationCap,
             subtitleLeft: exam.moduleNumber ?? '',
             startDateWithTime: exam.startDate,
-            workingTime: exam.workingTime ?? 0,
+            workingTime: exam.workingTime,
+            studentExam: studentExam,
             attainablePoints: exam.examMaxPoints ?? 0,
             size: 'L',
         };

src/main/webapp/app/shared/sidebar/sidebar-card-item/sidebar-card-item.component.html

@@ -29,7 +29,9 @@
             <div class="d-flex flex-column align-items-baseline">
                 <small class="me-2 text-truncate fw-semibold small-title-color" jhiTranslate="artemisApp.courseOverview.sidebar.workingTime"></small>
                 <small class="me-2 text-truncate fw-semibold">
-                    @if (sidebarItem.workingTime) {
+                    @if (sidebarItem.studentExam) {
+                        <jhi-student-exam-working-time [studentExam]="sidebarItem.studentExam" />
+                    } @else if (sidebarItem.workingTime) {
                         {{ sidebarItem.workingTime | artemisDurationFromSeconds }}
                     }
                 </small>

src/main/webapp/app/shared/sidebar/sidebar.module.ts

@@ -15,6 +15,7 @@ import { SubmissionResultStatusModule } from 'app/overview/submission-result-sta
 import { SidebarCardDirective } from 'app/shared/sidebar/sidebar-card.directive';
 import { ConversationOptionsComponent } from 'app/shared/sidebar/conversation-options/conversation-options.component';
 import { AccordionAddOptionsComponent } from 'app/shared/sidebar/accordion-add-options/accordion-add-options.component';
+import { ArtemisExamSharedModule } from 'app/exam/shared/exam-shared.module';
 
 @NgModule({
     imports: [
@@ -26,6 +27,7 @@ import { AccordionAddOptionsComponent } from 'app/shared/sidebar/accordion-add-o
         ArtemisSharedCommonModule,
         SubmissionResultStatusModule,
         SidebarCardDirective,
+        ArtemisExamSharedModule,
     ],
     declarations: [
         SidebarAccordionComponent,

src/main/webapp/app/types/sidebar.ts

@@ -3,6 +3,7 @@ import { DifficultyLevel, Exercise } from 'app/entities/exercise.model';
 import { StudentParticipation } from 'app/entities/participation/student-participation.model';
 import dayjs from 'dayjs/esm';
 import { ConversationDTO } from 'app/entities/metis/conversation/conversation.model';
+import { StudentExam } from 'app/entities/student-exam.model';
 
 export type SidebarCardSize = 'S' | 'M' | 'L';
 export type TimeGroupCategory = 'past' | 'current' | 'dueSoon' | 'future' | 'noDate';
@@ -112,6 +113,10 @@ export interface SidebarCardElement {
      * Set for Exam, shows the working time
      */
     workingTime?: number;
+    /**
+     * Set for Exam, represents the student exam of a real exam to obtain individual working time
+     */
+    studentExam?: StudentExam;
     /**
      * Set for Exam, shows the maximum attainable Points
      */