[#12653] Copy course modal: Mandatory fields not highlighted

src/web/app/components/copy-course-modal/__snapshots__/copy-course-modal.component.spec.ts.snap

@@ -7,6 +7,8 @@ exports[`CopyCourseModalComponent should snap when copying from other sessions 1
   activeCourses={[Function Array]}
   activeModal={[Function NgbActiveModal]}
   allCourses={[Function Array]}
+  courseIdEmptyError="false"
+  courseNameEmptyError="false"
   courseToFeedbackSession={[Function Object]}
   fetchFeedbackSessionsEvent={[Function EventEmitter_]}
   institutes={[Function Array]}
@@ -199,6 +201,8 @@ exports[`CopyCourseModalComponent should snap with default fields 1`] = `
   activeCourses={[Function Array]}
   activeModal={[Function NgbActiveModal]}
   allCourses={[Function Array]}
+  courseIdEmptyError="false"
+  courseNameEmptyError="false"
   courseToFeedbackSession={[Function Object]}
   fetchFeedbackSessionsEvent={[Function EventEmitter_]}
   institutes={[Function Array]}
@@ -380,6 +384,8 @@ exports[`CopyCourseModalComponent should snap with some course id 1`] = `
   activeCourses={[Function Array]}
   activeModal={[Function NgbActiveModal]}
   allCourses={[Function Array]}
+  courseIdEmptyError="false"
+  courseNameEmptyError="false"
   courseToFeedbackSession={[Function Object]}
   fetchFeedbackSessionsEvent={[Function EventEmitter_]}
   institutes={[Function Array]}

src/web/app/components/copy-course-modal/copy-course-modal.component.html

@@ -13,15 +13,19 @@ <h5 class="modal-title">
       </div>
       <div class="form-group">
         <label>Course ID:</label>
-        <input [class.invalid]="newCourseIdIsConflicting" id="copy-course-id" type="text" class="form-control" placeholder="e.g. CS3215-2013Semester1"
-          [(ngModel)]="newCourseId" [maxlength]="COURSE_ID_MAX_LENGTH" (focus)="this.newCourseIdIsConflicting = false">
+        <input [class.invalid]="newCourseIdIsConflicting || courseIdEmptyError" id="copy-course-id" type="text" class="form-control" placeholder="e.g. CS3215-2013Semester1"
+          [(ngModel)]="newCourseId" [maxlength]="COURSE_ID_MAX_LENGTH" (focus)="this.newCourseIdIsConflicting = false; courseIdEmptyError = false" (ngModelChange)="onCourseIdChange($event)">
         <span>{{ COURSE_ID_MAX_LENGTH - newCourseId.length }} characters left</span>
+        <div *ngIf="courseIdEmptyError" class="text-danger">
+          <i class="fa fa-exclamation-circle" aria-hidden="true"></i>The field Course ID should not be empty.</div>
       </div>
       <div class="form-group">
         <label>Course Name:</label>
         <input id="copy-course-name" class="form-control" type="text" placeholder="e.g. Software Engineering" [(ngModel)]="newCourseName"
-          [maxlength]="COURSE_NAME_MAX_LENGTH"/>
+          [maxlength]="COURSE_NAME_MAX_LENGTH" (focus)="courseNameEmptyError = false" (ngModelChange)="onCourseNameChange($event)"/>
         <span>{{ COURSE_NAME_MAX_LENGTH - newCourseName.length }} characters left</span>
+        <div *ngIf="courseNameEmptyError" class="text-danger">
+          <i class="fa fa-exclamation-circle" aria-hidden="true"></i>The field Course Name should not be empty.</div>
       </div>
       <div class="form-group">
         <label class="ngb-tooltip-class">

src/web/app/components/copy-course-modal/copy-course-modal.component.spec.ts

@@ -44,6 +44,41 @@ describe('CopyCourseModalComponent', () => {
     fixture.detectChanges();
   });
 
+   it('should set courseIdEmptyError to true if Course ID is empty after user clears input', () => {
+      component.newCourseId = 'Test Course ID';
+      fixture.detectChanges();
+      // Simulate clearing the input
+      component.newCourseId = '';
+      component.onCourseIdChange(component.newCourseId);
+      fixture.detectChanges();
+      // Verify that courseIdEmptyError is set to true
+      expect(component.courseIdEmptyError).toBeTruthy();
+    });
+
+   it('should set courseNameEmptyError to true if Course Name is empty after user clears input', () => {
+     component.newCourseName = 'Test Course Name';
+     fixture.detectChanges();
+     component.newCourseName = '';
+     component.onCourseNameChange(component.newCourseName);
+     fixture.detectChanges();
+
+     expect(component.courseNameEmptyError).toBeTruthy();
+   });
+
+   it('should not set courseIdEmptyError if Course ID is provided', () => {
+      component.newCourseId = 'CS101';
+      component.onCourseIdChange(component.newCourseId);
+      fixture.detectChanges();
+      expect(component.courseIdEmptyError).toBeFalsy();
+   });
+
+   it('should not set courseNameEmptyError if Course Name is provided', () => {
+     component.newCourseName = 'Software Engineering';
+     component.onCourseNameChange(component.newCourseName);
+     fixture.detectChanges();
+     expect(component.courseNameEmptyError).toBeFalsy();
+   });
+
   it('should create', () => {
     expect(component).toBeTruthy();
   });
@@ -171,13 +206,36 @@ describe('CopyCourseModalComponent', () => {
     ]);
   });
 
-  it('should call showErrorToast when copying with no new courseId and name', () => {
-    const spyStatusMessageService: SpyInstance = jest.spyOn(statusMessageService, 'showErrorToast');
-    component.copy();
-    expect(spyStatusMessageService)
-      .toHaveBeenCalledWith('Please make sure you have filled in both Course ID and Name before adding the course!');
+  it('should display error message when copying with null new courseId', () => {
+    component.newCourseId = 'Test02';
+    fixture.detectChanges();
+
+    component.newCourseId = '';
+    component.onCourseIdChange(component.newCourseId);
+    fixture.detectChanges();
+
+    const errorMessage = fixture.debugElement.query(By.css('.text-danger'));
+
+      // Verify that the error message element exists and contains the correct text
+    expect(errorMessage).toBeTruthy(); // Ensure the element is present
+    expect(errorMessage.nativeElement.textContent).toContain('The field Course ID should not be empty.');
   });
 
+    it('should display error message when copying with null new courseName', () => {
+      component.newCourseName = 'Test10';
+      fixture.detectChanges();
+
+      component.newCourseName = '';
+      component.onCourseNameChange(component.newCourseId);
+      fixture.detectChanges();
+
+      const errorMessage = fixture.debugElement.query(By.css('.text-danger'));
+
+        // Verify that the error message element exists and contains the correct text
+      expect(errorMessage).toBeTruthy(); // Ensure the element is present
+      expect(errorMessage.nativeElement.textContent).toContain('The field Course Name should not be empty.');
+    });
+
   it('should call showErrorToast when newCourseId is a duplicate', () => {
     const testCourses: Course[] = [
       {

src/web/app/components/copy-course-modal/copy-course-modal.component.ts

@@ -40,6 +40,8 @@
 
   isCopyFromOtherSession: boolean = false;
   newCourseIdIsConflicting: boolean = false;
+  courseIdEmptyError: boolean = false;
+  courseNameEmptyError: boolean = false;
   institutes: string[] = [];
   timezones: Timezone[] = [];
   newTimezone: string = '';
@@ -68,15 +70,19 @@
       this.newCourseInstitute = this.institutes[0];
     }
     this.newTimezone = this.timezoneService.guessTimezone();
+
+    this.courseIdEmptyError = false;
+    this.courseNameEmptyError = false;
   }
 
   /**
    * Fires the copy event.
    */
   copy(): void {
-    if (!this.newCourseId || !this.newCourseName) {
-      this.statusMessageService.showErrorToast(
-          'Please make sure you have filled in both Course ID and Name before adding the course!');
+    this.courseIdEmptyError = !this.newCourseId;
+    this.courseNameEmptyError = !this.newCourseName;
+
+    if (this.courseIdEmptyError || this.courseNameEmptyError) {
       return;
     }
 
@@ -100,6 +106,16 @@
 
     this.activeModal.close(result);
   }
+  /**
+    * Real time check user input, triggered by ngModelChange
+    */
+  onCourseIdChange(value: string): void {
+    this.courseIdEmptyError = !value.trim();
+   }
+
+  onCourseNameChange(value: string): void {
+    this.courseNameEmptyError = !value.trim();
+  }
 
   /**
    * Toggles selection of a feedback session.