ember-junkdrawer
Install
ember install ember-junkdrawer
Examples
For full docs, visit the docs site
Bootstrap Extras
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.
UI-Card Component
A ergonomic contextual component for bootstrap's .card
components.
Close Button
At long last, our national nightmare of copying and pasting a close button is over.
Link-Button
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}}
List Groups
Bootstrap list groups require too much boilerplate html. We provide a configurable set of components to create groups.
Confirm Button
A little more delicious syntax sugar
Form Controls
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
Tables
Template driven tables with support for filtering.
Forms
Form Providers
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.
DS-Model Provider
Takes a model as an argument and does no validation:
Changeset Providers
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.
Encapsulated Form (Old Way)
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:
Tree Shaking
Use either blacklist or whitelist, not both. In your ember-cli-build.js:
'ember-junkdrawer': {
'blacklist': [
'service:current-user'
]
},
List of things that can be added/removed:
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 |
Random Stuff
Custom Blueprint
ember g changeset-form <name>
: Generates the default .hbs
and .js
files for
the changeset form.
Current User Service
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:
Configuration
//environment.js
ENV['ember-junkdrawer'] = {
enableFeatures: false,
enableIntercom: false,
enableFlashMessages: false
}
If your app doesn't include those, it won't inject them.
Hooks
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(){}
Default Ember Data Time Stamped Model
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')
})