Clarified Form Validation for Instructors on the SLC Page

app/static/js/instructorTable.js

@@ -31,6 +31,7 @@ export function createNewRow(selectedInstructor) {
   let editLink = newRow.find("td:eq(0) a")
   editLink.attr("id", `editButton-${username}`);
 
+  newRow.attr("data-username", username)
   editLink.attr("data-username", username)
   newRow.prop("hidden", false);
   lastRow.after(newRow);
@@ -43,9 +44,18 @@ export function createNewRow(selectedInstructor) {
   }
 
   $("#instructorTableNames").append(`<input hidden name="instructor[]" value="${username}"/>`)
+  updateEmptyTableMessage()
 }
 
 export function getCourseInstructors() {
   // get usernames out of the table rows 
   return $("#instructorTableNames input").map((i,el) => $(el).val())
+}
+
+export function updateEmptyTableMessage(){
+  if ($("#instructorTable tbody tr").length > 2){
+    $("#instructorTable tbody tr").first().attr("hidden", true)
+  } else{
+    $("#instructorTable tbody tr").first().attr("hidden", false)
+  }
 }

app/static/js/searchUser.js

@@ -35,6 +35,7 @@ export default function searchUser(inputId, callback, clear=false, parentElement
         }
 
        return false;
-     }
+     },
+     autoFocus: true
   });
 };

app/static/js/slcNewProposal.js

@@ -1,4 +1,4 @@
-import {getCourseInstructors, getRowUsername, createNewRow} from './instructorTable.js'
+import {getCourseInstructors, getRowUsername, createNewRow, updateEmptyTableMessage} from './instructorTable.js'
 import searchUser from './searchUser.js'
 
 var currentTab = 0; // Current tab is set to be the first tab (0)
@@ -130,17 +130,31 @@ $(document).ready(function(e) {
   $("#instructorTable").on("click", ".removeButton", function() {
     let closestRow = $(this).closest("tr");
     let username = closestRow.data('username');
-
+    
     // Check if the username is not empty or undefined
     if (username) {
         $("#instructorTableNames input[value='" + username + "']").remove();
         closestRow.remove();
     }
-});
+    updateEmptyTableMessage();
+  });
+
+  $("#courseInstructor").on("focusout", function(){
+    $("#courseInstructor").val("")
+  })
 
-    $("#courseInstructor").on('input', function() {
-        searchUser("courseInstructor", createNewRow, true, null, "instructor");
-    });
+  $("#courseInstructor").on('input', function() {
+      searchUser("courseInstructor", createNewRow, true, null, "instructor");
+  });
+
+  $("#courseInstructor").popover({
+    trigger: "hover",
+    sanitize: false,
+    html: true,
+    content: function() {
+        return $(this).data('tooltip');
+    }
+  });
 
     // for each row in instructorTable that has an instructor, pass that instructors phone data to setupPhoneNumber
     $('#instructorTable tr').each(function(){
@@ -306,9 +320,11 @@ function validateForm() {
   var instructors = getCourseInstructors()
   if (!instructors.length && currentTab == 1) {
     valid = false;
-    $("#courseInstructor").addClass("invalid");
+    $("#instructorTable .emptyTableMessage").addClass("table-danger");
+    $("#instructorTable .emptyTableMessage label").removeClass("text-secondary");
   } else {
-    $("#courseInstructor").removeClass("invalid");
+    $("#instructorTable .emptyTableMessage").removeClass("table-danger");
+    $("#instructorTable .emptyTableMessage label").addClass("text-secondary");
   }
 
   if (valid) {

app/templates/serviceLearning/slcProposal.html

@@ -14,18 +14,19 @@ <h3 class="text-center pb-4">Status:
         class="form-control"
         type="search"
         placeholder="Search instructor"
+        data-tooltip="Click on an instructor to add them"
         value="" />
       <table
-        class="table mb-3"
+        class="table mb-1"
         id="instructorTable"
         name="instructorTable">
-        <thead>
-          <tr>
-            <th scope="col">Instructor</th>
-            <th scope="col"></th>
-          </tr>
-        </thead>
         <tbody>
+            <tr class="emptyTableMessage" {{"hidden" if courseInstructor else ""}}>
+              <td>
+                <label class="text-secondary ms-1"><i>No instructors selected</i></label>
+              </td>
+              <td></td>
+            </tr>
             <tr data-username="" hidden>
                 <td>
                   <p class="mb-0"></p>
@@ -51,7 +52,6 @@ <h3 class="text-center pb-4">Status:
             </tr>
             {% endfor %}
         </tbody>
-
       </table>
       <div id='instructorTableNames'>
         {% for instructor in courseInstructor %}