[#12679] & [#12653] Copying feedback session: Name for copied session should not be whitespace & Copy course modal: Mandatory fields not highlighted

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

@@ -13,14 +13,22 @@ <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" id="copy-course-id" name="Id" type="text" class="form-control" placeholder="e.g. CS3215-2013Semester1"
+          #Id="ngModel" [(ngModel)]="newCourseId" [maxlength]="COURSE_ID_MAX_LENGTH" (focus)="this.newCourseIdIsConflicting = false" required>
+          <div [hidden]="Id.valid || (Id.pristine && Id.untouched)" class="invalid-field" required>
+            <i class="fa fa-exclamation-circle" aria-hidden="true"></i>
+            The field Course ID should not be empty.
+          </div>
         <span>{{ COURSE_ID_MAX_LENGTH - newCourseId.length }} characters left</span>
       </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"/>
+        <input id="copy-course-name" name="courseName" class="form-control" type="text" placeholder="e.g. Software Engineering" #courseName="ngModel" [(ngModel)]="newCourseName"
+          [maxlength]="COURSE_NAME_MAX_LENGTH" required/>
+          <div [hidden]="courseName.valid || (courseName.pristine && courseName.untouched)" class="invalid-field" required>
+            <i class="fa fa-exclamation-circle" aria-hidden="true"></i>
+            The field Course Name should not be empty.
+          </div>
         <span>{{ COURSE_NAME_MAX_LENGTH - newCourseName.length }} characters left</span>
       </div>
       <div class="form-group">

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

@@ -7,3 +7,8 @@ hr.solid-divider {
 .invalid {
   border: red 1px solid;
 }
+
+.invalid-field {
+  padding-top: 5px;
+  color: #b50000;
+}

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

@@ -61,7 +61,7 @@ exports[`CopySessionModalComponent should snap with default fields 1`] = `
               aria-hidden="true"
               class="fa fa-exclamation-circle"
             />
-             The field "Name for copied session" should not be empty. 
+             The field "Name for copied session" should not be empty.
           </div>
           <span>
             64 characters left
@@ -151,7 +151,7 @@ exports[`CopySessionModalComponent should snap with some session and courses can
               aria-hidden="true"
               class="fa fa-exclamation-circle"
             />
-             The field "Name for copied session" should not be empty. 
+             The field "Name for copied session" should not be empty.
           </div>
           <span>
             52 characters left
@@ -174,11 +174,11 @@ exports[`CopySessionModalComponent should snap with some session and courses can
             >
               Test01
             </span>
-            ] : Sample Course 101 
+            ] : Sample Course 101
             <span
               class="text-danger"
             >
-               {Session currently in this course} 
+               {Session currently in this course}
             </span>
           </label>
         </div>
@@ -197,7 +197,7 @@ exports[`CopySessionModalComponent should snap with some session and courses can
             <span>
               Test02
             </span>
-            ] : Sample Course 202 
+            ] : Sample Course 202
           </label>
         </div>
       </div>

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

@@ -12,7 +12,7 @@ <h5 class="modal-title">
         <label><b>Name for copied session*</b></label>
         <input id="copy-session-name" type="text" class="form-control" [(ngModel)]="newFeedbackSessionName" [maxlength]="FEEDBACK_SESSION_NAME_MAX_LENGTH"
                required #newSessionName="ngModel">
-        <div [hidden]="newSessionName.valid || (newSessionName.pristine && newSessionName.untouched)" class="invalid-field">
+        <div [hidden]="(newSessionName.valid && noWhitespace(newSessionName.value)) || (newSessionName.pristine && newSessionName.untouched)" class="invalid-field">
             <i class="fa fa-exclamation-circle" aria-hidden="true"></i>
             The field "Name for copied session" should not be empty.
         </div>

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

@@ -1,5 +1,7 @@
 import { Component, Input } from '@angular/core';
+import { FormGroup, FormControl, Validators } from '@angular/forms';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { WhitespaceValidator } from './whitespace-validator';
 import { Course } from '../../../types/api-output';
 import { FEEDBACK_SESSION_NAME_MAX_LENGTH } from '../../../types/field-validator';
 
@@ -27,6 +29,10 @@ export class CopySessionModalComponent {
 
   constructor(public activeModal: NgbActiveModal) {}
 
+  form = new FormGroup({
+    newFeedbackSessionName: new FormControl('', [Validators.required, WhitespaceValidator.cannotContainWhitespace]),
+  });
+
   /**
    * Fires the copy event.
    */
@@ -48,4 +54,13 @@ export class CopySessionModalComponent {
       this.copyToCourseSet.add(courseId);
     }
   }
+  /**
+   * Checks whether the Feedback Session name entered by user is whitespace or not
+   *
+   * @param newFeedbackSessionName a string variable
+   * @returns boolean
+   */
+  noWhitespace(newFeedbackSessionName: string): boolean {
+    return (!(newFeedbackSessionName.trim().length === 0 && newFeedbackSessionName !== ''));
+  }
 }

src/web/app/components/copy-session-modal/whitespace-validator.ts

@@ -0,0 +1,10 @@
+import { AbstractControl, ValidationErrors } from '@angular/forms';
+
+export class WhitespaceValidator {
+  static cannotContainWhitespace(control: AbstractControl): ValidationErrors | null {
+    if (typeof control.value === 'string' && control.value.trim().length === 0) {
+      return { cannotContainWhitespace: true };
+    }
+    return null;
+  }
+}