ember cli admin herunterladen – ember cli admin -Quellcode herunterladen

Ember-Cli-Admin

Ember-cli-admin ist ein leistungsstarkes Admin-Dashboard für Ember-cli-Projekte, das auf Ideen von ActiveAdmin und AbAdmin basiert.

Siehe Beispiel

Ember-cli-admin-Beispiel

Schnelle Einrichtungsschritte

Installieren

Führen Sie ember install ember-cli-admin aus

Oder wenn Sie Ember CLI zwischen 0.2.2 und 0.1.4 verwenden:

Führen Sie ember install:addon ember-cli-admin aus

Oder wenn Sie Ember CLI 0.1.4 oder älter verwenden:

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

Erzeugen

Führen Sie ember g admin-app "My Awesome App Name" aus.
Führen Sie ember g table-view-resource my-resources aus

Das ist alles!

Sie können auch Ihr Wiki einsehen, wenn Sie weitere Details zur Installation wünschen oder diese einfach manuell durchführen müssen.

Blaupausen

Ember-Cli-Admin stellt einige Standard-Blueprints bereit.

Diese sind:

admin-app – generiert das grundlegende Ember-cli-admin-App-Gerüst;
Table-View-Controller – generiert TableViewController;
Tree-View-Controller – generiert TreeViewController;
table-view-resource – generiert Modell, TableViewController und registriert sie in MetaRouter und Navigation;
Tree-View-Ressource – wie Table-View-Ressource, jedoch mit TreeViewController und einem dafür geeigneten Modell;

Plugins

Ember-Cli-Admin verfügt über einige nützliche Plugins, mit denen Sie die Standard-Dashboard-Funktionalität erweitern können:

Ember-Cli-Admin-Auth – fügt Autorisierung zu Ember-Cli-Admin hinzu
Ember-Cli-Admin-Languages – fügt mehrsprachige Eingaben in Formularen hinzu

Funktionsübersicht

Formularfelder

Sie können die im Admin-Formular zu verwendenden Attribute mit der Eigenschaft formAttributes im Controller angeben:

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

Tabellenfelder

Sie können die in der Admin-Tabelle zu verwendenden Attribute mit der Eigenschaft tableAttributes im Controller angeben:

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

Artikelaktionen

Sie können Elementaktionen mit itemActions -Eigenschaft im Controller anpassen:

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

Oder Sie können benutzerdefinierte Aktionen mit der Eigenschaft additionalActions im Controller hinzufügen:

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

Möglicherweise verfügen Sie über modellabhängige Aktionen, die Sie Ihrem Modell hinzufügen können: Oder Sie können benutzerdefinierte Aktionen mit der Eigenschaft additionalActions im Modell hinzufügen:

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

Batch-Aktionen

Sie können die Batch-Aktionen mit der Eigenschaft batchActions im Controller angeben:

 //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 verwendet auch Ember-cli-map

Wir unterstützen derzeit google-map Komponente, die mit der folgenden einfachen Einrichtung zu Ihrem Ressourcenformular hinzugefügt werden kann

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

} ) ;

Weitere Informationen finden Sie in der README-Datei zu ember-cli-map.

Datei-Uploads

Angenommen, unser Benutzer hat einen Hauptavatar und/oder viele Avatarbilder.

Führen Sie die folgenden Schritte aus, um sie in der Admin-Oberfläche anzuzeigen und hochzuladen.

Fügen Sie zunächst das Avatar-Modell hinzu und erweitern Sie es von 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 ( ) ;

Fügen Sie Avatar/Avatare zum Benutzermodell hinzu und geben Sie sie in der Eigenschaft fileuploads an:

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

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

Fügen Sie dann einen Avatar-Adapter wie diesen hinzu:

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

Standardmäßig ist die Asset-Typ-Eigenschaft „FileuploadAdapterMixin“ Asset .

Wenn Ihre Back-End-API unterschiedliche Typanforderungsparametereigenschaften erwartet, können Sie diese in Ihrem Asset-Modell angeben.

Nehmen wir an, Ihre API akzeptiert, dass der Avatar-Typ „Avatar“ und nicht „Asset“ ist.

Außerdem müssen Sie die Eigenschaft content_type in Ihrem Modell definieren. Ember-Cli-admin akzeptiert Standard-MIME-Typen und errät, wie Ihre Assets darauf basierend angezeigt werden.

Sie können dies tun, indem Sie Ihr Avatar-Modell wie folgt bearbeiten:

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

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

...

Danach sollten Sie sortAssetsBy: 'assetOrderProperty' im Controller angeben.

Titel festlegen

Standardmäßig zeigt der Titel der Navigationsleiste das Modulpräfix Ihrer Anwendung an. Sie können dies in einen beliebigen Namen Ihrer Wahl ändern, indem Sie die Eigenschaft „appName“ zu Ihrer Anwendungskonfigurationsdatei hinzufügen.

Hier können Sie über die Eigenschaft „titleLinksTo“ auch ändern, wohin der Titellink tatsächlich verweist. Wenn diese Eigenschaft nicht festgelegt ist, verweist sie standardmäßig auf die Stamm-URL.

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

Das ist es!

Passen Sie Vorlagen an

Sie können auch Ihre eigene Vorlage für die Show, Bearbeitung und neue Aktionen bereitstellen. Diese können die globalen Standardeinstellungen sowie für bestimmte Ressourcen überschreiben.

Globale Überschreibungen

Legen Sie Ihre Vorlage im Verzeichnis app/templates/admin ab. Zum Beispiel:

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

Ressourcenspezifische Überschreibung

Legen Sie Ihre Vorlage im Verzeichnis app/templates/[controllerName] ab. Für Benutzerressource:

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

Wenn Sie über die Vorlagen admin/new.hbs und users/new.hbs verfügen, wird letztere für Ihre Benutzerressource und die erste für alle anderen Ressourcen verwendet.

Suchen

Alle Modellattribute mit Ausnahme von Beziehungen können im Suchformular auf der Ressourcenindexseite durchsucht werden. Im Moment rendern wir Texteingaben für alle Attribute. Dies wird in Zukunft behoben.

In Ihrem Ressourcencontroller können Sie Suchattribute angeben, die in dieser Form angezeigt werden:

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

Sie können auch Ihre eigene Suchformularvorlage bereitstellen:

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

Weitere Optionen für die automatische Vervollständigungsprüfung finden Sie in app/components/admin-typeahead.js

Sortierung

Sie können Datensätze auf der Ressourcenindexseite nach Attributen in aufsteigender oder absteigender Reihenfolge sortieren. Um Felder für die Sortierung anzugeben, fügen Sie die Eigenschaft sortFields in Ihrem Ressourcencontroller hinzu:

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

Seitenleiste

Sie können für jede Ressource eine Seitenleiste einfügen:

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

Sie können auch Ihre eigene Seitenleistenvorlage bereitstellen:

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

Verschachtelte Baumansicht

Sie können verschachtelte Datensatzbäume in Ember-Cli-Admin anzeigen. Sie werden nach dem Nested-Set-Modellmuster implementiert.

In Ihrem Modell:

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

} ) ;

Fügen Sie TreeViewController Mixin zu Ihrem Ressourcencontroller hinzu:

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

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

Tabellenspalte ein-/ausblenden

Über das Tabelleneinstellungssymbol neben der Schaltfläche „Stapelaktionen“ im Tabellenkopf können Sie auswählen, welche Tabellenspalten angezeigt werden sollen.

Jeder Controller verfügt über einen eigenen Satz Tabelleneinstellungen, die über den lokalen Speicher des Browsers bestehen bleiben.

Integration mit Elasticsearch

Jetzt können Sie den Administrator in den Elasticsearch-Server integrieren. Sie müssen den Elasticsearch-Adapter beim Anbieter herunterladen und in die App importieren. Dann müssen Sie CORS in Elasticsearch umwandeln und eine Ressourcenroute erstellen:

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

Ändern Sie die Groß-/Kleinschreibung für Text in Tabellen, Breadcrumbs, Suchleisten usw.

Sie können ändern, wie Text in der Tabelle, in Breadcrumbs, in der Suchleiste usw. angezeigt wird.

Dazu sollten Sie die Eigenschaft caseType im Controller angeben.

Zum Beispiel,

  //controllers/users.js

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

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

Sie haben standardmäßig folgende Möglichkeiten, die Groß-/Kleinschreibung zu ändern:

title
upper
lower

Standardmäßig wird der gesamte Text in Kleinbuchstaben geschrieben.

Für Semmelbrösel:

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

Beitrag

Weitere Informationen zum Mitwirken und zur Roadmap finden Sie auf unseren Wiki-Seiten.

Lizenz

[Lizenziert unter MIT-Lizenz] 1

Expandieren