From 8b6ae4a103df26e923143ef3fbecb84ac4c74d2f Mon Sep 17 00:00:00 2001
From: Frederick Muriuki Muriithi
Date: Fri, 21 Mar 2025 13:04:28 -0500
Subject: Add "Busy" indicator

When the user clicks "Bulk Edit (Download Data)" button, it could take
a while to actually process and download the data. In that time, the
visual indicator that the system is busy is helpful to the user. This
commit adds the "busy" indicator.
---
 uploader/templates/phenotypes/view-dataset.html | 32 ++++++++++++++++++++-----
 1 file changed, 26 insertions(+), 6 deletions(-)

(limited to 'uploader')

diff --git a/uploader/templates/phenotypes/view-dataset.html b/uploader/templates/phenotypes/view-dataset.html
index fa1044b..ed59d76 100644
--- a/uploader/templates/phenotypes/view-dataset.html
+++ b/uploader/templates/phenotypes/view-dataset.html
@@ -147,6 +147,8 @@
                           },
                           {
                               text: "Bulk Edit (Download Data)",
+                              className: "btn btn-info btn-bulk-edit",
+                              titleAttr: "Click to download data for editing.",
                               action: (event, dt, node, config) => {
                                   var phenoids = [];
                                   var selected = dt.rows({selected: true, page: "all"}).data();
@@ -160,6 +162,19 @@
                                       alert("No record selected. Nothing to do!");
                                       return false;
                                   }
+
+                                  $(".btn-bulk-edit").prop("disabled", true);
+                                  $(".btn-bulk-edit").addClass("d-none");
+                                  var spinner = $(
+                                      "<div id='bulk-edit-spinner' class='spinner-grow text-info'>");
+                                  spinner_content = $(
+                                      "<span class='visually-hidden'>");
+                                  spinner_content.html(
+                                      "Downloading data &hellip;");
+                                  spinner.append(spinner_content)
+                                  $(".btn-bulk-edit").parent().append(
+                                      spinner);
+
                                   $.ajax(
                                       (`/species/${species_id}/populations/` +
                                        `${population_id}/phenotypes/datasets/` +
@@ -185,19 +200,24 @@
                                               console.log("Experienced an error: ", textStatus);
                                               console.log("The ERROR: ", errorThrown);
                                           },
+                                          complete: (jqXHR, textStatus) => {
+                                              $("#bulk-edit-spinner").remove();
+                                              $(".btn-bulk-edit").removeClass(
+                                                  "d-none");
+                                              $(".btn-bulk-edit").prop(
+                                                  "disabled", false);
+                                          },
                                           contentType: "application/json"
                                       });
-                              },
-                              className: "btn btn-info",
-                              titleAttr: "Click to download data for editing."
+                              }
                           },
                           {
                               text: "Bulk Edit (Upload Data)",
+                              className: "btn btn-info btn-bulk-edit",
+                              titleAttr: "Click to upload edited data you got by clicking the `Bulk Edit (Download Data)` button.",
                               action: (event, dt, node, config) => {
                                   alert("Not implemented yet!")
-                              },
-                              className: "btn btn-info",
-                              titleAttr: "Click to upload edited data you got by clicking the `Bulk Edit (Download Data)` button."
+                              }
                           }
                       ]
                   },
-- 
cgit v1.2.3