ember cli admin

Ember-Cli-Administrateur

Ember-cli-admin est un puissant tableau de bord d'administration pour les projets ember-cli qui repose sur les idées d'ActiveAdmin et d'AbAdmin.

Voir exemple

Exemple d'Ember-cli-admin

Étapes de configuration rapide

Installer

Exécutez ember install ember-cli-admin

Ou si vous utilisez Ember CLI entre 0.2.2 et 0.1.4 :

Exécutez ember install:addon ember-cli-admin

Ou si vous utilisez Ember CLI 0.1.4 ou une version antérieure :

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

Générer

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

C'est tout !

Vous pouvez également consulter votre wiki si vous souhaitez plus de détails sur l'installation ou si vous avez simplement besoin de le faire manuellement.

Plans

Ember-Cli-Admin fournit des plans par défaut.

Ce sont :

• admin-app - génère un échafaudage d'application de base ember-cli-admin ;
• table-view-controller - génère TableViewController ;
• tree-view-controller - génère TreeViewController ;
• table-view-resource - génère le modèle, TableViewController et les enregistre dans MetaRouter et Navigation ;
• tree-view-resource - identique à table-view-resource, mais avec TreeViewController et le modèle adapté ;

Plugins

Ember-Cli-Admin propose des plugins utiles que vous pouvez utiliser pour étendre les fonctionnalités du tableau de bord par défaut :

1. Ember-Cli-Admin-Auth - ajoute une autorisation à Ember-Cli-Admin

2. Ember-Cli-Admin-Languages ​​- ajoute des entrées multilingues dans les formulaires

Aperçu des fonctionnalités

Champs de formulaire

Vous pouvez spécifier les attributs à utiliser dans le formulaire d'administration avec la propriété formAttributes dans le contrôleur :

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

Champs du tableau

Vous pouvez spécifier les attributs à utiliser dans la table admin avec la propriété tableAttributes dans le contrôleur :

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

Actions sur les éléments

Vous pouvez personnaliser les actions des éléments avec la propriété itemActions dans le contrôleur :

 //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 vous pouvez ajouter des actions personnalisées avec la propriété additionalActions dans le contrôleur :

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

Peut-être que vous avez des actions qui dépendent du modèle, vous pouvez donc ajouter votre modèle : ou vous pouvez ajouter des actions personnalisées avec la propriété additionalActions dans le modèle :

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

Actions par lots

Vous pouvez spécifier les actions par lots avec la propriété batchActions dans le contrôleur :

 //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 utilise également ember-cli-map

Nous prenons actuellement en charge le composant google-map qui peut être ajouté à votre formulaire de ressources avec la configuration simple suivante

 //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' ]

} ) ;

Pour plus d'informations, voir ember-cli-map README.

Téléchargements de fichiers

Disons que notre utilisateur a un avatar principal et/ou plusieurs images d'avatar.

Pour les afficher et les télécharger dans l’interface d’administration, effectuez la configuration suivante.

Ajoutez d'abord le modèle d'avatar, en l'étendant à partir de l'actif ember-cli-admin :

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

export default Asset . extend ( ) ;

Ajoutez un ou plusieurs avatars au modèle utilisateur et spécifiez-les dans la propriété fileuploads :

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

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

Ajoutez ensuite un adaptateur Avatar comme ceci :

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

Par défaut, la propriété de type d'actif FileuploadAdapterMixin est Asset .

Si votre API backend attend une propriété de paramètres de demande de type différente, vous pouvez la spécifier dans votre modèle d'actif.

Disons que votre API, à l'exception du type d'avatar, est "Avatar" et non "Actif".

En outre, vous devez définir la propriété content_type dans votre modèle. Ember-Cli-admin accepte les types MIME standard et devine comment afficher vos actifs en fonction de ceux-ci.

Vous pouvez le faire en modifiant votre modèle d'avatar comme ceci :

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

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

...

Après cela, vous devez spécifier sortAssetsBy: 'assetOrderProperty' dans le contrôleur.

Définir le titre

Par défaut, le titre de la barre de navigation affiche le préfixe du module de votre application. Vous pouvez le remplacer par le nom de votre choix en ajoutant la propriété « appName » au fichier de configuration de votre application.

Ici, vous pouvez également modifier l'endroit vers lequel pointe le lien du titre via la propriété 'titleLinksTo'. Si cette propriété n'est pas définie, elle pointera par défaut vers l'URL racine.

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

C'est ça!

Personnaliser les modèles

Vous pouvez également fournir votre propre modèle pour l'affichage, la modification et les nouvelles actions. Ceux-ci peuvent remplacer les valeurs par défaut globales ainsi que pour des ressources spécifiques.

Remplacements globaux

Placez votre modèle dans le répertoire app/templates/admin . Par exemple:

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

Remplacement spécifique à une ressource

Placez votre modèle dans le répertoire app/templates/[controllerName] . Pour la ressource des utilisateurs :

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

Si vous disposez des modèles admin/new.hbs et users/new.hbs , ce dernier sera utilisé pour votre ressource utilisateurs, et le premier pour toutes les autres ressources.

Recherche

Tous les attributs du modèle, à l'exception des relations, peuvent être recherchés dans le formulaire de recherche sur la page d'index des ressources. Pour l'instant, nous rendons les entrées de texte pour tous les attributs. Cela sera corrigé à l’avenir.

Dans votre contrôleur de ressources, vous pouvez spécifier les attributs de recherche qui apparaissent sous ce formulaire :

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

Vous pouvez également fournir votre propre modèle de formulaire de recherche :

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

Plus d'options pour l'enregistrement de saisie semi-automatique dans app/components/admin-typeahead.js

Tri

Vous pouvez trier les enregistrements sur la page d'index des ressources par attributs par ordre croissant ou décroissant. Pour spécifier les champs à trier, ajoutez la propriété sortFields dans votre contrôleur de ressources :

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

Barre latérale

Vous pouvez mettre une barre latérale pour chaque ressource :

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

Vous pouvez également fournir votre propre modèle de barre latérale :

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

Vue arborescente imbriquée

Vous pouvez afficher des arborescences d'enregistrements imbriquées dans Ember-Cli-Admin. Ils sont implémentés selon le modèle de modèle d’ensemble imbriqué.

Dans votre modèle :

 //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 ( )

} ) ;

Ajoutez TreeViewController Mixin à votre contrôleur de ressources :

 //app/controllers/catalogues.js
import TreeViewController from 'ember-cli-admin/mixins/controllers/tree-view' ;

export default Ember . Controller . extend ( TreeViewController , {
  formAttributes : [ 'name' ]
} ) ; 

Afficher/masquer la colonne du tableau

Vous pouvez choisir les colonnes du tableau à afficher via l'icône des paramètres du tableau à côté du bouton « Actions par lots » dans l'en-tête du tableau.

Chaque contrôleur possède son propre ensemble de paramètres de table qui persistent via le stockage local du navigateur.

Intégration avec elasticsearch

Vous pouvez désormais intégrer l'administrateur au serveur elasticsearch. Vous devez utiliser le téléchargement de l'adaptateur elasticsearch dans le fournisseur et l'importer dans l'application. Ensuite, vous devez activer CORS dans elasticsearch et créer une route de ressources :

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

Changer la casse du texte dans le tableau, le fil d'Ariane, la barre de recherche, etc.

Vous pouvez modifier la façon dont le texte est affiché dans le tableau, le fil d'Ariane, la barre de recherche, etc.

Pour ce faire, vous devez spécifier la propriété caseType dans le contrôleur.

Par exemple,

  //controllers/users.js

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

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

Par défaut, vous disposez de ces options pour le changement de casse :

• title
• upper
• lower

Par défaut, tout le texte est en minuscules.

Pour la chapelure :

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

Contribution

Consultez nos pages wiki sur la contribution et la feuille de route.

Licence

[Sous licence MIT] 1