Giới thiệu Gem Active Admin
Bài đăng này đã không được cập nhật trong 3 năm
Giới thiệu
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.
Cài đặt và thiết lập môi trường
- Tạo project với rails:
rails new demo-active-admin
- 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
- 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
- Thêm gem
activeadmin
trong gemfile and bundle:gem 'activeadmin'
và gemdevise
(activeadmin sẽ sử dụnggem devise
cho việc authentication)bundle
- 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 gemdevise
cho việc authentication. Nếu bạn đã có AdminUser model thì bạn chạyrails g active_admin:install AdminUser
sau đórake db:migrate
- 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 fileseeds
Username: admin@example.com Password: password
- Sau khi đăng nhập bảng điểu khiển quản trị sẽ hiện ra
Customizing Views
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
Filter và Search
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
Custom Filter
- 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 }
Export CSV
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
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à:
Kết
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
All rights reserved