ember cli admin

Ember-Cli-Administrador

Ember-cli-admin es un poderoso panel de administración para proyectos ember-cli que se basa en ideas de ActiveAdmin y AbAdmin.

ver ejemplo

Ejemplo de Ember-cli-admin

Pasos de configuración rápida

Instalar

Ejecute ember install ember-cli-admin

O si estás usando Ember CLI entre 0.2.2 y 0.1.4:

Ejecute ember install:addon ember-cli-admin

O si estás usando Ember CLI 0.1.4 o anterior:

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

Generar

1. Ejecute ember g admin-app "My Awesome App Name"
2. Ejecute ember g table-view-resource my-resources

¡Eso es todo!

También puedes ver tu wiki si quieres más detalles sobre la instalación o simplemente necesitas hacerlo manualmente.

Planos

Ember-Cli-Admin proporciona algunos planos predeterminados.

Estos son:

• admin-app : genera el andamio básico de la aplicación ember-cli-admin;
• controlador de vista de tabla : genera TableViewController;
• controlador de vista de árbol : genera TreeViewController;
• table-view-resource : genera el modelo, TableViewController y los registra en MetaRouter y Navigation;
• recurso-vista-árbol : igual que recurso-vista-tabla, pero con TreeViewController y el modelo adecuado para ello;

Complementos

Ember-Cli-Admin tiene algunos complementos útiles que puede utilizar para ampliar la funcionalidad predeterminada del panel:

1. Ember-Cli-Admin-Auth: agrega autorización a Ember-Cli-Admin

2. Ember-Cli-Admin-Languages: agrega entradas en varios idiomas en los formularios

Descripción general de las funciones

Campos de formulario

Puede especificar los atributos que se utilizarán en el formulario de administrador con la propiedad formAttributes en el 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' ]
} ) ;

Campos de tabla

Puede especificar los atributos que se utilizarán en la tabla de administración con la propiedad tableAttributes en el 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' ]
} ) ;

Acciones de elementos

Puede personalizar las acciones de los elementos con la propiedad itemActions en el 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" } ]
} ) ;

O puede agregar acciones personalizadas con la propiedad additionalActions en el 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!' ) ;
    }
  }
} ) ;

Tal vez tenga acciones que dependan del modelo, por lo que puede agregarlas en su modelo: O puede agregar acciones personalizadas con la propiedad additionalActions en el 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' )

Acciones por lotes

Puede especificar las acciones por lotes con la propiedad batchActions en el 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!' ) ;
    }
  }
} ) ;

Ember-cli-admin también usa ember-cli-map

Actualmente admitimos el componente google-map que se puede agregar a su formulario de recursos con la siguiente configuración simple

 //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 obtener más información, consulte ember-cli-map LÉAME.

Cargas de archivos

Digamos que nuestro usuario tiene un avatar principal y/o muchas imágenes de avatar.

Para mostrarlos y cargarlos en la interfaz de administración, realice la siguiente configuración.

Primero agregue el modelo de avatar, extendiéndolo desde ember-cli-admin Asset:

 //app/models/avatar.js
import Asset from 'ember-cli-admin/logics/asset' ;
import DS from 'ember-data' ;

export default Asset . extend ( ) ;

Agregue avatar/avatares al modelo de usuario y especifíquelos en la propiedad de fileuploads :

 //app/models/user.js
...
export default DS . Model . extend ( {
  ...
  avatar :                     DS . belongsTo ( 'avatar' ) ,
  avatars :                    DS . hasMany ( 'avatar' , { async : true } ) ,

  fileuploads : [ "avatar" , "avatars" ]
} ) ;

Luego agregue un 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 ;

De forma predeterminada, la propiedad de tipo de activo FileuploadAdapterMixin es Asset .

Si su API de backend espera una propiedad de parámetros de solicitud de tipo diferente, puede especificarla en su modelo de activos.

Digamos que su API excluye el tipo de Avatar para que sea "Avatar", no "Activo".

Además, debe definir la propiedad content_type en su modelo. Ember-Cli-admin acepta tipos MIME estándar y adivina cómo mostrar sus activos en función de ellos.

Puedes hacer esto editando tu modelo de Avatar de esta manera:

 //app/models/avatar.js
...

var avatar = Asset . extend ( {
  type : DS . attr ( 'string' , { defaultValue : 'Avatar' } ) ,
  content_type : DS . attr ( 'string' )
} ) ;

...

Después de eso, debes especificar sortAssetsBy: 'assetOrderProperty' en el controlador.

Establecer título

De forma predeterminada, el título de la barra de navegación muestra el prefijo del módulo de su aplicación. Puede cambiar esto a cualquier nombre que elija agregando la propiedad 'appName' al archivo de configuración de su aplicación.

Aquí también puede cambiar hacia dónde apunta realmente el enlace del título a través de la propiedad 'titleLinksTo'. Si esta propiedad no está configurada, apuntará a la URL raíz de forma predeterminada.

 //config/environment.js
...
var ENV = {
  ...
  EmberENV : {
    appName : 'application name of your choice' ,
    titleLinksTo : '/example/url/'
    . . .
    }
  . . .
  }

¡Eso es todo!

Personalizar plantillas

También puedes proporcionar tu propia plantilla para mostrar, editar y nuevas acciones. Estos pueden anular los valores predeterminados globales, así como los de recursos específicos.

Anulaciones globales

Coloque su plantilla en el directorio app/templates/admin . Por ejemplo:

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

Anulación de recursos específicos

Coloque su plantilla en el directorio app/templates/[controllerName] . Para recursos de usuarios:

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

Si tiene plantillas admin/new.hbs y users/new.hbs , esta última se utilizará para el recurso de usuarios y la primera para todos los demás recursos.

Búsqueda

Todos los atributos del modelo, excepto las relaciones, se pueden buscar en el formulario de búsqueda en la página de índice de recursos. Por ahora, representamos entradas de texto para todos los atributos. Esto se solucionará en el futuro.

En su controlador de recursos, puede especificar atributos de búsqueda que aparecen en este formulario:

 //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' )
. . .

También puedes proporcionar tu propia plantilla de formulario de búsqueda:

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

Más opciones para el registro de autocompletar en app/components/admin-typeahead.js

Clasificación

Puede ordenar registros en la página de índice de recursos por atributos en orden ascendente o descendente. Para especificar campos para ordenar, agregue la propiedad sortFields en su controlador de recursos:

 //app/controllers/users.js
import SearchLogic from 'ember-cli-admin/dsl/search'
...
  sortFields : [ 'id' , 'name' ] ,
...

Barra lateral

Puedes poner una barra lateral para cada recurso:

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

También puedes proporcionar tu propia plantilla de barra lateral:

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

Vista de árbol anidado

Puede mostrar árboles de registros anidados en Ember-Cli-Admin. Se implementan siguiendo el patrón del modelo de conjunto anidado.

En tu 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 ( )

} ) ;

Agregue TreeViewController Mixin a su 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' ]
} ) ; 

Mostrar/ocultar columna de tabla

Puede elegir qué columnas de la tabla mostrar mediante el ícono de configuración de la tabla al lado del botón "Acciones por lotes" en el encabezado de la tabla.

Cada controlador tiene su propio conjunto de configuraciones de tabla que persisten a través del almacenamiento local del navegador.

Integración con elasticsearch

Ahora puede integrar el administrador con el servidor elasticsearch. Necesita utilizar la descarga del adaptador elasticsearch en el proveedor e importarlo a la aplicación. Luego necesitas convertir CORS en elasticsearch y crear una ruta de recursos:

  //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
        } ) ;
      } ) ;
    }
  } ) ; 

Cambiar mayúsculas y minúsculas para el texto en la tabla, rutas de navegación, barra de búsqueda, etc.

Puede cambiar cómo se muestra el texto en la tabla, ruta de navegación, barra de búsqueda, etc.

Para hacer esto, debe especificar la propiedad caseType en el controlador.

Por ejemplo,

  //controllers/users.js

  import TableViewController from 'ember-cli-admin/mixins/controllers/table-view'

  export default Ember . Controller . extend ( TableViewController , {
    caseType : 'title'
  } ) ;

Tiene estas opciones para cambiar de caso de forma predeterminada:

• title
• upper
• lower

Por defecto, todo el texto está en minúsculas.

Para pan rallado:

 //config/environment.js
...
var ENV = {
  ...
  EmberENV : {
    appName : 'application name of your choice' ,
    titleLinksTo : '/example/url/' ,
    caseType : 'title'
    . . .
    }
  . . .
  } 

Contribución

Consulte nuestras páginas wiki sobre cómo contribuir y la hoja de ruta.

Licencia

[Con licencia MIT] 1