Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

ActiveAdminでselect2をactiveadmin_addonsを利用して使う

More than 3 years have passed since last update.

はじめに

Rails4.2から5.0->5.1にアップグレードする際にActiveAdminのバージョンも上げた。
ActiveAdminでselect2を利用するactiveadmin-select2が2016年4月からメンテされてていないようで、
現行のActiveAdmin1.2とRails5.1の組合せでは動作しなかった。

そこでActiveAdminでselect2が別扱えるactiveadmin_addonsを利用することにした。

activeadmin_addonsからselect2を使う方法及び、activeadmin-select2からactiveadmin_addonsへ移行する方法を記す

ActiveAdminでselect2が動くとこのような補完表示ができる

※ 個人的な意見としてはActiveAdminを使うとメンテしにくくて、テーブルの要素を一覧以外の機能を追加したくなったらTwitter Bootstrapなど使って簡易なデザインの管理画面を作ることをおすすめする

今回のgemのバージョン

  • activeadmin (1.2.0)
  • activeadmin_addons (1.1.1)

Gemfileの変更

activeadmin # そのまま
activeadmin_addons # 追加
# activeadmin-select2 # 削除

設定ファイルの自動生成

bin/rails g activeadmin_addons:install

config/initializers/activeadmin_addons.rb が生成される

select2の設定

注意デフォルトのがselect2になる

例えば年月日などもselect2になってしまうと、幅調整などに時間が取られてしまう。
既存のActiveAdminで書いた資産を利用する場合はこれ結構手間である。

https://gyazo.com/ff963f623b660a9cc0e3a572bda878fc

https://gyazo.com/4b2aa2ad37c577de08390e68b6b99b33

回避方法は2通り有り、後者の方がactiveadmin-select2から移行する場合は修正が少なくて済む

回避方法1 select2を使わないにはクラスにdefault-selectを設定する

つまりこのように書いてあげる

f.input :created_at, input_html: { class: "default-select" }

【推奨】回避方法2 select2を使わないにはクラスにdefault-selectを設定する

activeadmin_addonsの設定ファイルにあるデフォルトのselectの書き方がselect2になっているのでdefaultにしてあげることで、
selectタグが通常のselectタグの表示になる

config/initializers/activeadmin_addons.rb
ActiveadminAddons.setup do |config|
  config.default_select = "default"
end

明示的にselect2で表現したいに、classにselect2を設定する。
この修正方法はactiveadmin-select2でselect2を設定していた箇所のみ明示的に置き換えするので移行しやすい

# 旧activeadmin-select2版のselect2でフォームを記載する場合
f.input :created_at, as: :select2

# activeadmin_addons版
f.input :created_at, input_html: { class: "select2" }

参考: https://github.com/platanus/activeadmin_addons/blob/master/docs/select2_default.md

kon_yu
道産子プログラマ
http://konyu.hatenablog.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away