fix frontend error handing of patient list ajax error (#4413)

part of https://movember.atlassian.net/browse/TN-3324 Currently UI is a blank screen when the ajax call to retrieve patient list data encounters error: ![Screenshot 2024-10-22 at 11 08 58 AM](https://github.com/user-attachments/assets/76ee3826-bb41-4c29-81f0-3af2f66f00d6) Added fix to error handling with error displaying on screen and allowing user to change/clear filters on the UI if need to ![Screenshot 2024-10-22 at 11 13 29 AM](https://github.com/user-attachments/assets/7bbaad6b-8576-4532-ae65-c4706107f93e) --------- Co-authored-by: Ivan Cvitkovic <ivanc@uw.edu> Co-authored-by: Amy Chen <clone@cesium.cirg.washington.edu>
uwcirg · Oct 22, 2024 · 461afea · 461afea
1 parent 8cd97f0
commit 461afea
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 4 deletions.
diff --git a/portal/static/js/src/admin.js b/portal/static/js/src/admin.js
@@ -143,6 +143,12 @@ let requestTimerId = 0;
           errorElement.innerHTML = errorMessage;
         }
       },
+      clearError: function() {
+        var errorElement = document.getElementById("admin-table-error-message");
+        if (errorElement) {
+          errorElement.innerHTML = "";
+        }
+      },
       injectDependencies: function () {
         var self = this;
         window.portalModules =
@@ -200,6 +206,8 @@ let requestTimerId = 0;
           );
           return;
         }
+        //reset error
+        this.clearError();
         this.patientDataAjaxRequest(params);
       },
       patientDataAjaxRequest: function (params) {
@@ -219,6 +227,12 @@ let requestTimerId = 0;
           }
           self.accessed = true;
           params.success(results);
+        }).fail(function(xhr, status) {
+          console.log("Error ", xhr);
+          console.log("status", status);
+          self.setError("Error occurred loading data.");
+          params.success([]);
+          self.accessed = true;
         });
       },
       handleCurrentUser: function () {
@@ -1229,11 +1243,12 @@ let requestTimerId = 0;
             sync: true,
           },
           function (data) {
+            prefData = data || self.getDefaultTablePreference();
+            self.currentTablePreference = prefData;
+
             if (!data || data.error) {
               return false;
             }
-            prefData = data || self.getDefaultTablePreference();
-            self.currentTablePreference = prefData;
 
             if (setFilter) {
               //set filter values
@@ -1303,6 +1318,7 @@ let requestTimerId = 0;
           for (var item in prefData.filters) {
             fname = "#adminTable .bootstrap-table-filter-control-" + item;
             if ($(fname).length === 0) {
+              prefData.filters[item] = null;
               continue;
             }
             //note this is based on the trigger event for filtering specify in the plugin
@@ -1323,7 +1339,8 @@ let requestTimerId = 0;
       ) {
         var tnthAjax = this.getDependency("tnthAjax");
         tableName = tableName || this.tableIdentifier;
-        if (!tableName) {
+        if (!tableName || !document.querySelector("#adminTable")) {
+          if (callback) callback();
           return false;
         }
         userId = userId || this.userId;

diff --git a/portal/static/js/src/modules/TnthAjax.js b/portal/static/js/src/modules/TnthAjax.js
@@ -93,6 +93,16 @@ export default { /*global $ */
             $.ajax("/api/me").done(
                 function() {
                     console.log("user authorized");
+                    if ((typeof CsrfTokenChecker !== "undefined") && 
+                        !CsrfTokenChecker.checkTokenValidity()) {
+                        //if CSRF Token not valid, return error
+                        if (callback) {
+                            callback({"error": DEFAULT_SERVER_DATA_ERROR});
+                            fieldHelper.showError(targetField);
+                        }
+                        return;
+                    }
+
                     ajaxCall();
                 }
             ).fail(function() {

diff --git a/portal/templates/admin/admin_base.html b/portal/templates/admin/admin_base.html
@@ -93,6 +93,8 @@
     // custom ajax request here
     function patientDataAjaxRequest(params) {
 		loadIntervalId = setInterval(() => {
+			//document DOM not ready, don't make ajax call yet
+			if (!document.querySelector("#adminTable")) return;
 			if (typeof window.AdminObj === "undefined") return;
 			window.AdminObj.getRemotePatientListData(params);
 			clearInterval(loadIntervalId);

diff --git a/portal/templates/admin/patients_by_org.html b/portal/templates/admin/patients_by_org.html
@@ -65,7 +65,8 @@ <h4 class="tnth-headline">{{_("Patient List")}}</h4>
           </thead>
       </table>
   </div>
-  <div id="admin-table-error-message" class="text-danger smaller-text"></div>
+  <br/>
+  <div id="admin-table-error-message" class="text-danger"></div>
   {{ExportPopover()}}
 </div>
 {{ajaxDataScript(research_study_id=0)}}