ember cli admin

Ember-Cli-ผู้ดูแลระบบ

Ember-cli-admin เป็นแดชบอร์ดผู้ดูแลระบบที่ทรงพลังสำหรับโปรเจ็กต์ ember-cli ที่สร้างขึ้นจากแนวคิดของ ActiveAdmin และ AbAdmin

ดูตัวอย่าง

ตัวอย่าง Ember-cli-admin

ขั้นตอนการตั้งค่าด่วน

ติดตั้ง

รัน ember install ember-cli-admin

หรือหากคุณใช้ Ember CLI ระหว่าง 0.2.2 ถึง 0.1.4:

รัน ember install:addon ember-cli-admin

หรือหากคุณใช้ Ember CLI 0.1.4 หรือเก่ากว่า:

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

สร้าง

1. เรียกใช้ ember g admin-app "My Awesome App Name"
2. เรียกใช้ ember g table-view-resource my-resources

นั่นคือทั้งหมด!

นอกจากนี้คุณยังสามารถดูวิกิของคุณได้หากต้องการรายละเอียดเพิ่มเติมเกี่ยวกับการติดตั้งหรือเพียงแค่ต้องทำด้วยตนเอง

พิมพ์เขียว

Ember-Cli-Admin จัดเตรียมพิมพ์เขียวเริ่มต้นบางส่วน

เหล่านี้คือ:

• admin-app - สร้างโครงร่างแอป ember-cli-admin พื้นฐาน
• table-view-controller - สร้าง TableViewController;
• tree-view-controller - สร้าง TreeViewController;
• table-view-resource - สร้างโมเดล TableViewController และลงทะเบียนใน MetaRouter และ Navigation
• tree-view-resource - เหมือนกับ table-view-resource แต่มี TreeViewController และรุ่นที่เหมาะสม

ปลั๊กอิน

Ember-Cli-Admin มีปลั๊กอินที่มีประโยชน์ที่คุณสามารถใช้เพื่อขยายฟังก์ชันแดชบอร์ดเริ่มต้น:

1. Ember-Cli-Admin-Auth - เพิ่มการอนุญาตให้กับ Ember-Cli-Admin

2. 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

การอัพโหลดไฟล์

สมมติว่าผู้ใช้ของเรามีอวาตาร์หลักหนึ่งตัวและ/หรือรูปภาพอวาตาร์หลายรูป

หากต้องการแสดงและอัปโหลดในส่วนต่อประสานผู้ดูแลระบบ ให้ตั้งค่าต่อไปนี้

ขั้นแรกให้เพิ่มโมเดลอวาตาร์ โดยขยายจากสินทรัพย์ 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" ]
} ) ;

จากนั้นเพิ่มอะแดปเตอร์ 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 type คือ Asset

หาก API แบ็กเอนด์ของคุณคาดหวังคุณสมบัติพารามิเตอร์คำขอประเภทอื่น คุณสามารถระบุได้ในโมเดลสินทรัพย์ของคุณ

สมมติว่า API ของคุณยกเว้นประเภท Avatar ให้เป็น "Avatar" ไม่ใช่ "Asset"

นอกจากนี้ คุณต้องกำหนดคุณสมบัติ content_type ในโมเดลของคุณ Ember-Cli-admin ยอมรับประเภท MIME มาตรฐานและคาดเดาวิธีแสดงเนื้อหาของคุณตามนั้น

คุณสามารถทำได้โดยแก้ไขโมเดล Avatar ของคุณดังนี้:

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

แสดง/ซ่อนคอลัมน์ตาราง

คุณสามารถเลือกคอลัมน์ตารางที่จะแสดงผ่านไอคอนการตั้งค่าตารางถัดจากปุ่ม 'การดำเนินการเป็นชุด' ในส่วนหัวของตาราง

คอนโทรลเลอร์แต่ละตัวมีชุดการตั้งค่าตารางของตัวเองซึ่งคงอยู่ผ่านที่จัดเก็บในตัวเครื่องของเบราว์เซอร์

บูรณาการกับ elasticsearch

ตอนนี้คุณสามารถรวมผู้ดูแลระบบเข้ากับเซิร์ฟเวอร์ elasticsearch ได้แล้ว คุณต้องใช้การดาวน์โหลดอะแดปเตอร์ elasticsearch ไปยังผู้จำหน่ายและนำเข้าไปยังแอป จากนั้นคุณต้องเปลี่ยน CORS ใน elasticsearch และสร้างเส้นทางทรัพยากร:

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

ผลงาน

ดูหน้าวิกิของเราเกี่ยวกับการบริจาคและแผนงาน

ใบอนุญาต

[ได้รับอนุญาตภายใต้ใบอนุญาต MIT] 1