ember cli adminダウンロード - ember cli adminソースコードのダウンロード

Ember-Cli-Admin

Ember-cli-admin は、ActiveAdmin と AbAdmin のアイデアに基づいて構築された ember-cli プロジェクト用の強力な管理ダッシュボードです。

例を参照

Ember-cli-admin の例

簡単なセットアップ手順

インストール

ember install ember-cli-admin実行します

または、0.2.2 ～ 0.1.4 の Ember CLI を使用している場合:

ember install:addon ember-cli-admin実行します。

または、Ember CLI 0.1.4 以前を使用している場合:

 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-resourcesを実行します。

それだけです！

また、インストールの詳細が必要な場合、または単に手動で実行する必要がある場合は、Wiki を参照することもできます。

青写真

Ember-Cli-Admin は、いくつかのデフォルトのブループリントを提供します。

これらは：

admin-app - 基本的な ember-cli-admin アプリスキャフォールドを生成します。
table-view-controller - TableViewController を生成します。
Tree-View-Controller - TreeViewController を生成します。
table-view-resource - モデル、TableViewController を生成し、それらを MetaRouter と Navigation に登録します。
ツリービューリソース- テーブルビューリソースと同じですが、TreeViewController とそれに適したモデルが含まれています。

プラグイン

Ember-Cli-Admin には、デフォルトのダッシュボード機能を拡張するために使用できる便利なプラグインがいくつかあります。

Ember-Cli-Admin-Auth - Ember-Cli-Admin に認証を追加します
Ember-Cli-Admin-Languages - フォームに多言語入力を追加します

機能の概要

フォームフィールド

コントローラーのformAttributesプロパティを使用して、管理フォームで使用する属性を指定できます。

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

テーブルフィールド

コントローラーのtableAttributesプロパティを使用して、管理テーブルで使用する属性を指定できます。

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

アイテムのアクション

コントローラーのitemActionsプロパティを使用してアイテムのアクションをカスタマイズできます。

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

または、コントローラーのadditionalActionsプロパティを使用してカスタムアクションを追加することもできます。

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

おそらく、モデルに依存するアクションがあるので、モデルに追加できます。または、モデルのadditionalActionsプロパティを使用してカスタムアクションを追加できます。

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

バッチアクション

コントローラーのbatchActionsプロパティを使用してバッチアクションを指定できます。

 //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 は ember-cli-map も使用します

現在、 google-mapコンポーネントをサポートしています。これは、次の簡単な設定でリソースフォームに追加できます。

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

} ) ;

詳細については、ember-cli-map README を参照してください。

ファイルのアップロード

たとえば、ユーザーが 1 つのメインアバターや多数のアバター写真を持っているとします。

管理インターフェースで表示およびアップロードするには、次の設定を行います。

まずアバターモデルを追加し、ember-cli-admin アセットから拡張します。

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

export default Asset . extend ( ) ;

アバターをユーザーモデルに追加し、 fileuploadsプロパティで指定します。

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

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

次に、次のようにアバターアダプターを追加します。

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

デフォルトでは、 FileuploadAdapterMixin アセットタイププロパティはAssetです。

バックエンド API が異なるタイプのリクエストパラメータープロパティを想定している場合は、アセットモデルでそれを指定できます。

アバタータイプを除く API が「アセット」ではなく「アバター」であるとします。

また、モデルでcontent_typeプロパティを定義する必要があります。 Ember-Cli-admin は標準の MIME タイプを受け入れ、それに基づいてアセットを表示する方法を推測します。

これを行うには、次のようにアバターモデルを編集します。

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

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

...

その後、コントローラーでsortAssetsBy: 'assetOrderProperty'を指定する必要があります。

タイトルを設定する

デフォルトでは、ナビゲーションバーのタイトルにはアプリケーションのモジュールプレフィックスが表示されます。アプリケーション構成ファイルに「appName」プロパティを追加することで、これを任意の名前に変更できます。

ここでは、「titleLinksTo」プロパティを使用して、タイトルリンクが実際に指す場所を変更することもできます。このプロパティが設定されていない場合、デフォルトでルート URL を指します。

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

それでおしまい！

テンプレートのカスタマイズ

表示、編集、および新しいアクション用に独自のテンプレートを提供することもできます。これらは、特定のリソースだけでなく、グローバルなデフォルトもオーバーライドできます。

グローバルオーバーライド

テンプレートをapp/templates/adminディレクトリに置きます。例えば：

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

リソース固有のオーバーライド

テンプレートをapp/templates/[controllerName]ディレクトリに置きます。ユーザー向けリソース:

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

admin/new.hbsテンプレートとusers/new.hbsテンプレートがある場合、後者は users リソースに使用され、前者は他のすべてのリソースに使用されます。

検索中

リレーションを除くすべてのモデル属性は、リソースインデックスページの検索フォームで検索できます。現時点では、すべての属性のテキスト入力をレンダリングします。これは将来修正される予定です。

リソースコントローラーでは、次の形式で表示される検索属性を指定できます。

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

独自の検索フォームテンプレートを提供することもできます。

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

app/components/admin-typeahead.jsでのオートコンプリートチェックのその他のオプション

仕分け

リソースインデックスページのレコードを属性ごとに昇順または降順に並べ替えることができます。並べ替え用のフィールドを指定するには、リソースコントローラーにsortFieldsプロパティを追加します。

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

サイドバー

各リソースにサイドバーを配置できます。

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

独自のサイドバーテンプレートを提供することもできます。

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

ネストされたツリービュー

Ember-Cli-Admin では、ネストされたレコードのツリーを表示できます。これらは、ネストされたセットモデルパターンに従って実装されます。

モデル内で次のようにします。

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

} ) ;

TreeViewController Mixin をリソースコントローラーに追加します。

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

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

テーブル列の表示/非表示

テーブルヘッダーの「バッチアクション」ボタンの横にあるテーブル設定アイコンを使用して、どのテーブル列を表示するかを選択できます。

各コントローラーには、ブラウザーのローカルストレージを介して保持される独自のテーブル設定セットがあります。

elasticsearch との統合

これで、管理者を elasticsearch サーバーと統合できるようになりました。 elasticsearch アダプターを使用してベンダーにダウンロードし、アプリにインポートする必要があります。次に、elasticsearch で CORS を有効にし、リソースルートを作成する必要があります。

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

表、パンくずリスト、検索バーなどのテキストの大文字と小文字を変更します。

表、パンくずリスト、検索バーなどでのテキストの表示方法を変更できます。

これを行うには、コントローラーでcaseTypeプロパティを指定する必要があります。

例えば、

  //controllers/users.js

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

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

デフォルトでは、大文字と小文字を変更するための次のオプションがあります。

title
upper
lower

デフォルトでは、すべてのテキストが小文字になります。

パンくずリストの場合:

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

貢献

貢献とロードマップについては Wiki ページを参照してください。

ライセンス

【MITライセンスに基づくライセンス】1

拡大する