6
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2017-12-21

はじめに

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

6
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?