[PLAY-1510] Loading state for Rails form, resolution of Dialog loading (

#3753)

**What does this PR do?** A clear and concise description with your
runway ticket url.
https://runway.powerhrg.com/backlog_items/PLAY-1510

**Screenshots:** Screenshots to visualize your addition/change


**How to test?** Steps to confirm the desired behavior:
1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See addition/change


#### Checklist:
- [ ] **LABELS** Add a label: `enhancement`, `bug`, `improvement`, `new
kit`, `deprecated`, or `breaking`. See [Changelog &
Labels](https://github.com/powerhome/playbook/wiki/Changelog-&-Labels)
for details.
- [ ] **DEPLOY** I have added the `milano` label to show I'm ready for a
review.
- [ ] **TESTS** I have added test coverage to my code.

playbook/app/entrypoints/playbook-rails.js

@@ -1,5 +1,7 @@
 // Forms
 import 'kits/pb_form/pb_form_validation'
+import formHelper from 'kits/pb_form/formHelper'
+window.formHelper = formHelper
 
 // Date Picker
 import datePickerHelper from 'kits/pb_date_picker/date_picker_helper'

playbook/app/javascript/plugins.js

@@ -6,3 +6,5 @@ export { default as PbTextarea } from '../pb_kits/playbook/pb_textarea'
 export { default as PbTooltip } from '../pb_kits/playbook/pb_tooltip'
 export { default as PbTypeahead } from '../pb_kits/playbook/pb_typeahead'
 export { default as dialogHelper } from '../pb_kits/playbook/pb_dialog/dialogHelper'
+export { default as formHelper } from '../pb_kits/playbook/pb_form/formHelper'
+

playbook/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.html.erb

@@ -1,13 +1,36 @@
 <%= pb_rails("button", props: { text: "Open Dialog", data: {"open-dialog": "dialog-loading"} }) %>
 
-<%= pb_rails("dialog", props: { 
-    id:"dialog-loading", 
-    size: "sm", 
-    title: "Loading Exmaple", 
-    text: "Make a loading request?", 
-    cancel_button: "Cancel Button", 
+<%= pb_rails("dialog", props: {
+    id:"dialog-loading",
+    size: "sm",
+    title: "Loading Example",
+    text: "Make a loading request?",
+    cancel_button: "Cancel Button",
     cancel_button_id: "cancel-button-loading",
-    confirm_button: "Okay", 
+    confirm_button: "Okay",
     confirm_button_id: "confirm-button-loading",
     loading: true,
 }) %>
+
+<script>
+    const loadingButton = document.querySelector('[data-disable-with="Loading"]');
+    if (loadingButton) {
+        loadingButton.addEventListener("click", function() {
+        const okayLoadingButton = document.querySelector('[data-disable-with="Loading"]');
+        const cancelButton = document.querySelector('[data-disable-cancel-with="Loading"]');
+        let currentClass = okayLoadingButton.className;
+        let cancelClass = cancelButton ? cancelButton.className : "";
+
+        setTimeout(function() {
+            okayLoadingButton.disabled = false;
+            okayLoadingButton.className = currentClass.replace("_disabled_loading", "_enabled");
+
+            if (cancelButton) {
+            cancelButton.disabled = false;
+            cancelButton.className = cancelClass.replace("_disabled", "_enabled");
+            }
+        }, 5000);
+
+        });
+  }
+</script>

playbook/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.md

@@ -1,3 +1 @@
 Pressing the "Okay" button will trigger a loading state where the button content is replaced by a spinner icon and both buttons are disabled.
-
-Currently, the loading state cannot be undone and will require a page refresh to reset the dialog.

playbook/app/pb_kits/playbook/pb_form/docs/_form_form_with_loading.html.erb

@@ -0,0 +1,39 @@
+<%= pb_form_with(scope: :example, url: "", method: :get, loading: true) do |form| %>
+  <%= form.text_field :example_text_field, props: { label: true } %>
+
+  <%= form.actions do |action| %>
+    <%= action.submit %>
+    <%= action.button props: { type: "reset", text: "Cancel", variant: "secondary" } %>
+  <% end %>
+<% end %>
+
+<script>
+    const loadingForm = document.querySelector(".pb_form_loading")
+    if (loadingForm) {
+        loadingForm.addEventListener("submit", function(event) {
+            event.preventDefault();
+
+            const submitButton = event['submitter'];
+            const cancelButton = event['target'].querySelector('button[type="reset"]');
+
+            if (submitButton) {
+                let currentClass = submitButton.className;
+                let newClass = currentClass.replace("_disabled_loading", "_enabled");
+
+                let cancelClass = cancelButton ? cancelButton.className : "";
+                let newCancelClass = cancelClass.replace("_disabled", "_enabled");
+
+                setTimeout(function() {
+                    submitButton.disabled = false;
+                    submitButton.className = currentClass;
+
+                    if (cancelButton) {
+                        cancelButton.disabled = false;
+                        cancelButton.className = cancelClass;
+                    }
+                }, 5000);
+            }
+        });
+    }
+</script>
+

playbook/app/pb_kits/playbook/pb_form/docs/_form_form_with_loading.md

@@ -0,0 +1 @@
+Pressing Submit will trigger a loading state where the button content is replaced by a spinner icon and the submit button will be disabled.

playbook/app/pb_kits/playbook/pb_form/docs/example.yml

@@ -3,3 +3,4 @@ examples:
   rails:
   - form_form_with: Default
   - form_form_with_validate: Default + Validation
+  - form_form_with_loading: Default + Loading

playbook/app/pb_kits/playbook/pb_form/form.rb

@@ -7,6 +7,7 @@ class Form < ::Playbook::KitBase
                          type: Playbook::Props::Base
       prop :form_system_options, deprecated: "Use options instead",
                                  type: Playbook::Props::Base
+      prop :loading, type: Playbook::Props::Boolean, default: false
       prop :options, type: Playbook::Props::Base
       prop :validate, type: Playbook::Props::Boolean, default: false
 
@@ -22,6 +23,7 @@ def form_options
           aria: aria,
           class: classname,
           data: data,
+          loading: loading,
           validate: validate,
         }.merge(prop(:options) || prop(:form_system_options) || {})
       end

playbook/app/pb_kits/playbook/pb_form/formHelper.js

@@ -0,0 +1,27 @@
+const formHelper = () => {
+    const loadingForm = document.querySelector(".pb_form_loading")
+    if (loadingForm) {
+        loadingForm.addEventListener("submit", function(event) {
+            const submitButton = event['submitter'];
+            const cancelButton = event['target'].querySelector('button[type="reset"]');
+
+            if (submitButton) {
+                let currentClass = submitButton.className;
+                let newClass = currentClass.replace("_enabled", "_disabled_loading");
+
+                let cancelClass = cancelButton ? cancelButton.className : "";
+                let newCancelClass = cancelClass.replace("_enabled", "_disabled");
+
+                submitButton.disabled = true;
+                submitButton.className = newClass;
+
+                if (cancelButton) {
+                    cancelButton.disabled = true;
+                    cancelButton.className = newCancelClass;
+                }
+            }
+        });
+    }
+};
+
+export default formHelper;

playbook/lib/playbook/pb_forms_helper.rb

@@ -22,9 +22,10 @@ module PbFormsHelper
     # @param data [Hash] hash of data attributes
     # @param validate [Boolean] whether validation should be triggered or not
     # @see [#form_with] for other options
-    def pb_form_with(data: {}, validate: false, **kwargs, &block)
+    def pb_form_with(data: {}, validate: false, loading: false, **kwargs, &block)
       data = data.merge("pb-form-validation" => validate)
       classname = ["pb-form", kwargs[:class]].join(" ")
+      classname += " pb_form_loading" if loading
       options = kwargs.merge(
         class: classname,
         data: data,
@@ -33,6 +34,7 @@ def pb_form_with(data: {}, validate: false, **kwargs, &block)
 
       content_for(:pb_js, javascript_tag(<<~JS))
         window.addEventListener("DOMContentLoaded", function() { PbFormValidation.start() })
+        window.addEventListener("DOMContentLoaded", () => formHelper())
       JS
 
       form_with(**options, &block)