Grading: Scroll down to complaint form after clicking on a complain button

src/main/webapp/app/complaints/complaints-for-students/complaints-student-view.component.html

@@ -16,14 +16,15 @@
                 }
             </p>
         }
+
         @if (isCorrectUserToFileAction && !complaint) {
             <div class="mt-4">
                 @if (isExamMode || (course?.maxComplaints && course!.maxComplaints! > 0)) {
                     <button
                         id="complain"
                         class="btn btn-primary"
                         [class.not-allowed]="(!isExamMode && remainingNumberOfComplaints === 0) || !timeOfComplaintValid"
-                        (click)="formComplaintType = ComplaintType.COMPLAINT"
+                        (click)="startComplaint(ComplaintType.COMPLAINT)"
                         [disabled]="(!isExamMode && remainingNumberOfComplaints === 0) || !timeOfComplaintValid"
                         title="{{
                             (!isExamMode && remainingNumberOfComplaints === 0) || !timeOfComplaintValid
@@ -37,14 +38,15 @@
                     <button
                         class="btn btn-primary ms-1"
                         [class.not-allowed]="!timeOfFeedbackRequestValid"
-                        (click)="formComplaintType = ComplaintType.MORE_FEEDBACK"
+                        (click)="startComplaint(ComplaintType.MORE_FEEDBACK)"
                         [disabled]="!timeOfFeedbackRequestValid"
                         title="{{ !timeOfFeedbackRequestValid ? ('artemisApp.moreFeedback.notAllowedTooltip' | artemisTranslate) : '' }}"
                         jhiTranslate="artemisApp.moreFeedback.button"
                     ></button>
                 }
             </div>
         }
+        <div #complaintScrollpoint></div>
         @if (!complaint && formComplaintType) {
             <div class="row">
                 <jhi-complaint-form

src/main/webapp/app/complaints/complaints-for-students/complaints-student-view.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
 import { Exercise, getCourseFromExercise } from 'app/entities/exercise.model';
 import { Complaint, ComplaintType } from 'app/entities/complaint.model';
 import { ComplaintService } from 'app/complaints/complaint.service';
@@ -28,6 +28,8 @@ export class ComplaintsStudentViewComponent implements OnInit {
     // flag to indicate exam test run. Default set to false.
     @Input() testRun = false;
 
+    @ViewChild('complaintScrollpoint') complaintScrollpoint: ElementRef;
+
     submission: Submission;
     complaint: Complaint;
     course?: Course;
@@ -149,4 +151,20 @@ export class ComplaintsStudentViewComponent implements OnInit {
         }
         return false;
     }
+
+    /**
+     * Opens the complaint form (for a given complaint type) for the student to submit a complaint and scrolls to the bottom of the page to make the form visible
+     */
+    startComplaint(complainType: ComplaintType): void {
+        this.formComplaintType = complainType;
+        // Wait for the view to update
+        setTimeout(() => this.scrollToComplaint(), 0);
+    }
+
+    /**
+     * Scrolls to the complaint form
+     */
+    private scrollToComplaint(): void {
+        this.complaintScrollpoint.nativeElement.scrollIntoView({ behavior: 'smooth' });
+    }
 }

src/test/javascript/spec/component/complaints/complaint-student-view.component.spec.ts

@@ -25,6 +25,8 @@ import { AssessmentType } from 'app/entities/assessment-type.model';
 import { TranslateDirective } from 'app/shared/language/translate.directive';
 import { CourseManagementService } from 'app/course/manage/course-management.service';
 import { MockCourseManagementService } from '../../helpers/mocks/service/mock-course-management.service';
+import { ElementRef } from '@angular/core';
+import { ComplaintType } from 'app/entities/complaint.model';
 
 describe('ComplaintsStudentViewComponent', () => {
     const complaintTimeLimitDays = 7;
@@ -146,6 +148,22 @@ describe('ComplaintsStudentViewComponent', () => {
             expect(userMock).toHaveBeenCalledOnce();
         }));
 
+        it('should open complaint form and focus on complaint form when pressing complaint', fakeAsync(() => {
+            // Mock complaintScrollpoint
+            const scrollIntoViewMock = jest.fn();
+            component.complaintScrollpoint = {
+                nativeElement: {
+                    scrollIntoView: scrollIntoViewMock,
+                },
+            } as ElementRef;
+
+            component.startComplaint(ComplaintType.COMPLAINT);
+            expect(component.formComplaintType).toBe(ComplaintType.COMPLAINT);
+            // Wait for setTimeout to execute
+            tick();
+            expect(scrollIntoViewMock).toHaveBeenCalledWith({ behavior: 'smooth' });
+        }));
+
         it('should be visible on test run', fakeAsync(() => {
             const now = dayjs();
             const examWithFutureReview: Exam = { examStudentReviewStart: dayjs(now).add(1, 'day'), examStudentReviewEnd: dayjs(now).add(2, 'day') } as Exam;
@@ -204,6 +222,38 @@ describe('ComplaintsStudentViewComponent', () => {
             expect(component.complaint).toStrictEqual(complaint);
         }));
 
+        it('should open complaint form and focus on complaint form when pressing complaint', fakeAsync(() => {
+            // Mock complaintScrollpoint
+            const scrollIntoViewMock = jest.fn();
+            component.complaintScrollpoint = {
+                nativeElement: {
+                    scrollIntoView: scrollIntoViewMock,
+                },
+            } as ElementRef;
+
+            component.startComplaint(ComplaintType.COMPLAINT);
+            expect(component.formComplaintType).toBe(ComplaintType.COMPLAINT);
+            // Wait for setTimeout to execute
+            tick();
+            expect(scrollIntoViewMock).toHaveBeenCalledWith({ behavior: 'smooth' });
+        }));
+
+        it('should open complaint form and focus on complaint form when pressing more feedback', fakeAsync(() => {
+            // Mock complaintScrollpoint
+            const scrollIntoViewMock = jest.fn();
+            component.complaintScrollpoint = {
+                nativeElement: {
+                    scrollIntoView: scrollIntoViewMock,
+                },
+            } as ElementRef;
+
+            component.startComplaint(ComplaintType.MORE_FEEDBACK);
+            expect(component.formComplaintType).toBe(ComplaintType.MORE_FEEDBACK);
+            // Wait for setTimeout to execute
+            tick();
+            expect(scrollIntoViewMock).toHaveBeenCalledWith({ behavior: 'smooth' });
+        }));
+
         it('should not be available if before or at assessment due date', fakeAsync(() => {
             const exercise: Exercise = { id: 1, teamMode: false, course, assessmentDueDate: dayjs() } as Exercise;
             const resultMatchingDate: Result = { id: 1, completionDate: dayjs(exercise.assessmentDueDate) } as Result;