Главная страница>Исходный код PHP>Другие категории
Скачать

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

} ) ;

Для получения дополнительной информации см. README ember-cli-map.

Загрузка файлов

Допустим, у нашего пользователя есть одна главная аватарка и/или множество картинок аватаров.

Чтобы отобразить и загрузить их в интерфейсе администратора, выполните следующую настройку.

Сначала добавьте модель аватара, расширив ее из ресурса 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 , последний будет использоваться для вашего пользовательского ресурса, а первый — для всех остальных ресурсов.

Идет поиск

Все атрибуты модели, за исключением отношений, доступны для поиска в форме поиска на индексной странице ресурса. На данный момент мы отображаем текстовые вводы для всех атрибутов. Это будет исправлено в будущем.

В вашем контроллере ресурсов вы можете указать атрибуты поиска, которые отображаются в этой форме: 

 //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 в свой контроллер ресурсов: 

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

Расширять
Дополнительная информация
Связанные приложения
Рекомендуем вам
Связанные новости Все