ember cli admin تنزيل - تحميل كود المصدر ember cli admin

امبر كلي المشرف

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

يولد

قم بتشغيل ember g admin-app "My Awesome App Name"
قم بتشغيل 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 على بعض المكونات الإضافية المفيدة التي يمكنك استخدامها لتوسيع وظائف لوحة المعلومات الافتراضية:

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

نحن ندعم حاليًا مكون 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 .

إذا كانت واجهة برمجة تطبيقات الواجهة الخلفية الخاصة بك تتوقع خاصية معلمات طلب نوع مختلف، فيمكنك تحديدها في نموذج الأصول الخاص بك.

لنفترض أن واجهة برمجة التطبيقات (API) الخاصة بك تستثني نوع الصورة الرمزية ليكون "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' ]
} ) ;

إظهار/إخفاء عمود الجدول

يمكنك اختيار أعمدة الجدول التي سيتم عرضها عبر أيقونة إعدادات الجدول بجوار زر "الإجراءات المجمعة" في رأس الجدول.

تحتوي كل وحدة تحكم على مجموعتها الخاصة من إعدادات الجدول التي تستمر عبر التخزين المحلي للمتصفح.

التكامل مع 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

يوسع