diff --git a/src/main/webapp/app/exam/overview/events/button/exam-live-events-button.component.spec.ts b/src/main/webapp/app/exam/overview/events/button/exam-live-events-button.component.spec.ts index bc4d009ca85b..23afe9681a3b 100644 --- a/src/main/webapp/app/exam/overview/events/button/exam-live-events-button.component.spec.ts +++ b/src/main/webapp/app/exam/overview/events/button/exam-live-events-button.component.spec.ts @@ -6,6 +6,8 @@ import { NgbModal } from '@ng-bootstrap/ng-bootstrap'; import { ExamLiveEvent, ExamLiveEventType, ExamParticipationLiveEventsService } from 'app/exam/overview/services/exam-participation-live-events.service'; import { of } from 'rxjs'; import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'; +import { input } from '@angular/core'; +import dayjs from 'dayjs/esm'; import { MockExamParticipationLiveEventsService } from 'test/helpers/mocks/service/mock-exam-participation-live-events.service'; import { ExamLiveEventsOverlayComponent } from 'app/exam/overview/events/overlay/exam-live-events-overlay.component'; @@ -21,13 +23,13 @@ describe('ExamLiveEventsButtonComponent', () => { imports: [MockModule(FontAwesomeModule)], providers: [MockProvider(AlertService), MockProvider(NgbModal), { provide: ExamParticipationLiveEventsService, useClass: MockExamParticipationLiveEventsService }], }).compileComponents(); - }); - - beforeEach(() => { fixture = TestBed.createComponent(ExamLiveEventsButtonComponent); component = fixture.componentInstance; mockModalService = TestBed.inject(NgbModal); mockLiveEventsService = TestBed.inject(ExamParticipationLiveEventsService); + TestBed.runInInjectionContext(() => { + component.examStartDate = input(dayjs()); + }); fixture.detectChanges(); }); diff --git a/src/main/webapp/app/exam/overview/events/button/exam-live-events-button.component.ts b/src/main/webapp/app/exam/overview/events/button/exam-live-events-button.component.ts index f29b8c600f06..30dfc3f7dff0 100644 --- a/src/main/webapp/app/exam/overview/events/button/exam-live-events-button.component.ts +++ b/src/main/webapp/app/exam/overview/events/button/exam-live-events-button.component.ts @@ -1,4 +1,4 @@ -import { Component, Input, OnDestroy, OnInit, ViewEncapsulation, inject } from '@angular/core'; +import { Component, OnDestroy, OnInit, ViewEncapsulation, inject, input } from '@angular/core'; import { faBullhorn } from '@fortawesome/free-solid-svg-icons'; import { AlertService } from 'app/shared/service/alert.service'; import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap'; @@ -32,7 +32,7 @@ export class ExamLiveEventsButtonComponent implements OnInit, OnDestroy { private liveEventsSubscription?: Subscription; private allEventsSubscription?: Subscription; eventCount = 0; - @Input() examStartDate: dayjs.Dayjs; + examStartDate = input.required(); // Icons faBullhorn = faBullhorn; @@ -40,11 +40,11 @@ export class ExamLiveEventsButtonComponent implements OnInit, OnDestroy { ngOnInit(): void { this.allEventsSubscription = this.liveEventsService.observeAllEvents(USER_DISPLAY_RELEVANT_EVENTS_REOPEN).subscribe((events: ExamLiveEvent[]) => { // do not count the problem statements events that are made before the start of the exam - const filteredEvents = events.filter((event) => !(event.eventType === ExamLiveEventType.PROBLEM_STATEMENT_UPDATE && event.createdDate.isBefore(this.examStartDate))); + const filteredEvents = events.filter((event) => !(event.eventType === ExamLiveEventType.PROBLEM_STATEMENT_UPDATE && event.createdDate.isBefore(this.examStartDate()))); this.eventCount = filteredEvents.length; }); - this.liveEventsSubscription = this.liveEventsService.observeNewEventsAsUser(USER_DISPLAY_RELEVANT_EVENTS, this.examStartDate).subscribe(() => { + this.liveEventsSubscription = this.liveEventsService.observeNewEventsAsUser(USER_DISPLAY_RELEVANT_EVENTS, this.examStartDate()).subscribe(() => { // If any unacknowledged event comes in, open the dialog to display it if (!this.modalRef) { this.openDialog(); @@ -69,7 +69,7 @@ export class ExamLiveEventsButtonComponent implements OnInit, OnDestroy { windowClass: 'live-events-modal-window', }); - this.modalRef.componentInstance.examStartDate = this.examStartDate; + this.modalRef.componentInstance.examStartDate.set(this.examStartDate()); from(this.modalRef.result).subscribe(() => (this.modalRef = undefined)); } diff --git a/src/main/webapp/app/exam/overview/events/overlay/exam-live-events-overlay.component.spec.ts b/src/main/webapp/app/exam/overview/events/overlay/exam-live-events-overlay.component.spec.ts index 1e4fba3434cc..6ba0fabfcbf9 100644 --- a/src/main/webapp/app/exam/overview/events/overlay/exam-live-events-overlay.component.spec.ts +++ b/src/main/webapp/app/exam/overview/events/overlay/exam-live-events-overlay.component.spec.ts @@ -10,6 +10,8 @@ import { MockSyncStorage } from 'test/helpers/mocks/service/mock-sync-storage.se import { provideHttpClientTesting } from '@angular/common/http/testing'; import { provideHttpClient } from '@angular/common/http'; import { MockProvider } from 'ng-mocks'; +import dayjs from 'dayjs/esm'; +import { model } from '@angular/core'; describe('ExamLiveEventsOverlayComponent', () => { let component: ExamLiveEventsOverlayComponent; @@ -28,14 +30,15 @@ describe('ExamLiveEventsOverlayComponent', () => { MockProvider(NgbActiveModal), ], }).compileComponents(); - }); - beforeEach(() => { fixture = TestBed.createComponent(ExamLiveEventsOverlayComponent); component = fixture.componentInstance; mockLiveEventsService = TestBed.inject(ExamParticipationLiveEventsService); mockExamExerciseUpdateService = TestBed.inject(ExamExerciseUpdateService); mockActiveModal = TestBed.inject(NgbActiveModal); + TestBed.runInInjectionContext(() => { + component.examStartDate = model(dayjs()); + }); fixture.detectChanges(); }); diff --git a/src/main/webapp/app/exam/overview/events/overlay/exam-live-events-overlay.component.ts b/src/main/webapp/app/exam/overview/events/overlay/exam-live-events-overlay.component.ts index f47d959b5685..8940ce0cc7a8 100644 --- a/src/main/webapp/app/exam/overview/events/overlay/exam-live-events-overlay.component.ts +++ b/src/main/webapp/app/exam/overview/events/overlay/exam-live-events-overlay.component.ts @@ -1,4 +1,4 @@ -import { Component, Input, OnDestroy, OnInit, inject } from '@angular/core'; +import { Component, OnDestroy, OnInit, inject, model } from '@angular/core'; import { faCheck } from '@fortawesome/free-solid-svg-icons'; import { ExamLiveEventComponent } from 'app/exam/shared/events/exam-live-event.component'; import { Subscription } from 'rxjs'; @@ -33,7 +33,7 @@ export class ExamLiveEventsOverlayComponent implements OnInit, OnDestroy { eventsToDisplay?: ExamLiveEvent[]; events: ExamLiveEvent[] = []; - @Input() examStartDate: dayjs.Dayjs; + examStartDate = model.required(); // Icons faCheck = faCheck; @@ -47,13 +47,13 @@ export class ExamLiveEventsOverlayComponent implements OnInit, OnDestroy { ngOnInit(): void { this.allLiveEventsSubscription = this.liveEventsService.observeAllEvents(USER_DISPLAY_RELEVANT_EVENTS_REOPEN).subscribe((events: ExamLiveEvent[]) => { // display the problem statements events only after the start of the exam - this.events = events.filter((event) => !(event.eventType === ExamLiveEventType.PROBLEM_STATEMENT_UPDATE && event.createdDate.isBefore(this.examStartDate))); + this.events = events.filter((event) => !(event.eventType === ExamLiveEventType.PROBLEM_STATEMENT_UPDATE && event.createdDate.isBefore(this.examStartDate()))); if (!this.eventsToDisplay) { this.updateEventsToDisplay(); } }); - this.newLiveEventsSubscription = this.liveEventsService.observeNewEventsAsUser(USER_DISPLAY_RELEVANT_EVENTS, this.examStartDate).subscribe((event: ExamLiveEvent) => { + this.newLiveEventsSubscription = this.liveEventsService.observeNewEventsAsUser(USER_DISPLAY_RELEVANT_EVENTS, this.examStartDate()).subscribe((event: ExamLiveEvent) => { this.unacknowledgedEvents.unshift(event); this.updateEventsToDisplay(); }); diff --git a/src/main/webapp/app/exam/overview/exam-bar/exam-bar.component.html b/src/main/webapp/app/exam/overview/exam-bar/exam-bar.component.html index 31bb0e9a0358..be508a4e1cc4 100644 --- a/src/main/webapp/app/exam/overview/exam-bar/exam-bar.component.html +++ b/src/main/webapp/app/exam/overview/exam-bar/exam-bar.component.html @@ -1,19 +1,19 @@ -
+

{{ examTitle }}

- @if (!examTimeLineView) { + @if (!examTimeLineView()) {
- - @if (!isEndView) { + + @if (!isEndView()) { }
- @for (exercise of exercises; track exercise; let i = $index) { + @for (exercise of exercises(); track exercise; let i = $index) { @if ( i >= - exerciseIndex - + exerciseIndex() - itemsVisiblePerSide - - (exerciseIndex + 1 + itemsVisiblePerSide > exercises.length ? exerciseIndex + 1 + itemsVisiblePerSide - exercises.length : 0) && - i <= exerciseIndex + itemsVisiblePerSide - (exerciseIndex - itemsVisiblePerSide <= 0 ? exerciseIndex - itemsVisiblePerSide : 0) + (exerciseIndex() + 1 + itemsVisiblePerSide > exercises().length ? exerciseIndex() + 1 + itemsVisiblePerSide - exercises().length : 0) && + i <= exerciseIndex() + itemsVisiblePerSide - (exerciseIndex() - itemsVisiblePerSide <= 0 ? exerciseIndex() - itemsVisiblePerSide : 0) ) {
- @if (!examTimeLineView) { + @if (!examTimeLineView()) {
- @if (!overviewPageOpen) { + @if (!overviewPageOpen()) { }
- +
} diff --git a/src/main/webapp/app/exam/overview/exam-navigation-bar/exam-navigation-bar.component.spec.ts b/src/main/webapp/app/exam/overview/exam-navigation-bar/exam-navigation-bar.component.spec.ts index ea0b409528a9..a0eabf6ea5b1 100644 --- a/src/main/webapp/app/exam/overview/exam-navigation-bar/exam-navigation-bar.component.spec.ts +++ b/src/main/webapp/app/exam/overview/exam-navigation-bar/exam-navigation-bar.component.spec.ts @@ -17,19 +17,20 @@ import { MockTranslateService } from 'test/helpers/mocks/service/mock-translate. import { TranslateService } from '@ngx-translate/core'; import { provideHttpClient } from '@angular/common/http'; import { provideHttpClientTesting } from '@angular/common/http/testing'; +import { input, model } from '@angular/core'; describe('Exam Navigation Bar Component', () => { let fixture: ComponentFixture; let comp: ExamNavigationBarComponent; let repositoryService: CodeEditorRepositoryService; - - const examExerciseIdForNavigationSourceMock = new BehaviorSubject(-1); - const mockExamExerciseUpdateService = { - currentExerciseIdForNavigation: examExerciseIdForNavigationSourceMock.asObservable(), - }; - - beforeEach(() => { - TestBed.configureTestingModule({ + let examExerciseIdForNavigationSourceMock: BehaviorSubject; + + beforeEach(async () => { + examExerciseIdForNavigationSourceMock = new BehaviorSubject(-1); + const mockExamExerciseUpdateService = { + currentExerciseIdForNavigation: examExerciseIdForNavigationSourceMock.asObservable(), + }; + await TestBed.configureTestingModule({ providers: [ { provide: ExamExerciseUpdateService, useValue: mockExamExerciseUpdateService }, { provide: LocalStorageService, useClass: MockSyncStorage }, @@ -45,8 +46,7 @@ describe('Exam Navigation Bar Component', () => { repositoryService = TestBed.inject(CodeEditorRepositoryService); TestBed.inject(ExamParticipationService); - comp.endDate = dayjs(); - comp.exercises = [ + const exercises = [ { id: 0, type: ExerciseType.PROGRAMMING, @@ -59,6 +59,10 @@ describe('Exam Navigation Bar Component', () => { { id: 1, type: ExerciseType.TEXT } as Exercise, { id: 2, type: ExerciseType.MODELING } as Exercise, ]; + TestBed.runInInjectionContext(() => { + comp.endDate = input(dayjs()); + comp.exercises = input(exercises); + }); }); beforeEach(fakeAsync(() => { @@ -69,8 +73,11 @@ describe('Exam Navigation Bar Component', () => { it('should update the submissions onInit if their CommitState is UNCOMMITTED_CHANGES to isSynced false, if not in initial session', () => { // Given // Create an exam session, which is not an initial session. - comp.examSessions = [{ initialSession: false } as ExamSession]; - const exerciseToBeSynced = comp.exercises[0]; + const examSessions = [{ initialSession: false } as ExamSession]; + const exerciseToBeSynced = comp.exercises()[0]; + TestBed.runInInjectionContext(() => { + comp.examSessions = input(examSessions); + }); jest.spyOn(repositoryService, 'getStatus').mockReturnValue(of({ repositoryStatus: CommitState.UNCOMMITTED_CHANGES })); // When @@ -95,14 +102,14 @@ describe('Exam Navigation Bar Component', () => { jest.spyOn(comp.onPageChanged, 'emit'); jest.spyOn(comp, 'setExerciseButtonStatus'); - expect(comp.exerciseIndex).toBe(0); + expect(comp.exerciseIndex()).toBe(0); const exerciseIndex = 1; const force = false; comp.changePage(false, exerciseIndex, force); - expect(comp.exerciseIndex).toEqual(exerciseIndex); + expect(comp.exerciseIndex()).toEqual(exerciseIndex); expect(comp.onPageChanged.emit).toHaveBeenCalledOnce(); expect(comp.setExerciseButtonStatus).toHaveBeenCalledWith(exerciseIndex); }); @@ -111,32 +118,38 @@ describe('Exam Navigation Bar Component', () => { jest.spyOn(comp.onPageChanged, 'emit'); jest.spyOn(comp, 'setExerciseButtonStatus'); - expect(comp.exerciseIndex).toBe(0); + expect(comp.exerciseIndex()).toBe(0); const exerciseIndex = 5; const force = false; comp.changePage(false, exerciseIndex, force); - expect(comp.exerciseIndex).toBe(0); + expect(comp.exerciseIndex()).toBe(0); expect(comp.onPageChanged.emit).not.toHaveBeenCalled(); expect(comp.setExerciseButtonStatus).not.toHaveBeenCalledWith(exerciseIndex); }); it('should tell the type of the selected programming exercise', () => { - comp.exerciseIndex = 0; + TestBed.runInInjectionContext(() => { + comp.exerciseIndex = model(0); + }); expect(comp.isProgrammingExercise()).toBeTrue(); }); it('should tell the type of the selected text exercise', () => { - comp.exerciseIndex = 1; + TestBed.runInInjectionContext(() => { + comp.exerciseIndex = model(1); + }); expect(comp.isProgrammingExercise()).toBeFalse(); }); it('should tell the type of the selected modeling exercise', () => { - comp.exerciseIndex = 2; + TestBed.runInInjectionContext(() => { + comp.exerciseIndex = model(2); + }); expect(comp.isProgrammingExercise()).toBeFalse(); }); @@ -174,7 +187,7 @@ describe('Exam Navigation Bar Component', () => { }); it('should set the exercise button status for submitted submission', () => { - comp.exercises[0].studentParticipations![0].submissions![0] = { submitted: true }; + comp.exercises()[0].studentParticipations![0].submissions![0] = { submitted: true }; const result = comp.setExerciseButtonStatus(0); @@ -183,7 +196,7 @@ describe('Exam Navigation Bar Component', () => { }); it('should set the exercise button status for submitted and synced submission active', () => { - comp.exercises[0].studentParticipations![0].submissions![0] = { submitted: true, isSynced: true }; + comp.exercises()[0].studentParticipations![0].submissions![0] = { submitted: true, isSynced: true }; const result = comp.setExerciseButtonStatus(0); @@ -191,7 +204,7 @@ describe('Exam Navigation Bar Component', () => { }); it('should set the exercise button status for submitted and synced submission not active', () => { - comp.exercises[0].studentParticipations![0].submissions![0] = { submitted: true, isSynced: true }; + comp.exercises()[0].studentParticipations![0].submissions![0] = { submitted: true, isSynced: true }; const result = comp.setExerciseButtonStatus(1); @@ -199,39 +212,39 @@ describe('Exam Navigation Bar Component', () => { }); it('should get the exercise button tooltip without submission', () => { - const result = comp.getExerciseButtonTooltip(comp.exercises[1]); + const result = comp.getExerciseButtonTooltip(comp.exercises()[1]); expect(result).toBe('synced'); }); it('should get the exercise button tooltip with submitted and synced submission', () => { - comp.exercises[0].studentParticipations![0].submissions![0] = { submitted: true, isSynced: true }; + comp.exercises()[0].studentParticipations![0].submissions![0] = { submitted: true, isSynced: true }; - const result = comp.getExerciseButtonTooltip(comp.exercises[0]); + const result = comp.getExerciseButtonTooltip(comp.exercises()[0]); expect(result).toBe('submitted'); }); it('should get the exercise button tooltip with submitted submission', () => { - comp.exercises[0].studentParticipations![0].submissions![0] = { submitted: true }; + comp.exercises()[0].studentParticipations![0].submissions![0] = { submitted: true }; - const result = comp.getExerciseButtonTooltip(comp.exercises[0]); + const result = comp.getExerciseButtonTooltip(comp.exercises()[0]); expect(result).toBe('notSavedOrSubmitted'); }); it('should get the exercise button tooltip with submission', () => { - comp.exercises[0].studentParticipations![0].submissions![0] = {}; + comp.exercises()[0].studentParticipations![0].submissions![0] = {}; - const result = comp.getExerciseButtonTooltip(comp.exercises[0]); + const result = comp.getExerciseButtonTooltip(comp.exercises()[0]); expect(result).toBe('notSavedOrSubmitted'); }); it('should get the exercise button tooltip with synced submission', () => { - comp.exercises[0].studentParticipations![0].submissions![0] = { isSynced: true }; + comp.exercises()[0].studentParticipations![0].submissions![0] = { isSynced: true }; - const result = comp.getExerciseButtonTooltip(comp.exercises[0]); + const result = comp.getExerciseButtonTooltip(comp.exercises()[0]); expect(result).toBe('notSubmitted'); }); @@ -244,15 +257,19 @@ describe('Exam Navigation Bar Component', () => { }); it('should set exercise button status to synced active if it is the active exercise in the exam timeline view', () => { - comp.examTimeLineView = true; - comp.exerciseIndex = 0; + TestBed.runInInjectionContext(() => { + comp.examTimeLineView = input(true); + comp.exerciseIndex = model(0); + }); expect(comp.setExerciseButtonStatus(0)).toBe('synced active'); expect(comp.icon).toEqual(faCheck); }); it('should set exercise button status to synced if it is not the active exercise in the exam timeline view', () => { - comp.examTimeLineView = true; - comp.exerciseIndex = 0; + TestBed.runInInjectionContext(() => { + comp.examTimeLineView = input(true); + comp.exerciseIndex = model(0); + }); expect(comp.setExerciseButtonStatus(1)).toBe('synced'); expect(comp.icon).toEqual(faCheck); }); diff --git a/src/main/webapp/app/exam/overview/exam-navigation-bar/exam-navigation-bar.component.ts b/src/main/webapp/app/exam/overview/exam-navigation-bar/exam-navigation-bar.component.ts index 5ad4dfa7c650..e206f2af3258 100644 --- a/src/main/webapp/app/exam/overview/exam-navigation-bar/exam-navigation-bar.component.ts +++ b/src/main/webapp/app/exam/overview/exam-navigation-bar/exam-navigation-bar.component.ts @@ -1,4 +1,4 @@ -import { AfterViewInit, Component, EventEmitter, Input, OnInit, Output, inject } from '@angular/core'; +import { AfterViewInit, Component, OnInit, inject, input, model, output } from '@angular/core'; import { Exercise, ExerciseType } from 'app/exercise/shared/entities/exercise/exercise.model'; import { ProgrammingExercise } from 'app/programming/shared/entities/programming-exercise.model'; import { LayoutService } from 'app/shared/breakpoints/layout.service'; @@ -17,7 +17,6 @@ import { faBars, faCheck, faEdit } from '@fortawesome/free-solid-svg-icons'; import { ProgrammingSubmission } from 'app/programming/shared/entities/programming-submission.model'; import { FileUploadSubmission } from 'app/fileupload/shared/entities/file-upload-submission.model'; import { TranslateDirective } from 'app/shared/language/translate.directive'; -import { ExamLiveEventsButtonComponent } from '../events/button/exam-live-events-button.component'; import { NgClass } from '@angular/common'; import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap'; import { FaIconComponent } from '@fortawesome/angular-fontawesome'; @@ -29,7 +28,7 @@ import { SubmissionVersion } from 'app/exam/shared/entities/submission-version.m selector: 'jhi-exam-navigation-bar', templateUrl: './exam-navigation-bar.component.html', styleUrls: ['./exam-navigation-bar.component.scss'], - imports: [TranslateDirective, ExamLiveEventsButtonComponent, NgClass, NgbTooltip, FaIconComponent, ExamTimerComponent, ArtemisTranslatePipe], + imports: [TranslateDirective, NgClass, NgbTooltip, FaIconComponent, ExamTimerComponent, ArtemisTranslatePipe], }) export class ExamNavigationBarComponent implements OnInit, AfterViewInit { private layoutService = inject(LayoutService); @@ -38,20 +37,20 @@ export class ExamNavigationBarComponent implements OnInit, AfterViewInit { private repositoryService = inject(CodeEditorRepositoryService); private conflictService = inject(CodeEditorConflictStateService); - @Input() exercises: Exercise[] = []; - @Input() exerciseIndex = 0; - @Input() endDate: dayjs.Dayjs; - @Input() overviewPageOpen: boolean; - @Input() examSessions?: ExamSession[] = []; - @Input() examTimeLineView = false; - @Output() onPageChanged = new EventEmitter<{ + exercises = input([]); + exerciseIndex = model(0); + endDate = input(dayjs()); + overviewPageOpen = input(); + examSessions = input([]); + examTimeLineView = input(false); + onPageChanged = output<{ overViewChange: boolean; exercise?: Exercise; forceSave: boolean; submission?: ProgrammingSubmission | SubmissionVersion | FileUploadSubmission; }>(); - @Output() examAboutToEnd = new EventEmitter(); - @Output() onExamHandInEarly = new EventEmitter(); + examAboutToEnd = output(); + onExamHandInEarly = output(); static itemsVisiblePerSideDefault = 4; itemsVisiblePerSide = ExamNavigationBarComponent.itemsVisiblePerSideDefault; @@ -66,7 +65,7 @@ export class ExamNavigationBarComponent implements OnInit, AfterViewInit { faBars = faBars; ngOnInit(): void { - if (!this.examTimeLineView) { + if (!this.examTimeLineView()) { this.subscriptionToLiveExamExerciseUpdates = this.examExerciseUpdateService.currentExerciseIdForNavigation.subscribe((exerciseIdToNavigateTo) => { // another exercise will only be displayed if the student clicks on the corresponding pop-up notification this.changeExerciseById(exerciseIdToNavigateTo); @@ -86,13 +85,13 @@ export class ExamNavigationBarComponent implements OnInit, AfterViewInit { } }); - const isInitialSession = this.examSessions && this.examSessions.length > 0 && this.examSessions[0].initialSession; + const isInitialSession = this.examSessions() && this.examSessions().length > 0 && this.examSessions()[0].initialSession; if (isInitialSession || isInitialSession == undefined) { return; } // If it is not an initial session, update the isSynced variable for out of sync submissions. - this.exercises + this.exercises() .filter((exercise) => exercise.type === ExerciseType.PROGRAMMING && exercise.studentParticipations) .forEach((exercise) => { const domain: DomainChange = [DomainType.PARTICIPATION, exercise.studentParticipations![0]]; @@ -130,27 +129,27 @@ export class ExamNavigationBarComponent implements OnInit, AfterViewInit { } /** - * @param overviewPage: user wants to switch to the overview page - * @param exerciseIndex: index of the exercise to switch to, if it should not be used, you can pass -1 - * @param forceSave: true if forceSave shall be used. + * @param overviewPage user wants to switch to the overview page + * @param exerciseIndex index of the exercise to switch to, if it should not be used, you can pass -1 + * @param forceSave true if forceSave shall be used. * @param submission the submission to be viewed, used in the exam timeline */ changePage(overviewPage: boolean, exerciseIndex: number, forceSave?: boolean, submission?: SubmissionVersion | ProgrammingSubmission | FileUploadSubmission): void { if (!overviewPage) { // out of index -> do nothing - if (exerciseIndex > this.exercises.length - 1 || exerciseIndex < 0) { + if (exerciseIndex > this.exercises().length - 1 || exerciseIndex < 0) { return; } // set index and emit event - this.exerciseIndex = exerciseIndex; - this.onPageChanged.emit({ overViewChange: false, exercise: this.exercises[this.exerciseIndex], forceSave: !!forceSave, submission: submission }); + this.exerciseIndex.set(exerciseIndex); + this.onPageChanged.emit({ overViewChange: false, exercise: this.exercises()[this.exerciseIndex()], forceSave: !!forceSave, submission: submission }); } else if (overviewPage) { // set index and emit event - this.exerciseIndex = -1; + this.exerciseIndex.set(-1); // save current exercise this.onPageChanged.emit({ overViewChange: true, exercise: undefined, forceSave: false }); } - this.setExerciseButtonStatus(this.exerciseIndex); + this.setExerciseButtonStatus(this.exerciseIndex()); } /** @@ -158,7 +157,7 @@ export class ExamNavigationBarComponent implements OnInit, AfterViewInit { * @param exerciseId the unique identifier of an exercise that stays the same regardless of student exam ordering */ changeExerciseById(exerciseId: number) { - const foundIndex = this.exercises.findIndex((exercise) => exercise.id === exerciseId); + const foundIndex = this.exercises().findIndex((exercise) => exercise.id === exerciseId); this.changePage(false, foundIndex, true); } @@ -167,16 +166,16 @@ export class ExamNavigationBarComponent implements OnInit, AfterViewInit { * @param changeExercise whether to go to the next exercise {boolean} */ saveExercise(changeExercise = true) { - const newIndex = this.exerciseIndex + 1; - const submission = ExamParticipationService.getSubmissionForExercise(this.exercises[this.exerciseIndex]); + const newIndex = this.exerciseIndex() + 1; + const submission = ExamParticipationService.getSubmissionForExercise(this.exercises()[this.exerciseIndex()]); // we do not submit programming exercises on a save - if (submission && this.exercises[this.exerciseIndex].type !== ExerciseType.PROGRAMMING) { + if (submission && this.exercises()[this.exerciseIndex()].type !== ExerciseType.PROGRAMMING) { submission.submitted = true; } if (changeExercise) { - if (newIndex > this.exercises.length - 1) { + if (newIndex > this.exercises().length - 1) { // we are in the last exercise, if out of range "change" active exercise to current in order to trigger a save - this.changePage(false, this.exerciseIndex, true); + this.changePage(false, this.exerciseIndex(), true); } else { this.changePage(false, newIndex, true); } @@ -184,15 +183,15 @@ export class ExamNavigationBarComponent implements OnInit, AfterViewInit { } isProgrammingExercise() { - return this.exercises[this.exerciseIndex].type === ExerciseType.PROGRAMMING; + return this.exercises()[this.exerciseIndex()].type === ExerciseType.PROGRAMMING; } isFileUploadExercise() { - return this.exercises[this.exerciseIndex].type === ExerciseType.FILE_UPLOAD; + return this.exercises()[this.exerciseIndex()].type === ExerciseType.FILE_UPLOAD; } getOverviewStatus(): 'active' | '' { - return this.overviewPageOpen ? 'active' : ''; + return this.overviewPageOpen() ? 'active' : ''; } /** @@ -208,15 +207,15 @@ export class ExamNavigationBarComponent implements OnInit, AfterViewInit { this.icon = faCheck; // If we are in the exam timeline we do not use not synced as not synced shows // that the current submission is not saved which doesn't make sense in the timeline. - if (this.examTimeLineView) { - return this.exerciseIndex === exerciseIndex ? 'synced active' : 'synced'; + if (this.examTimeLineView()) { + return this.exerciseIndex() === exerciseIndex ? 'synced active' : 'synced'; } // start with a yellow status (edit icon) // TODO: it's a bit weird, that it works that multiple icons (one per exercise) are hold in the same instance variable of the component // we should definitely refactor this and e.g. use the same ExamExerciseOverviewItem as in exam-exercise-overview-page.component.ts ! this.icon = faEdit; - const exercise = this.exercises[exerciseIndex]; + const exercise = this.exercises()[exerciseIndex]; const submission = ExamParticipationService.getSubmissionForExercise(exercise); if (!submission) { // in case no participation/submission yet exists -> display synced @@ -228,7 +227,7 @@ export class ExamNavigationBarComponent implements OnInit, AfterViewInit { } if (submission.isSynced || this.isOnlyOfflineIDE(exercise)) { // make button blue (except for the current page) - if (exerciseIndex === this.exerciseIndex && !this.overviewPageOpen) { + if (exerciseIndex === this.exerciseIndex() && !this.overviewPageOpen()!) { return 'synced active'; } else { return 'synced'; diff --git a/src/main/webapp/app/exam/overview/exam-navigation-sidebar/exam-navigation-sidebar.component.html b/src/main/webapp/app/exam/overview/exam-navigation-sidebar/exam-navigation-sidebar.component.html index 5c8fd99e338d..a2d2dda11921 100644 --- a/src/main/webapp/app/exam/overview/exam-navigation-sidebar/exam-navigation-sidebar.component.html +++ b/src/main/webapp/app/exam/overview/exam-navigation-sidebar/exam-navigation-sidebar.component.html @@ -1,6 +1,6 @@
@@ -9,10 +9,10 @@ sidebar-card implementations. -->
-
+
@@ -23,22 +23,22 @@ } -
{{ numberOfSavedExercises }}/{{ exercises.length }}
+
{{ numberOfSavedExercises }}/{{ exercises().length }}
- @for (sidebarItem of sidebarData?.ungroupedData; track sidebarItem.id; let last = $last; let i = $index) { + @for (sidebarItem of sidebarData()?.ungroupedData; track sidebarItem.id; let last = $last; let i = $index) {
@if (sidebarItem.icon) { @@ -51,7 +51,7 @@ @if (sidebarItem.rightIcon) { diff --git a/src/main/webapp/app/exam/overview/exam-navigation-sidebar/exam-navigation-sidebar.component.spec.ts b/src/main/webapp/app/exam/overview/exam-navigation-sidebar/exam-navigation-sidebar.component.spec.ts index 93af5cebaa1e..e1c66cf50f6c 100644 --- a/src/main/webapp/app/exam/overview/exam-navigation-sidebar/exam-navigation-sidebar.component.spec.ts +++ b/src/main/webapp/app/exam/overview/exam-navigation-sidebar/exam-navigation-sidebar.component.spec.ts @@ -17,6 +17,7 @@ import { provideHttpClientTesting } from '@angular/common/http/testing'; import { MockTranslateService } from 'test/helpers/mocks/service/mock-translate.service'; import { TranslateService } from '@ngx-translate/core'; import { ProfileService } from 'app/core/layouts/profiles/shared/profile.service'; +import { input, model } from '@angular/core'; import { MockProfileService } from 'test/helpers/mocks/service/mock-profile.service'; import { facSaveSuccess, facSaveWarning } from 'app/shared/icons/icons'; @@ -24,14 +25,15 @@ describe('ExamNavigationSidebarComponent', () => { let fixture: ComponentFixture; let comp: ExamNavigationSidebarComponent; let repositoryService: CodeEditorRepositoryService; + let examExerciseIdForNavigationSourceMock: BehaviorSubject; - const examExerciseIdForNavigationSourceMock = new BehaviorSubject(-1); - const mockExamExerciseUpdateService = { - currentExerciseIdForNavigation: examExerciseIdForNavigationSourceMock.asObservable(), - }; + beforeEach(async () => { + examExerciseIdForNavigationSourceMock = new BehaviorSubject(-1); + const mockExamExerciseUpdateService = { + currentExerciseIdForNavigation: examExerciseIdForNavigationSourceMock.asObservable(), + }; - beforeEach(() => { - TestBed.configureTestingModule({ + await TestBed.configureTestingModule({ providers: [ { provide: ExamExerciseUpdateService, useValue: mockExamExerciseUpdateService }, { provide: LocalStorageService, useClass: MockLocalStorageService }, @@ -48,7 +50,7 @@ describe('ExamNavigationSidebarComponent', () => { repositoryService = TestBed.inject(CodeEditorRepositoryService); TestBed.inject(ExamParticipationService); - comp.exercises = [ + const exercises = [ { id: 0, type: ExerciseType.PROGRAMMING, @@ -61,6 +63,9 @@ describe('ExamNavigationSidebarComponent', () => { { id: 1, type: ExerciseType.TEXT } as Exercise, { id: 2, type: ExerciseType.MODELING } as Exercise, ]; + TestBed.runInInjectionContext(() => { + comp.exercises = input(exercises); + }); }); beforeEach(fakeAsync(() => { @@ -71,8 +76,11 @@ describe('ExamNavigationSidebarComponent', () => { it('should update the submissions onInit if their CommitState is UNCOMMITTED_CHANGES to isSynced false, if not in initial session', () => { // Given // Create an exam session, which is not an initial session. - comp.examSessions = [{ initialSession: false } as ExamSession]; - const exerciseToBeSynced = comp.exercises[0]; + const examSessions = [{ initialSession: false } as ExamSession]; + TestBed.runInInjectionContext(() => { + comp.examSessions = input(examSessions); + }); + const exerciseToBeSynced = comp.exercises()[0]; jest.spyOn(repositoryService, 'getStatus').mockReturnValue(of({ repositoryStatus: CommitState.UNCOMMITTED_CHANGES })); // When @@ -87,14 +95,14 @@ describe('ExamNavigationSidebarComponent', () => { jest.spyOn(comp.onPageChanged, 'emit'); jest.spyOn(comp, 'setExerciseButtonStatus'); - expect(comp.exerciseIndex).toBe(0); + expect(comp.exerciseIndex()).toBe(0); const exerciseIndex = 1; const force = false; comp.changePage(false, exerciseIndex, force); - expect(comp.exerciseIndex).toEqual(exerciseIndex); + expect(comp.exerciseIndex()).toEqual(exerciseIndex); expect(comp.onPageChanged.emit).toHaveBeenCalledOnce(); expect(comp.setExerciseButtonStatus).toHaveBeenCalledWith(exerciseIndex); }); @@ -103,14 +111,14 @@ describe('ExamNavigationSidebarComponent', () => { jest.spyOn(comp.onPageChanged, 'emit'); jest.spyOn(comp, 'setExerciseButtonStatus'); - expect(comp.exerciseIndex).toBe(0); + expect(comp.exerciseIndex()).toBe(0); const exerciseIndex = 5; const force = false; comp.changePage(false, exerciseIndex, force); - expect(comp.exerciseIndex).toBe(0); + expect(comp.exerciseIndex()).toBe(0); expect(comp.onPageChanged.emit).not.toHaveBeenCalled(); expect(comp.setExerciseButtonStatus).not.toHaveBeenCalledWith(exerciseIndex); }); @@ -122,7 +130,7 @@ describe('ExamNavigationSidebarComponent', () => { }); it('should set the exercise button status for submitted and synced submission active', () => { - comp.exercises[0].studentParticipations![0].submissions![0] = { submitted: true, isSynced: true }; + comp.exercises()[0].studentParticipations![0].submissions![0] = { submitted: true, isSynced: true }; const result = comp.setExerciseButtonStatus(0); @@ -130,7 +138,7 @@ describe('ExamNavigationSidebarComponent', () => { }); it('should set the exercise button status for submitted submission', () => { - comp.exercises[0].studentParticipations![0].submissions![0] = { submitted: true }; + comp.exercises()[0].studentParticipations![0].submissions![0] = { submitted: true }; const result = comp.setExerciseButtonStatus(0); @@ -139,7 +147,7 @@ describe('ExamNavigationSidebarComponent', () => { }); it('should set the exercise button status for submitted and synced submission saved', () => { - comp.exercises[0].studentParticipations![0].submissions![0] = { submitted: true, isSynced: true }; + comp.exercises()[0].studentParticipations![0].submissions![0] = { submitted: true, isSynced: true }; const result = comp.setExerciseButtonStatus(0); expect(comp.icon).toEqual(facSaveSuccess); @@ -147,7 +155,7 @@ describe('ExamNavigationSidebarComponent', () => { }); it('should set the exercise button status for submitted and synced submission not active', () => { - comp.exercises[0].studentParticipations![0].submissions![0] = { submitted: true, isSynced: true }; + comp.exercises()[0].studentParticipations![0].submissions![0] = { submitted: true, isSynced: true }; const result = comp.setExerciseButtonStatus(1); @@ -155,39 +163,39 @@ describe('ExamNavigationSidebarComponent', () => { }); it('should get the exercise button tooltip without submission', () => { - const result = comp.getExerciseButtonTooltip(comp.exercises[1]); + const result = comp.getExerciseButtonTooltip(comp.exercises()[1]); expect(result).toBe('synced'); }); it('should get the exercise button tooltip with submitted and synced submission', () => { - comp.exercises[0].studentParticipations![0].submissions![0] = { submitted: true, isSynced: true }; + comp.exercises()[0].studentParticipations![0].submissions![0] = { submitted: true, isSynced: true }; - const result = comp.getExerciseButtonTooltip(comp.exercises[0]); + const result = comp.getExerciseButtonTooltip(comp.exercises()[0]); expect(result).toBe('submitted'); }); it('should get the exercise button tooltip with submitted submission', () => { - comp.exercises[0].studentParticipations![0].submissions![0] = { submitted: true }; + comp.exercises()[0].studentParticipations![0].submissions![0] = { submitted: true }; - const result = comp.getExerciseButtonTooltip(comp.exercises[0]); + const result = comp.getExerciseButtonTooltip(comp.exercises()[0]); expect(result).toBe('notSavedOrSubmitted'); }); it('should get the exercise button tooltip with submission', () => { - comp.exercises[0].studentParticipations![0].submissions![0] = {}; + comp.exercises()[0].studentParticipations![0].submissions![0] = {}; - const result = comp.getExerciseButtonTooltip(comp.exercises[0]); + const result = comp.getExerciseButtonTooltip(comp.exercises()[0]); expect(result).toBe('notSavedOrSubmitted'); }); it('should get the exercise button tooltip with synced submission', () => { - comp.exercises[0].studentParticipations![0].submissions![0] = { isSynced: true }; + comp.exercises()[0].studentParticipations![0].submissions![0] = { isSynced: true }; - const result = comp.getExerciseButtonTooltip(comp.exercises[0]); + const result = comp.getExerciseButtonTooltip(comp.exercises()[0]); expect(result).toBe('notSubmitted'); }); @@ -200,15 +208,19 @@ describe('ExamNavigationSidebarComponent', () => { }); it('should set exercise button status to synced active if it is the active exercise in the exam timeline view', () => { - comp.examTimeLineView = true; - comp.exerciseIndex = 0; + TestBed.runInInjectionContext(() => { + comp.examTimeLineView = input(true); + comp.exerciseIndex = model(0); + }); expect(comp.setExerciseButtonStatus(0)).toBe('synced saved'); expect(comp.icon).toEqual(facSaveSuccess); }); it('should set exercise button status to synced if it is not the active exercise in the exam timeline view', () => { - comp.examTimeLineView = true; - comp.exerciseIndex = 0; + TestBed.runInInjectionContext(() => { + comp.examTimeLineView = input(true); + comp.exerciseIndex = model(0); + }); expect(comp.setExerciseButtonStatus(1)).toBe('synced'); expect(comp.icon).toEqual(facSaveSuccess); }); diff --git a/src/main/webapp/app/exam/overview/exam-navigation-sidebar/exam-navigation-sidebar.component.ts b/src/main/webapp/app/exam/overview/exam-navigation-sidebar/exam-navigation-sidebar.component.ts index 6ec4a244f8a6..68856b2b635d 100644 --- a/src/main/webapp/app/exam/overview/exam-navigation-sidebar/exam-navigation-sidebar.component.ts +++ b/src/main/webapp/app/exam/overview/exam-navigation-sidebar/exam-navigation-sidebar.component.ts @@ -1,4 +1,4 @@ -import { Component, EventEmitter, HostListener, Input, OnDestroy, OnInit, Output, inject } from '@angular/core'; +import { Component, HostListener, OnDestroy, OnInit, inject, input, model, output } from '@angular/core'; import { Subscription } from 'rxjs'; import { SidebarEventService } from 'app/shared/sidebar/service/sidebar-event.service'; import { ProfileService } from 'app/core/layouts/profiles/shared/profile.service'; @@ -44,14 +44,14 @@ export class ExamNavigationSidebarComponent implements OnDestroy, OnInit { private repositoryService = inject(CodeEditorRepositoryService); private conflictService = inject(CodeEditorConflictStateService); - @Input() sidebarData: SidebarData; - @Input() exercises: Exercise[] = []; - @Input() exerciseIndex = 0; - @Input() overviewPageOpen: boolean; - @Input() examSessions?: ExamSession[] = []; - @Input() examTimeLineView = false; - @Input() isTestRun = 0; - @Output() onPageChanged = new EventEmitter<{ + sidebarData = input(); + exercises = input([]); + exerciseIndex = model(0); + overviewPageOpen = input(); + examSessions = input(); + examTimeLineView = input(false); + isTestRun = input(0); + onPageChanged = output<{ overViewChange: boolean; exercise?: Exercise; forceSave: boolean; @@ -79,7 +79,7 @@ export class ExamNavigationSidebarComponent implements OnDestroy, OnInit { this.isProduction = this.profileService.isProduction(); this.isTestServer = this.profileService.isTestServer(); - if (!this.examTimeLineView) { + if (!this.examTimeLineView()) { this.subscriptionToLiveExamExerciseUpdates = this.examExerciseUpdateService.currentExerciseIdForNavigation.subscribe((exerciseIdToNavigateTo) => { // another exercise will only be displayed if the student clicks on the corresponding pop-up notification this.changeExerciseById(exerciseIdToNavigateTo); @@ -87,13 +87,14 @@ export class ExamNavigationSidebarComponent implements OnDestroy, OnInit { } // TODO: avoid duplicated code - const isInitialSession = this.examSessions && this.examSessions.length > 0 && this.examSessions[0].initialSession; + const examSessions = this.examSessions(); + const isInitialSession = examSessions && examSessions.length > 0 && examSessions[0].initialSession; if (isInitialSession || isInitialSession == undefined) { return; } // If it is not an initial session, update the isSynced variable for out of sync submissions. - this.exercises + this.exercises() .filter((exercise) => exercise.type === ExerciseType.PROGRAMMING && exercise.studentParticipations) .forEach((exercise) => { const domain: DomainChange = [DomainType.PARTICIPATION, exercise.studentParticipations![0]]; @@ -136,24 +137,24 @@ export class ExamNavigationSidebarComponent implements OnDestroy, OnInit { changePage(overviewPage: boolean, exerciseIndex: number, forceSave?: boolean, submission?: SubmissionVersion | ProgrammingSubmission | FileUploadSubmission): void { if (!overviewPage) { // out of index -> do nothing - if (exerciseIndex > this.exercises.length - 1 || exerciseIndex < 0) { + if (exerciseIndex > this.exercises().length - 1 || exerciseIndex < 0) { return; } // set index and emit event - this.exerciseIndex = exerciseIndex; + this.exerciseIndex.set(exerciseIndex); this.onPageChanged.emit({ overViewChange: false, - exercise: this.exercises[this.exerciseIndex], + exercise: this.exercises()[this.exerciseIndex()], forceSave: !!forceSave, submission: submission, }); } else if (overviewPage) { // set index and emit event - this.exerciseIndex = this.EXERCISE_OVERVIEW_INDEX; + this.exerciseIndex.set(this.EXERCISE_OVERVIEW_INDEX); // save current exercise this.onPageChanged.emit({ overViewChange: true, exercise: undefined, forceSave: false }); } - this.setExerciseButtonStatus(this.exerciseIndex); + this.setExerciseButtonStatus(this.exerciseIndex()); } /** @@ -161,13 +162,13 @@ export class ExamNavigationSidebarComponent implements OnDestroy, OnInit { * @param exerciseId the unique identifier of an exercise that stays the same regardless of student exam ordering */ changeExerciseById(exerciseId: number) { - const foundIndex = this.exercises.findIndex((exercise) => exercise.id === exerciseId); + const foundIndex = this.exercises().findIndex((exercise) => exercise.id === exerciseId); this.changePage(false, foundIndex, true); } refreshExerciseSaveCount() { this.numberOfSavedExercises = 0; - this.exercises.forEach((exercise) => { + this.exercises().forEach((exercise) => { const submission = ExamParticipationService.getSubmissionForExercise(exercise); if (submission && submission.submitted) { this.numberOfSavedExercises++; @@ -188,15 +189,15 @@ export class ExamNavigationSidebarComponent implements OnDestroy, OnInit { this.icon = facSaveSuccess; // If we are in the exam timeline we do not use not synced as not synced shows // that the current submission is not saved which doesn't make sense in the timeline. - if (this.examTimeLineView) { - return this.exerciseIndex === exerciseIndex ? ExerciseButtonStatus.SyncedSaved : ExerciseButtonStatus.Synced; + if (this.examTimeLineView()) { + return this.exerciseIndex() === exerciseIndex ? ExerciseButtonStatus.SyncedSaved : ExerciseButtonStatus.Synced; } // start with a yellow status (save warning icon) // TODO: it's a bit weird, that it works that multiple icons (one per exercise) are hold in the same instance variable of the component // we should definitely refactor this and e.g. use the same ExamExerciseOverviewItem as in exam-exercise-overview-page.component.ts ! this.icon = faHourglassHalf; - const exercise = this.exercises[exerciseIndex]; + const exercise = this.exercises()[exerciseIndex]; const submission = ExamParticipationService.getSubmissionForExercise(exercise); if (!submission) { // in case no participation/submission yet exists -> display synced diff --git a/src/main/webapp/app/exam/overview/exam-participation/exam-participation.component.ts b/src/main/webapp/app/exam/overview/exam-participation/exam-participation.component.ts index 64bf096a08f5..509d7001ea6e 100644 --- a/src/main/webapp/app/exam/overview/exam-participation/exam-participation.component.ts +++ b/src/main/webapp/app/exam/overview/exam-participation/exam-participation.component.ts @@ -1,4 +1,4 @@ -import { Component, HostListener, OnDestroy, OnInit, QueryList, ViewChildren, inject } from '@angular/core'; +import { Component, HostListener, OnDestroy, OnInit, inject, viewChildren } from '@angular/core'; import { ActivatedRoute, Router, RouterLink } from '@angular/router'; import { StudentExam } from 'app/exam/shared/entities/student-exam.model'; import { Exercise, ExerciseType } from 'app/exercise/shared/entities/exercise/exercise.model'; @@ -108,8 +108,7 @@ export class ExamParticipationComponent implements OnInit, OnDestroy, ComponentC private examManagementService = inject(ExamManagementService); private profileService = inject(ProfileService); - @ViewChildren(ExamSubmissionComponent) - currentPageComponents: QueryList; + currentPageComponents = viewChildren(ExamSubmissionComponent); readonly TEXT = ExerciseType.TEXT; readonly QUIZ = ExerciseType.QUIZ; @@ -313,7 +312,7 @@ export class ExamParticipationComponent implements OnInit, OnDestroy, ComponentC get activePageComponent(): ExamPageComponent | undefined { // we have to find the current component based on the activeExercise because the queryList might not be full yet (e.g. only 2 of 5 components initialized) - return this.currentPageComponents.find( + return this.currentPageComponents().find( (submissionComponent) => !this.activeExamPage.isOverviewPage && (submissionComponent as ExamSubmissionComponent).getExerciseId() === this.activeExamPage.exercise!.id, ); } @@ -931,7 +930,9 @@ export class ExamParticipationComponent implements OnInit, OnDestroy, ComponentC } private updateLocalStudentExam() { - this.currentPageComponents.filter((component) => component.hasUnsavedChanges()).forEach((component) => component.updateSubmissionFromView()); + this.currentPageComponents() + .filter((component) => component.hasUnsavedChanges()) + .forEach((component) => component.updateSubmissionFromView()); } private onSaveSubmissionSuccess(submission: Submission) { diff --git a/src/main/webapp/app/exam/overview/exam-start-information/exam-start-information.component.html b/src/main/webapp/app/exam/overview/exam-start-information/exam-start-information.component.html index bed2906cb29e..eceeeeb53873 100644 --- a/src/main/webapp/app/exam/overview/exam-start-information/exam-start-information.component.html +++ b/src/main/webapp/app/exam/overview/exam-start-information/exam-start-information.component.html @@ -12,4 +12,4 @@ }
-
+
diff --git a/src/main/webapp/app/exam/overview/exam-start-information/exam-start-information.component.spec.ts b/src/main/webapp/app/exam/overview/exam-start-information/exam-start-information.component.spec.ts index 244119890ce5..cb2e8a252c68 100644 --- a/src/main/webapp/app/exam/overview/exam-start-information/exam-start-information.component.spec.ts +++ b/src/main/webapp/app/exam/overview/exam-start-information/exam-start-information.component.spec.ts @@ -13,6 +13,7 @@ import { MockComponent, MockDirective, MockPipe } from 'ng-mocks'; import { TranslateDirective } from 'app/shared/language/translate.directive'; import { provideRouter } from '@angular/router'; +import { input } from '@angular/core'; let fixture: ComponentFixture; let component: ExamStartInformationComponent; @@ -53,6 +54,10 @@ describe('ExamStartInformationComponent', () => { .then(() => { fixture = TestBed.createComponent(ExamStartInformationComponent); component = fixture.componentInstance; + TestBed.runInInjectionContext(() => { + component.exam = input(exam); + component.studentExam = input(studentExam); + }); }); }); @@ -61,79 +66,59 @@ describe('ExamStartInformationComponent', () => { }); it('should initialize with the correct start date', () => { - component.exam = exam; - component.studentExam = studentExam; fixture.detectChanges(); expect(component.startDate).toEqual(exam.startDate); }); it('should return undefined if the exam is not set', () => { exam.startDate = undefined; - component.exam = exam; - component.studentExam = studentExam; fixture.detectChanges(); expect(component.startDate).toBeUndefined(); }); it('should initialize total points of the exam correctly', () => { exam.examMaxPoints = 120; - component.exam = exam; - component.studentExam = studentExam; fixture.detectChanges(); expect(component.totalPoints).toBe(120); }); it('should give total working time in minutes', () => { exam.workingTime = 60 * 60 * 2; - component.exam = exam; - component.studentExam = studentExam; fixture.detectChanges(); expect(component.totalWorkingTimeInMinutes).toBe(120); }); it('should initialize module number of the exam correctly', () => { exam.moduleNumber = 'IN18000'; - component.exam = exam; - component.studentExam = studentExam; fixture.detectChanges(); expect(component.moduleNumber).toBe('IN18000'); }); it('should initialize course name of the exam correctly', () => { exam.courseName = 'Software Engineering'; - component.exam = exam; - component.studentExam = studentExam; fixture.detectChanges(); expect(component.courseName).toBe('Software Engineering'); }); it('should initialize examiner of the exam correctly', () => { exam.examiner = 'Prof. Dr. Stephan Krusche'; - component.exam = exam; - component.studentExam = studentExam; fixture.detectChanges(); expect(component.examiner).toBe('Prof. Dr. Stephan Krusche'); }); it('should initialize number of exercises of the exam correctly', () => { exam.numberOfExercisesInExam = 10; - component.exam = exam; - component.studentExam = studentExam; fixture.detectChanges(); expect(component.numberOfExercisesInExam).toBe(10); }); it('should initialize examined student of the exam correctly', () => { - component.exam = exam; - component.studentExam = studentExam; fixture.detectChanges(); expect(component.examinedStudent).toBe('Test User'); }); it('should initialize start date of the exam correctly', () => { const examStartDate = dayjs('2022-02-06 02:00:00'); - component.exam = exam; - component.studentExam = studentExam; fixture.detectChanges(); expect(component.startDate).toStrictEqual(examStartDate); }); @@ -141,8 +126,6 @@ describe('ExamStartInformationComponent', () => { it('should initialize start date of the test exam correctly', () => { const examStartDate = dayjs('2022-02-06 02:00:00'); exam.testExam = true; - component.exam = exam; - component.studentExam = studentExam; fixture.detectChanges(); expect(component.startDate).toStrictEqual(examStartDate); }); @@ -150,8 +133,6 @@ describe('ExamStartInformationComponent', () => { it('should initialize end date of the test exam correctly', () => { const examEndDate = dayjs('2022-02-06 02:00:00').add(1, 'hours'); exam.testExam = true; - component.exam = exam; - component.studentExam = studentExam; fixture.detectChanges(); expect(component.endDate).toStrictEqual(examEndDate); }); @@ -173,8 +154,10 @@ describe('ExamStartInformationComponent', () => { const studentExam1 = { id: 1, exam, user } as StudentExam; - component.exam = exam1; - component.studentExam = studentExam1; + TestBed.runInInjectionContext(() => { + component.exam = input(exam1); + component.studentExam = input(studentExam1); + }); const informationBoxStub = jest.spyOn(component, 'buildInformationBox'); const informationBoxDataStub = jest.spyOn(component, 'prepareInformationBoxData'); fixture.detectChanges(); diff --git a/src/main/webapp/app/exam/overview/exam-start-information/exam-start-information.component.ts b/src/main/webapp/app/exam/overview/exam-start-information/exam-start-information.component.ts index e984481f013f..d1608fd952d3 100644 --- a/src/main/webapp/app/exam/overview/exam-start-information/exam-start-information.component.ts +++ b/src/main/webapp/app/exam/overview/exam-start-information/exam-start-information.component.ts @@ -1,4 +1,4 @@ -import { Component, Input, OnInit } from '@angular/core'; +import { Component, OnInit, input } from '@angular/core'; import { InformationBox, InformationBoxComponent, InformationBoxContent } from 'app/shared/information-box/information-box.component'; import { Exam } from 'app/exam/shared/entities/exam.model'; @@ -16,9 +16,9 @@ import { ArtemisDatePipe } from 'app/shared/pipes/artemis-date.pipe'; export class ExamStartInformationComponent implements OnInit { examInformationBoxData: InformationBox[] = []; - @Input() exam: Exam; - @Input() studentExam: StudentExam; - @Input() formattedStartText?: SafeHtml; + exam = input.required(); + studentExam = input.required(); + formattedStartText = input(); totalPoints?: number; totalWorkingTimeInMinutes?: number; @@ -32,16 +32,16 @@ export class ExamStartInformationComponent implements OnInit { gracePeriodInMinutes?: number; ngOnInit(): void { - this.totalPoints = this.exam.examMaxPoints; - this.totalWorkingTimeInMinutes = Math.floor(this.exam.workingTime! / 60); - this.moduleNumber = this.exam.moduleNumber; - this.courseName = this.exam.courseName; - this.examiner = this.exam.examiner; - this.numberOfExercisesInExam = this.exam.numberOfExercisesInExam; - this.examinedStudent = this.studentExam.user?.name; - this.startDate = this.exam.startDate; - this.endDate = this.exam.endDate; - this.gracePeriodInMinutes = Math.floor(this.exam.gracePeriod! / 60); + this.totalPoints = this.exam().examMaxPoints; + this.totalWorkingTimeInMinutes = Math.floor(this.exam().workingTime! / 60); + this.moduleNumber = this.exam().moduleNumber; + this.courseName = this.exam().courseName; + this.examiner = this.exam().examiner; + this.numberOfExercisesInExam = this.exam().numberOfExercisesInExam; + this.examinedStudent = this.studentExam().user?.name; + this.startDate = this.exam().startDate; + this.endDate = this.exam().endDate; + this.gracePeriodInMinutes = Math.floor(this.exam().gracePeriod! / 60); this.prepareInformationBoxData(); } @@ -99,7 +99,7 @@ export class ExamStartInformationComponent implements OnInit { const boxContentExamWorkingTime: InformationBoxContent = { type: 'workingTime', - value: this.studentExam, + value: this.studentExam(), }; const informationBoxTotalWorkingTime = this.buildInformationBox('artemisApp.exam.workingTime', boxContentExamWorkingTime, true); diff --git a/src/main/webapp/app/exam/overview/general-information/exam-general-information.component.html b/src/main/webapp/app/exam/overview/general-information/exam-general-information.component.html index ec867ce353cd..79325bb2c0d6 100644 --- a/src/main/webapp/app/exam/overview/general-information/exam-general-information.component.html +++ b/src/main/webapp/app/exam/overview/general-information/exam-general-information.component.html @@ -1,5 +1,5 @@
- @if (!displayOnExamCover) { + @if (!displayOnExamCover()) {

}
@@ -13,113 +13,115 @@

{{ 'artemisApp.examManagement.examTitle' | artemisTranslate }}: - {{ exam.title }} + {{ exam().title }} } - @if (exam && !isTestExam && exam.startDate) { + @if (exam() && !isTestExam && exam().startDate) { @if (isExamOverMultipleDays) { {{ 'artemisApp.exam.time' | artemisTranslate }}: - {{ exam.startDate | artemisDate: 'long-date' }} {{ exam.startDate | artemisDate: 'time' }}  - {{ examEndDate | artemisDate: 'long-date' }} + {{ exam().startDate | artemisDate: 'long-date' }} {{ exam().startDate | artemisDate: 'time' }}  - {{ + examEndDate | artemisDate: 'long-date' + }} {{ examEndDate | artemisDate: 'time' }} } @else { {{ 'artemisApp.exam.date' | artemisTranslate }}: - {{ exam.startDate | artemisDate: 'long-date' }} + {{ exam().startDate | artemisDate: 'long-date' }} {{ 'artemisApp.exam.workingTime' | artemisTranslate }}: - {{ exam.startDate | artemisDate: 'time' }} - {{ examEndDate | artemisDate: 'time' }} + {{ exam().startDate | artemisDate: 'time' }} - {{ examEndDate | artemisDate: 'time' }} } - @if (exam.endDate && studentExam?.workingTime) { + @if (exam().endDate && studentExam()?.workingTime) { {{ 'artemisApp.exam.duration' | artemisTranslate }}: - + } } - @if (displayOnExamCover) { - @if (exam.examMaxPoints) { + @if (displayOnExamCover()) { + @if (exam().examMaxPoints) { {{ 'artemisApp.exam.points' | artemisTranslate }}: - {{ exam.examMaxPoints }} + {{ exam().examMaxPoints }} } - @if (exam.numberOfExercisesInExam) { + @if (exam().numberOfExercisesInExam) { {{ 'artemisApp.exam.exercises' | artemisTranslate }}: - {{ exam.numberOfExercisesInExam }} + {{ exam().numberOfExercisesInExam }} } } - @if (exam && studentExam?.ended && (exam.examStudentReviewStart || exam.examStudentReviewEnd)) { + @if (exam() && studentExam()?.ended && (exam().examStudentReviewStart || exam().examStudentReviewEnd)) { {{ 'artemisApp.exam.examStudentReviewTimespan' | artemisTranslate }}:  - @if (exam.examStudentReviewStart) { - {{ exam.examStudentReviewStart | artemisDate }} + @if (exam().examStudentReviewStart) { + {{ exam().examStudentReviewStart | artemisDate }} } - @if (exam.examStudentReviewStart && exam.examStudentReviewEnd) { + @if (exam().examStudentReviewStart && exam().examStudentReviewEnd) {  -  } - @if (exam.examStudentReviewEnd) { - {{ exam.examStudentReviewEnd | artemisDate }} + @if (exam().examStudentReviewEnd) { + {{ exam().examStudentReviewEnd | artemisDate }} } - @if (reviewIsOpen) { + @if (reviewIsOpen()) {
} } - @if (studentExam?.user?.name) { + @if (studentExam()?.user?.name) { {{ 'artemisApp.exam.examinedStudent' | artemisTranslate }}: - {{ studentExam!.user!.name }} + {{ studentExam()!.user!.name }} } - @if (exam && isTestExam) { + @if (exam() && isTestExam) { {{ 'artemisApp.exam.date' | artemisTranslate }}: {{ currentDate! | artemisDate: 'long-date' }} - @if (exam?.workingTime) { + @if (exam()?.workingTime) { {{ 'artemisApp.exam.workingTime' | artemisTranslate }}: - {{ exam.workingTime! | artemisDurationFromSeconds }} + {{ exam().workingTime! | artemisDurationFromSeconds }} } - @if (studentExam.submitted && studentExam.submissionDate && studentExam.startedDate) { + @if (studentExam().submitted && studentExam().submissionDate && studentExam().startedDate) { {{ 'artemisApp.exam.overview.testExam.workingTimeCalculated' | artemisTranslate }} : - + } diff --git a/src/main/webapp/app/exam/overview/general-information/exam-general-information.component.spec.ts b/src/main/webapp/app/exam/overview/general-information/exam-general-information.component.spec.ts index 5b269ddb29af..c4e675814c1d 100644 --- a/src/main/webapp/app/exam/overview/general-information/exam-general-information.component.spec.ts +++ b/src/main/webapp/app/exam/overview/general-information/exam-general-information.component.spec.ts @@ -6,6 +6,7 @@ import { ExamGeneralInformationComponent } from 'app/exam/overview/general-infor import dayjs from 'dayjs/esm'; import { MockTranslateService } from 'test/helpers/mocks/service/mock-translate.service'; import { TranslateService } from '@ngx-translate/core'; +import { input } from '@angular/core'; let fixture: ComponentFixture; let component: ExamGeneralInformationComponent; @@ -37,6 +38,10 @@ describe('ExamGeneralInformationComponent', () => { .then(() => { fixture = TestBed.createComponent(ExamGeneralInformationComponent); component = fixture.componentInstance; + TestBed.runInInjectionContext(() => { + component.exam = input(exam); + component.studentExam = input(studentExam); + }); }); }); @@ -45,23 +50,16 @@ describe('ExamGeneralInformationComponent', () => { }); it('should initialize', () => { - component.exam = exam; + TestBed.runInInjectionContext(() => { + component.studentExam = input({} as StudentExam); + }); fixture.detectChanges(); component.ngOnChanges(); expect(fixture).toBeDefined(); expect(component.examEndDate).toEqual(exam.endDate); }); - it('should return undefined if the exam is not set', () => { - fixture.detectChanges(); - component.ngOnChanges(); - expect(fixture).toBeDefined(); - expect(component.examEndDate).toBeUndefined(); - }); - it('should return the start date plus the working time as the student exam end date', () => { - component.exam = exam; - component.studentExam = studentExam; fixture.detectChanges(); component.ngOnChanges(); expect(fixture).toBeDefined(); @@ -69,8 +67,10 @@ describe('ExamGeneralInformationComponent', () => { }); it('should detect if the end date is on another day', () => { - component.exam = exam; exam.endDate = dayjs(exam.startDate).add(2, 'days'); + TestBed.runInInjectionContext(() => { + component.studentExam = input({} as StudentExam); + }); fixture.detectChanges(); component.ngOnChanges(); expect(fixture).toBeDefined(); @@ -78,8 +78,6 @@ describe('ExamGeneralInformationComponent', () => { }); it('should detect if the working time extends to another day', () => { - component.exam = exam; - component.studentExam = studentExam; studentExam.workingTime = 24 * 60 * 60; fixture.detectChanges(); component.ngOnChanges(); @@ -88,13 +86,11 @@ describe('ExamGeneralInformationComponent', () => { }); it('should return false for exams that only last one day', () => { - component.exam = exam; fixture.detectChanges(); component.ngOnChanges(); expect(fixture).toBeDefined(); expect(component.isExamOverMultipleDays).toBeFalse(); - component.studentExam = studentExam; fixture.detectChanges(); component.ngOnChanges(); expect(fixture).toBeDefined(); @@ -103,8 +99,6 @@ describe('ExamGeneralInformationComponent', () => { it('should detect an TestExam and set the currentDate correctly', () => { exam.testExam = true; - component.exam = exam; - component.studentExam = studentExam; const minimumNowRange = dayjs(); fixture.detectChanges(); component.ngOnChanges(); @@ -116,7 +110,6 @@ describe('ExamGeneralInformationComponent', () => { }); it('should detect an RealExam and not set the currentDate', () => { - component.exam = exam; fixture.detectChanges(); component.ngOnChanges(); expect(component.isTestExam).toBeFalse(); diff --git a/src/main/webapp/app/exam/overview/general-information/exam-general-information.component.ts b/src/main/webapp/app/exam/overview/general-information/exam-general-information.component.ts index 0858913f3a5e..8572c05277f3 100644 --- a/src/main/webapp/app/exam/overview/general-information/exam-general-information.component.ts +++ b/src/main/webapp/app/exam/overview/general-information/exam-general-information.component.ts @@ -1,4 +1,4 @@ -import { Component, Input, OnChanges } from '@angular/core'; +import { Component, OnChanges, input } from '@angular/core'; import { StudentExam } from 'app/exam/shared/entities/student-exam.model'; import { Exam } from 'app/exam/shared/entities/exam.model'; import { endTime, examWorkingTime, getAdditionalWorkingTime, isExamOverMultipleDays } from 'app/exam/overview/exam.utils'; @@ -17,15 +17,14 @@ import { ArtemisDurationFromSecondsPipe } from 'app/shared/pipes/artemis-duratio imports: [TranslateDirective, StudentExamWorkingTimeComponent, TestExamWorkingTimeComponent, ArtemisDatePipe, ArtemisTranslatePipe, ArtemisDurationFromSecondsPipe], }) export class ExamGeneralInformationComponent implements OnChanges { - @Input() exam: Exam; - @Input() studentExam: StudentExam; - @Input() reviewIsOpen = false; - + exam = input.required(); + studentExam = input.required(); + reviewIsOpen = input(false); /** * The exam cover will contain e.g. the number of exercises which is hidden in the exam summary as * the information is shown in the {@link ExamResultOverviewComponent} */ - @Input() displayOnExamCover = false; + displayOnExamCover = input(false); examEndDate?: dayjs.Dayjs; normalWorkingTime?: number; @@ -35,11 +34,11 @@ export class ExamGeneralInformationComponent implements OnChanges { currentDate?: dayjs.Dayjs; ngOnChanges() { - this.examEndDate = endTime(this.exam, this.studentExam); - this.normalWorkingTime = examWorkingTime(this.exam); - this.additionalWorkingTime = getAdditionalWorkingTime(this.exam, this.studentExam); - this.isExamOverMultipleDays = isExamOverMultipleDays(this.exam, this.studentExam); - this.isTestExam = this.exam?.testExam; + this.examEndDate = endTime(this.exam(), this.studentExam()); + this.normalWorkingTime = examWorkingTime(this.exam()); + this.additionalWorkingTime = getAdditionalWorkingTime(this.exam(), this.studentExam()); + this.isExamOverMultipleDays = isExamOverMultipleDays(this.exam(), this.studentExam()); + this.isTestExam = this.exam()?.testExam; if (this.isTestExam) { this.currentDate = dayjs(); } diff --git a/src/main/webapp/app/exam/overview/summary/collapsible-card/collapsible-card.component.html b/src/main/webapp/app/exam/overview/summary/collapsible-card/collapsible-card.component.html index abec189b99b5..8cb24aa08bf3 100644 --- a/src/main/webapp/app/exam/overview/summary/collapsible-card/collapsible-card.component.html +++ b/src/main/webapp/app/exam/overview/summary/collapsible-card/collapsible-card.component.html @@ -1,12 +1,12 @@
-
+
-
-
+
diff --git a/src/main/webapp/app/exam/overview/summary/collapsible-card/collapsible-card.component.spec.ts b/src/main/webapp/app/exam/overview/summary/collapsible-card/collapsible-card.component.spec.ts index 798558d4f300..dc963f7eefcc 100644 --- a/src/main/webapp/app/exam/overview/summary/collapsible-card/collapsible-card.component.spec.ts +++ b/src/main/webapp/app/exam/overview/summary/collapsible-card/collapsible-card.component.spec.ts @@ -1,6 +1,7 @@ import { ComponentFixture, TestBed, fakeAsync } from '@angular/core/testing'; import { CollapsibleCardComponent } from 'app/exam/overview/summary/collapsible-card/collapsible-card.component'; import { By } from '@angular/platform-browser'; +import { input } from '@angular/core'; let fixture: ComponentFixture; let component: CollapsibleCardComponent; @@ -13,13 +14,15 @@ describe('CollapsibleCardComponent', () => { fixture = TestBed.createComponent(CollapsibleCardComponent); component = fixture.componentInstance; - component.toggleCollapse = () => {}; - component.isCardContentCollapsed = false; + TestBed.runInInjectionContext(() => { + component.toggleCollapse = input(() => {}); + component.isCardContentCollapsed = input(false); + }); }); }); it('should collapse and expand exercise when collapse button is clicked', fakeAsync(() => { - const toggleCollapseSpy = jest.spyOn(component, 'toggleCollapse').mockImplementation(() => {}); + const toggleCollapseSpy = jest.spyOn(component, 'toggleCollapse'); fixture.detectChanges(); const toggleCollapseHeader = fixture.debugElement.query(By.css('.card-header')); diff --git a/src/main/webapp/app/exam/overview/summary/collapsible-card/collapsible-card.component.ts b/src/main/webapp/app/exam/overview/summary/collapsible-card/collapsible-card.component.ts index 902ab77be836..690c8412c278 100644 --- a/src/main/webapp/app/exam/overview/summary/collapsible-card/collapsible-card.component.ts +++ b/src/main/webapp/app/exam/overview/summary/collapsible-card/collapsible-card.component.ts @@ -1,4 +1,4 @@ -import { Component, Input } from '@angular/core'; +import { Component, input } from '@angular/core'; import { faAngleRight } from '@fortawesome/free-solid-svg-icons'; import { FaIconComponent } from '@fortawesome/angular-fontawesome'; import { NgbCollapse } from '@ng-bootstrap/ng-bootstrap'; @@ -14,8 +14,8 @@ import { NgbCollapse } from '@ng-bootstrap/ng-bootstrap'; imports: [FaIconComponent, NgbCollapse], }) export class CollapsibleCardComponent { - @Input() isCardContentCollapsed: boolean; - @Input() toggleCollapse: () => void; + isCardContentCollapsed = input.required(); + toggleCollapse = input.required<() => void>(); faAngleRight = faAngleRight; } diff --git a/src/main/webapp/app/exam/overview/summary/exam-result-summary.component.html b/src/main/webapp/app/exam/overview/summary/exam-result-summary.component.html index dbf401451af5..65bf77fc5ebc 100644 --- a/src/main/webapp/app/exam/overview/summary/exam-result-summary.component.html +++ b/src/main/webapp/app/exam/overview/summary/exam-result-summary.component.html @@ -9,21 +9,21 @@

-@if (studentExam && !studentExam.submitted) { +@if (studentExam() && !studentExam().submitted) {
} -@if (studentExam?.exam) { +@if (studentExam()?.exam) {
} -@if (studentExam && studentExam.exercises && studentExam.exam?.course && studentExamGradeInfoDTO) { +@if (studentExam() && studentExam().exercises && studentExam().exam?.course && studentExamGradeInfoDTO) {
}

-@for (exercise of studentExam?.exercises; track exercise; let i = $index) { +@for (exercise of studentExam()?.exercises; track exercise; let i = $index) {
@@ -140,7 +140,7 @@

@case (QUIZ) { @@ -190,7 +190,7 @@

[resultsPublished]="resultsArePublished" [isPrinting]="isPrinting" [isAfterResultsArePublished]="resultsArePublished" - [instructorView]="instructorView" + [instructorView]="instructorView()" /> } } diff --git a/src/main/webapp/app/exam/overview/summary/exam-result-summary.component.spec.ts b/src/main/webapp/app/exam/overview/summary/exam-result-summary.component.spec.ts index a251cccc8471..253916829544 100644 --- a/src/main/webapp/app/exam/overview/summary/exam-result-summary.component.spec.ts +++ b/src/main/webapp/app/exam/overview/summary/exam-result-summary.component.spec.ts @@ -200,7 +200,7 @@ function sharedSetup(url: string[]) { .then(() => { fixture = TestBed.createComponent(ExamResultSummaryComponent); component = fixture.componentInstance; - component.studentExam = studentExam; + fixture.componentRef.setInput('studentExam', studentExam); artemisServerDateService = TestBed.inject(ArtemisServerDateService); examParticipationService = TestBed.inject(ExamParticipationService); }); @@ -244,7 +244,7 @@ describe('ExamResultSummaryComponent', () => { fixture.detectChanges(); const courseId = 1; - expect(component.studentExam).toEqual(studentExam); + expect(component.studentExam()).toEqual(studentExam); expect(serviceSpy).toHaveBeenCalledOnce(); expect(serviceSpy).toHaveBeenCalledWith(courseId, studentExam.exam!.id, studentExam.id, studentExam.user!.id); expect(component.studentExamGradeInfoDTO).toEqual({ ...gradeInfo, studentExam }); @@ -298,46 +298,48 @@ describe('ExamResultSummaryComponent', () => { const plagiarismService = TestBed.inject(PlagiarismCasesService); const plagiarismServiceSpy = jest.spyOn(plagiarismService, 'getPlagiarismCaseInfosForStudent'); - const courseId = 10; - component.courseId = courseId; + const courseId = 1; const studentExam2 = { id: 2 } as StudentExam; - component.studentExam = studentExam2; + fixture.componentRef.setInput('studentExam', studentExam2); + expect(component.studentExamGradeInfoDTO).toBeUndefined(); - expect(component.studentExam.id).toBe(studentExam2.id); + expect(component.studentExam().id).toBe(studentExam2.id); expect(plagiarismServiceSpy).not.toHaveBeenCalled(); - component.studentExam = studentExam; - fixture.detectChanges(); + fixture.componentRef.setInput('studentExam', studentExam); - expect(component.studentExam).toEqual(studentExam); + fixture.detectChanges(); + expect(component.studentExam()).toEqual(studentExam); expect(component.studentExamGradeInfoDTO.studentExam).toEqual(studentExam); - expect(component.studentExam.id).toBe(studentExam.id); + expect(component.studentExam().id).toBe(studentExam.id); expect(plagiarismServiceSpy).toHaveBeenCalledOnce(); expect(plagiarismServiceSpy).toHaveBeenCalledWith(courseId, [1, 2, 3, 4]); const studentExam3 = { id: 3 } as StudentExam; - component.studentExam = studentExam3; + fixture.componentRef.setInput('studentExam', studentExam3); + fixture.detectChanges(); + expect(component.studentExamGradeInfoDTO.studentExam).toEqual(studentExam3); - expect(component.studentExam.id).toBe(studentExam3.id); + expect(component.studentExam().id).toBe(studentExam3.id); expect(plagiarismServiceSpy).toHaveBeenCalledOnce(); }); it('should correctly identify a TestExam', () => { - component.studentExam = studentExamForTestExam; + fixture.componentRef.setInput('studentExam', studentExamForTestExam); component.ngOnInit(); expect(component.isTestExam).toBeTrue(); expect(component.testExamConduction).toBeTrue(); studentExamForTestExam.submitted = true; - component.studentExam = studentExamForTestExam; + fixture.componentRef.setInput('studentExam', studentExamForTestExam); component.ngOnInit(); expect(component.isTestExam).toBeTrue(); expect(component.testExamConduction).toBeFalse(); }); it('should correctly identify a RealExam', () => { - component.studentExam = studentExam; + fixture.componentRef.setInput('studentExam', studentExam); component.ngOnInit(); expect(component.isTestExam).toBeFalse(); expect(component.testExamConduction).toBeFalse(); @@ -345,7 +347,7 @@ describe('ExamResultSummaryComponent', () => { expect(component.testRunConduction).toBeFalse(); studentExam.submitted = true; - component.studentExam = studentExam; + fixture.componentRef.setInput('studentExam', studentExam); component.ngOnInit(); expect(component.isTestExam).toBeFalse(); expect(component.testExamConduction).toBeFalse(); @@ -354,7 +356,7 @@ describe('ExamResultSummaryComponent', () => { }); it('should correctly determine if the results are published', () => { - component.studentExam = studentExam; + fixture.componentRef.setInput('studentExam', studentExam); component.testRunConduction = true; expect(component.resultsArePublished).toBeFalse(); @@ -374,12 +376,12 @@ describe('ExamResultSummaryComponent', () => { // const publishResultsDate is in the past expect(component.resultsArePublished).toBeTrue(); - component.studentExam.exam!.publishResultsDate = dayjs().add(2, 'hours'); + component.studentExam().exam!.publishResultsDate = dayjs().add(2, 'hours'); expect(component.resultsArePublished).toBeFalse(); }); it('should load exam summary when results are published', () => { - component.studentExam = studentExam; + fixture.componentRef.setInput('studentExam', studentExam); const loadStudentExamGradeInfoForSummarySpy = jest.spyOn(examParticipationService, 'loadStudentExamGradeInfoForSummary'); const isExamResultPublishedSpy = jest.spyOn(ExamUtils, 'isExamResultPublished').mockReturnValue(true); @@ -403,12 +405,12 @@ describe('ExamResultSummaryComponent', () => { expect(component.isAfterStudentReviewStart).toBeTrue(); component.isTestRun = false; - component.studentExam.exam!.examStudentReviewStart = examStudentReviewStart; - component.studentExam.exam!.examStudentReviewEnd = examStudentReviewEnd; + component.studentExam().exam!.examStudentReviewStart = examStudentReviewStart; + component.studentExam().exam!.examStudentReviewEnd = examStudentReviewEnd; component.ngOnInit(); expect(component.isAfterStudentReviewStart).toBeTrue(); - component.studentExam.exam!.examStudentReviewStart = dayjs().add(30, 'minutes'); + component.studentExam().exam!.examStudentReviewStart = dayjs().add(30, 'minutes'); component.ngOnInit(); expect(component.isAfterStudentReviewStart).toBeFalse(); @@ -429,11 +431,11 @@ describe('ExamResultSummaryComponent', () => { expect(component.isBeforeStudentReviewEnd).toBeTrue(); component.isTestRun = false; - component.studentExam.exam!.examStudentReviewEnd = examStudentReviewEnd; + component.studentExam().exam!.examStudentReviewEnd = examStudentReviewEnd; component.ngOnInit(); expect(component.isBeforeStudentReviewEnd).toBeTrue(); - component.studentExam.exam!.examStudentReviewEnd = dayjs().subtract(30, 'minutes'); + component.studentExam().exam!.examStudentReviewEnd = dayjs().subtract(30, 'minutes'); component.ngOnInit(); expect(component.isBeforeStudentReviewEnd).toBeFalse(); @@ -527,7 +529,7 @@ describe('ExamResultSummaryComponent', () => { scrollIntoView: scrollIntoViewSpy, } as unknown as HTMLElement); - component.studentExam = studentExam; + fixture.componentRef.setInput('studentExam', studentExam); component.studentExamGradeInfoDTO = { ...gradeInfo, studentExam }; fixture.detectChanges(); diff --git a/src/main/webapp/app/exam/overview/summary/exam-result-summary.component.ts b/src/main/webapp/app/exam/overview/summary/exam-result-summary.component.ts index 694391dd8daa..13f367b98d80 100644 --- a/src/main/webapp/app/exam/overview/summary/exam-result-summary.component.ts +++ b/src/main/webapp/app/exam/overview/summary/exam-result-summary.component.ts @@ -1,4 +1,4 @@ -import { Component, Input, OnInit, inject } from '@angular/core'; +import { Component, OnInit, effect, inject, input } from '@angular/core'; import { StudentExam } from 'app/exam/shared/entities/student-exam.model'; import { Exercise, ExerciseType, IncludedInOverallScore, getIcon } from 'app/exercise/shared/entities/exercise/exercise.model'; import dayjs from 'dayjs/esm'; @@ -113,27 +113,9 @@ export class ExamResultSummaryComponent implements OnInit { faEyeSlash = faEyeSlash; faArrowUp = faArrowUp; - /** - * Current student's exam. - */ - private _studentExam: StudentExam; - plagiarismCaseInfos: { [exerciseId: number]: PlagiarismCaseInfo } = {}; exampleSolutionPublished = false; - get studentExam(): StudentExam { - return this._studentExam; - } - - @Input() - set studentExam(studentExam: StudentExam) { - this._studentExam = studentExam; - if (this.studentExamGradeInfoDTO) { - this.studentExamGradeInfoDTO.studentExam = studentExam; - } - this.tryLoadPlagiarismCaseInfosForStudent(); - } - /** * Grade info for current student's exam. */ @@ -142,8 +124,8 @@ export class ExamResultSummaryComponent implements OnInit { isGradingKeyCollapsed = true; isBonusGradingKeyCollapsed = true; - @Input() - instructorView = false; + instructorView = input(false); + studentExam = input.required(); courseId: number; @@ -182,31 +164,31 @@ export class ExamResultSummaryComponent implements OnInit { ngOnInit(): void { // flags required to display test runs correctly this.isTestRun = this.route.snapshot.url[1]?.toString() === 'test-runs'; - this.isTestExam = this.studentExam.exam!.testExam!; + this.isTestExam = this.studentExam().exam!.testExam!; this.testRunConduction = this.isTestRun && this.route.snapshot.url[3]?.toString() === 'conduction'; - this.testExamConduction = this.isTestExam && !this.studentExam.submitted; + this.testExamConduction = this.isTestExam && !this.studentExam().submitted; this.courseId = Number(this.route.snapshot?.paramMap?.get('courseId') || this.route.parent?.parent?.snapshot.paramMap.get('courseId')); - if (!this.studentExam?.id) { + if (!this.studentExam().id) { throw new Error('studentExam.id should be present to fetch grade info'); } - if (!this.studentExam?.exam?.id) { + if (!this.studentExam().exam?.id) { throw new Error('studentExam.exam.id should be present to fetch grade info'); } - if (!this.studentExam?.user?.id) { + if (!this.studentExam().user?.id) { throw new Error('studentExam.user.id should be present to fetch grade info'); } - if (isExamResultPublished(this.isTestRun, this.studentExam.exam, this.serverDateService)) { + if (isExamResultPublished(this.isTestRun, this.studentExam().exam, this.serverDateService)) { this.examParticipationService - .loadStudentExamGradeInfoForSummary(this.courseId, this.studentExam.exam.id, this.studentExam.id, this.studentExam.user.id) + .loadStudentExamGradeInfoForSummary(this.courseId, this.studentExam().exam!.id!, this.studentExam().id!, this.studentExam().user!.id!) .subscribe((studentExamWithGrade: StudentExamWithGradeDTO) => { - studentExamWithGrade.studentExam = this.studentExam; + studentExamWithGrade.studentExam = this.studentExam(); this.studentExamGradeInfoDTO = studentExamWithGrade; this.exerciseInfos = this.getExerciseInfos(studentExamWithGrade); }); } - this.exampleSolutionPublished = !!this.studentExam.exam?.exampleSolutionPublicationDate && dayjs().isAfter(this.studentExam.exam.exampleSolutionPublicationDate); + this.exampleSolutionPublished = !!this.studentExam().exam?.exampleSolutionPublicationDate && dayjs().isAfter(this.studentExam().exam?.exampleSolutionPublicationDate); this.exerciseInfos = this.getExerciseInfos(); @@ -216,6 +198,17 @@ export class ExamResultSummaryComponent implements OnInit { this.isAfterStudentReviewStart = this.getIsAfterStudentReviewStart(); } + constructor() { + effect(() => { + const exam = this.studentExam(); + + if (this.studentExamGradeInfoDTO) { + this.studentExamGradeInfoDTO.studentExam = exam; + } + this.tryLoadPlagiarismCaseInfosForStudent(); + }); + } + get resultsArePublished(): boolean | any { if (this.isTestRun || this.isTestExam) { return true; @@ -225,8 +218,8 @@ export class ExamResultSummaryComponent implements OnInit { return false; } - if (this.studentExam?.exam?.publishResultsDate) { - return dayjs(this.studentExam.exam.publishResultsDate).isBefore(dayjs()); + if (this.studentExam().exam?.publishResultsDate) { + return dayjs(this.studentExam().exam?.publishResultsDate).isBefore(dayjs()); } return false; @@ -235,14 +228,14 @@ export class ExamResultSummaryComponent implements OnInit { private tryLoadPlagiarismCaseInfosForStudent() { // If the exam has not yet ended, or we're only a few minutes after the end, we can assume that there are no plagiarism cases yet. // We should avoid trying to load them to reduce server load. - if (this.studentExam?.exam?.endDate) { - const endDateWithTimeExtension = dayjs(this.studentExam.exam.endDate).add(2, 'hours'); + if (this.studentExam().exam?.endDate) { + const endDateWithTimeExtension = dayjs(this.studentExam().exam?.endDate).add(2, 'hours'); if (dayjs().isBefore(endDateWithTimeExtension)) { return; } } - const exerciseIds = this.studentExam?.exercises?.map((exercise) => exercise.id!); + const exerciseIds = this.studentExam().exercises?.map((exercise) => exercise.id!); if (exerciseIds?.length && this.courseId) { this.plagiarismCasesService.getPlagiarismCaseInfosForStudent(this.courseId, exerciseIds).subscribe((res) => { this.plagiarismCaseInfos = res.body ?? {}; @@ -336,10 +329,10 @@ export class ExamResultSummaryComponent implements OnInit { */ setExamWithOnlyIdAndStudentReviewPeriod() { const exam = new Exam(); - exam.id = this.studentExam?.exam?.id; - exam.examStudentReviewStart = this.studentExam?.exam?.examStudentReviewStart; - exam.examStudentReviewEnd = this.studentExam?.exam?.examStudentReviewEnd; - exam.course = this.studentExam?.exam?.course; + exam.id = this.studentExam().exam?.id; + exam.examStudentReviewStart = this.studentExam().exam?.examStudentReviewStart; + exam.examStudentReviewEnd = this.studentExam().exam?.examStudentReviewEnd; + exam.course = this.studentExam().exam?.course; this.examWithOnlyIdAndStudentReviewPeriod = exam; } @@ -347,8 +340,8 @@ export class ExamResultSummaryComponent implements OnInit { if (this.isTestRun || this.isTestExam) { return true; } - if (this.studentExam?.exam?.examStudentReviewStart && this.studentExam.exam.examStudentReviewEnd) { - return this.serverDateService.now().isAfter(this.studentExam.exam.examStudentReviewStart); + if (this.studentExam().exam?.examStudentReviewStart && this.studentExam().exam?.examStudentReviewEnd) { + return this.serverDateService.now().isAfter(this.studentExam().exam!.examStudentReviewStart); } return false; } @@ -357,15 +350,15 @@ export class ExamResultSummaryComponent implements OnInit { if (this.isTestRun || this.isTestExam) { return true; } - if (this.studentExam?.exam?.examStudentReviewStart && this.studentExam.exam.examStudentReviewEnd) { - return this.serverDateService.now().isBefore(this.studentExam.exam.examStudentReviewEnd); + if (this.studentExam().exam?.examStudentReviewStart && this.studentExam().exam?.examStudentReviewEnd) { + return this.serverDateService.now().isBefore(this.studentExam().exam!.examStudentReviewEnd); } return false; } private getExerciseInfos(studentExamWithGrade?: StudentExamWithGradeDTO): Record { const exerciseInfos: Record = {}; - for (const exercise of this.studentExam?.exercises ?? []) { + for (const exercise of this.studentExam().exercises ?? []) { if (exercise.id === undefined) { this.alertService.error('artemisApp.exam.error.cannotDisplayExerciseDetails', { exerciseGroupTitle: exercise.exerciseGroup?.title }); const errorMessage = 'Cannot getExerciseInfos as exerciseId is undefined'; diff --git a/src/main/webapp/app/exam/overview/summary/exercises/file-upload-exam-summary/file-upload-exam-summary.component.html b/src/main/webapp/app/exam/overview/summary/exercises/file-upload-exam-summary/file-upload-exam-summary.component.html index 7f02062cd7b1..1384ccbe63ef 100644 --- a/src/main/webapp/app/exam/overview/summary/exercises/file-upload-exam-summary/file-upload-exam-summary.component.html +++ b/src/main/webapp/app/exam/overview/summary/exercises/file-upload-exam-summary/file-upload-exam-summary.component.html @@ -1,13 +1,13 @@
- @if (exercise?.studentParticipations?.length && exercise?.studentParticipations?.[0]?.id) { + @if (exercise()?.studentParticipations?.length && exercise()?.studentParticipations?.[0]?.id) { } @else {
No submission
diff --git a/src/main/webapp/app/exam/overview/summary/exercises/file-upload-exam-summary/file-upload-exam-summary.component.spec.ts b/src/main/webapp/app/exam/overview/summary/exercises/file-upload-exam-summary/file-upload-exam-summary.component.spec.ts index 721b9e5bfe24..d54acfb2ac6a 100644 --- a/src/main/webapp/app/exam/overview/summary/exercises/file-upload-exam-summary/file-upload-exam-summary.component.spec.ts +++ b/src/main/webapp/app/exam/overview/summary/exercises/file-upload-exam-summary/file-upload-exam-summary.component.spec.ts @@ -14,6 +14,8 @@ import { AlertService } from 'app/shared/service/alert.service'; import { MockProvider } from 'ng-mocks'; import { MockTranslateService } from 'test/helpers/mocks/service/mock-translate.service'; import { TranslateService } from '@ngx-translate/core'; +import { input } from '@angular/core'; +import { Exercise } from 'app/exercise/shared/entities/exercise/exercise.model'; describe('FileUploadExamSummaryComponent', () => { let fixture: ComponentFixture; @@ -36,7 +38,10 @@ describe('FileUploadExamSummaryComponent', () => { .then(() => { fixture = TestBed.createComponent(FileUploadExamSummaryComponent); component = fixture.componentInstance; - component.submission = fileUploadSubmission; + TestBed.runInInjectionContext(() => { + component.submission = input(fileUploadSubmission); + component.exercise = input({} as Exercise); + }); }); }); @@ -48,8 +53,10 @@ describe('FileUploadExamSummaryComponent', () => { it('should render submission when exercise and submisssion is set', () => { const exercise = { id: 1234, studentParticipations: [{ id: 1 }] } as FileUploadExercise; const submission = { submitted: true, filePath: 'filePath.pdf' } as FileUploadSubmission; - component.submission = submission; - component.exercise = exercise; + TestBed.runInInjectionContext(() => { + component.submission = input(submission); + component.exercise = input(exercise); + }); fixture.detectChanges(); diff --git a/src/main/webapp/app/exam/overview/summary/exercises/file-upload-exam-summary/file-upload-exam-summary.component.ts b/src/main/webapp/app/exam/overview/summary/exercises/file-upload-exam-summary/file-upload-exam-summary.component.ts index 949eef8589d1..8a9271d8eba8 100644 --- a/src/main/webapp/app/exam/overview/summary/exercises/file-upload-exam-summary/file-upload-exam-summary.component.ts +++ b/src/main/webapp/app/exam/overview/summary/exercises/file-upload-exam-summary/file-upload-exam-summary.component.ts @@ -1,4 +1,4 @@ -import { Component, Input } from '@angular/core'; +import { Component, input } from '@angular/core'; import { FileUploadSubmission } from 'app/fileupload/shared/entities/file-upload-submission.model'; import { Exercise } from 'app/exercise/shared/entities/exercise/exercise.model'; import { FileUploadSubmissionComponent } from 'app/fileupload/overview/file-upload-submission/file-upload-submission.component'; @@ -9,8 +9,8 @@ import { FileUploadSubmissionComponent } from 'app/fileupload/overview/file-uplo imports: [FileUploadSubmissionComponent], }) export class FileUploadExamSummaryComponent { - @Input() submission: FileUploadSubmission; - @Input() exercise: Exercise; - @Input() expandProblemStatement = false; - @Input() isAfterResultsArePublished = false; + submission = input.required(); + exercise = input.required(); + expandProblemStatement = input(false); + isAfterResultsArePublished = input(false); } diff --git a/src/main/webapp/app/exam/overview/summary/exercises/header/exam-result-summary-exercise-card-header.component.html b/src/main/webapp/app/exam/overview/summary/exercises/header/exam-result-summary-exercise-card-header.component.html index 4c9d11e7aab6..07f2ff72e1de 100644 --- a/src/main/webapp/app/exam/overview/summary/exercises/header/exam-result-summary-exercise-card-header.component.html +++ b/src/main/webapp/app/exam/overview/summary/exercises/header/exam-result-summary-exercise-card-header.component.html @@ -1,32 +1,32 @@
-
- #{{ index + 1 }}   - @if (exercise?.type && exerciseInfo?.icon) { - +
+ #{{ index() + 1 }}   + @if (exercise()?.type && exerciseInfo()?.icon) { + }   - {{ exercise.exerciseGroup?.title }} + {{ exercise().exerciseGroup?.title }}
- @if (resultsPublished && exerciseInfo?.achievedPoints !== undefined) { + @if (resultsPublished() && exerciseInfo()?.achievedPoints !== undefined) {
- [{{ exerciseInfo?.achievedPoints }} / {{ exercise.maxPoints }} {{ 'artemisApp.examParticipation.exercisePoints' | artemisTranslate }}] + [{{ exerciseInfo()?.achievedPoints }} / {{ exercise().maxPoints }} {{ 'artemisApp.examParticipation.exercisePoints' | artemisTranslate }}]
- @if (exerciseInfo?.resultIconClass) { - + @if (exerciseInfo()?.resultIconClass) { + } - @if (exerciseInfo?.achievedPercentage !== undefined) { - {{ exerciseInfo!.achievedPercentage }}% + @if (exerciseInfo()?.achievedPercentage !== undefined) { + {{ exerciseInfo()!.achievedPercentage }}% }
} @else { - [{{ exercise.maxPoints }} {{ 'artemisApp.examParticipation.exercisePoints' | artemisTranslate }}] + [{{ exercise().maxPoints }} {{ 'artemisApp.examParticipation.exercisePoints' | artemisTranslate }}] }
- @if (exercise.studentParticipations?.[0]?.submissions?.[0]?.type === SUBMISSION_TYPE_ILLEGAL) { + @if (exercise().studentParticipations?.[0]?.submissions?.[0]?.type === SUBMISSION_TYPE_ILLEGAL) {
diff --git a/src/main/webapp/app/exam/overview/summary/exercises/header/exam-result-summary-exercise-card-header.component.spec.ts b/src/main/webapp/app/exam/overview/summary/exercises/header/exam-result-summary-exercise-card-header.component.spec.ts index 9f82fab3acd6..a2a1aa03092e 100644 --- a/src/main/webapp/app/exam/overview/summary/exercises/header/exam-result-summary-exercise-card-header.component.spec.ts +++ b/src/main/webapp/app/exam/overview/summary/exercises/header/exam-result-summary-exercise-card-header.component.spec.ts @@ -12,6 +12,7 @@ import { SubmissionType } from 'app/exercise/shared/entities/submission/submissi import { TranslateDirective } from 'app/shared/language/translate.directive'; import { ArtemisTranslatePipe } from 'app/shared/pipes/artemis-translate.pipe'; import { MockComponent, MockDirective, MockPipe } from 'ng-mocks'; +import { input } from '@angular/core'; import { ExamResultSummaryExerciseCardHeaderComponent } from 'app/exam/overview/summary/exercises/header/exam-result-summary-exercise-card-header.component'; import { ResultSummaryExerciseInfo } from 'app/exam/overview/summary/exam-result-summary.component'; @@ -50,9 +51,12 @@ describe('ExamResultSummaryExerciseCardHeaderComponent', () => { .then(() => { fixture = TestBed.createComponent(ExamResultSummaryExerciseCardHeaderComponent); component = fixture.componentInstance; - component.index = 3; - component.exercise = programmingExercise; - component.exerciseInfo = { isCollapsed: false } as ResultSummaryExerciseInfo; + TestBed.runInInjectionContext(() => { + component.index = input(3); + component.exercise = input(programmingExercise); + component.exerciseInfo = input({ isCollapsed: false } as ResultSummaryExerciseInfo); + component.resultsPublished = input(false); + }); }); }); @@ -71,7 +75,9 @@ describe('ExamResultSummaryExerciseCardHeaderComponent', () => { [{ studentParticipations: [{ submissions: [{ type: SubmissionType.MANUAL }] }] }, false], [{ studentParticipations: [{ submissions: [{ type: SubmissionType.ILLEGAL }] }] }, true], ])('should handle missing/empty fields correctly for %o when displaying illegal submission badge', (exercise, shouldBeNonNull) => { - component.exercise = exercise as Exercise; + TestBed.runInInjectionContext(() => { + component.exercise = input(exercise as Exercise); + }); fixture.detectChanges(); const span = fixture.debugElement.query(By.css('.badge.bg-danger')); @@ -86,7 +92,7 @@ describe('ExamResultSummaryExerciseCardHeaderComponent', () => { fixture.detectChanges(); const exerciseTitleElement: HTMLElement = fixture.nativeElement.querySelector('#exercise-group-title-' + programmingExercise.id); - expect(exerciseTitleElement.textContent).toContain('#' + (component.index + 1)); + expect(exerciseTitleElement.textContent).toContain('#' + (component.index() + 1)); expect(exerciseTitleElement.textContent).toContain(programmingExercise.exerciseGroup?.title); }); }); diff --git a/src/main/webapp/app/exam/overview/summary/exercises/header/exam-result-summary-exercise-card-header.component.ts b/src/main/webapp/app/exam/overview/summary/exercises/header/exam-result-summary-exercise-card-header.component.ts index faee36e92935..337264745dff 100644 --- a/src/main/webapp/app/exam/overview/summary/exercises/header/exam-result-summary-exercise-card-header.component.ts +++ b/src/main/webapp/app/exam/overview/summary/exercises/header/exam-result-summary-exercise-card-header.component.ts @@ -1,4 +1,4 @@ -import { Component, Input } from '@angular/core'; +import { Component, input } from '@angular/core'; import { Exercise } from 'app/exercise/shared/entities/exercise/exercise.model'; import { ResultSummaryExerciseInfo } from 'app/exam/overview/summary/exam-result-summary.component'; import { SubmissionType } from 'app/exercise/shared/entities/submission/submission.model'; @@ -13,10 +13,10 @@ import { ArtemisTranslatePipe } from 'app/shared/pipes/artemis-translate.pipe'; imports: [FaIconComponent, NgClass, TranslateDirective, ArtemisTranslatePipe], }) export class ExamResultSummaryExerciseCardHeaderComponent { - @Input() index: number; - @Input() exercise: Exercise; - @Input() exerciseInfo?: ResultSummaryExerciseInfo; - @Input() resultsPublished: boolean; + index = input.required(); + exercise = input.required(); + exerciseInfo = input.required(); + resultsPublished = input.required(); readonly SUBMISSION_TYPE_ILLEGAL = SubmissionType.ILLEGAL; } diff --git a/src/main/webapp/app/exam/overview/summary/exercises/modeling-exam-summary/modeling-exam-summary.component.html b/src/main/webapp/app/exam/overview/summary/exercises/modeling-exam-summary/modeling-exam-summary.component.html index 84c349107616..026a8dd1bb78 100644 --- a/src/main/webapp/app/exam/overview/summary/exercises/modeling-exam-summary/modeling-exam-summary.component.html +++ b/src/main/webapp/app/exam/overview/summary/exercises/modeling-exam-summary/modeling-exam-summary.component.html @@ -1,13 +1,13 @@
- @if (exercise?.studentParticipations?.length && exercise?.studentParticipations?.[0]?.id) { + @if (exercise()?.studentParticipations?.length && exercise()?.studentParticipations?.[0]?.id) { } @else { diff --git a/src/main/webapp/app/exam/overview/summary/exercises/modeling-exam-summary/modeling-exam-summary.component.spec.ts b/src/main/webapp/app/exam/overview/summary/exercises/modeling-exam-summary/modeling-exam-summary.component.spec.ts index 8ee76feb029d..d570bcea99e1 100644 --- a/src/main/webapp/app/exam/overview/summary/exercises/modeling-exam-summary/modeling-exam-summary.component.spec.ts +++ b/src/main/webapp/app/exam/overview/summary/exercises/modeling-exam-summary/modeling-exam-summary.component.spec.ts @@ -18,6 +18,9 @@ import { ProfileService } from 'app/core/layouts/profiles/shared/profile.service import { MockProfileService } from 'test/helpers/mocks/service/mock-profile.service'; import { MockTranslateService } from 'test/helpers/mocks/service/mock-translate.service'; import { TranslateService } from '@ngx-translate/core'; +import { input } from '@angular/core'; +import { Exercise } from 'app/exercise/shared/entities/exercise/exercise.model'; +import { Submission } from 'app/exercise/shared/entities/submission/submission.model'; describe('ModelingExamSummaryComponent', () => { let fixture: ComponentFixture; @@ -39,6 +42,10 @@ describe('ModelingExamSummaryComponent', () => { .then(() => { fixture = TestBed.createComponent(ModelingExamSummaryComponent); component = fixture.componentInstance; + TestBed.runInInjectionContext(() => { + component.exercise = input({} as Exercise); + component.submission = input({} as Submission); + }); }); }); @@ -60,8 +67,10 @@ describe('ModelingExamSummaryComponent', () => { const course = new Course(); const exercise = { course: course, exerciseGroup: undefined, diagramType: UMLDiagramType.ClassDiagram, studentParticipations: [{ id: 1 }] } as ModelingExercise; course.isAtLeastInstructor = true; - component.exercise = exercise; - component.submission = mockSubmission; + TestBed.runInInjectionContext(() => { + component.exercise = input(exercise); + component.submission = input(mockSubmission); + }); fixture.detectChanges(); diff --git a/src/main/webapp/app/exam/overview/summary/exercises/modeling-exam-summary/modeling-exam-summary.component.ts b/src/main/webapp/app/exam/overview/summary/exercises/modeling-exam-summary/modeling-exam-summary.component.ts index 0ad390db244b..9f9b404be2d3 100644 --- a/src/main/webapp/app/exam/overview/summary/exercises/modeling-exam-summary/modeling-exam-summary.component.ts +++ b/src/main/webapp/app/exam/overview/summary/exercises/modeling-exam-summary/modeling-exam-summary.component.ts @@ -1,4 +1,4 @@ -import { Component, Input } from '@angular/core'; +import { Component, input } from '@angular/core'; import { ModelingSubmission } from 'app/modeling/shared/entities/modeling-submission.model'; import { ModelingExercise } from 'app/modeling/shared/entities/modeling-exercise.model'; import { ModelingSubmissionComponent } from 'app/modeling/overview/modeling-submission/modeling-submission.component'; @@ -9,9 +9,9 @@ import { ModelingSubmissionComponent } from 'app/modeling/overview/modeling-subm imports: [ModelingSubmissionComponent], }) export class ModelingExamSummaryComponent { - @Input() exercise: ModelingExercise; - @Input() submission: ModelingSubmission; - @Input() isPrinting = false; - @Input() expandProblemStatement = false; - @Input() isAfterResultsArePublished = false; + exercise = input.required(); + submission = input.required(); + isPrinting = input(false); + expandProblemStatement = input(false); + isAfterResultsArePublished = input(false); } diff --git a/src/main/webapp/app/exam/overview/summary/exercises/programming-exam-summary/programming-exam-summary.component.html b/src/main/webapp/app/exam/overview/summary/exercises/programming-exam-summary/programming-exam-summary.component.html index 03761ccf76be..ec43a4d82079 100644 --- a/src/main/webapp/app/exam/overview/summary/exercises/programming-exam-summary/programming-exam-summary.component.html +++ b/src/main/webapp/app/exam/overview/summary/exercises/programming-exam-summary/programming-exam-summary.component.html @@ -3,26 +3,26 @@
- @if (submission) { + @if (submission()) {
}

Programming exam summary


- @if (submission) { + @if (submission()) { } {{ commitHash || ('artemisApp.exam.examSummary.noCommitHash' | artemisTranslate) }}
- @if (isAfterResultsArePublished) { - @if (submission) { + @if (isAfterResultsArePublished()) { + @if (submission()) {
} @if (feedbackComponentParameters && feedbackComponentParameters.result) { @@ -35,27 +35,27 @@
[messageKey]="feedbackComponentParameters.messageKey" [showMissingAutomaticFeedbackInformation]="feedbackComponentParameters.showMissingAutomaticFeedbackInformation ?? false" [isExamReviewPage]="true" - [isPrinting]="isPrinting" + [isPrinting]="isPrinting()" /> } }
- @if (exercise.problemStatement) { - + @if (exercise().problemStatement) { + }
- @if ((exercise.assessmentType === AssessmentType.SEMI_AUTOMATIC || exercise.allowComplaintsForAutomaticAssessments) && submission && isAfterStudentReviewStart) { + @if ((exercise().assessmentType === AssessmentType.SEMI_AUTOMATIC || exercise().allowComplaintsForAutomaticAssessments) && submission() && isAfterStudentReviewStart()) { } diff --git a/src/main/webapp/app/exam/overview/summary/exercises/programming-exam-summary/programming-exam-summary.component.spec.ts b/src/main/webapp/app/exam/overview/summary/exercises/programming-exam-summary/programming-exam-summary.component.spec.ts index d1f157e77a9a..686f0d8fbc23 100644 --- a/src/main/webapp/app/exam/overview/summary/exercises/programming-exam-summary/programming-exam-summary.component.spec.ts +++ b/src/main/webapp/app/exam/overview/summary/exercises/programming-exam-summary/programming-exam-summary.component.spec.ts @@ -1,5 +1,4 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { ProfileService } from 'app/core/layouts/profiles/shared/profile.service'; import { ExerciseType } from 'app/exercise/shared/entities/exercise/exercise.model'; import { ProgrammingExamSummaryComponent } from 'app/exam/overview/summary/exercises/programming-exam-summary/programming-exam-summary.component'; import { CodeButtonComponent } from 'app/shared/components/code-button/code-button.component'; @@ -26,6 +25,8 @@ import { MockTranslateService } from 'test/helpers/mocks/service/mock-translate. import { TranslateService } from '@ngx-translate/core'; import { provideHttpClient } from '@angular/common/http'; import { provideHttpClientTesting } from '@angular/common/http/testing'; +import { input } from '@angular/core'; +import { ProfileService } from 'app/core/layouts/profiles/shared/profile.service'; const user = { id: 1, name: 'Test User' } as User; @@ -46,24 +47,6 @@ const programmingSubmission = { commitHash: '123456789ab', } as ProgrammingSubmission; -const programmingParticipation = { - id: 4, - student: user, - submissions: [programmingSubmission], - type: ParticipationType.PROGRAMMING, - participantIdentifier: 'student1', - repositoryUri: 'https://username@artemistest2.aet.cit.tum.de/FTCSCAGRADING1/ftcscagrading1-username', -} as ProgrammingExerciseStudentParticipation; - -const programmingExercise = { - id: 4, - type: ExerciseType.PROGRAMMING, - studentParticipations: [programmingParticipation], - exerciseGroup, - projectKey: 'TEST', - dueDate: dayjs().subtract(5, 'minutes'), -} as ProgrammingExercise; - const feedbackReference = { id: 1, result: { id: 2 } as Result, @@ -91,6 +74,25 @@ const result = { assessmentType: AssessmentType.MANUAL, } as Result; +const programmingParticipation = { + id: 4, + student: user, + submissions: [programmingSubmission], + type: ParticipationType.PROGRAMMING, + participantIdentifier: 'student1', + repositoryUri: 'https://username@artemistest2.aet.cit.tum.de/FTCSCAGRADING1/ftcscagrading1-username', + results: [result], +} as ProgrammingExerciseStudentParticipation; + +const programmingExercise = { + id: 4, + type: ExerciseType.PROGRAMMING, + studentParticipations: [programmingParticipation], + exerciseGroup, + projectKey: 'TEST', + dueDate: dayjs().subtract(5, 'minutes'), +} as ProgrammingExercise; + describe('ProgrammingExamSummaryComponent', () => { let component: ProgrammingExamSummaryComponent; let fixture: ComponentFixture; @@ -111,11 +113,12 @@ describe('ProgrammingExamSummaryComponent', () => { fixture = TestBed.createComponent(ProgrammingExamSummaryComponent); component = fixture.componentInstance; - component.exercise = programmingExercise; - programmingParticipation.results = [result]; - component.participation = programmingParticipation; - component.submission = programmingSubmission; - component.exam = exam; + TestBed.runInInjectionContext(() => { + component.exercise = input(programmingExercise); + component.participation = input(programmingParticipation); + component.submission = input(programmingSubmission); + component.exam = input(exam); + }); }); }); @@ -130,7 +133,9 @@ describe('ProgrammingExamSummaryComponent', () => { }); it('should show result if present and results are published', () => { - component.isAfterResultsArePublished = true; + TestBed.runInInjectionContext(() => { + component.isAfterResultsArePublished = input(true); + }); fixture.detectChanges(); @@ -143,7 +148,9 @@ describe('ProgrammingExamSummaryComponent', () => { }); it('should not show results if not yet published', () => { - component.isAfterResultsArePublished = false; + TestBed.runInInjectionContext(() => { + component.isAfterResultsArePublished = input(false); + }); fixture.detectChanges(); diff --git a/src/main/webapp/app/exam/overview/summary/exercises/programming-exam-summary/programming-exam-summary.component.ts b/src/main/webapp/app/exam/overview/summary/exercises/programming-exam-summary/programming-exam-summary.component.ts index 39584fb1f324..4b38b8cfe037 100644 --- a/src/main/webapp/app/exam/overview/summary/exercises/programming-exam-summary/programming-exam-summary.component.ts +++ b/src/main/webapp/app/exam/overview/summary/exercises/programming-exam-summary/programming-exam-summary.component.ts @@ -1,4 +1,4 @@ -import { Component, Input, OnInit, inject } from '@angular/core'; +import { Component, OnInit, inject, input } from '@angular/core'; import { ProgrammingExercise } from 'app/programming/shared/entities/programming-exercise.model'; import { ProgrammingExerciseStudentParticipation } from 'app/exercise/shared/entities/participation/programming-exercise-student-participation.model'; import { ProgrammingSubmission } from 'app/programming/shared/entities/programming-submission.model'; @@ -28,16 +28,16 @@ export class ProgrammingExamSummaryComponent implements OnInit { private exerciseCacheService = inject(ExerciseCacheService, { optional: true }); private router = inject(Router); - @Input() exercise: ProgrammingExercise; - @Input() participation: ProgrammingExerciseStudentParticipation; - @Input() submission: ProgrammingSubmission; - @Input() isTestRun = false; - @Input() exam: Exam; - @Input() isAfterStudentReviewStart = false; - @Input() resultsPublished = false; - @Input() isPrinting = false; - @Input() isAfterResultsArePublished = false; - @Input() instructorView = false; + exercise = input.required(); + participation = input.required(); + submission = input.required(); + isTestRun = input(false); + exam = input.required(); + isAfterStudentReviewStart = input(false); + resultsPublished = input(false); + isPrinting = input(false); + isAfterResultsArePublished = input(false); + instructorView = input(false); readonly PROGRAMMING: ExerciseType = ExerciseType.PROGRAMMING; @@ -56,21 +56,21 @@ export class ProgrammingExamSummaryComponent implements OnInit { ngOnInit() { this.routerLink = this.router.url; - this.result = this.participation.results?.[0]; - this.commitHash = this.submission?.commitHash?.slice(0, 11); + this.result = this.participation().results?.[0]; + this.commitHash = this.submission()?.commitHash?.slice(0, 11); this.isInCourseManagement = this.router.url.includes('course-management'); const isBuilding = false; const missingResultInfo = MissingResultInformation.NONE; - const templateStatus = evaluateTemplateStatus(this.exercise, this.participation, this.participation.results?.[0], isBuilding, missingResultInfo); + const templateStatus = evaluateTemplateStatus(this.exercise(), this.participation(), this.participation().results?.[0], isBuilding, missingResultInfo); if (this.result) { this.feedbackComponentParameters = prepareFeedbackComponentParameters( - this.exercise, + this.exercise(), this.result, - this.participation, + this.participation(), templateStatus, - this.exam.latestIndividualEndDate, + this.exam().latestIndividualEndDate, this.exerciseCacheService ?? this.exerciseService, ); } @@ -78,13 +78,13 @@ export class ProgrammingExamSummaryComponent implements OnInit { get routerLinkForRepositoryView(): (string | number)[] { if (this.isInCourseManagement) { - return ['..', 'programming-exercises', this.exercise.id!, 'repository', 'USER', this.participation.id!]; + return ['..', 'programming-exercises', this.exercise().id!, 'repository', 'USER', this.participation().id!]; } if (this.routerLink.includes('test-exam')) { const parts = this.routerLink.split('/'); const examLink = parts.slice(0, parts.length - 2).join('/'); - return [examLink, 'exercises', this.exercise.id!, 'repository', this.participation.id!]; + return [examLink, 'exercises', this.exercise().id!, 'repository', this.participation().id!]; } - return [this.routerLink, 'exercises', this.exercise.id!, 'repository', this.participation.id!]; + return [this.routerLink, 'exercises', this.exercise().id!, 'repository', this.participation().id!]; } } diff --git a/src/main/webapp/app/exam/overview/summary/exercises/quiz-exam-summary/quiz-exam-summary.component.html b/src/main/webapp/app/exam/overview/summary/exercises/quiz-exam-summary/quiz-exam-summary.component.html index 712358bb9347..3f7630741836 100644 --- a/src/main/webapp/app/exam/overview/summary/exercises/quiz-exam-summary/quiz-exam-summary.component.html +++ b/src/main/webapp/app/exam/overview/summary/exercises/quiz-exam-summary/quiz-exam-summary.component.html @@ -1,9 +1,9 @@ -@if (quizParticipation.quizQuestions && quizParticipation.quizQuestions.length > 0) { +@if (quizParticipation().quizQuestions && quizParticipation().quizQuestions!.length > 0) {
@if (showMissingResultsNotice) {
} - @for (question of quizParticipation.quizQuestions!; track question; let i = $index) { + @for (question of quizParticipation().quizQuestions!; track question; let i = $index) {
@if (question.type === MULTIPLE_CHOICE) { { .then(() => { fixture = TestBed.createComponent(QuizExamSummaryComponent); component = fixture.componentInstance; - component.quizParticipation = { + const quizParticipation = { quizQuestions: exercise.quizQuestions!, studentParticipations: exercise.studentParticipations, }; - component.submission = { id: 2, submittedAnswers: [] }; - component.resultsPublished = true; - component.exam = { id: 1 } as Exam; + const submission = { id: 2, submittedAnswers: [] }; + const resultsPublished = true; + const exam = { id: 1 } as Exam; + TestBed.runInInjectionContext(() => { + component.quizParticipation = input(quizParticipation); + component.submission = input(submission); + component.resultsPublished = input(resultsPublished); + component.exam = input(exam); + }); }); }); it('should initialize', () => { - component.exam = { id: 1, publishResultsDate: dayjs().subtract(1, 'hours') } as Exam; + const exam = { id: 1, publishResultsDate: dayjs().subtract(1, 'hours') } as Exam; + TestBed.runInInjectionContext(() => { + component.exam = input(exam); + }); component.ngOnChanges(); expect(component).not.toBeNull(); expect(component.exam).not.toBeNull(); @@ -98,7 +108,9 @@ describe('QuizExamSummaryComponent', () => { }); it('should initialize the solution dictionaries correctly', () => { - component.submission = submissionWithAnswers; + TestBed.runInInjectionContext(() => { + component.submission = input(submissionWithAnswers); + }); component.ngOnChanges(); expect(component.selectedAnswerOptions.get(1)![0]).toEqual(correctAnswerOption); expect(component.getScoreForQuizQuestion(1)).toBe(1); diff --git a/src/main/webapp/app/exam/overview/summary/exercises/quiz-exam-summary/quiz-exam-summary.component.ts b/src/main/webapp/app/exam/overview/summary/exercises/quiz-exam-summary/quiz-exam-summary.component.ts index 960eaa9781ca..0484afba1b5c 100644 --- a/src/main/webapp/app/exam/overview/summary/exercises/quiz-exam-summary/quiz-exam-summary.component.ts +++ b/src/main/webapp/app/exam/overview/summary/exercises/quiz-exam-summary/quiz-exam-summary.component.ts @@ -1,4 +1,4 @@ -import { Component, Input, OnChanges, inject } from '@angular/core'; +import { Component, OnChanges, inject, input } from '@angular/core'; import dayjs from 'dayjs/esm'; import { QuizQuestionType } from 'app/quiz/shared/entities/quiz-question.model'; import { QuizSubmission } from 'app/quiz/shared/entities/quiz-submission.model'; @@ -35,22 +35,20 @@ export class QuizExamSummaryComponent implements OnChanges { dragAndDropMappings = new Map(); shortAnswerSubmittedTexts = new Map(); - @Input() quizParticipation: QuizParticipation; - @Input() submission: QuizSubmission; - @Input() resultsPublished: boolean; - @Input() exam: Exam; + quizParticipation = input.required(); + submission = input.required(); + resultsPublished = input.required(); + exam = input.required(); result?: Result; ngOnChanges() { this.updateViewFromSubmission(); - if (this.quizParticipation.studentParticipations) { - this.result = - this.quizParticipation.studentParticipations.length > 0 && this.quizParticipation.studentParticipations[0].results?.length - ? this.quizParticipation.studentParticipations[0].results[0] - : undefined; + const studentParticipations = this.quizParticipation().studentParticipations; + if (studentParticipations) { + this.result = studentParticipations.length > 0 && studentParticipations[0].results?.length ? studentParticipations[0].results[0] : undefined; } else { - this.result = this.submission.results?.length ? this.submission.results[0] : undefined; + this.result = this.submission().results?.length ? this.submission().results![0] : undefined; } } @@ -67,12 +65,14 @@ export class QuizExamSummaryComponent implements OnChanges { this.dragAndDropMappings = new Map(); this.shortAnswerSubmittedTexts = new Map(); - if (this.quizParticipation.quizQuestions && this.submission) { + const quizQuestions = this.quizParticipation().quizQuestions; + if (quizQuestions && this.submission()) { // iterate through all questions of this quiz - this.quizParticipation.quizQuestions.forEach((question) => { + quizQuestions.forEach((question) => { // find the submitted answer that belongs to this question, only when submitted answers already exist - const submittedAnswer = this.submission.submittedAnswers - ? this.submission.submittedAnswers.find((answer) => { + const submittedAnswers = this.submission().submittedAnswers; + const submittedAnswer = submittedAnswers + ? submittedAnswers.find((answer) => { return answer.quizQuestion!.id === question.id; }) : undefined; @@ -112,12 +112,12 @@ export class QuizExamSummaryComponent implements OnChanges { } getScoreForQuizQuestion(quizQuestionId?: number) { - if (this.submission && this.submission.submittedAnswers && this.submission.submittedAnswers.length > 0) { - const submittedAnswer = this.submission.submittedAnswers.find((answer) => { + if (this.submission() && this.submission().submittedAnswers && this.submission().submittedAnswers!.length > 0) { + const submittedAnswer = this.submission().submittedAnswers!.find((answer) => { return answer && answer.quizQuestion ? answer.quizQuestion.id === quizQuestionId : false; }); if (submittedAnswer && submittedAnswer.scoreInPoints !== undefined) { - return roundValueSpecifiedByCourseSettings(submittedAnswer.scoreInPoints, this.exam.course); + return roundValueSpecifiedByCourseSettings(submittedAnswer.scoreInPoints, this.exam().course); } } return 0; @@ -127,8 +127,8 @@ export class QuizExamSummaryComponent implements OnChanges { * We only show the notice when there is a publishResultsDate that has already passed by now and the result is missing */ get showMissingResultsNotice(): boolean { - if (this.exam && this.exam.publishResultsDate && this.quizParticipation.studentParticipations && this.quizParticipation.studentParticipations.length > 0) { - return dayjs(this.exam.publishResultsDate).isBefore(this.serverDateService.now()) && !this.result; + if (this.exam() && this.exam().publishResultsDate && this.quizParticipation().studentParticipations && this.quizParticipation().studentParticipations!.length > 0) { + return dayjs(this.exam().publishResultsDate).isBefore(this.serverDateService.now()) && !this.result; } return false; } diff --git a/src/main/webapp/app/exam/overview/summary/exercises/text-exam-summary/text-exam-summary.component.html b/src/main/webapp/app/exam/overview/summary/exercises/text-exam-summary/text-exam-summary.component.html index dfeb8f22d560..5ed20ab7a6e6 100644 --- a/src/main/webapp/app/exam/overview/summary/exercises/text-exam-summary/text-exam-summary.component.html +++ b/src/main/webapp/app/exam/overview/summary/exercises/text-exam-summary/text-exam-summary.component.html @@ -1,12 +1,12 @@
- @if (exercise?.studentParticipations?.length && exercise?.studentParticipations?.[0]?.id) { + @if (exercise()?.studentParticipations?.length && exercise()?.studentParticipations?.[0]?.id) { } @else { diff --git a/src/main/webapp/app/exam/overview/summary/exercises/text-exam-summary/text-exam-summary.component.spec.ts b/src/main/webapp/app/exam/overview/summary/exercises/text-exam-summary/text-exam-summary.component.spec.ts index 30f33901c291..9f01dd4eee25 100644 --- a/src/main/webapp/app/exam/overview/summary/exercises/text-exam-summary/text-exam-summary.component.spec.ts +++ b/src/main/webapp/app/exam/overview/summary/exercises/text-exam-summary/text-exam-summary.component.spec.ts @@ -14,6 +14,7 @@ import { SessionStorageService } from 'ngx-webstorage'; import { MockSyncStorage } from 'test/helpers/mocks/service/mock-sync-storage.service'; import { ProfileService } from 'app/core/layouts/profiles/shared/profile.service'; import { MockProfileService } from 'test/helpers/mocks/service/mock-profile.service'; +import { input } from '@angular/core'; describe('TextExamSummaryComponent', () => { let fixture: ComponentFixture; @@ -50,6 +51,10 @@ describe('TextExamSummaryComponent', () => { }); it('should initialize', () => { + TestBed.runInInjectionContext(() => { + component.submission = input({} as TextSubmission); + component.exercise = input({} as Exercise); + }); fixture.detectChanges(); expect(component).not.toBeNull(); expect(fixture.debugElement.nativeElement.querySelector('div').innerHTML).toContain('No submission'); @@ -57,8 +62,10 @@ describe('TextExamSummaryComponent', () => { it('should display the submission text', () => { const submissionText = 'A test submission text'; - component.submission = { text: submissionText } as TextSubmission; - component.exercise = { studentParticipations: [{ id: 1 }] } as Exercise; + TestBed.runInInjectionContext(() => { + component.submission = input({ text: submissionText } as TextSubmission); + component.exercise = input({ studentParticipations: [{ id: 1 }] } as Exercise); + }); fixture.detectChanges(); const textEditorComponent = fixture.debugElement.query(By.directive(TextEditorComponent)).componentInstance; diff --git a/src/main/webapp/app/exam/overview/summary/exercises/text-exam-summary/text-exam-summary.component.ts b/src/main/webapp/app/exam/overview/summary/exercises/text-exam-summary/text-exam-summary.component.ts index 3e6f836a7e6f..b84d6681deb9 100644 --- a/src/main/webapp/app/exam/overview/summary/exercises/text-exam-summary/text-exam-summary.component.ts +++ b/src/main/webapp/app/exam/overview/summary/exercises/text-exam-summary/text-exam-summary.component.ts @@ -1,4 +1,4 @@ -import { Component, Input } from '@angular/core'; +import { Component, input } from '@angular/core'; import { TextSubmission } from 'app/text/shared/entities/text-submission.model'; import { Exercise } from 'app/exercise/shared/entities/exercise/exercise.model'; import { TextEditorComponent } from 'app/text/overview/text-editor/text-editor.component'; @@ -9,8 +9,8 @@ import { TextEditorComponent } from 'app/text/overview/text-editor/text-editor.c imports: [TextEditorComponent], }) export class TextExamSummaryComponent { - @Input() exercise: Exercise; - @Input() submission: TextSubmission; - @Input() expandProblemStatement = false; - @Input() isAfterResultsArePublished = false; + exercise = input.required(); + submission = input.required(); + expandProblemStatement = input(false); + isAfterResultsArePublished = input(false); } diff --git a/src/main/webapp/app/exam/overview/summary/result-overview/exam-result-overview.component.html b/src/main/webapp/app/exam/overview/summary/result-overview/exam-result-overview.component.html index c0cd18bbbf08..6bbcb7c46f88 100644 --- a/src/main/webapp/app/exam/overview/summary/result-overview/exam-result-overview.component.html +++ b/src/main/webapp/app/exam/overview/summary/result-overview/exam-result-overview.component.html @@ -17,13 +17,13 @@

- @if (studentExamWithGrade?.maxBonusPoints) { + @if (studentExamWithGrade()?.maxBonusPoints) { } - @for (exercise of studentExamWithGrade?.studentExam?.exercises; track exercise; let exerciseIndex = $index) { + @for (exercise of studentExamWithGrade()?.studentExam?.exercises; track exercise; let exerciseIndex = $index) {

{{ exerciseIndex + 1 }}   - @if (exercise?.type && exerciseInfos[exercise.id!] !== undefined) { + @if (exercise?.type && exerciseInfos()[exercise.id!] !== undefined) {
- +
}   @@ -47,7 +47,7 @@

{{ exerciseService.isIncludedInScore(exercise) }} } - {{ studentExamWithGrade?.achievedPointsPerExercise?.[exercise.id!] ?? 0 }} + {{ studentExamWithGrade()?.achievedPointsPerExercise?.[exercise.id!] ?? 0 }} @if (exercise.maxPoints !== undefined) { @@ -55,13 +55,13 @@

} - @if (exerciseInfos[exercise.id!] !== undefined && exerciseInfos[exercise.id!].achievedPercentage !== undefined) { - {{ exerciseInfos[exercise.id!].achievedPercentage }} % + @if (exerciseInfos()[exercise.id!] !== undefined && exerciseInfos()[exercise.id!].achievedPercentage !== undefined) { + {{ exerciseInfos()[exercise.id!].achievedPercentage }} % } @else { - } - @if (studentExamWithGrade?.maxBonusPoints) { + @if (studentExamWithGrade()?.maxBonusPoints) { @if (exercise.bonusPoints !== undefined) { {{ @@ -86,15 +86,15 @@

{{ maxPoints }} - @if (studentExamWithGrade.studentResult.overallScoreAchieved !== undefined) { + @if (studentExamWithGrade().studentResult.overallScoreAchieved !== undefined) { {{ overallAchievedPercentageRoundedByCourseSettings }} % } @else { } - @if (studentExamWithGrade?.maxBonusPoints) { + @if (studentExamWithGrade()?.maxBonusPoints) { - {{ studentExamWithGrade?.maxBonusPoints }} + {{ studentExamWithGrade()?.maxBonusPoints }} } @@ -102,7 +102,7 @@

- @if (studentExamWithGrade?.maxBonusPoints) { + @if (studentExamWithGrade()?.maxBonusPoints) { {{ 'artemisApp.exam.examSummary.points.youAchievedWithBonus' | artemisTranslate @@ -112,7 +112,7 @@

} }} } - @if (studentExamWithGrade?.maxBonusPoints) { + @if (studentExamWithGrade()?.maxBonusPoints) { {{ 'artemisApp.exam.examSummary.points.youAchieved' | artemisTranslate @@ -122,30 +122,30 @@

} }} } - @if (studentExamWithGrade.studentResult.gradeWithBonus !== undefined) { + @if (studentExamWithGrade().studentResult.gradeWithBonus !== undefined) { {{ - 'artemisApp.exam.examSummary.points.youAchievedFromBonus.' + studentExamWithGrade.studentResult.gradeWithBonus.bonusStrategy + 'artemisApp.exam.examSummary.points.youAchievedFromBonus.' + studentExamWithGrade().studentResult.gradeWithBonus!.bonusStrategy | artemisTranslate : { - achievedBonus: studentExamWithGrade.studentResult.gradeWithBonus.bonusGrade, - bonusFromTitle: studentExamWithGrade.studentResult.gradeWithBonus.bonusFromTitle, + achievedBonus: studentExamWithGrade().studentResult.gradeWithBonus!.bonusGrade, + bonusFromTitle: studentExamWithGrade().studentResult.gradeWithBonus!.bonusFromTitle, } }} }
- @if (studentExamWithGrade?.studentResult?.gradeWithBonus?.finalGrade) { + @if (studentExamWithGrade()?.studentResult?.gradeWithBonus?.finalGrade) {
- {{ studentExamWithGrade.studentResult.overallGrade }} + {{ studentExamWithGrade().studentResult.overallGrade }}
- {{ studentExamWithGrade.studentResult.gradeWithBonus?.finalGrade }} + {{ studentExamWithGrade().studentResult.gradeWithBonus?.finalGrade }}
} @else {
- {{ studentExamWithGrade.studentResult.overallGrade }} + {{ studentExamWithGrade().studentResult.overallGrade }}
}
@@ -173,7 +173,7 @@

diff --git a/src/main/webapp/app/exam/overview/summary/result-overview/exam-result-overview.component.spec.ts b/src/main/webapp/app/exam/overview/summary/result-overview/exam-result-overview.component.spec.ts index 4d4d3f4943c0..f5f26d3f49b5 100644 --- a/src/main/webapp/app/exam/overview/summary/result-overview/exam-result-overview.component.spec.ts +++ b/src/main/webapp/app/exam/overview/summary/result-overview/exam-result-overview.component.spec.ts @@ -24,6 +24,7 @@ import { MockTranslateService } from 'test/helpers/mocks/service/mock-translate. import { TranslateService } from '@ngx-translate/core'; import { AccountService } from 'app/core/auth/account.service'; import { MockAccountService } from 'test/helpers/mocks/service/mock-account.service'; +import { input } from '@angular/core'; let fixture: ComponentFixture; let component: ExamResultOverviewComponent; @@ -185,8 +186,11 @@ describe('ExamResultOverviewComponent', () => { component = fixture.componentInstance; exam.course = course; component.gradingScaleExists = false; - component.studentExamWithGrade = studentExamWithGrade; - component.exerciseInfos = {}; + const exerciseInfos = {}; + TestBed.runInInjectionContext(() => { + component.studentExamWithGrade = input(studentExamWithGrade); + component.exerciseInfos = input(exerciseInfos); + }); }); }); @@ -195,11 +199,11 @@ describe('ExamResultOverviewComponent', () => { }); it('should handle error correctly', () => { - component.studentExamWithGrade.studentExam = undefined as any; + component.studentExamWithGrade().studentExam = undefined as any; fixture.detectChanges(); expect(fixture).not.toBeNull(); - expect(component.studentExamWithGrade.studentExam).toBeUndefined(); + expect(component.studentExamWithGrade().studentExam).toBeUndefined(); expect(component.gradingScaleExists).toBeFalse(); }); @@ -218,52 +222,52 @@ describe('ExamResultOverviewComponent', () => { fixture.detectChanges(); expect(fixture).not.toBeNull(); - expect(component.studentExamWithGrade?.achievedPointsPerExercise?.[programmingExerciseTwo.id!]).toBe(0); - expect(component.studentExamWithGrade?.achievedPointsPerExercise?.[textExercise.id!]).toBe(20); - expect(component.studentExamWithGrade?.achievedPointsPerExercise?.[notIncludedTextExercise.id!]).toBe(10); - expect(component.studentExamWithGrade?.achievedPointsPerExercise?.[bonusTextExercise.id!]).toBe(10); - expect(component.studentExamWithGrade?.achievedPointsPerExercise?.[quizExercise.id!]).toBe(2); - expect(component.studentExamWithGrade?.achievedPointsPerExercise?.[modelingExercise.id!]).toBe(3.33); - expect(component.studentExamWithGrade?.achievedPointsPerExercise?.[programmingExercise.id!]).toBe(0); + expect(component.studentExamWithGrade()?.achievedPointsPerExercise?.[programmingExerciseTwo.id!]).toBe(0); + expect(component.studentExamWithGrade()?.achievedPointsPerExercise?.[textExercise.id!]).toBe(20); + expect(component.studentExamWithGrade()?.achievedPointsPerExercise?.[notIncludedTextExercise.id!]).toBe(10); + expect(component.studentExamWithGrade()?.achievedPointsPerExercise?.[bonusTextExercise.id!]).toBe(10); + expect(component.studentExamWithGrade()?.achievedPointsPerExercise?.[quizExercise.id!]).toBe(2); + expect(component.studentExamWithGrade()?.achievedPointsPerExercise?.[modelingExercise.id!]).toBe(3.33); + expect(component.studentExamWithGrade()?.achievedPointsPerExercise?.[programmingExercise.id!]).toBe(0); expect(component.overallAchievedPoints).toBe(35.33); expect(component.maxPoints).toBe(40); - expect(component.studentExamWithGrade?.maxBonusPoints).toBe(20); + expect(component.studentExamWithGrade()?.maxBonusPoints).toBe(20); expect(component.getMaxNormalAndBonusPointsSum()).toBe(60); }); it('should display 0 if no exercises are present', () => { - component.studentExamWithGrade.studentExam!.exercises = []; - component.studentExamWithGrade.maxPoints = 0; - component.studentExamWithGrade.studentResult.overallPointsAchieved = 0; + component.studentExamWithGrade().studentExam!.exercises = []; + component.studentExamWithGrade().maxPoints = 0; + component.studentExamWithGrade().studentResult.overallPointsAchieved = 0; fixture.detectChanges(); expect(fixture).not.toBeNull(); expect(component.overallAchievedPoints).toBe(0); expect(component.maxPoints).toBe(0); - expect(component.studentExamWithGrade?.maxBonusPoints).toBe(20); + expect(component.studentExamWithGrade()?.maxBonusPoints).toBe(20); expect(component.getMaxNormalAndBonusPointsSum()).toBe(20); }); describe('should evaluate showIncludedInScoreColumn', () => { it('to false if all exercises are included in the score', () => { const onlyIncludedExercises = [textExercise, quizExercise, modelingExercise, programmingExercise]; - component.studentExamWithGrade.studentExam!.exercises = onlyIncludedExercises; + component.studentExamWithGrade().studentExam!.exercises = onlyIncludedExercises; expect(component.containsExerciseThatIsNotIncludedCompletely()).toBeFalse(); }); it('to true if exercise is excluded', () => { const onlyIncludedExercises = [textExercise, quizExercise, modelingExercise, programmingExercise, notIncludedTextExercise]; - component.studentExamWithGrade.studentExam!.exercises = onlyIncludedExercises; + component.studentExamWithGrade().studentExam!.exercises = onlyIncludedExercises; expect(component.containsExerciseThatIsNotIncludedCompletely()).toBeTrue(); }); it('to true if bonus exercise is included', () => { const onlyIncludedExercises = [textExercise, quizExercise, modelingExercise, programmingExercise, bonusTextExercise]; - component.studentExamWithGrade.studentExam!.exercises = onlyIncludedExercises; + component.studentExamWithGrade().studentExam!.exercises = onlyIncludedExercises; expect(component.containsExerciseThatIsNotIncludedCompletely()).toBeTrue(); }); @@ -299,8 +303,10 @@ describe('ExamResultOverviewComponent', () => { it('should be called when overallScoreAchieved is not defined in DTO from server', () => { //@ts-ignore spying on private method const summedAchievedExerciseScorePercentageSpy = jest.spyOn(component, 'summedAchievedExerciseScorePercentage'); - component.studentExamWithGrade.studentResult.overallScoreAchieved = undefined; - component.exerciseInfos = {}; + component.studentExamWithGrade().studentResult.overallScoreAchieved = undefined; + TestBed.runInInjectionContext(() => { + component.exerciseInfos = input({}); + }); component.ngOnInit(); @@ -310,8 +316,10 @@ describe('ExamResultOverviewComponent', () => { it('should be called when overallScoreAchieved is 0 (default value, might be set as initial value because not defined from server DTO)', () => { //@ts-ignore spying on private method const summedAchievedExerciseScorePercentageSpy = jest.spyOn(component, 'summedAchievedExerciseScorePercentage'); - component.studentExamWithGrade.studentResult.overallScoreAchieved = 0; - component.exerciseInfos = {}; + component.studentExamWithGrade().studentResult.overallScoreAchieved = 0; + TestBed.runInInjectionContext(() => { + component.exerciseInfos = input({}); + }); component.ngOnInit(); @@ -328,7 +336,7 @@ describe('ExamResultOverviewComponent', () => { }; //@ts-ignore missing attributes component.exerciseInfos = exerciseInfosWithAchievedPercentage; - component.studentExamWithGrade.studentResult.overallScoreAchieved = undefined; + component.studentExamWithGrade().studentResult.overallScoreAchieved = undefined; component.ngOnInit(); diff --git a/src/main/webapp/app/exam/overview/summary/result-overview/exam-result-overview.component.ts b/src/main/webapp/app/exam/overview/summary/result-overview/exam-result-overview.component.ts index e7d78b15fcd5..28568d83e5a1 100644 --- a/src/main/webapp/app/exam/overview/summary/result-overview/exam-result-overview.component.ts +++ b/src/main/webapp/app/exam/overview/summary/result-overview/exam-result-overview.component.ts @@ -1,4 +1,4 @@ -import { ChangeDetectorRef, Component, Input, OnChanges, OnInit, inject } from '@angular/core'; +import { ChangeDetectorRef, Component, OnChanges, OnInit, inject, input } from '@angular/core'; import { IncludedInOverallScore } from 'app/exercise/shared/entities/exercise/exercise.model'; import { ArtemisServerDateService } from 'app/shared/service/server-date.service'; import { ExerciseService } from 'app/exercise/services/exercise.service'; @@ -41,11 +41,11 @@ export class ExamResultOverviewComponent implements OnInit, OnChanges { readonly IncludedInOverallScore = IncludedInOverallScore; readonly BonusStrategy = BonusStrategy; - @Input() studentExamWithGrade: StudentExamWithGradeDTO; - @Input() isGradingKeyCollapsed = true; - @Input() isBonusGradingKeyCollapsed = true; - @Input() exerciseInfos: Record; - @Input() isTestRun = false; + studentExamWithGrade = input.required(); + isGradingKeyCollapsed = input(true); + isBonusGradingKeyCollapsed = input(true); + exerciseInfos = input.required>(); + isTestRun = input(false); gradingScaleExists = false; isBonus = false; @@ -94,14 +94,14 @@ export class ExamResultOverviewComponent implements OnInit, OnChanges { } private areResultsPublished() { - return isExamResultPublished(this.isTestRun, this.studentExamWithGrade?.studentExam?.exam, this.serverDateService); + return isExamResultPublished(this.isTestRun(), this.studentExamWithGrade()?.studentExam?.exam, this.serverDateService); } private updateLocalVariables() { this.showResultOverview = !!(this.areResultsPublished() && this.hasAtLeastOneResult()); this.showIncludedInScoreColumn = this.containsExerciseThatIsNotIncludedCompletely(); - this.maxPoints = this.studentExamWithGrade?.maxPoints ?? 0; - this.isBonusGradingKeyDisplayed = this.studentExamWithGrade.studentResult.gradeWithBonus?.bonusGrade != undefined; + this.maxPoints = this.studentExamWithGrade()?.maxPoints ?? 0; + this.isBonusGradingKeyDisplayed = this.studentExamWithGrade().studentResult.gradeWithBonus?.bonusGrade != undefined; this.overallAchievedPoints = this.getOverallAchievedPoints(); this.overallAchievedPercentageRoundedByCourseSettings = this.getOverallAchievedPercentageRoundedByCourseSettings(); @@ -111,14 +111,14 @@ export class ExamResultOverviewComponent implements OnInit, OnChanges { * used as fallback if not pre-calculated by the server */ private sumExerciseScores() { - return (this.studentExamWithGrade.studentExam?.exercises ?? []).reduce((exerciseScoreSum, exercise) => { - const achievedPoints = this.studentExamWithGrade?.achievedPointsPerExercise?.[exercise.id!] ?? 0; + return (this.studentExamWithGrade().studentExam?.exercises ?? []).reduce((exerciseScoreSum, exercise) => { + const achievedPoints = this.studentExamWithGrade()?.achievedPointsPerExercise?.[exercise.id!] ?? 0; return exerciseScoreSum + achievedPoints; }, 0); } private getOverallAchievedPoints() { - const overallAchievedPoints = this.studentExamWithGrade?.studentResult.overallPointsAchieved; + const overallAchievedPoints = this.studentExamWithGrade()?.studentResult.overallPointsAchieved; if (overallAchievedPoints === undefined || overallAchievedPoints === 0) { return this.sumExerciseScores(); } @@ -127,12 +127,12 @@ export class ExamResultOverviewComponent implements OnInit, OnChanges { } private getOverallAchievedPercentageRoundedByCourseSettings() { - let overallScoreAchieved = this.studentExamWithGrade.studentResult.overallScoreAchieved; + let overallScoreAchieved = this.studentExamWithGrade().studentResult.overallScoreAchieved; if (overallScoreAchieved === undefined || overallScoreAchieved === 0) { overallScoreAchieved = this.summedAchievedExerciseScorePercentage(); } - return roundScorePercentSpecifiedByCourseSettings(overallScoreAchieved / 100, this.studentExamWithGrade.studentExam?.exam?.course); + return roundScorePercentSpecifiedByCourseSettings(overallScoreAchieved / 100, this.studentExamWithGrade().studentExam?.exam?.course); } /** @@ -159,7 +159,7 @@ export class ExamResultOverviewComponent implements OnInit, OnChanges { * -> displayed if at least one exercise is not included in the overall score */ containsExerciseThatIsNotIncludedCompletely(): boolean { - for (const exercise of this.studentExamWithGrade?.studentExam?.exercises ?? []) { + for (const exercise of this.studentExamWithGrade()?.studentExam?.exercises ?? []) { if (exercise.includedInOverallScore !== IncludedInOverallScore.INCLUDED_COMPLETELY) { return true; } @@ -172,11 +172,11 @@ export class ExamResultOverviewComponent implements OnInit, OnChanges { * Sets the student's exam grade if a grading scale exists for the exam */ setExamGrade() { - if (this.studentExamWithGrade?.studentResult?.overallGrade != undefined) { + if (this.studentExamWithGrade()?.studentResult?.overallGrade != undefined) { this.gradingScaleExists = true; - this.grade = this.studentExamWithGrade.studentResult.overallGrade; - this.isBonus = this.studentExamWithGrade.gradeType === GradeType.BONUS; - this.hasPassed = !!this.studentExamWithGrade.studentResult.hasPassed; + this.grade = this.studentExamWithGrade().studentResult.overallGrade; + this.isBonus = this.studentExamWithGrade().gradeType === GradeType.BONUS; + this.hasPassed = !!this.studentExamWithGrade().studentResult.hasPassed; this.changeDetector.detectChanges(); } } @@ -185,7 +185,7 @@ export class ExamResultOverviewComponent implements OnInit, OnChanges { * Returns the sum of max. achievable normal and bonus points. It is not possible to exceed this value. */ getMaxNormalAndBonusPointsSum(): number { - const maxAchievableBonusPoints = this.studentExamWithGrade?.maxBonusPoints ?? 0; + const maxAchievableBonusPoints = this.studentExamWithGrade()?.maxBonusPoints ?? 0; return this.maxPoints + maxAchievableBonusPoints; } @@ -216,7 +216,7 @@ export class ExamResultOverviewComponent implements OnInit, OnChanges { } private hasAtLeastOneResult(): boolean { - const exercises = this.studentExamWithGrade?.studentExam?.exercises; + const exercises = this.studentExamWithGrade()?.studentExam?.exercises; // eslint-disable-next-line @typescript-eslint/no-non-null-asserted-optional-chain if (exercises?.length! > 0) { // eslint-disable-next-line @typescript-eslint/no-non-null-asserted-optional-chain diff --git a/src/main/webapp/app/exam/overview/timer/exam-timer.component.html b/src/main/webapp/app/exam/overview/timer/exam-timer.component.html index 079501bd5326..3e31e8e68407 100644 --- a/src/main/webapp/app/exam/overview/timer/exam-timer.component.html +++ b/src/main/webapp/app/exam/overview/timer/exam-timer.component.html @@ -1,5 +1,5 @@
- {{ 'artemisApp.examParticipation.' + (isEndView ? 'timerEndView' : 'timer') | artemisTranslate }} + {{ 'artemisApp.examParticipation.' + (isEndView() ? 'timerEndView' : 'timer') | artemisTranslate }}
{{ displayTime$ | async }} diff --git a/src/main/webapp/app/exam/overview/timer/exam-timer.component.spec.ts b/src/main/webapp/app/exam/overview/timer/exam-timer.component.spec.ts index 03ff0f55d2fb..106598e0e909 100644 --- a/src/main/webapp/app/exam/overview/timer/exam-timer.component.spec.ts +++ b/src/main/webapp/app/exam/overview/timer/exam-timer.component.spec.ts @@ -8,6 +8,7 @@ import { MockPipe } from 'ng-mocks'; import { TranslateService } from '@ngx-translate/core'; import { MockTranslateService } from 'test/helpers/mocks/service/mock-translate.service'; import { provideHttpClient } from '@angular/common/http'; +import { input } from '@angular/core'; describe('ExamTimerComponent', () => { let component: ExamTimerComponent; @@ -26,12 +27,14 @@ describe('ExamTimerComponent', () => { fixture = TestBed.createComponent(ExamTimerComponent); component = fixture.componentInstance; dateService = TestBed.inject(ArtemisServerDateService); - component.endDate = inFuture; + TestBed.runInInjectionContext(() => { + component.endDate = input(inFuture); + component.criticalTime = input(dayjs.duration(200)); + }); }); it('should call ngOnInit', () => { jest.spyOn(dateService, 'now').mockReturnValue(now); - component.criticalTime = dayjs.duration(200); component.ngOnInit(); expect(component).not.toBeNull(); expect(component.isCriticalTime).toBeTrue(); @@ -56,8 +59,10 @@ describe('ExamTimerComponent', () => { }); it('should update time in the template correctly', fakeAsync(() => { - // 30 minutes left - component.endDate = dayjs(now).add(30, 'minutes'); + TestBed.runInInjectionContext(() => { + // 30 minutes left + component.endDate = input(dayjs(now).add(30, 'minutes')); + }); jest.spyOn(dateService, 'now').mockReturnValueOnce(dayjs(now)).mockReturnValueOnce(dayjs(now)).mockReturnValueOnce(dayjs(now).add(5, 'minutes')); fixture.detectChanges(); tick(); diff --git a/src/main/webapp/app/exam/overview/timer/exam-timer.component.ts b/src/main/webapp/app/exam/overview/timer/exam-timer.component.ts index c18f965a2158..dd2431d74ac7 100644 --- a/src/main/webapp/app/exam/overview/timer/exam-timer.component.ts +++ b/src/main/webapp/app/exam/overview/timer/exam-timer.component.ts @@ -1,4 +1,4 @@ -import { Component, EventEmitter, HostBinding, Input, OnDestroy, OnInit, Output, inject } from '@angular/core'; +import { Component, HostBinding, OnDestroy, OnInit, inject, input, output } from '@angular/core'; import { Observable, Subject, timer } from 'rxjs'; import { distinctUntilChanged, first, map, takeUntil } from 'rxjs/operators'; import dayjs from 'dayjs/esm'; @@ -20,22 +20,18 @@ export class ExamTimerComponent implements OnInit, OnDestroy { @HostBinding('class.row') readonly row = true; - @Input() - endDate: dayjs.Dayjs; + endDate = input.required(); - @Input() - criticalTime: plugin.Duration; + criticalTime = input.required(); - @Input() - isEndView = false; + isEndView = input(false); - @Output() - timerAboutToEnd: EventEmitter = new EventEmitter(); + timerAboutToEnd = output(); isCriticalTime: boolean; destroy$: Subject = new Subject(); - private timer: Observable = timer(0, 100).pipe(map(() => dayjs.duration(this.endDate.diff(this.serverDateService.now())))); + private timer: Observable = timer(0, 100).pipe(map(() => dayjs.duration(this.endDate().diff(this.serverDateService.now())))); displayTime$ = this.timer.pipe( map((timeLeft: plugin.Duration) => this.updateDisplayTime(timeLeft)), @@ -61,7 +57,7 @@ export class ExamTimerComponent implements OnInit, OnDestroy { } ngOnInit(): void { - const duration = dayjs.duration(this.endDate.diff(this.serverDateService.now())); + const duration = dayjs.duration(this.endDate().diff(this.serverDateService.now())); this.setIsCriticalTime(duration); } @@ -82,7 +78,7 @@ export class ExamTimerComponent implements OnInit, OnDestroy { setIsCriticalTime(timeDiff: plugin.Duration) { const clonedTimeDiff = cloneDeep(timeDiff); - if (this.criticalTime && clonedTimeDiff.subtract(this.criticalTime).asMilliseconds() < 0) { + if (this.criticalTime() && clonedTimeDiff.subtract(this.criticalTime()).asMilliseconds() < 0) { this.isCriticalTime = true; } }