Rails
activeadmin
Select2
@kon_yu

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

RailsactiveadminSelect2
More than 1 year has 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

Edit request
3