DEV Community

Moeki Kawakami
Moeki Kawakami

Posted on

 

The Admin Framework for Minimalist

thoughtbot/administrate is a well-known framework for administrative screen, but it's not developer friendly。I implement my own template files for Administrate, so when new Administrate version released, it is hard to update Administrate because template file is changed.

But administrative screens are very easy to commonize, so I want to use a framework or library.

I done this.

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

It can be used with Ruby on Rails or other frameworks because I implemented with trailblazer/cells.

You can define ApplicationDashboard.

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

And you extends it, define dashboard classes for models and define attributes to show each screens.

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
Enter fullscreen mode Exit fullscreen mode

It is a point, MicroAdmin does not have template for form items. So you must write template files for input or select , etc.

<input type="text" name="name" class="form-control">
Enter fullscreen mode Exit fullscreen mode

The value variable will come to the edit template.

<input type="text" name="name" value="<%= value %>" class="form-control">
Enter fullscreen mode Exit fullscreen mode

It can be rendered by calling the following.

smith = User.new(id: 1, name: "Smith")
james = User.new(id: 1, name: "James")
dashboard = UserDashboard.new
Enter fullscreen mode Exit fullscreen mode
<%= dashboard.index([smith, james]) %>
Enter fullscreen mode Exit fullscreen mode
<%= dashboard.show(smith) %>
Enter fullscreen mode Exit fullscreen mode
<%= dashboard.new(errors: ["Name is required!"]) %>
Enter fullscreen mode Exit fullscreen mode
<%= dashboard.edit(id: 1, values: {name: "Smith"}, errors: []) %>
Enter fullscreen mode Exit fullscreen mode

As an example, the edit method output HTML like this.

<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>
Enter fullscreen mode Exit fullscreen mode

And you can style the screens by loading Bootstrap!

The points:

  • the html of form item is customizable
  • not only Ruby on Rails

Thank you.

Top comments (0)

16 Libraries You Should Know as a React Developer

Being a modern React developer is not about knowing just React itself. To stay competitive, it is highly recommended to explore the whole ecosystem. This article contains some of the most useful React component libraries to speed up your developer workflow.