dockyard / ember-async-button Goto Github PK
View Code? Open in Web Editor NEWAsync Button Component for Ember CLI apps
License: MIT License
Async Button Component for Ember CLI apps
License: MIT License
At this time it looks like disabled won't allow a custom inline if that you pass in. Would this be something the team at dockyard would accept as a PR? If yes/no do you have another PR or issue someone has submitted in the past for reference? If this is new functionality completely -any suggestions for binding model properties for the disabled property **w/out having to add model as an attributeBinding and doing a custom binding like shown below?
initialize: Ember.on("init", function() {
Ember.Binding.from("model.isDirty").to("thingWasDirty").connect(this);
})
Thank you for this awesome open source project. I have been using this addon in my apps and have had some great success. However, I have noticed that there are some recent commits on master but there has not been a new publish on npm in 5 months. Will there be a new version published soon?
ember install ember-async-button
generates a deprecation warning in ember 2.18.0:
DEPRECATION: An addon is trying to access project.nodeModulesPath. This is not a reliable way to discover npm modules. Instead, consider doing: require("resolve").sync(something, { basedir: project.root }).
I believe updating ember-cli-babel to 6.11.0 will fix this as 6.8.2 depends on an older version of ember-cli-version-checker.
[Deprecated] this.pickFiles is deprecated, please use broccoli-funnel directly instead [addon: ember-cli-async-button]
I've got a case where I'd like to set the same value for pending
across all buttons. It'd be nice to have a config to globally set this.
I'd also like to include HTML as the default pending
option. I wasn't able to extend this component in my own code. Any chance of showing how I can extend it for this functionality, or adding this?
I am trying to use this async-button component and I really like it.
I am running into an issue where my client side validation says that I do not need to fire an ajax request because I know that the form is not valid. I display my errors and forgo sending the request.
It looks something like this:
actions: {
save: function(callback) {
if(this.get("valid")) {
this.sendAction("onSave", callback);
// promise fired in "onSave" action
}
}
}
In this else condition, there is no promise to resolve so the async-button remains in a "pending" state.
Thanks!
save
test
I see this as a major downfall of passing around callbacks in actions, but I see this is something that is being encouraged now. Is this going to be the official pattern going forward, and if it is should we just swallow the calling set on destroyed object
assertion.
I'm using ember-mocha. Where could I start tracking this down?
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:
Thank you for a hint.
Kind regards,
Manuel
Since this is deprecated, does that mean we shouldn't expect any updates / activity on issues / merged PRs?
I quickly try this addon in our app. It works quite well but I faced a problem.
The width of the button is changed because the size of the text changes. It would be great to have something out of the box in Ember-Async-Button.
Tests in question: "button bound to controller promise hidden on resolve" and "button bound to controller promise hidden on reject".
Each of them only tests for controller.set("promise", promise)
which is happening in the test itself. Commenting out the resolve()
and reject()
lines does not affect test success.
I'm not sure what they were supposed to test (the template binds controller.promise
to the component's boundPromise
property, but that property is not used anywhere), so i'm unable to provide a PR.
Hi! Thank you for the awesome addon!
Before i started using it, i tried ember-idx-button. That addon appeared to be buggy, so i abandoned it in favor of ember-cli-async-button.
But ember-idx-button had a couple of awesome features that ember-cli-async-button is missing.
#1. Options to assign custom classes depending on the state
This feature is irreplaceable for people using non-semantic CSS frameworks like Bootstrap and Foundation.
Instead of writing custom CSS to style different button states, we could simply tell which classes to use in which state:
{{ async-button
action="saveSelection"
class="btn btn-lg"
default="Save"
defaultClass='btn-primary'
pending="Saving..."
pendingClass='btn-default'
rejected="Save failed :("
rejectedClass='btn-danger'
}}
#2. Built in icon functionality
We could provide options similar to suggested above. When these new options are set, the component would render an additional <i>
element inside and apply mentioned classes to it.
{{ async-button
action="saveSelection"
class="btn btn-lg"
default="Save"
defaultIcon='glyphicon glyphicon-refresh'
pending="Saving..."
pendingIcon='glyphicon glyphicon-refresh glyphicon-spinning'
rejected="Save failed :("
rejectedIcon='glyphicon glyphicon-warning-sign'
}}
Example pending state:
<button ... >
<i class="glyphicon glyphicon-refresh glyphicon-spinning"></i>
Saving...
</button>
Thanks for the great plugin. It has been very useful. I have a use case where my async button runs a search. The search can be triggered when the user clicks on the async-button (the search button) or when the user presses enter on the input.
What's the best way to trigger the async button's action when the user presses enter on the input? Before I was using async-button both pressing enter on the input and clicking the search button called the same action.
Now that I'm using the async-button this won't work as pressing enter doesn't have a callback and doesn't put the button into a "pending" state.
Is the best practice here to manually set disableWhen
to true
when the user uses the enter key along with a separate action path that handles setting disableWhen
back to false
?
Thank you!
I cloned this project, ran npm install && bower install
then ember server
the response was:
version: 0.0.42
Livereload server on port 35729
Serving on http://0.0.0.0:4200
Attempting to watch missing directory: addon
Error: Attempting to watch missing directory: addon
at EventEmitter.Watcher_addWatchDir [as addWatchDir] (/Users/bheaton/code/dockyard/ember-cli-async-button/node_modules/ember-cli/node_modules/broccoli-sane-watcher/index.js:66:11)
at /Users/bheaton/code/dockyard/ember-cli-async-button/node_modules/ember-cli/node_modules/broccoli/lib/builder.js:66:35
at $$$internal$$tryCatch (/Users/bheaton/code/dockyard/ember-cli-async-button/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:470:16)
at $$$internal$$invokeCallback (/Users/bheaton/code/dockyard/ember-cli-async-button/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:482:17)
at /Users/bheaton/code/dockyard/ember-cli-async-button/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:1066:13
at $$rsvp$asap$$flush (/Users/bheaton/code/dockyard/ember-cli-async-button/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:1531:9)
at process._tickCallback (node.js:415:13)
I was about to convert a table of mine to use async-button.
The problem is that each button is part of an {{#each}} loop and the task is passed as an action parameter.
With a regular button
{{#each task in tasks}}
<button {{action "deleteTask" task}}>Delete</button>
With async-button there is no way to sypply the task to the action
{{#each task in tasks}}
<button {{action "deleteTask" task}}>Delete</button>
{{async-button type="submit" action="deleteTask" default="Delete" pending="Deleting..." fulfilled="Delete" rejected="Failed. Try again"}}
Is there a way to support what I am trying to do?
When I click a "save" async-button, I first check that the model is valid. If not, I show a message. All of this is sync, yet the async-button shows the "pending" state. How do I resolve this?
Instead of the blanket reset
option, this would allow you to reset on validation errors, but not reset on a success.
Would you accept a PR of this?
(on master) The following doesn't change to "Saving" when clicked, it just disables the button until the promise resolves
I've put it into this jsbin that I copied from another ticket. I couldn't update it to master, but it demonstrates the problem: the button gets disabled but the text does not change.
http://jsbin.com/nigaxinusi/edit?html,js,output
The block form is nice because it allows entering HTML entities, but the readme doesn't say that it breaks the other text options. It says "The component can also take a block".
Has anyone worked with / around this?
1- Update the readme to say block form doesn't support text options for different load states
2- Let people work with the loading state in their block
I think the general solution would be to have a property we can query in the block to decide what to render, as pending might look quite different from default, e.g. having a loading spinner
Passing "text" into the block as a parameter would help in some cases, as below, but is less general as we wouldn't be able to change the decorating HTML (so no loading spinner).
Thanks for reading!
It looks like the build with support for closure actions never got a new version and corresponding npm publish.
Using this addon with Ember 11.1 I am receiving the following deprecation warnings.
DEPRECATION: You're attempting to render a view by passing pendingBinding to a view helper, but this syntax is deprecated. You should use `pending=someValue` instead.
@danmcclain is it still the case that the attribute binding syntax need to be changed for the component to automatically register it?
Adding a .catch
handler to the callback promise, and not re-throwing the provided error leads to the error being swallowed (preventing the error
action bubbling and states).
We should be doing something like:
.catch(function(error) {
if (!_this.isDestroyed) {
set(_this, 'textState', 'rejected');
}
throw error;
});
I just tried to install it using npm install (i'm using ember-cli) but right after installing I get an error trying to run ember server
CLI: 0.0.36
Ember: 1.7
Steps
ember new my-app
cd my-app
npm install ember-cli-async-button --save-dev
ember server
Error
$ ember server
version: 0.0.36
object is not a functionTypeError: object is not a function
at Project.<anonymous> (my-app\node_modules\ember-cli\lib\models\project.js:80:12)
at Array.map (native)
at Project.initializeAddons (my-app\node_modules\ember-cli\lib\models\project.js:71:40)
at EmberApp._notifyAddonIncluded (my-app\node_modules\ember-cli\lib\broccoli\ember-app.js:109:16)
at new EmberApp (my-app\node_modules\ember-cli\lib\broccoli\ember-app.js:105:8)
at Object.<anonymous> (my-app\Brocfile.js:5:11)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Module.require (module.js:364:17)
at require (module.js:380:17)
at Object.loadBrocfile (my-app\node_modules\ember-cli\node_modules\broccoli\lib\builder.js:147:14)
at Class.module.exports.Task.extend.init (my-app\node_modules\ember-cli\lib\models\builder.js:14:26)
at new Class (my-app\node_modules\ember-cli\lib\models\core-object.js:18:12)
at Class.module.exports.Task.extend.run (my-app\node_modules\ember-cli\lib\tasks\serve.js:15:19)
at Class.module.exports.Command.extend.run (my-app\node_modules\ember-cli\lib\commands\serve.js:35:18)
at Class.Command.validateAndRun (my-app\node_modules\ember-cli\lib\models\command.js:74:15)
at CLI.<anonymous> (my-app\node_modules\ember-cli\lib\cli\cli.js:33:20)
at $$$internal$$tryCatch (my-app\node_modules\ember-cli\node_modules\rsvp\dist\rsvp.js:470:16)
at $$$internal$$invokeCallback (my-app\node_modules\ember-cli\node_modules\rsvp\dist\rsvp.js:482:17)
at $$$internal$$publish (my-app\node_modules\ember-cli\node_modules\rsvp\dist\rsvp.js:453:11)
at $$rsvp$asap$$flush (my-app\node_modules\ember-cli\node_modules\rsvp\dist\rsvp.js:1531:9)
at process._tickCallback (node.js:415:13)
The master version of the addon is unusable for me.
Including
"ember-cli-async-button": "git://github.com/dockyard/ember-cli-async-button.git",
to package.json
renders the app impossible to start. Running ember s
results in an error "Missing template processor". Stacktrace.
This is reproducible on a fresh ember new foo
project.
I have the following test which is trying to click a button is inside a modal.
const selector = `button:contains("${buttonText}"), a:contains("${buttonText}")`;
const found = find(selector, Ember.$('body'));
assert.equal(1, found.length, `Should find the button or link with text "${buttonText}"`);
click(selector, Ember.$('body')); <--------- button click
found.click(); <--------------- does not work either
In the modal I have tried the following button types.
// (FAIL) If the button is an async button it does not fire the action at all
{{async-button class="btn btn-primary" type="button" action=(route-action 'save' model) default="Proceed" pending="Saving..."}}
// (SUCCESS) The same test but using a regular button and the action is fired
<button class="btn btn-primary" type="button" onclick={{route-action 'save' model}}>Proceed</button>
The button click fires without any errors in both cases so it is not like the button is not found.
The reason for passing a context to click
and find
is that without it QUnit was unable to find the control as it is rendered inside the application template.
This will get rid of these warnings:
DEPRECATION: Overriding init without calling this._super is deprecated. Please call
this._super.init && this._super.init.apply(this, arguments);addon:
ember-cli-htmlbars at Function.Addon.lookup (/Users/devinus/Projects/rebelmail-dashboard/node_modules/ember-cli/lib/models/addon.js:1009:27)
Can we get the npm version updated to the latest version? The current one is from ages ago and there are some important fixes I need.
I have a fulfilled
text defined but not a rejected
, and when rejected the button stays with the fulfilled
text rather than defaulting to default
as the docs mention.
rejected
Special text used if the promise is rejected. If not provided will use the default value.
As mentioned by @bcardarella in this comment, it sounds like the original maintainers have placed this project into maintainence mode.
He mentioned that DockYard will be exploring other options with ember-concurrency, though I still feel that a convenience library like this is pretty valuable. Digging into the addon code, it seems like ember-concurrency could be utilized in this library to get rid of some of the !isDestroyed
calls.
I am willing to take ownership of this library (along with others if they're interested) if DockYard no longer wants to actively maintain it.
Hi. I am trying to use the component in my template, after installing it via NPM.
{{async-button action="save" default="Save" pending="Saving..."}}
However, when running the app, I get this error:
Uncaught Error: <my@view:search-map::ember831> Handlebars error: Could not find component or helper named 'async-button'
Any idea why?
I've found that phantomJS doesn't seem to respect the line below (making the type of the button truly submit). Is this a known issue/ does a workaround or explanation exist anywhere that I could read up on this? Mostly curious why chrome generates the correct html and phantom 1.9.16 doesn't
https://github.com/dockyard/ember-cli-async-button/blob/master/addon/components/async-button.js#L17
Thanks again for maintaining such a great OSS project !
Hey guys,
I just discovered this plugin a few hours ago and have been playing around with it. How can I display different blocks within the async-button component based on the state of the request?
I see that the classBinding comes for free via textState
, but I would really like to be able to do something like (assume button
passed into block):
{{#if button.isPending}}
loader animation (svg)
{{else}}
normal button text
{{/if}}
Whereas in the readme, simple text strings are used. How can I work with something more verbose/nuanced like the above? The code in #71 pretty much captures what I want to do, but it seems merging it was decided against, and I don't see any other real examples of what I'm trying to accomplish demonstrated elsewhere within the docs. Apologies if I've just overlooked something.
Thanks!
I was trying so many different combinations of making promises and returning them in the action...
I discovered in the demo, a callback is used.
http://jsbin.com/qokogasilu/1/edit?html,css,js,output
so, in my code, I now have this:
actions: {
// callback required for async button
register(callback) {
this.get('pathStore').storeCurrentRoute();
let promise = this.get('model').save().then(user => {
this.sendAction('successAction');
user.unloadRecord();
});
callback(promise);
},
},
and now my async-button correctly stops being in the pending state upon promise return (presumably -- it's still unclear why there needs to be a callback with a promised passed - esp since this is an anti-pattern in ember).
This might be an obvious one, but how can I use this button with a spinning image when it's in the pending state?
Or am I better just going manual style like this: http://guides.emberjs.com/v1.10.0/cookbook/helpers_and_components/spin_button_for_asynchronous_actions/
Thanks!
Ember: 1.11.1
Ember-Cli: 0.2.3
I just tried using the new syntax to allow extra arguments to be passed to the async-button action.
{{async-button shipment action="advise" default="Advise" pending="Advising..." rejected="Failed Try Again"}}
Uncaught Error: Assertion Failed: You can only pass attributes (such as name=value) not bare values to a helper for a View found in 'bom@component:async-button:'
I have a form with validation and an async "submit" button,
I would like to make the button disabled when the validation fails OR while the async action is taking place.
Is there an elegant way to make it happen?
I recommend adding this use case to the documentation/demo because the form+validation+async+submit is a very common use case.
In my page controller I have created the following property:
foo: true
Now, in my page template I'm doing this:
A button with no text as rendered!
At the same time, these work fine:
I've tried reproducing the problem with a boilerplate component.
I have created an app/templates/components/x-bar.hbs
file with the following content:
Now, in my page template I'm doing this:
It renders as Hello
. Thus I conclude that the issue is specific to ember-cli-async-button
.
I'm getting this deprecation log in reference to async-button...
DEPRECATION: Accessing 'template' in <web@component:async-button::ember472> is deprecated. To determine if a block was specified to <web@component:async-button::ember472> please use '{{#if hasBlock}}' in the components layout.
at HANDLERS.(anonymous function) (http://localhost:4201/assets/vendor.js:72821:7)
at raiseOnDeprecation (http://localhost:4201/assets/vendor.js:72907:7)
at HANDLERS.(anonymous function) (http://localhost:4201/assets/vendor.js:72821:7)
at handleDeprecationWorkflow (http://localhost:4201/assets/vendor.js:72956:9)
at HANDLERS.(anonymous function) (http://localhost:4201/assets/vendor.js:72821:7)
at deprecationCollector (http://localhost:4201/assets/vendor.js:72978:5)
at HANDLERS.(anonymous function) (http://localhost:4201/assets/vendor.js:72821:7)
at invoke (http://localhost:4201/assets/vendor.js:72833:7)
at Object.deprecate (http://localhost:4201/assets/vendor.js:72912:5)
Is this due to my usage, or something within the addon?
thanks!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.