[#8931] Instructor: Feedback Session: Mark mandatory fields for creat…

…ing and editing session (#12617) * mark the session name field mandatory when add a new feedback seesion * Fix linting issues * Update tests related with my changes by modifying snapshot * Mark the 'Name for new session' field mandatory when create by copying --------- Co-authored-by: Wei Qing <[email protected]>
TEAMMATES · Nov 30, 2023 · f2edb0a · f2edb0a
1 parent 968ff77
commit f2edb0a
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 7 deletions.
diff --git a/src/web/app/components/session-edit-form/session-edit-form.component.html b/src/web/app/components/session-edit-form/session-edit-form.component.html
@@ -82,12 +82,16 @@ <h5>Or</h5>
         <br/>
         <div class="row text-center">
           <div class="col-md-2 text-md-end font-bold">
-            <span *ngIf="formMode === SessionEditFormMode.ADD" class="ngb-tooltip-class" ngbTooltip="Enter the name of the feedback session e.g. Feedback Session 1.">Session Name</span>
+            <span *ngIf="formMode === SessionEditFormMode.ADD" class="ngb-tooltip-class" ngbTooltip="Enter the name of the feedback session e.g. Feedback Session 1.">Session Name*</span>
             <span *ngIf="formMode !== SessionEditFormMode.ADD">Session Name</span>
           </div>
           <div class="col-md-10 text-md-start">
             <div *ngIf="formMode === SessionEditFormMode.ADD">
-              <input id="add-session-name" type="text" class="form-control" [ngModel]="model.feedbackSessionName" (ngModelChange)="triggerModelChange('feedbackSessionName', $event)" placeholder="e.g. Feedback for Project Presentation 1" maxlength="64" />
+              <input id="add-session-name" type="text" class="form-control" [ngModel]="model.feedbackSessionName" (ngModelChange)="triggerModelChange('feedbackSessionName', $event)" placeholder="e.g. Feedback for Project Presentation 1" maxlength="64" required #sessionName="ngModel" />
+              <div [hidden]="sessionName.valid || (sessionName.pristine && sessionName.untouched)" class="invalid-field">
+                <i class="fa fa-exclamation-circle" aria-hidden="true"></i>
+                The field Session Name should not be empty.
+              </div>
               <div>
                 {{FEEDBACK_SESSION_NAME_MAX_LENGTH - model.feedbackSessionName.length}} characters left
               </div>
@@ -339,7 +343,7 @@ <h5>Or</h5>
       <div class="col-12 text-center">
         <span class="loader"></span>
         <div *ngIf="formMode === SessionEditFormMode.ADD">
-          <button id="btn-create-session" type="button" class="btn btn-primary" [disabled]="courseCandidates.length === 0 || model.isSaving" (click)="submitFormHandler()">
+          <button id="btn-create-session" type="button" class="btn btn-primary" [disabled]="courseCandidates.length === 0 || model.isSaving || !model.feedbackSessionName" (click)="submitFormHandler()">
             <tm-ajax-loading *ngIf="model.isSaving"></tm-ajax-loading>Create Feedback Session
           </button>
           <p class="text-danger margin-top-20px" *ngIf="courseCandidates.length === 0"><b>You need to have an active(unarchived) course to create a session!</b></p>

diff --git a/src/web/app/components/session-edit-form/session-edit-form.component.scss b/src/web/app/components/session-edit-form/session-edit-form.component.scss
@@ -62,3 +62,8 @@
     margin-bottom: .5rem;
   }
 }
+
+.invalid-field {
+  padding-top: 5px;
+  color: #B50000;
+}
diff --git a/...or/instructor-sessions-page/__snapshots__/instructor-sessions-page.component.spec.ts.snap b/...or/instructor-sessions-page/__snapshots__/instructor-sessions-page.component.spec.ts.snap
@@ -588,20 +588,31 @@ exports[`InstructorSessionsPageComponent should snap when new session form is ex
                       class="ngb-tooltip-class"
                       ngbtooltip="Enter the name of the feedback session e.g. Feedback Session 1."
                     >
-                      Session Name
+                      Session Name*
                     </span>
                   </div>
                   <div
                     class="col-md-10 text-md-start"
                   >
                     <div>
                       <input
-                        class="form-control ng-untouched ng-pristine ng-valid"
+                        class="form-control ng-untouched ng-pristine ng-invalid"
                         id="add-session-name"
                         maxlength="64"
                         placeholder="e.g. Feedback for Project Presentation 1"
+                        required=""
                         type="text"
                       />
+                      <div
+                        class="invalid-field"
+                        hidden=""
+                      >
+                        <i
+                          aria-hidden="true"
+                          class="fa fa-exclamation-circle"
+                        />
+                         The field Session Name should not be empty. 
+                      </div>
                       <div>
                          64 characters left 
                       </div>

diff --git a/...essions-page/copy-from-other-sessions-modal/copy-from-other-sessions-modal.component.html b/...essions-page/copy-from-other-sessions-modal/copy-from-other-sessions-modal.component.html
@@ -13,9 +13,13 @@ <h5 class="modal-title">Creating a new session by copying a previous session</h5
         </select>
       </div>
       <div class="form-group">
-        <label><b>Name for new session</b></label>
+        <label><b>Name for new session*</b></label>
         <input id="copy-session-name" type="text" class="form-control" [(ngModel)]="newFeedbackSessionName" maxlength="38"
-               placeholder="e.g. Feedback for Project Presentation 1">
+               placeholder="e.g. Feedback for Project Presentation 1" required #newSessionName="ngModel">
+        <div [hidden]="newSessionName.valid || (newSessionName.pristine && newSessionName.untouched)" class="invalid-field">
+          <i class="fa fa-exclamation-circle" aria-hidden="true"></i>
+          The field "Name for new session" should not be empty.
+        </div>
         <span>{{ FEEDBACK_SESSION_NAME_MAX_LENGTH - newFeedbackSessionName.length }} characters left</span>
       </div>
       <div class="form-group">

diff --git a/...essions-page/copy-from-other-sessions-modal/copy-from-other-sessions-modal.component.scss b/...essions-page/copy-from-other-sessions-modal/copy-from-other-sessions-modal.component.scss
@@ -0,0 +1,4 @@
+.invalid-field {
+  padding-top: 5px;
+  color: #B50000;
+}