fix scrolling

ls1intum · Jan 9, 2025 · bf3d30f · bf3d30f
1 parent c1065cd
commit bf3d30f
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 8 deletions.
diff --git a/...p/course/plagiarism-cases/instructor-view/plagiarism-cases-instructor-view.component.html b/...p/course/plagiarism-cases/instructor-view/plagiarism-cases-instructor-view.component.html
@@ -11,7 +11,7 @@ <h4 jhiTranslate="artemisApp.plagiarism.cases.pageSubtitle"></h4>
             </div>
         </div>
         @for (exercise of exercisesWithPlagiarismCases; track exercise.id; let exerciseIndex = $index) {
-            <div #plagExerciseElement  class="card mb-2">
+            <div #plagExerciseElement class="card mb-2" [id]="'exercise-with-plagiarism-case-' + exercise.id">
                 <div class="card-header">
                     <div class="row">
                         <div class="col-3">

diff --git a/...app/course/plagiarism-cases/instructor-view/plagiarism-cases-instructor-view.component.ts b/...app/course/plagiarism-cases/instructor-view/plagiarism-cases-instructor-view.component.ts
@@ -17,7 +17,6 @@ import { AlertService } from 'app/core/util/alert.service';
 export class PlagiarismCasesInstructorViewComponent implements OnInit {
     courseId: number;
     examId?: number;
-    exerciseId?: number;
     plagiarismCases: PlagiarismCase[] = [];
     groupedPlagiarismCases: GroupedPlagiarismCases;
     exercisesWithPlagiarismCases: Exercise[] = [];
@@ -36,18 +35,19 @@ export class PlagiarismCasesInstructorViewComponent implements OnInit {
         private route: ActivatedRoute,
         private alertService: AlertService,
     ) {
+        // effect needs to be in constructor context, due to the possibility of ngOnInit being called from a non-injection
+        //context
         effect(() => {
-            if (this.exerciseId) {
-                this.scrollToExercise();
+            const exerciseId = Number(this.route.snapshot.queryParamMap?.get('exerciseId'));
+            if (exerciseId) {
+                this.scrollToExerciseAfterViewInit(exerciseId);
             }
         });
     }
 
     ngOnInit(): void {
         this.courseId = Number(this.route.snapshot.paramMap.get('courseId'));
         this.examId = Number(this.route.snapshot.paramMap.get('examId'));
-        this.exerciseId = Number(this.route.snapshot.queryParamMap?.get('exerciseId'));
-
         const plagiarismCasesForInstructor$ = this.examId
             ? this.plagiarismCasesService.getExamPlagiarismCasesForInstructor(this.courseId, this.examId)
             : this.plagiarismCasesService.getCoursePlagiarismCasesForInstructor(this.courseId);
@@ -60,8 +60,11 @@ export class PlagiarismCasesInstructorViewComponent implements OnInit {
         });
     }
 
-    scrollToExercise() {
-        const element = this.exerciseWithPlagCasesElements().find((elem) => elem.nativeElement.id === 'exercise-with-plagiarism-case-' + this.exerciseId);
+    /**
+     * scroll to the exercise with
+     */
+    scrollToExerciseAfterViewInit(exerciseId: number) {
+        const element = this.exerciseWithPlagCasesElements().find((elem) => elem.nativeElement.id === 'exercise-with-plagiarism-case-' + exerciseId);
         if (element) {
             element.nativeElement.scrollIntoView({
                 behavior: 'smooth',