[Feedback needed] My solution for having a generic button with success and failure states

@bsylvain wrote:

I am still a beginner in Ember and I am currently looking to make a generic button component with multiple states.

I want the button to reflect the “waiting” status of an action, and then to have a feedback for success or failure. this code is working, I post it to have some feedback on ite

I haven’t found any example for this particular use case and this is how I solved it

The button component code :

import Ember from 'ember';

export default Ember.Component.extend({

  inProgress: false,
  isFailure: false,
  actionDone: false,
  actions: {
    onClick() {
      this.set('inProgress',true);
      this.get('theAction')().then(() => {
        this.set('inProgress',false)
      },() => {
        this.set('inProgress',false)
        this.set('isFailure',true)
      });
    }
  }
});

A controller function used in the button :

import Ember from 'ember';

export default Ember.Controller.extend({
  actions:{
    saveLicenceVersion(licenceVersion) {
      return new Ember.RSVP.Promise((resolve, reject) => {
        var file = document.getElementById('file-field').files[0];
        licenceVersion.set('document',file);
        licenceVersion.save().then(() => {
            resolve();
          },() => {
            reject();
          }
        )
      })
    }
  }
});

The booleans from the component are used in the component template to alter the display. With this solution I can easily reuse the component by having my function return promises. I will probably add value to resolve and reject to handle error messages

What do you think about this approach? Is it a good “ember way” of doing it?

Posts: 1

Participants: 1

Read full topic