ember cli admin下載 - ember cli admin原始碼下載

Ember-Cli-管理

Ember-cli-admin 是 ember-cli 專案的強大管理儀表板，它是基於 ActiveAdmin 和 AbAdmin 的想法建構。

請參閱範例

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；
樹視圖控制器- 產生 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 自述文件。

文件上傳

假設我們的用戶有一個主要頭像和/或許多頭像圖片。

若要在管理介面中顯示和上傳它們，請執行下列設定。

首先加入頭像模型，從 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 ( ) ;

將頭像新增至使用者模型中，並在fileuploads屬性上指定它們：

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

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

然後新增一個 Avatar 適配器，如下所示：

 //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 類型屬性為Asset 。

如果您的後端 API 期望不同類型的請求參數屬性，您可以在資產模型中指定它。

假設您的 API 將 Avatar 類型排除為“Avatar”，而不是“Asset”。

此外，您需要在模型中定義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模板，則後者將用於您的使用者資源，第一個模板將用於所有其他資源。

搜尋中

除關係之外的所有模型屬性都可以在資源索引頁面上的搜尋表單中進行搜尋。現在，我們渲染所有屬性的文字輸入。這將在未來得到修復。

在資源控制器中，您可以指定以下形式顯示的搜尋屬性：

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

顯示/隱藏表格列

您可以透過表格標題中「批次操作」按鈕旁的表格設定圖示來選擇要顯示的表格列。

每個控制器都有自己的一組表設置，這些設置透過瀏覽器本地存儲保存。

與彈性搜尋集成

現在您可以將 admin 與 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 頁面。

執照

[取得麻省理工學院許可] 1

展開