Implementation of reset unclear (to me)

[manuel-reil]

Hi,

first, thanks for the work on this.

At least to me, the implementation of reset is unclear. See the following real life example:

 {{model.isDirty}} <!-- for debugging only -->
 {{async-button class="btn btn-success" action="saveBillingDetails" default="Save billing details" pending="Saving ..." fulfilled="Billing details saved" reset=model.isDirty}}

The states default and pending are working as expected. Only I cannot see the state fulfilled as it switches immediately back to default.
My thoughts:

• I can verify that model.isDirty is false - via {{model.isDirty}} and it is getting dirty when I change inputs in the underlying form - fine.
• When I remove the reset property, it remains in state fulfilled - fine.
• I guess, directly binding model.isDirty to reset is somehow wrong.

Thank you for a hint.
Kind regards,
Manuel

[bcardarella]

@manuel-reil it is difficult to say what the specific issue you're having is without seeming an example. FWIW we do have a test case for this https://github.com/dockyard/ember-async-button/blob/f2445374e64348ed0b310464588aa6d6e912729f/tests/acceptance/button-test.js#L179-L189

[NullVoxPopuli]

I'm having an issue with the reset functionality as well. Here is what I have:

{{async-button
  action=(action 'createIntegration')
  default='Connect With Stripe'
  pending='Connecting...'
  reset=resetButton
}}

import Ember from 'ember';
import env from 'aeonvera/config/environment';

export default Ember.Component.extend({
  torii: Ember.inject.service(),
  resetButton: false,

  actions: {
    createIntegration() {
      this.get('torii').open('stripe-connect').then(function(result) {
        this.set('authorizationCode', result.authorizationCode);
        console.log(result);
      }.bind(this), error => {
        this.get('flashMessages').alert(error);
        this.set('resetButton', true);
      });
    }
  }
});

what I want to happen is on failure, to re-enable the button. Right now, it stays disabled.

[gmurphey]

@NullVoxPopuli I believe if you return the promise from your action, you will get your desired behavior.

[NullVoxPopuli]

i just tried this:

  createIntegration() {
      return this.get('torii').open('stripe-connect').then(function(result) {
        this.set('authorizationCode', result.authorizationCode);
        console.log(result);
      }.bind(this), error => {
        this.get('flashMessages').alert(error);
        return this.set('resetButton', true);
      });
    }

to no avail. :-\

[NullVoxPopuli]

any other ideas? :-\

[NullVoxPopuli]

@gmurphey ?

[gmurphey]

@NullVoxPopuli I forgot to ask: what version of ember-async-button are you using? The update with support for closure actions hasn't been released yet, so if your package.json is not pointed to master, you'll probably need to use the callback method to set the promise.

[NullVoxPopuli]

oh ok, I'll try master when I get a chance. thanks!