12/08/2018, 16:30

Giới thiệu Gem Active Admin

Quản lý ứng dụng (application adminstrantion) là 1 trong những yêu cầu chung của hầu hết cái ứng dụng web. Và việc xây dựng nó cũng tốn khá nhiều thời gian và gây nhiều khó khăn cho các lập trình viên. Vì vậy mình xin giới thiệu 1 gem active-admin với rails sẽ giúp cho các bạn tránh khỏi việc tạo ...

Quản lý ứng dụng (application adminstrantion) là 1 trong những yêu cầu chung của hầu hết cái ứng dụng web. Và việc xây dựng nó cũng tốn khá nhiều thời gian và gây nhiều khó khăn cho các lập trình viên. Vì vậy mình xin giới thiệu 1 gem active-admin với rails sẽ giúp cho các bạn tránh khỏi việc tạo giao diện quản trị và quản lý 1 cách tốt nhất.

  1. Tạo project với rails: rails new demo-active-admin
  2. Tạo model:
    • rails g model Genre name:string
    • rails g model Author first_name:string last_name:string
    • rails g model Book name:string price:decimal author:references genre:references
    • rake db:migrate
  3. Tạo các quan hệ trong model
    #app/models/genre.rb
    class Genre < ActiveRecord::Base
      has_many :books
    end
    
    #app/models/author.rb
    class Author < ActiveRecord::Base
     has_many :books
    end
    
     #app/models/book.rb
    class Book < ActiveRecord::Base
     belongs_to :author
     belongs_to :genre
    end
    
  4. Thêm gem activeadmin trong gemfile and bundle:
    • gem 'activeadmin' và gem devise (activeadmin sẽ sử dụng gem devise cho việc authentication)
    • bundle
  5. Generator để cài đặt active admin: rails g active_admin:install Nó sẽ tạo AdminUser model và khởi tạo cấu hình ActiveAdmin. Và nó sẽ sử dụng gem devise cho việc authentication. Nếu bạn đã có AdminUser model thì bạn chạy rails g active_admin:install AdminUser sau đó rake db:migrate
  6. Chạy server và truy cập http://localhost:3000/admin Bạn có thể đăng nhập bằng tài khoản đã có sẵn trong file seeds
    Username: admin@example.com
    Password: password
    
  7. Sau khi đăng nhập bảng điểu khiển quản trị sẽ hiện ra

vậy đã xong phần cài đặt. giờ mình sẽ customizing views nó để hiểu rõ hơn về activeadmin Vào Book page chúng ta sẽ nhìn thấy bảng hiển thị các atrributes của bảng book và name của 2 bảng quan hệ với nó là Author và Genre được show ra. để hiển thị theo ý muộn các bạn có thể setup trong file : app/admin/book.rb Đầu tiên các bạn sẽ thấy model book được khai báo: ActiveAdmin.register Book Khi khai báo ActiveAdmin.register nameModel thì ActiveAdmin sẽ tạo ra default các view từ table, filler, search và download csv, xml, json và các action: view, edit, delete Giờ đâu chúng ta muốn table book không hiển thị tất cả cái attributes nữa vậy ta có thể custom nó như sau

index do
  column :name
  column :author
  column :genre
  column :price
  default_actions
end

ActiveAdmin sẽ tự động phát hiện ra quan hệ belongs_to với 2 bảng Book và Genre và sẽ tự động hiển thị name của 2 bảng này ra. Nhưng có 1 vấn đề là bảng Author không có attribute name mà nó sẽ hiển thị 'Author#id' Vậy làm thế nào để activeadmin hiển thị name của author.

# Active Admin makes educated guesses when displaying objects, this is
# the list of methods it tries calling in order
setting :display_name_methods, [ :display_name,
                                 :full_name,
                                 :name,
                                 :username,
                                 :login,
                                 :title,
                                 :email,
                                 :to_s ]

Trong model models/author.rb tạo 1 function

def full_name
    "#{first_name}  #{last_name}"
  end

Bạn cũng có thể custom 1 số dữ liệu khác trước khi nó hiển thị như price bạn có thể sử dụng number_to_currency

column :price do |product|
 number_to_currency product.price
end

và có thể custom action default như sau

actions defaults: false do |post|
    item "View", admin_book_path(book)
  end

Thay đổi tên của cột

column 'New Name', :name

Bên phải màn hình là filter và search Cũng giống như hiển thị. Bạn có thể filter theo attributes nào bạn muốn:

filter :name
filter :author
filter :genre
filter :price

Điều đáng nói là activeadmin sẽ chọn kiểu filter theo type của atttibutes đối với type là string và text thì sẽ là textbox để filter đối với type là boolean thì sẽ là checkbox. Và bạn có thẻ custom nó theo ý mình

filter :author, :as => :check_boxes
filter :genre, :as => :check_boxes
  • Bạn có thể remove action filter trong file admin/ config.filters = false
  • Remove specific filters remove_filter :book, :name
  • Thay đôi label filter filter :name, lable: "Book Name"
  • Scope a filter's conllection filter :book, collection: -> { Book.all }
  • Change String repersentation
filter :book, collection: -> {
  Book.all.map { |book| [book.name, book.id] }
}
  • thêm HTML filter :price, as: :number, input_html: { step: 10, min: 0, max: 100 }

Active Admin cho phép bạn download data dưới dạng csv, xml, json Bạn có thể custom nó trong:

csv do
  column :first_name
  column :last_name
end

Scope cũng là 1 tính năng trong active admin. Để khai báo 1 scope bước đầu chúng ta sẽ khai báo trong model

# models/book.rb
class Book < ActiveRecord::Base
    scope :find_name, -> { where(name: 'Hooked') }
end

Sau đó chúng ta có thể gọi

ActiveAdmin.register Book do
    scope :find_name
end

và kết quả chúng ta nhận được là:

Trên đây là những kiến thức cơ bản về Active Admin. Để tìm hiểu và sử dụng linh hoạt cũng như custom về giao diện các bạn có thể tìm hiểu và tham khảo các tài liệu : https://activeadmin.info https://hashrocket.com/blog/posts/customize-activeadmin-index-filters#coerce-the-input-type https://github.com/activeadmin/activeadmin

0