[TEAMMATES#12652] Copying feedback session: mark session name as man…

…datory field when copying feedback session (TEAMMATES#12670) * Fix Copying feedback session: mark session name as mandatory field when copying feedback session TEAMMATES#12652 * Fix Copying feedback session: mark session name as mandatory field when copying feedback session TEAMMATES#12652 * Fix Copying feedback session: mark session name as mandatory field when copying feedback session TEAMMATES#12652 --------- Co-authored-by: Dominic Lim <[email protected]>
cedricongjh · Feb 20, 2024 · 101c476 · 101c476
1 parent 1235992
commit 101c476
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 7 deletions.
diff --git a/...app/components/copy-session-modal/__snapshots__/copy-session-modal.component.spec.ts.snap b/...app/components/copy-session-modal/__snapshots__/copy-session-modal.component.spec.ts.snap
@@ -44,15 +44,26 @@ exports[`CopySessionModalComponent should snap with default fields 1`] = `
         >
           <label>
             <b>
-              Name for copied session
+              Name for copied session*
             </b>
           </label>
           <input
-            class="form-control ng-untouched ng-pristine ng-valid"
+            class="form-control ng-untouched ng-pristine ng-invalid"
             id="copy-session-name"
             maxlength="64"
+            required=""
             type="text"
           />
+          <div
+            class="invalid-field"
+            hidden=""
+          >
+            <i
+              aria-hidden="true"
+              class="fa fa-exclamation-circle"
+            />
+             The field "Name for copied session" should not be empty. 
+          </div>
           <span>
             64 characters left
           </span>
@@ -124,15 +135,26 @@ exports[`CopySessionModalComponent should snap with some session and courses can
         >
           <label>
             <b>
-              Name for copied session
+              Name for copied session*
             </b>
           </label>
           <input
-            class="form-control ng-untouched ng-pristine ng-valid"
+            class="form-control ng-untouched ng-pristine ng-invalid"
             id="copy-session-name"
             maxlength="64"
+            required=""
             type="text"
           />
+          <div
+            class="invalid-field"
+            hidden=""
+          >
+            <i
+              aria-hidden="true"
+              class="fa fa-exclamation-circle"
+            />
+             The field "Name for copied session" should not be empty. 
+          </div>
           <span>
             52 characters left
           </span>
@@ -201,4 +223,4 @@ exports[`CopySessionModalComponent should snap with some session and courses can
     </button>
   </div>
 </tm-copy-session-modal>
-`;
+`;
diff --git a/src/web/app/components/copy-session-modal/copy-session-modal.component.html b/src/web/app/components/copy-session-modal/copy-session-modal.component.html
@@ -9,8 +9,13 @@ <h5 class="modal-title">
   <div class="row">
     <div class="col-12">
       <div class="form-group">
-        <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">
+        <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">
+            <i class="fa fa-exclamation-circle" aria-hidden="true"></i>
+            The field "Name for copied session" should not be empty.
+        </div>
         <span>{{ FEEDBACK_SESSION_NAME_MAX_LENGTH - newFeedbackSessionName.length }} characters left</span>
       </div>
       <div class="form-check" *ngFor="let course of courseCandidates">

diff --git a/src/web/app/components/copy-session-modal/copy-session-modal.component.scss b/src/web/app/components/copy-session-modal/copy-session-modal.component.scss
@@ -0,0 +1,4 @@
+.invalid-field {
+  padding-top: 5px;
+  color: #B50000;
+}