ember cli admin

Ember-Cli-Admin

Ember-cli-admin adalah dasbor admin yang kuat untuk proyek ember-cli yang dibangun berdasarkan ide ActiveAdmin dan AbAdmin.

Lihat contoh

Contoh Ember-cli-admin

Langkah Pengaturan Cepat

Memasang

Jalankan ember install ember-cli-admin

Atau jika Anda menggunakan Ember CLI antara 0.2.2 dan 0.1.4:

Jalankan ember install:addon ember-cli-admin

Atau jika Anda menggunakan Ember CLI 0.1.4 atau lebih lama:

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

Menghasilkan

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

Itu saja!

Anda juga dapat melihat wiki Anda jika Anda ingin rincian lebih lanjut tentang instalasi atau hanya perlu melakukannya secara manual.

cetak biru

Ember-Cli-Admin menyediakan beberapa cetak biru default.

Ini adalah:

• admin-app - menghasilkan perancah aplikasi ember-cli-admin dasar;
• table-view-controller - menghasilkan TableViewController;
• pengontrol tampilan pohon - menghasilkan TreeViewController;
• sumber daya tampilan tabel - menghasilkan model, TableViewController dan mendaftarkannya di MetaRouter dan Navigasi;
• sumber daya tampilan pohon - sama dengan sumber daya tampilan tabel, tetapi dengan TreeViewController dan model yang cocok untuk itu;

Plugin

Ember-Cli-Admin memiliki beberapa plugin berguna yang dapat Anda gunakan untuk memperluas fungsionalitas dasbor default:

1. Ember-Cli-Admin-Auth - menambahkan otorisasi ke Ember-Cli-Admin

2. Ember-Cli-Admin-Languages ​​- menambahkan input multibahasa dalam formulir

Ikhtisar fitur

Bidang formulir

Anda dapat menentukan atribut yang akan digunakan dalam formulir admin dengan properti formAttributes di pengontrol:

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

Bidang tabel

Anda dapat menentukan atribut yang akan digunakan dalam tabel admin dengan properti tableAttributes di pengontrol:

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

Tindakan Barang

Anda dapat menyesuaikan tindakan item dengan properti itemActions di pengontrol:

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

Atau Anda dapat menambahkan tindakan khusus dengan properti additionalActions di pengontrol:

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

Mungkin Anda memiliki tindakan yang bergantung pada model, sehingga Anda dapat menambahkan dalam model Anda: Atau Anda dapat menambahkan tindakan khusus dengan properti additionalActions dalam model:

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

Tindakan Batch

Anda dapat menentukan tindakan batch dengan properti batchActions di pengontrol:

 //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 juga menggunakan ember-cli-map

Saat ini kami mendukung komponen google-map yang dapat ditambahkan ke formulir sumber daya Anda dengan pengaturan sederhana berikut

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

} ) ;

Untuk info lebih lanjut lihat README ember-cli-map.

Unggahan file

Katakanlah, pengguna kita memiliki satu avatar utama dan/atau banyak gambar avatar.

Untuk menampilkan dan mengunggahnya di antarmuka admin, lakukan pengaturan berikut.

Pertama tambahkan model avatar, perluas dari aset ember-cli-admin:

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

export default Asset . extend ( ) ;

Tambahkan avatar/avatar ke model Pengguna, dan tentukan di properti fileuploads :

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

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

Kemudian tambahkan adaptor Avatar seperti ini:

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

Secara default, properti tipe Aset FileuploadAdapterMixin adalah Asset .

Jika API backend Anda mengharapkan jenis properti parameter permintaan yang berbeda, Anda dapat menentukannya dalam model aset Anda.

Katakanlah API Anda kecuali tipe Avatar menjadi "Avatar", bukan "Aset".

Selain itu, Anda perlu mendefinisikan properti content_type dalam model Anda. Ember-Cli-admin menerima tipe MIME standar dan menebak cara menampilkan aset Anda berdasarkan tipe tersebut.

Anda dapat melakukan ini dengan mengedit model Avatar Anda seperti ini:

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

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

...

Setelah itu Anda harus menentukan sortAssetsBy: 'assetOrderProperty' di pengontrol.

Tetapkan judul

Secara default, judul bilah navigasi menampilkan awalan modul aplikasi Anda. Anda dapat mengubahnya ke nama apa pun pilihan Anda dengan menambahkan properti 'appName' ke file konfigurasi aplikasi Anda.

Di sini Anda juga dapat mengubah ke mana tautan judul sebenarnya mengarah melalui properti 'titleLinksTo'. Jika properti ini tidak disetel, properti ini akan mengarah ke URL root secara default.

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

Itu saja!

Sesuaikan Templat

Anda juga dapat menyediakan templat Anda sendiri untuk pertunjukan, pengeditan, dan tindakan baru. Hal ini dapat mengesampingkan default global dan juga untuk sumber daya tertentu.

Penggantian Global

Letakkan template Anda di direktori app/templates/admin . Misalnya:

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

Penggantian Khusus Sumber Daya

Letakkan template Anda di direktori app/templates/[controllerName] . Untuk sumber daya pengguna:

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

Jika Anda memiliki templat admin/new.hbs dan users/new.hbs , templat terakhir akan digunakan untuk sumber daya pengguna Anda, dan yang pertama untuk semua sumber daya lainnya.

Mencari

Semua atribut model, kecuali relasi, dapat dicari dalam formulir pencarian di halaman indeks sumber daya. Untuk saat ini, kami merender input teks untuk semua atribut. Ini akan diperbaiki di masa depan.

Di pengontrol sumber daya, Anda dapat menentukan atribut pencarian yang muncul dalam formulir ini:

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

Anda juga bisa menyediakan Templat formulir pencarian Anda sendiri:

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

Opsi lainnya untuk pemeriksaan pelengkapan otomatis di app/components/admin-typeahead.js

Penyortiran

Anda dapat mengurutkan catatan pada halaman indeks sumber daya berdasarkan atribut dalam urutan menaik atau menurun. Untuk menentukan bidang pengurutan, tambahkan properti sortFields di pengontrol sumber daya Anda:

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

Bilah samping

Anda dapat menempatkan sidebar untuk setiap sumber daya:

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

Anda juga dapat menyediakan templat sidebar Anda sendiri:

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

Tampilan Pohon Bersarang

Anda dapat menampilkan pohon catatan bersarang di Ember-Cli-Admin. Mereka diimplementasikan mengikuti pola model himpunan bersarang.

Dalam model Anda:

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

} ) ;

Tambahkan TreeViewController Mixin ke pengontrol sumber daya Anda:

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

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

Tampilkan/sembunyikan kolom tabel

Anda dapat memilih kolom tabel yang akan ditampilkan melalui ikon pengaturan tabel di sebelah tombol 'Tindakan batch' di header tabel.

Setiap pengontrol memiliki serangkaian pengaturan tabelnya sendiri yang disimpan melalui penyimpanan lokal browser.

Integrasi dengan elasticsearch

Sekarang Anda dapat mengintegrasikan admin dengan server elasticsearch. Anda perlu menggunakan unduhan adaptor elasticsearch ke vendor dan mengimpornya ke aplikasi. Maka Anda perlu mengubah CORS di elasticsearch, dan membuat rute sumber daya:

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

Ubah huruf besar/kecil untuk teks di tabel, remah roti, bilah pencarian, dll.

Anda dapat mengubah cara teks ditampilkan di tabel, remah roti, bilah pencarian, dll.

Untuk melakukan ini, Anda harus menentukan properti caseType di pengontrol.

Misalnya,

  //controllers/users.js

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

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

Anda memiliki opsi berikut untuk mengubah huruf besar-kecil secara default:

• title
• upper
• lower

Secara default, semua teks menggunakan huruf kecil.

Untuk remah roti:

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

Kontribusi

Lihat halaman wiki kami tentang kontribusi dan peta jalan.

Lisensi

[Berlisensi di bawah lisensi MIT] 1