Merge pull request #1166 from ascholerChemeketa/lti1p3-status-on-submit

LTI1p3: show status when submitting add content

Author: bnmnetp

components/rsptx/templates/admin/lti1p3/pick_links.html

@@ -115,6 +115,15 @@ <h2>Assignment Links</h2>
 
         <button type="submit" class="btn btn-primary mt-5">Submit form</button>
 
+        <div id="submission-status" class="mt-3 d-none">
+            <div class="alert alert-info d-flex align-items-center mb-0" role="alert">
+                <div class="spinner-border spinner-border-sm me-2" role="status">
+                    <span class="visually-hidden">Sending to LMS...</span>
+                </div>
+                <span>Sending to LMS...</span>
+            </div>
+        </div>
+
         <div id="error" class="mt-3 alert alert-danger d-none"></div>
 
         <div class="mt-3 alert alert-warning" role="alert">
@@ -161,9 +170,16 @@ <h2>Assignment Links</h2>
         // verify that no LMS assignment is linked to from multiple RS assignments
         document.querySelector('form').addEventListener('submit', function(e) {
             let selects = document.querySelectorAll('.assign-select');
-            console.log(selects);
             const errorBox = document.getElementById('error');
+            const statusBox = document.getElementById('submission-status');
+            const submitButton = this.querySelector('button[type="submit"]');
+
+            // reset any previous messages/state
             errorBox.innerHTML = '';
+            errorBox.classList.add('d-none');
+            statusBox.classList.add('d-none');
+            submitButton.disabled = false;
+
             let selectedValues = [];
             let matches = [];
             //identify matches
@@ -189,6 +205,9 @@ <h2>Assignment Links</h2>
                         containingRow.classList.remove('error');
                     }
                 }
+            } else {
+                submitButton.disabled = true;
+                statusBox.classList.remove('d-none');
             }
         });
     </script>