ember cli admin
v0.6.12
Ember-cli-admin é um painel de administração poderoso para projetos ember-cli que se baseia nas ideias de ActiveAdmin e AbAdmin.
Exemplo de Ember-cli-admin
Execute ember install ember-cli-admin
Ou se você estiver usando o Ember CLI entre 0.2.2 e 0.1.4:
Execute ember install:addon ember-cli-admin
Ou se você estiver usando o Ember CLI 0.1.4 ou anterior:
npm install ember-cli-admin --save-dev
ember g ember-cli-admin
ember g admin-app "My Awesome App Name"ember g table-view-resource my-resourcesIsso é tudo!
Além disso, você pode ver seu wiki se quiser mais detalhes sobre a instalação ou apenas precisar fazê-lo manualmente.
Ember-Cli-Admin fornece alguns projetos padrão.
Estes são:
Ember-Cli-Admin tem alguns plug-ins úteis que você pode usar para estender a funcionalidade padrão do painel:
Ember-Cli-Admin-Auth – adiciona autorização ao Ember-Cli-Admin
Ember-Cli-Admin-Languages - adiciona entradas multilíngues em formulários
Você pode especificar os atributos a serem usados no formulário administrativo com a propriedade formAttributes no controlador:
//app/controllers/users.js
import Ember from 'ember' ;
import TableViewController from 'ember-cli-admin/mixins/controllers/table-view' ;
export default Ember . Controller . extend ( TableViewController , {
formAttributes : [ 'email' , 'name' ]
} ) ; Você pode especificar os atributos a serem usados na tabela admin com a propriedade tableAttributes no controlador:
//app/controllers/users.js
import Ember from 'ember' ;
import TableViewController from 'ember-cli-admin/mixins/controllers/table-view' ;
export default Ember . Controller . extend ( TableViewController , {
tableAttributes : [ 'email' , 'name' ]
} ) ; Você pode personalizar ações de itens com a propriedade itemActions no controlador:
//app/controllers/users.js
import Ember from 'ember' ;
import TableViewController from 'ember-cli-admin/mixins/controllers/table-view' ;
export default Ember . Controller . extend ( TableViewController , {
itemActions : [ { title : "Edit" ,
"class" : "btn btn-small btn-primary" ,
action : "edit" ,
iconClass : "glyphicon glyphicon-pencil" } ]
} ) ; Ou você pode adicionar ações personalizadas com a propriedade additionalActions no controlador:
//app/controllers/users.js
import Ember from 'ember' ;
import TableViewController from 'ember-cli-admin/mixins/controllers/table-view' ;
export default Ember . Controller . extend ( TableViewController , {
additionalActions : [ { title : "my action" , class : "btn my-action-css" , action : "my" } ] ,
actions : {
my : function ( model ) {
return alert ( 'hi!' ) ;
}
}
} ) ; Talvez você tenha ações dependentes do modelo, então você pode adicionar em seu modelo: Ou você pode adicionar ações personalizadas com a propriedade additionalActions no modelo:
//app/models/user.js
additionalActions: function ( ) {
var actions = [ ] ;
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" } ) ;
}
return actions ;
} . property ( 'is_active' ) Você pode especificar as ações em lote com a propriedade batchActions no controlador:
//app/controllers/users.js
import Ember from 'ember' ;
import TableViewController from 'ember-cli-admin/mixins/controllers/table-view' ;
export default Ember . Controller . extend ( TableViewController , {
batchActions : [ { title : "my action" , confirm : "Are you sure you to do it" , action : "my" } ] ,
actions : {
my : function ( model ) {
return alert ( 'hi!' ) ;
}
}
} ) ; Atualmente oferecemos suporte ao componente google-map que pode ser adicionado ao seu formulário de recurso com a seguinte configuração simples
//app/models/user.js
...
export default DS . Model . extend ( {
...
lat : DS . attr ( 'number' )
long : DS . attr ( 'number' )
zoom : DS . attr ( 'number' )
asGoogleMap : [ 'lat' , 'long' , 'zoom' ]
} ) ;Para obter mais informações, consulte README do ember-cli-map.
Digamos que nosso usuário tenha um avatar principal e/ou muitas imagens de avatar.
Para exibi-los e carregá-los na interface administrativa, faça a seguinte configuração.
Primeiro adicione o modelo de avatar, estendendo-o do ativo ember-cli-admin:
//app/models/avatar.js
import Asset from 'ember-cli-admin/logics/asset' ;
import DS from 'ember-data' ;
export default Asset . extend ( ) ; Adicione avatar/avatares ao modelo User e especifique-os na propriedade fileuploads :
//app/models/user.js
...
export default DS . Model . extend ( {
...
avatar : DS . belongsTo ( 'avatar' ) ,
avatars : DS . hasMany ( 'avatar' , { async : true } ) ,
fileuploads : [ "avatar" , "avatars" ]
} ) ;Em seguida, adicione um adaptador Avatar como este:
//app/adapters/avatar.js
import FileuploadAdapterMixin from 'ember-cli-admin/mixins/fileupload-adapter' ;
import ApplicationAdapter from './application' ;
var avatar = ApplicationAdapter . extend ( FileuploadAdapterMixin , {
} ) ;
export default avatar ; Por padrão, a propriedade do tipo FileuploadAdapterMixin Asset é Asset .
Se sua API de back-end espera propriedades de parâmetros de solicitação de tipo diferente, você pode especificá-la em seu modelo de ativo.
Digamos que sua API exceda o tipo de Avatar como "Avatar", não "Ativo".
Além disso, você precisa definir a propriedade content_type em seu modelo. Ember-Cli-admin aceita tipos MIME padrão e adivinha como exibir seus ativos com base neles.
Você pode fazer isso editando seu modelo de Avatar assim:
//app/models/avatar.js
...
var avatar = Asset . extend ( {
type : DS . attr ( 'string' , { defaultValue : 'Avatar' } ) ,
content_type : DS . attr ( 'string' )
} ) ;
... Depois disso, você deve especificar sortAssetsBy: 'assetOrderProperty' no controlador.
Por padrão, o título da barra de navegação exibe o prefixo do módulo do seu aplicativo. Você pode alterar isso para qualquer nome de sua escolha adicionando a propriedade 'appName' ao arquivo de configuração do seu aplicativo.
Aqui você também pode alterar para onde o link do título realmente aponta por meio da propriedade 'titleLinksTo'. Se esta propriedade não estiver definida, ela apontará para a URL raiz por padrão.
//config/environment.js
...
var ENV = {
...
EmberENV : {
appName : 'application name of your choice' ,
titleLinksTo : '/example/url/'
. . .
}
. . .
}É isso!
Você também pode fornecer seu próprio modelo para exibição, edição e novas ações. Eles podem substituir os padrões globais, bem como recursos específicos.
Coloque seu modelo no diretório app/templates/admin . Por exemplo:
#app/templates/admin/show.hbs
#app/templates/admin/new.hbs
#app/templates/admin/edit.hbs
#app/templates/admin/form.hbs
Coloque seu modelo no diretório app/templates/[controllerName] . Para recurso de usuários:
#app/templates/users/show.hbs
#app/templates/users/new.hbs
#app/templates/users/edit.hbs
Se você tiver modelos admin/new.hbs e users/new.hbs , o último será usado para o recurso de usuários e o primeiro para todos os outros recursos.
Todos os atributos do modelo, exceto os relacionamentos, podem ser pesquisados no formulário de pesquisa na página de índice de recursos. Por enquanto, renderizamos entradas de texto para todos os atributos. Isso será corrigido no futuro.
Em seu controlador de recursos, você pode especificar atributos de pesquisa que aparecem neste formato:
//app/controllers/users.js
...
isShowSearchForm : true ,
searchForm : ( function ( ) {
return new SearchLogic ( ) . form ( this . get ( 'q' ) , function ( ) {
this . input ( 'email' ) ;
this . input ( 'name' , { type : 'autocomplete' , url : '/api/users/autocomplete' } ) ;
this . input ( 'price' , { type : 'number' } ) ;
} ) ;
} ) . property ( 'q' )
. . .Você também pode fornecer seu próprio modelo de formulário de pesquisa:
#app/templates/admin/search.hbs
...
Mais opções para verificação de preenchimento automático em app/components/admin-typeahead.js
Você pode classificar registros na página de índice de recursos por atributos em ordem crescente ou decrescente. Para especificar campos para classificação, adicione a propriedade sortFields em seu controlador de recursos:
//app/controllers/users.js
import SearchLogic from 'ember-cli-admin/dsl/search'
...
sortFields : [ 'id' , 'name' ] ,
...Você pode colocar uma barra lateral para cada recurso:
//app/controllers/users.js
...
isShowSidebar : true ,
sidebarTitle : 'Hi i am sidebar' ,
sidebarContent : '<p>Some Content</p>'
. . .Você também pode fornecer seu próprio modelo de barra lateral:
#app/templates/users/sidebar.hbs
...
Você pode exibir árvores de registros aninhadas no Ember-Cli-Admin. Eles são implementados seguindo o padrão de modelo de conjunto aninhado.
No seu modelo:
//app/models/catalogue.js
...
export default DS . Model . extend ( {
name : DS . attr ( 'string' ) ,
parent_id : DS . attr ( 'number' ) , //necessary
catalogues : DS . hasMany ( 'catalogue' , { async : true , inverse : null } ) ,
children : Ember . computed . alias ( 'catalogues' ) , //necessary
rebuildUrl : function ( ) {
return '/api/v1/catalogues' ; //necessary
} . property ( )
} ) ; Adicione TreeViewController Mixin ao seu controlador de recursos:
//app/controllers/catalogues.js
import TreeViewController from 'ember-cli-admin/mixins/controllers/tree-view' ;
export default Ember . Controller . extend ( TreeViewController , {
formAttributes : [ 'name' ]
} ) ; Você pode escolher quais colunas da tabela serão exibidas por meio do ícone de configurações da tabela próximo ao botão 'Ações em lote' no cabeçalho da tabela.
Cada controlador possui seu próprio conjunto de configurações de tabela que persistem por meio do armazenamento local do navegador.
Agora você pode integrar o administrador ao servidor elasticsearch. Você precisa usar o download do adaptador elasticsearch no fornecedor e importá-lo para o aplicativo. Então você precisa transformar o CORS no elasticsearch e criar a rota do recurso:
//routes/users.js
/* global EDEK*/
import Ember from 'ember' ;
import BaseAdminRouteMixin from 'ember-cli-admin/mixins/routes/base' ;
import ElasticSearch from 'ember-cli-admin/mixins/routes/elasticsearch' ;
BaseAdminRouteMixin . reopen ( ElasticSearch ) ;
export default Ember . Route . extend ( BaseAdminRouteMixin , {
//you need implement this method for ES search
_queryElasticsearch : function ( query , params ) {
var fields = [ ] ;
var text = "" ;
for ( var value in params ) {
fields . pushObject ( value ) ;
text += params [ value ] . value ;
}
if ( fields . length === 0 ) {
return query ;
}
return EDEK . QueryDSL . query ( function ( ) {
return this . flt ( {
fields : fields ,
like_text : text ,
max_query_terms : 12
} ) ;
} ) ;
}
} ) ; Você pode alterar a forma como o texto é exibido na tabela, na localização atual, na barra de pesquisa, etc.
Para fazer isso, você deve especificar a propriedade caseType no controlador.
Por exemplo,
//controllers/users.js
import TableViewController from 'ember-cli-admin/mixins/controllers/table-view'
export default Ember . Controller . extend ( TableViewController , {
caseType : 'title'
} ) ;Você tem estas opções para alteração de maiúsculas e minúsculas por padrão:
titleupperlowerPor padrão, todo o texto está em letras minúsculas.
Para pão ralado:
//config/environment.js
...
var ENV = {
...
EmberENV : {
appName : 'application name of your choice' ,
titleLinksTo : '/example/url/' ,
caseType : 'title'
. . .
}
. . .
} Veja nossas páginas wiki sobre contribuições e o roteiro.
[Licenciado sob licença MIT] 1
