Improve job modal error handling

leepeuker · Jun 27, 2023 · 46b4bb4 · 46b4bb4
1 parent 4485be4
commit 46b4bb4
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 15 deletions.
diff --git a/public/js/job-modal.js b/public/js/job-modal.js
@@ -5,12 +5,31 @@ async function showJobModal(jobType) {
     jobModalTypeInput.value = jobType
     setJobModalTitle(jobModalTypeInput.value)
 
+    loadJobModal(true)
+}
+
+async function loadJobModal(showModal) {
     setJobModalLoadingSpinner(true)
+    document.getElementById('jobModalEmptyMessage').classList.add('d-none')
+    document.getElementById('jobModalErrorAlert').classList.add('d-none')
 
-    jobModal.show();
-    loadJobModalTable(await fetchJobs(jobModalTypeInput.value))
+    if (showModal === true) {
+        jobModal.show();
+    }
+
+    let jobs = null
+
+    try {
+        jobs = await fetchJobs(jobModalTypeInput.value);
+    } catch (error) {
+        document.getElementById('jobModalErrorAlert').classList.remove('d-none')
+    }
 
     setJobModalLoadingSpinner(false)
+
+    if (jobs !== null) {
+        renderJobModalTable(jobs)
+    }
 }
 
 function setJobModalTitle(jobType) {
@@ -31,15 +50,6 @@ function setJobModalTitle(jobType) {
     document.getElementById('jobModalTitle').innerText = title;
 }
 
-async function refreshJobModal() {
-    setJobModalLoadingSpinner(true)
-
-    loadJobModalTable(await fetchJobs(jobModalTypeInput.value))
-
-    setJobModalLoadingSpinner(false)
-
-}
-
 async function fetchJobs(jobType) {
 
     const response = await fetch('/jobs?type=' + jobType)
@@ -54,15 +64,13 @@ async function fetchJobs(jobType) {
 function setJobModalLoadingSpinner(isActive = true) {
     if (isActive === true) {
         emptyJobModalTable()
-        document.getElementById('jobModalEmptyMessage').classList.add('d-none')
-
         document.getElementById('jobModalLoadingSpinner').classList.remove('d-none');
     } else {
         document.getElementById('jobModalLoadingSpinner').classList.add('d-none');
     }
 }
 
-async function loadJobModalTable(jobs) {
+async function renderJobModalTable(jobs) {
     const table = document.getElementById('jobModalTable');
 
     let tbodyRef = table.getElementsByTagName('tbody')[0];

diff --git a/templates/component/modal-job.html.twig b/templates/component/modal-job.html.twig
@@ -26,10 +26,14 @@
                         <div style="margin-bottom: 0;margin-top: 1rem" class="spinner-border d-none" role="status" id="jobModalLoadingSpinner">
                             <span class="visually-hidden">Loading...</span>
                         </div>
+
+                        <div class="alert alert-danger d-none" role="alert" id="jobModalErrorAlert" style="margin-top: .8rem;margin-bottom: .7rem">
+                            Something went wrong. Please try again.
+                        </div>
                     </div>
                 </div>
                 <div class="modal-footer" id="logPlayModalFooter">
-                    <button type="submit" class="btn btn-primary" onclick="refreshJobModal()">Refresh</button>
+                    <button type="submit" class="btn btn-primary" onclick="loadJobModal()">Refresh</button>
                 </div>
             </div>
         </div>