ember cli admin 다운로드 - ember cli admin 소스 코드 다운로드

Ember-Cli-관리자

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 실행

그게 다야!

또한 설치에 대한 자세한 내용을 원하거나 수동으로 설치해야 하는 경우 위키를 볼 수 있습니다.

청사진

Ember-Cli-Admin은 몇 가지 기본 청사진을 제공합니다.

이것들은 다음과 같습니다:

admin-app - 기본 ember-cli-admin 앱 스캐폴드를 생성합니다.
테이블 뷰 컨트롤러 - TableViewController를 생성합니다.
tree-view-controller - TreeViewController를 생성합니다.
table-view-resource - 모델 TableViewController를 생성하고 이를 MetaRouter 및 Navigation에 등록합니다.
tree-view-resource - table-view-resource와 동일하지만 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를 참조하세요.

파일 업로드

사용자가 하나의 기본 아바타 및/또는 많은 아바타 사진을 가지고 있다고 가정해 보겠습니다.

관리 인터페이스에 표시하고 업로드하려면 다음 설정을 수행하십시오.

먼저 아바타 모델을 추가하고 ember-cli-admin 자산에서 확장합니다.

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

export default Asset . extend ( ) ;

User 모델에 아바타/아바타를 추가하고 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 템플릿이 있는 경우 후자가 사용자 리소스에 사용되고 첫 번째는 다른 모든 리소스에 사용됩니다.

수색

관계를 제외한 모든 모델 속성은 리소스 인덱스 페이지의 검색 양식 에서 검색 가능합니다. 지금은 모든 속성에 대한 텍스트 입력을 렌더링합니다. 이 문제는 앞으로 수정될 예정입니다.

리소스 컨트롤러에서 다음 형식으로 표시되는 검색 속성을 지정할 수 있습니다.

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

기부금

기여 및 로드맵에 대한 위키 페이지를 참조하세요.

특허

[MIT 라이센스에 따라 라이센스됨] 1

확장하다