影響範囲の小さな小回りのきく管理画面ライブラリを作ってみた

thoughtbot/administrate が有名ですが、これが厄介でした。管理画面の特にフォームのHTMLって結構デフォルトから変更しないと要件を満たせないやつがあるんですよね。それでカスタマイズすると、いつの間にか本体の仕様が変わって見事にアップデートしにくくなりました。

でも同時に、管理画面って共通化できる箇所がかなり多いというのも分かります。ライブラリを上手く利用できるならそうしたい。

この辺のもやもやをまとめるためにこれを作りました。

cc-kawakami/micro-admin: A minimal Administration dashboard parts.

中身は trailblazer/cells です。なので、Rails に限らずいろんなところで使えます。

使い方は、まず ApplicationDashboard を書いて、

class ApplicationDashboard < MicroAdmin::Dashboard::Base
    # もし Rails を使うなら
    self.view_paths = [Rails.root.join("app", "views", "dashboards")]
end

それを継承して、モデルに対応するダッシュボードClassを用意します。
そしてここにattributesのリストを定義していきます。

class UserDashboard < ApplicationDashboard
    def index_attributes
        [:id, :name]
    end

    def show_attributes
        [:id, :name]
    end

    def form_attributes
        [:name]
    end

    def model_class
        User
    end
end

ここがキモの一つですが、このgemでは、フォームのHTMLは用意してません。なので、必ず自分で用意してください。

/app/views/dashboards/user_dashboard/new/name.erb

<input type="text" name="name" class="form-control">

editのテンプレートにはvalueが渡ってきます。

/app/views/dashboards/user_dashboard/edit/name.erb

<input type="text" name="name" value="<%= value %>" class="form-control">

あとは、以下のように呼び出すだけで、管理画面のパーツがレンダーされます。

smith = User.new(id: 1, name: "Smith")
james = User.new(id: 1, name: "James")
dashboard = UserDashboard.new

<%= dashboard.index([smith, james]) %>

<%= dashboard.show(smith) %>

<%= dashboard.new(errors: ["Name is required!"]) %>

<%= dashboard.edit(id: 1, values: {name: "Smith"}, errors: []) %>

例として、editなら以下のようなHTMLが出力されます。

<header class="navbar border-bottom py-4">
  <h2 class="m-0">Create TestModel</h2>
  <div>
    <a href="/admin/user" class="btn btn-primary">
      Back to index
    </a>
  </div>
</header>
<main class="p-4">
  <ul class="alert alert-danger">
    <li class="ml-3">Name is required</li>
  </ul>
  <form method="patch" action="/admin/user/1">
    <div class="mb-3">
      <label for="name" class="form-label">name</label>
      <input type="text" name="name" value="Smith" class="form-control"/>
    </div>
  </form>
</main>

あとは、Bootstrapを読み込めばいい感じにデザインがハマるようになってます。

ポイントとしては、

• フォームはカスタマイズ前提で
• それ以外は完備
• Rails 以外でも（Hanamiとか）使える
• ライブラリのメンテナンスが楽

でした。