ember install ember-junkdrawer
For full docs, visit the docs site
The great Ember Bootstrap addon provides a lot of great functionality. This addon provides some useful items outside the scope for the more general purpose addon.
A ergonomic contextual component for bootstrap's .card
components.
At long last, our national nightmare of copying and pasting a close button is over.
Typing btn btn-default
over and over again? SAD! It's the same arguments as {{link-to}}
with an additional optional type
param (defaults to primary
). See Ember Bootstrap {{#bs-button}}
Bootstrap list groups require too much boilerplate html. We provide a configurable set of components to create groups.
A little more delicious syntax sugar 🍯 for when you want to have a button with modal confirmation.
This addon provides two custom form controls: Baremetrics Calendar and Avatar. Avatar is a custom upload type with configurable in-browser image cropping.
The baremetrics calendar element takes a hash of options
that is the same hash available to pass
to Baremetrics Calendar
Template driven tables with support for filtering.
Form providers are a way to provide some isolated business logic in a reusable manner in your UI without duplicating code between components/controllers when needing to reuse form business logic across different UIs.
Takes a model as an argument and does no validation:
For users of ember-changeset, takes a model and optional validators, and provides a changeset. If your server returns JSON:API compliant errors, also applies those errors to the changset after a form submittal.
my-form-component.js:
import { inject as service } from '@ember/service';
import { computed, get } from '@ember/object';
import FormComponent from 'ember-junkdrawer/components/form/changeset-form';
import OrganizationValidations from '../../validators/organization';
export default FormComponent.extend({
flashMessages: service(),
validator: OrganizationValidations,
model: computed(function() {
return get(this, 'organization');
}),
/**
* Success
*/
onSubmitSuccess() {
get(this, 'flashMessages').success('Organization Updated');
},
});
component.hbs:
Use either blacklist or whitelist, not both. In your ember-cli-build.js:
'ember-junkdrawer': {
'blacklist': [
'service:current-user'
]
},
Type | Label |
---|---|
Form Control | form-control:avatar |
Component | component:changeset-form |
Component | component:simple-form-group |
Component | component:table-loader |
Component | component:thing-list-item |
Component | component:thing-list |
Component | component:ui-box |
Component | compoennt:close-button |
Helper | helper:ui-page-property |
Mixin | mixin:model-data-table-common |
Service | service:current-user |
Service | service:ui-global |
ember g changeset-form <name>
: Generates the default .hbs
and .js
files for
the changeset form.
The ember-junkdrawer
current user service provides lots of helpful functionality
for getting the current user via ember-concurrency tasks.
Requirements:
You must have an endpoint to fetch the current user at /users/?current=true
.
That endpoint should serialize with your store's user object.
By default, the CurrentUser service will push data to ember-intercom
. Don't wan't that? You can opt out at anytime:
//environment.js
ENV['ember-junkdrawer'] = {
enableFeatures: false,
enableIntercom: false,
enableFlashMessages: false
}
If your app doesn't include those, it won't inject them.
This addon exposes three hooks you can use to implement in your own. You can use the default
generator to extend the provided service ember generate current-user <your service>
.
didSetupUser(user) {},
didSetupOrganization(organization) {},
didUserLoadError(){}
Tired of using the same stupid model every time?
The time stamped model comes pre-loaded with: created
, modified
, metadata
properties
predefined.
// myapp/app/models/mymodel.js
import TimeStampModel from 'ember-junkdrawer/models/time-stamped-model';
export default TimeStampModel.extend({
custom: DS.attr('string')
})