Erratic loads

app/static/css/allPendingForms.css

@@ -107,3 +107,24 @@ a.hover_indicator:active {
   text-align: center !important;
 }
 
+.spinner {
+  width: 50px;
+  height: 50px;
+  border: 5px solid #f3f3f3; 
+  border-radius: 50%;
+
+  border-top: 5px solid #3498db; 
+
+
+  animation: spin 1s linear infinite; 
+}
+
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

app/static/js/allPendingForms.js

@@ -353,21 +353,29 @@ function clearTextArea() { //makes sure that it empties text areas and p tags wh
 
 
 
-function loadOverloadModal(formHistoryID, laborStatusFormID) {
-  /*
-  This method sends an AJAX call to recieve data used to populate
-  the overload modal.
-  */
+function loadOverloadModal(formHistoryID) {
+ /*
+  This method resets the modal content to a loading state to prevent 
+  displaying stale data, then fetches and renders the new form data.*/
+
+  $("#overloadModal").find(".modal-content").html(`<div class="modal-body"><div class="spinner" role="status">
+  <span class="visually-hidden"></span></div></div>`);
   $("#overloadModal").modal("show");
-  $("#overloadModal").find('.modal-content').load('/admin/overloadModal/' + formHistoryID);
+  $("#overloadModal").find('.modal-content').load('/admin/overloadModal/' + formHistoryID) ;
+
 }
 
 
-function loadReleaseModal(formHistoryID, laborStatusFormID) {
-  $("#modalRelease").modal("show");
+function loadReleaseModal(formHistoryID) {
+ /*
+  This method resets the modal content to a loading state to prevent 
+  displaying stale data, then fetches and renders the new form data.
+  */
+  $("#modalRelease").find(".modal-content").html(`<div class="modal-body"><div class="spinner" role="status">
+  <span class="visually-hidden"></span></div></div>`)
+  $("#modalRelease").modal("show");  
   $("#modalRelease").find('.modal-content').load('/admin/releaseModal/' + formHistoryID);
-
-
+
 }
 
 
@@ -604,7 +612,7 @@ function notesCounter(laborStatusFormID, formHistoryID){
     success: function(response) {
       var viewNotesID = '#notes_' + String(formHistoryID)
       var modalViewNotesID = '#modalNote_' + String(formHistoryID)
-      $(viewNotesID).html('View Notes (' + response['noteTotal'] + ')')
+      $(viewNotesID).html('Notes (' + response['noteTotal'] + ')')
       $(modalViewNotesID).html('View Notes (' + response['noteTotal'] + ')')
     },
     error: function(request,status,error){

app/templates/admin/allPendingForms.html

@@ -114,7 +114,7 @@ <h1>{{title}}</h1>
                     {% endwith %}
                     <a role="menuitem" href="#"
                       <span id="{{pendingOverloadFormPairs[allForms.formHistoryID]}}"
-                        onclick="loadOverloadModal({{pendingOverloadFormPairs[allForms.formHistoryID]}}, {{allForms.formID.laborStatusFormID}});"
+                        onclick="loadOverloadModal({{pendingOverloadFormPairs[allForms.formHistoryID]}});"
                        aria-label="Pending Overload Form" title="Manage Overload Form" class="glyphicon glyphicon-exclamation-sign fa-lg"
                        style="color:red; top: 10px"></span></a>
                   </td>
@@ -206,7 +206,7 @@ <h1>{{title}}</h1>
                     <span class="caret"></span></button>
                   <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="menu1" style="min-width: 100%;">
                     {% if allForms.historyType.historyTypeName == 'Labor Overload Form' %}
-                        <li role="presentation">
+                        <li role="presentation" id ="{{allForms.formHistoryID}}" onclick="loadOverloadModal({{allForms.formHistoryID}});">
                         {% if currentUser.isFinancialAidAdmin or currentUser.isSaasAdmin %}
                             {% set formurl = "financialAidOverloadApproval" %}
                             {% if currentUser.isSaasAdmin %}
@@ -215,18 +215,28 @@ <h1>{{title}}</h1>
                             <a role="menuitem" href="/admin/{{formurl}}/{{allForms.formHistoryID}}">Manage</a>
                         {% else %}
                             <a role="menuitem" href="#" >
-                                <span id="{{allForms.formHistoryID}}" onclick="loadOverloadModal({{allForms.formHistoryID}}, {{allForms.formID.laborStatusFormID}});">Manage</span>
+                                <span id="{{allForms.formHistoryID}}" onclick="loadOverloadModal({{allForms.formHistoryID}});">Manage</span>
                             </a>
                         {% endif %}
                         </li>
                     {% elif allForms.historyType.historyTypeName == 'Labor Release Form' %}
-                        <li role="presentation"><a role="menuitem" href="#">
-                          <span id="{{allForms.formHistoryID}}"
-                                onclick="loadReleaseModal({{allForms.formHistoryID}}, {{allForms.formID.laborStatusFormID}});">Manage</span></a></li>
+                          <li role="presentation">
+                          <a id="{{allForms.formHistoryID}}" 
+                          role="menuitem"
+                          href="#"
+                          class="btn btn-secondary"
+                          onclick="event.preventDefault(); loadReleaseModal('{{allForms.formHistoryID}}');">
+                          Manage
+                          </a></li>
                     {% elif allForms.formHistoryID in pendingOverloadFormPairs %}
-                        <li role="presentation"><a role="menuitem" href="#">
-                          <span id="{{allForms.formHistoryID}}"
-                                onclick="loadOverloadModal({{pendingOverloadFormPairs[allForms.formHistoryID]}}, {{allForms.formID.laborStatusFormID}});">Manage</span></a></li>
+                          <li role="presentation">
+                          <a id="{{allForms.formHistoryID}}" 
+                          role="menuitem"
+                          href="#"
+                          class="btn btn-secondary"
+                          onclick="event.preventDefault(); loadOverloadModal('{{allForms.formHistoryID}}');">
+                          Manage
+                          </a></li>
                     {% else %}
                         <li role="presentation"><a role="menuitem" href="#">
                           <span onclick="insertDenial({{allForms.formHistoryID}})"
@@ -241,7 +251,7 @@ <h1>{{title}}</h1>
                           <span id="notes_{{allForms.formHistoryID}}"
                                 onclick="getNotes({{allForms.formID.laborStatusFormID}})"
                                 data-toggle="modal"
-                                data-target="#NotesModal">View Notes</span></a></li>
+                                data-target="#NotesModal">Notes</span></a></li>
                     {% if formType == 'preStudentApproval' %}
                         <li role="presentation"><a role="menuitem" href="#">
                           <span onclick="skipApproval({{allForms.formID.laborStatusFormID}})"

app/templates/snips/pendingOverloadModal.html

@@ -65,7 +65,7 @@ <h3 class="modal-title" id="overloadModalLabel" align="center"><b>Labor Overload
    ########################################}
         <div id="notes" style="position:absolute; right:0">
           <div id="viewNotesButton">
-            <button id="modalNote_{{formHistoryID}}" onclick="toggleNotesLog({{laborStatusFormID}}, {{formHistoryID}})" class='btn btn-sm btn-primary'>View Notes ({{noteTotal}})</button>
+            <button id="modalNote_{{formHistoryID}}" onclick="toggleNotesLog({{laborStatusFormID}}, {{formHistoryID}})" class='btn btn-sm btn-primary'> Notes({{noteTotal}}) </button>
           </div>
         </div>
     </div>

app/templates/snips/pendingReleaseModal.html

@@ -54,7 +54,7 @@ <h3 class="modal-title" align="center"><strong>Labor Release Form</strong></h3>
         </table>
 
         <div id='radioDivRelease'>
-          <button id="modalNote_{{formHistoryID}}" onclick="toggleNotesLog({{laborStatusFormID}}, {{formHistoryID}})" style='float: left; margin-top: -10px;' class='btn btn-sm btn-primary'>View Notes ({{noteTotal}})</button>
+          <button id="modalNote_{{formHistoryID}}" onclick="toggleNotesLog({{laborStatusFormID}}, {{formHistoryID}})" style='float: left; margin-top: -10px;' class='btn btn-sm btn-primary'>Notes({{noteTotal}})</button>
           <p class="status-warning" style="color:red;" hidden><span class="glyphicon glyphicon-exclamation-sign">
           </span><strong>A Status is required in order to submit</strong></p><span>Status:<span aria-hidden="true" style="color:red"><strong>*</strong></span></span>
           <label for="approveRelease" class="radio-inline">