#Ember-Cli-Admin

Ember-cli-admin is a powerful admin dashboard for ember-cli projects that is built on ideas of ActiveAdmin and AbAdmin.

##See example

Ember-cli-admin example

##Version

0.3.1

##Installation

npm install ember-cli-admin --save-dev

##Dependencies

Run ember-cli-admin generator and install dependencies:

ember g ember-cli-admin
npm install
bower install

Then in your Brocfile.js add bootstrap fonts:

// Put the bootstrap fonts where the bootstrap css expects to find them.varpickFiles=require('broccoli-static-compiler');varbootstrapFonts=pickFiles('bower_components/bootstrap-sass-official/assets/fonts/bootstrap',{srcDir: '/',destDir: '/assets/bootstrap'});varmergeTrees=require('broccoli-merge-trees');module.exports=mergeTrees([app.toTree(),bootstrapFonts]);

Also make sure that your styles in app/styles have proper extensions if an attempt to start the server results in:

app/styles/app.[scss/sass does not exist]

##Setup

###In your app.js

Add AdminResolver:

...
//app/app.jsimportAdminResolverfrom'ember-cli-admin/admin-resolver';App=Ember.Application.extend({Resolver: AdminResolver});
...
exportdefaultApp;

###In your router.js

//app/router.js---importMetaRoutefrom'ember-cli-admin/dsl/meta-route';varRouter;Router=Ember.Router.extend({
...
});Router.map(function(){returnthis.route("dashboard",{path: "/"});});MetaRoute.map(Router,function(){// we'll add routes for our resources here in the next step});exportdefaultRouter;

###Add admin/index template to your application template:

//application.hbs
{{partial'admin/index'}}

###Add routes/main.js in our routes:

//routes/main.jsimportEmberfrom'ember';importBaseAdminRouteMixinfrom'ember-cli-admin/mixins/routes/base';varmainRoute=Ember.Route.extend(BaseAdminRouteMixin);exportdefaultmainRoute;

###Now let's set up resources

For example, if we have the following model:

//app/models/user.jsimportDSfrom'ember-data';exportdefaultDS.Model.extend({email: DS.attr('string'),name: DS.attr('string'),updated_at: DS.attr('string'),created_at: DS.attr('string')});

To add users resource to admin dashboard, just set up users controller like this:

//app/controllers/users.jsimportEmberfrom'ember';importTableViewControllerfrom'ember-cli-admin/mixins/controllers/table-view';exportdefaultEmber.ObjectController.extend(TableViewController);

And add resources to your router:

//app/router.js
...
MetaRoute.map(Router,function(){this.resources("users");});
...

You'll also need to add Navigation initializer to set up your navigation bar:

//app/initializers/navigation.jsimportNavigationfrom'ember-cli-admin/dsl/navigation';exportdefault{name: 'navigation',initialize: function(container,app){returnNavigation.map(function(){//Dashboard page//You can override this if you don't use dashboardthis.navigate("Dashboard",{route: "dashboard"});this.navigate("Admin",function(){returnthis.navigate("Users");});});}};

###Form fields

You can specify the attributes to use in admin form with formAttributes property in the controller:

//app/controllers/users.jsimportEmberfrom'ember';importTableViewControllerfrom'ember-cli-admin/mixins/controllers/table-view';exportdefaultEmber.ObjectController.extend(TableViewController,{formAttributes: ['email','name']});

###Table fields

You can specify the attributes to use in admin table with the tableAttributes property in the controller:

//app/controllers/users.jsimportEmberfrom'ember';importTableViewControllerfrom'ember-cli-admin/mixins/controllers/table-view';exportdefaultEmber.ObjectController.extend(TableViewController,{tableAttributes: ['email','name']});

###Item Actions

You can customize item actions with itemActions property in the controller:

//app/controllers/users.jsimportEmberfrom'ember';importTableViewControllerfrom'ember-cli-admin/mixins/controllers/table-view';exportdefaultEmber.ObjectController.extend(TableViewController,{itemActions: [{title: "Edit","class": "btn btn-small btn-primary",action: "edit",iconClass: "glyphicon glyphicon-pencil"}]});

Or you can add custom actions with additionalActions property in the controller:

//app/controllers/users.jsimportEmberfrom'ember';importTableViewControllerfrom'ember-cli-admin/mixins/controllers/table-view';exportdefaultEmber.ObjectController.extend(TableViewController,{additionalActions: [{title: "my action",class: "btn my-action-css",action: "my"}],actions: {my: function(model){returnalert('hi!');}}});

Maybe you have model depends actions, so you can add in your model: Or you can add custom actions with additionalActions property in the model:

//app/models/user.js
additionalActions: function(){varactions=[];if(this.get('is_active')){actions.pushObject({title: "Toggle Active",class: "btn btn-small btn-warning",action: "toggleActive",iconClass: "glyphicon glyphicon-remove"});}else{actions.pushObject({title: "Toggle Active",class: "btn btn-small btn-green",action: "toggleActive",iconClass: "glyphicon glyphicon-ok"});}returnactions;}.property('is_active')

###Batch Actions You can specify the batch actions with batchActions property in the controller:

//app/controllers/users.jsimportEmberfrom'ember';importTableViewControllerfrom'ember-cli-admin/mixins/controllers/table-view';exportdefaultEmber.ObjectController.extend(TableViewController,{batchActions: [{title: "my action",confirm: "Are you sure you to do it",action: "my"}],actions: {my: function(model){returnalert('hi!');}}});

###Ember-cli-admin also uses ember-cli-map

We currently support google-map component which can be added to your resource form with the following simple setup

//app/models/user.js
...
exportdefaultDS.Model.extend({
...
lat: DS.attr('number')long: DS.attr('number')zoom: DS.attr('number')asGoogleMap: ['lat','long','zoom']});

And don't forget to add Google Maps to your index.html

 <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&key={your API key}&libraries=places">
</script>

For more info see ember-cli-map README.

###Fileuploads

Say, our user has one main avatar and/or many avatar pictures.

To display and upload them in admin interface, do the following setup.

First add avatar model, extending it from ember-cli-admin Asset:

//app/models/avatar.jsimportAssetfrom'ember-cli-admin/logics/asset';importDSfrom'ember-data';exportdefaultAsset.extend();

Add avatar/avatars to User model, and specify them on fileuploads property:

//app/models/user.js
...
exportdefaultDS.Model.extend({
...
avatar: DS.belongsTo('avatar'),avatars: DS.hasMany('avatar',{async: true}),fileuploads: ["avatar","avatars"]});

Then add an Avatar adapter like this:

//app/adapters/avatar.jsimportFileuploadAdapterMixinfrom'ember-cli-admin/mixins/fileupload-adapter';importApplicationAdapterfrom'./application';varavatar=ApplicationAdapter.extend(FileuploadAdapterMixin,{});exportdefaultavatar;

By default, FileuploadAdapterMixin Asset type property is Asset.

If your backend API expect for different type request parameters property you can specify it in your asset model.

Let's say your API excepts Avatar type to be "Avatar", not "Asset". You can do this by editing your Avatar model like this:

//app/models/avatar.js
...
varavatar=Asset.extend({type: DS.attr('string',{defaultValue: 'Avatar'})});
...

###Set title By default, navigation bar title display your application's module prefix. You can change this to any name of you choice by adding 'appName' property to your application config file:

//config/environment.js
...
varENV={
...
EmberENV: {appName: 'application name of your choice',
...
}
...
}

That's it!

##Customize Templates

You can also provide your own template for the show, edit and new actions. These can override the global defaults as well as for specific resources.

###Global Overrides

Put your template in the app/templates/admin directory. For example:

#app/templates/admin/show.hbs
#app/templates/admin/new.hbs
#app/templates/admin/edit.hbs
#app/templates/admin/form.hbs

###Resource Specific Override

Put your template in app/templates/[controllerName] directory. For users resource:

#app/templates/users/show.hbs
#app/templates/users/new.hbs
#app/templates/users/edit.hbs

If you have admin/new.hbs and users/new.hbs templates, the latter will be used for your users resource, and the first for all the other resources.

##Searching

All model attributes, except of relations, are searchable in search form on resource index page. For now, we render text inputs for all attributes. This will be fixed in future.

In your resource controller, you can specify search attributes that appear in this form:

//app/controllers/users.js
...
searchForm: (function(){returnnewSearchLogic().form(this.get('q'),function(){this.input('email');this.input('name',{type: 'autocomplete',url: '/api/users/autocomplete'});this.input('price',{type: 'number'});});}).property('q')...

You can also provide your own search form template:

#app/templates/admin/search.hbs
...

More options for autocomplete check in app/components/admin-typeahead.coffee

##Sorting

You can sort records on resource index page by attributes in ascending or descending order. To specify fields for sorting, add sortFields property in your resource controller:

//app/controllers/users.jsimportSearchLogicfrom'ember-cli-admin/dsl/search'
...
sortFields: ['id','name'],
...

##Sidebar You can put sidebar for each resource:

//app/controllers/users.js
...
isShowSidebar: true,sidebarTitle: 'Hi i am sidebar',sidebarContent: '<p>Some Content</p>'...

You can also provide your own sidebar template:

#app/templates/users/sidebar.hbs
...

###Nested Tree View You can display nested trees of records in Ember-Cli-Admin. They are implemented following the nested set model pattern.

In your model:

//app/models/catalogue.js
...
exportdefaultDS.Model.extend({name: DS.attr('string'),parent_id: DS.attr('number'),//necessarycatalogues: DS.hasMany('catalogue',{async: true,inverse: null}),children: Ember.computed.alias('catalogues'),//necessaryrebuildUrl: function(){return'/api/v1/catalogues';//necessary}.property()});

Add TreeViewController Mixin to your resource controller:

//app/controllers/catalogues.jsimportTreeViewControllerfrom'ember-cli-admin/mixins/controllers/tree-view';exportdefaultEmber.ObjectController.extend(TreeViewController,{formAttributes: ['name']});

##Show/hide table column You can chose what table columns to display via table settings icon next to the 'Batch actions' button in the table header.

Each controller has its own set of table settings that persist via browser local storage.

##Integration with elasticsearch Now you can integrate admin with elasticsearch server. You need use elasticsearch adapter download into vendor and import it to app. Then you need turn CORS in elasticsearch, and create resource route:

//routes/users.js/* global EDEK*/importEmberfrom'ember';importBaseAdminRouteMixinfrom'ember-cli-admin/mixins/routes/base';importElasticSearchfrom'ember-cli-admin/mixins/routes/elasticsearch';BaseAdminRouteMixin.reopen(ElasticSearch);exportdefaultEmber.Route.extend(BaseAdminRouteMixin,{//you need implement this method for ES search_queryElasticsearch: function(query,params){varfields=[];vartext="";for(varvalueinparams){fields.pushObject(value);text+=params[value].value;}if(fields.length===0){returnquery;}returnEDEK.QueryDSL.query(function(){returnthis.flt({fields: fields,like_text: text,max_query_terms: 12});});}});

##Contribution See our wiki pages on contributing and the roadmap.

##License

[Licensed under MIT license] 1