@kon_yu
Edited at

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