[#162405] Disable button after clicking (#4614)

* Disable button after clicking * Fix specs
tablexi · Oct 1, 2024 · 78f9860 · 78f9860
1 parent 171bdaf
commit 78f9860
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 6 deletions.
diff --git a/app/assets/javascripts/facility_journal.js b/app/assets/javascripts/facility_journal.js
@@ -2,16 +2,21 @@ document.addEventListener("DOMContentLoaded", function() {
   const selectAllLink = document.querySelector(".js--select_all");
   const table = document.querySelector("table.js--transactions-table");
   const submitDiv = document.querySelector(".submit");
+  const journalCreationSubmitButton = document.querySelector(".js--journal-creation__submit");
+  const journalCreationHelperText = document.querySelector(".js--journal-creation__helper");
   let earliestFulfilledAtDate;
 
   table.addEventListener("click", setEarliestFulfilledAtDate);
   selectAllLink.addEventListener("click", setEarliestFulfilledAtDate);
   submitDiv.addEventListener("click", handleModals);
-
+  if (journalCreationSubmitButton) {
+    journalCreationSubmitButton.addEventListener("click", handleSubmit);
+  }
+
   function setEarliestFulfilledAtDate(event) {
     const fulfilledAtDates = [];
     const checked = document.querySelectorAll("table.js--transactions-table tr td input[type='checkbox']:checked");
-  
+
     checked.forEach(checkedBox => {
       const row = checkedBox.parentElement.parentElement;
       const date = new Date(row.querySelector(".js--date-field").innerHTML);
@@ -21,11 +26,11 @@ document.addEventListener("DOMContentLoaded", function() {
     fulfilledAtDates.sort((a, b) => a.getTime() - b.getTime());
     earliestFulfilledAtDate = fulfilledAtDates[0];
   }
-  
+
   function handleModals(event) {
     const journalDateInput = document.querySelector("#journal_date");
     const journalDate = new Date(journalDateInput.value);
-  
+
     const dateDiff = moment(journalDate).diff(earliestFulfilledAtDate, "days");
     const atLeastOneRowChecked = typeof(earliestFulfilledAtDate) === "object" && earliestFulfilledAtDate !== null
 
@@ -38,4 +43,11 @@ document.addEventListener("DOMContentLoaded", function() {
       $("#journal-creation-reminder").modal("show");
     }
   }
+
+  function handleSubmit(event) {
+    event.preventDefault();
+    event.target.disabled = true;
+    journalCreationHelperText.toggleAttribute("hidden");
+    document.getElementById("journals_create_form").submit();
+  }
 });
diff --git a/app/views/facility_journals/_journal_creation_modal.html.haml b/app/views/facility_journals/_journal_creation_modal.html.haml
@@ -7,5 +7,5 @@
   .modal-footer
     %button.btn{ type: "button", data: { dismiss: "modal" } }
       = text("facility_journals.journal_creation_reminder_modal.cancel")
-    - submit_form = "event.preventDefault();document.getElementById('journals_create_form').submit();"
-    = submit_tag text("facility_journals.journal_creation_reminder_modal.proceed"), class: "btn btn-primary", onclick: submit_form
+    = submit_tag text("facility_journals.journal_creation_reminder_modal.proceed"), class: "btn btn-primary js--journal-creation__submit"
+    %span.js--journal-creation__helper{ hidden: true }= "Processing, please wait..."