@unabridged/midwest 0.24.4 → 0.25.0

package/app/assets/javascript/midwest.js

@@ -3579,13 +3579,30 @@ class FormLiveSummary extends Controller {
 }
 
 class Form extends Controller {
+  static values = {
+    // Auto-submit the form (debounced) whenever a field changes.
+    autosave: { type: Boolean, default: false },
+    autosaveDelay: { type: Number, default: 600 },
+    // Emit success/error events and keep buttons interactive after an in-page
+    // (non-navigating) Turbo submission.
+    ajax: { type: Boolean, default: false }
+  };
+  autosaveTimer;
   connect() {
     this.element.addEventListener("submit", this.handleSubmit);
     this.element.addEventListener("turbo:submit-end", this.handleTurboEnd);
+    if (this.autosaveValue) {
+      this.element.addEventListener("input", this.scheduleAutosave);
+      this.element.addEventListener("change", this.scheduleAutosave);
+    }
   }
   disconnect() {
     this.element.removeEventListener("submit", this.handleSubmit);
     this.element.removeEventListener("turbo:submit-end", this.handleTurboEnd);
+    this.element.removeEventListener("input", this.scheduleAutosave);
+    this.element.removeEventListener("change", this.scheduleAutosave);
+    if (this.autosaveTimer != null)
+      clearTimeout(this.autosaveTimer);
   }
   handleSubmit = () => {
     this.submitButtons.forEach((btn) => {
@@ -3593,15 +3610,32 @@ class Form extends Controller {
       btn.disabled = true;
     });
   };
-  // Restore buttons if the submission fails (e.g. a Turbo Frame validation
-  // error that re-renders the form without a full page transition).
   handleTurboEnd = (event) => {
-    if (!event.detail?.success) {
+    const detail = event.detail;
+    const success = detail?.success ?? false;
+    if (!success || this.ajaxValue || this.autosaveValue) {
       this.submitButtons.forEach((btn) => {
         btn.classList.remove("loading");
         btn.disabled = false;
       });
     }
+    if (this.ajaxValue) {
+      this.dispatch(success ? "success" : "error", { detail });
+    }
+  };
+  // Debounce field changes into a single background submission. `requestSubmit`
+  // runs constraint validation and fires the `submit` event, so buttons pick up
+  // their loading state and Turbo handles the request just like a manual submit.
+  scheduleAutosave = () => {
+    if (this.autosaveTimer != null)
+      clearTimeout(this.autosaveTimer);
+    this.autosaveTimer = setTimeout(() => {
+      if (typeof this.element.requestSubmit === "function") {
+        this.element.requestSubmit();
+      } else {
+        this.element.submit();
+      }
+    }, this.autosaveDelayValue);
   };
   get submitButtons() {
     return Array.from(