Debounce submission of the form

addon/components/form-for.js

@@ -552,7 +552,8 @@ export default class FormForComponent extends Component {
    * @public
    */
   @arg(func)
-  didNotSubmit = () => {};
+  didNotSubmit = () => {
+  };
 
   /**
    * Called when the submit action is called
@@ -573,7 +574,8 @@ export default class FormForComponent extends Component {
    * @public
    */
   @arg(func)
-  childDidSubmit = (/*model*/) => {};
+  childDidSubmit = (/*model*/) => {
+  };
 
   /**
    * Called when a child of this form's onSubmit is reject
@@ -582,7 +584,8 @@ export default class FormForComponent extends Component {
    * @public
    */
   @arg(func)
-  childFailedSubmit = (/*model*/) => {};
+  childFailedSubmit = (/*model*/) => {
+  };
 
   /**
    * Called when the onSubmit is fulfilled
@@ -591,7 +594,8 @@ export default class FormForComponent extends Component {
    * @public
    */
   @arg(func)
-  didSubmit = (/*model*/) => {};
+  didSubmit = (/*model*/) => {
+  };
 
   /**
    * Called when the onSubmit is rejected
@@ -600,7 +604,8 @@ export default class FormForComponent extends Component {
    * @public
    */
   @arg(func)
-  failedSubmit = (/*reason*/) => {};
+  failedSubmit = (/*reason*/) => {
+  };
 
   /**
    * Called before the form submits, this is where we might confirm
@@ -634,7 +639,8 @@ export default class FormForComponent extends Component {
    * @public
    */
   @arg(func)
-  didNotReset = (/*model*/) => {};
+  didNotReset = (/*model*/) => {
+  };
 
   /**
    * Called when the reset action is called
@@ -655,7 +661,8 @@ export default class FormForComponent extends Component {
    * @public
    */
   @arg(func)
-  didReset = (/*model*/) => {};
+  didReset = (/*model*/) => {
+  };
 
   /**
    * Called when the onReset is rejected
@@ -664,7 +671,8 @@ export default class FormForComponent extends Component {
    * @public
    */
   @arg(func)
-  failedReset = (/*reason*/) => {};
+  failedReset = (/*reason*/) => {
+  };
 
   /**
    * Called when values are updated in the form. Useful for knowing when a field has
@@ -674,23 +682,26 @@ export default class FormForComponent extends Component {
    * @public
    */
   @arg(func)
-  onUpdateValues = (/*keyValues*/) => {};
+  onUpdateValues = (/*keyValues*/) => {
+  };
 
   /**
    * Called when the form is marked dirty
    * @method onMarkedDirty
    * @public
    */
   @arg(func)
-  onMarkedDirty = () => {};
+  onMarkedDirty = () => {
+  };
 
   /**
    * Called when the form is marked clean
    * @method onMarkedClean
    * @public
    */
   @arg(func)
-  onMarkedClean = () => {};
+  onMarkedClean = () => {
+  };
 
   @arg(func)
   willDestroyModel = () => {
@@ -703,7 +714,8 @@ export default class FormForComponent extends Component {
    * @public
    */
   @arg(func)
-  didDestroyModel = () => {};
+  didDestroyModel = () => {
+  };
 
   /**
    * Called when will destroy returned false
@@ -712,7 +724,8 @@ export default class FormForComponent extends Component {
    * @public
    */
   @arg(func)
-  didNotDestroyModel = () => {};
+  didNotDestroyModel = () => {
+  };
 
   /**
    * Called when the onDestroy is fulfilled
@@ -721,7 +734,8 @@ export default class FormForComponent extends Component {
    * @public
    */
   @arg(func)
-  failedDestroyModel = (/* reason */) => {};
+  failedDestroyModel = (/* reason */) => {
+  };
 
   @arg(func)
   notifySuccess = (message) => {
@@ -757,7 +771,7 @@ export default class FormForComponent extends Component {
   @arg(func)
   clearValidations = (model) => {
     model = model ?? this.model;
-    return model.validate && model.validate({ only: [] });
+    return model.validate && model.validate({only: []});
   };
 
   /**
@@ -793,12 +807,17 @@ export default class FormForComponent extends Component {
     }
   }
 
+
   /**
    * Action that actual does the submitting
    * @method doSubmit
    * @public
    */
-  async doSubmit() {
+  doSubmit() {
+    return debounce(this, '_doSubmit', this.formFor.formActionDebounce ?? 0)
+  }
+
+  async _doSubmit() {
     const lastDoSubmit = this.lastDoSubmit;
 
     const model = this.model;
@@ -932,7 +951,7 @@ export default class FormForComponent extends Component {
    */
   updateValueFn(key, value) {
     // better code reuse this way
-    return this.updateValues({ [key]: value });
+    return this.updateValues({[key]: value});
   }
 
   /**
@@ -992,7 +1011,7 @@ export default class FormForComponent extends Component {
   }
 
   resetValue(key, value, model) {
-    this.resetValues({ [key]: value }, model);
+    this.resetValues({[key]: value}, model);
   }
 
   /**
@@ -1163,8 +1182,8 @@ export default class FormForComponent extends Component {
       const promise = this.confirmsDestroy
         ? this.formFor.confirmDestroy(model, this.confirmDestroyMessage)
         : this.model.destroyRecord
-        ? this.model.destroyRecord()
-        : Promise.resolve(this.model);
+          ? this.model.destroyRecord()
+          : Promise.resolve(this.model);
 
       promise
         .then(() => {
@@ -1191,6 +1210,7 @@ export default class FormForComponent extends Component {
   updateValues(keyValues) {
     return this.updateValuesFn(keyValues);
   }
+
   @action testClass(type) {
     return `${type}-button`;
   }

addon/services/form-for.js

@@ -30,6 +30,7 @@ export default class FormForService extends Service {
     this.customLabelComponent = this.config.customLabelComponent;
     this.customInfoTextComponent = this.config.customInfoTextComponent;
     this.preventsNavigationByDefault = this.config.preventsNavigationByDefault;
+    this.formActionDebounce = this.config.formActionDebounce;
 
     this.router.on('routeWillChange', (transition) => {
       if (

config/environment.js

@@ -26,6 +26,7 @@ module.exports = function (/* environment, appConfig */) {
 
         controlsFolder: 'form-controls',
         controlPrefix: 'ff-',
+        formActionDebounce: 200
       },
     },
   };