madmin 1.0.1 → 1.2.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f149452559626564a6b3888b89ddeaf7fb2bf1c3fedbbc4ac4ba3dc2a1df4e58
-  data.tar.gz: 8536e397b8d032d704b7e10c938af1ee1eda4911d9c6933ecd9c11f68fbac8f7
+  metadata.gz: 1f3bd8e986e4859620b06401c531dc24ca84bb02e4e2284a34918b5a088c126c
+  data.tar.gz: 9bf59b4f93849feda832005caa748e02b4227ea2552cd6e94264d3b7d170f5a9
 SHA512:
-  metadata.gz: e6a4a123086ee55711728e9f2b1bff5ca90d28c7238690d5f51e9b834f1f5eb15170b7e8e3b1aac7a79e08d4b55ee2500dc11f16d4f62c4a31cc4d0d5ab0b6ba
-  data.tar.gz: 49a20396c04c22fbe8001d53ed4cc567b441171943a090cd888b98e94cbf11b31ad5ec89fc67dd9cae98af03282adf8bdacec159075c73605ac743c994338e51
+  metadata.gz: 3181e8f05aad7af36b905a4a04ffb2ddd63419b347e699b0b9ea6d8d2fb9a880f12ebbd7b12d05770e02dc7508e4789a1cb8250b11b6eed26878b6ef71d7fc1b
+  data.tar.gz: '0019a725b02cde9e007190917381da718a139662d1d9094a0e49ccc69b799437865a4170658b99492947ce1d6d2ae04f71dde97886212a8dd728c3a9aa2275f3'

data/README.md

@@ -7,9 +7,12 @@
 Why another Ruby on Rails admin? We wanted an admin that was:
 
 * Familiar and customizable like Rails scaffolds (less DSL)
-* Supports all the Rails features out of the box (ActionText, ActionMailbox, etc)
+* Supports all the Rails features out of the box (ActionText, ActionMailbox, has_secure_password, etc)
 * Stimulus / Turbolinks / Hotwire ready
 
+![Madmin Screenshot](docs/images/screenshot.png)
+_We're still working on the design!_
+
 ## Installation
 Add `madmin` to your application's Gemfile:
 
@@ -76,6 +79,31 @@ rails generate madmin:views:index Book
  # -> app/views/madmin/books/index.html.erb
 ```
 
+## Custom Fields
+
+You can generate a custom field with:
+
+```bash
+rails g madmin:field Custom
+```
+
+This will create a `CustomField` class in `app/madmin/fields/custom_field.rb`
+And the related views:
+
+```bash
+# -> app/views/madmin/fields/custom_field/_form.html.erb
+# -> app/views/madmin/fields/custom_field/_index.html.erb
+# -> app/views/madmin/fields/custom_field/_show.html.erb
+```
+
+You can then use this field on our resource:
+
+```ruby
+class PostResource < Madmin::Resource
+  attribute :title, field: CustomField
+end
+```
+
 ## Authentication
 
 You can use a couple of strategies to authenticate users who are trying to

data/app/controllers/madmin/base_controller.rb

@@ -3,10 +3,5 @@ module Madmin
     include Pagy::Backend
 
     protect_from_forgery with: :exception
-
-    # Loads all the models for the sidebar
-    before_action do
-      Rails.application.eager_load!
-    end
   end
 end

data/app/controllers/madmin/resource_controller.rb

@@ -1,9 +1,24 @@
 module Madmin
   class ResourceController < ApplicationController
+    include SortHelper
+
     before_action :set_record, except: [:index, :new, :create]
 
+    # Assign current_user for paper_trail gem
+    before_action :set_paper_trail_whodunnit, if: -> { respond_to?(:set_paper_trail_whodunnit, true) }
+
     def index
       @pagy, @records = pagy(scoped_resources)
+
+      respond_to do |format|
+        format.html
+        format.json {
+          render json: @records.map { |r| {name: @resource.display_name(r), id: r.id} }
+        }
+      end
+    rescue Pagy::OverflowError
+      params[:page] = 1
+      retry
     end
 
     def show
@@ -41,7 +56,7 @@ module Madmin
     private
 
     def set_record
-      @record = resource.model.find(params[:id])
+      @record = resource.model_find(params[:id])
     end
 
     def resource
@@ -54,7 +69,9 @@ module Madmin
     end
 
     def scoped_resources
-      resource.model.send(valid_scope)
+      resources = resource.model.send(valid_scope)
+      resources = Madmin::Search.new(resources, resource, search_term).run
+      resources.reorder(sort_column => sort_direction)
     end
 
     def valid_scope
@@ -77,5 +94,9 @@ module Madmin
         raise "Unrecognised param data: #{data.inspect}"
       end
     end
+
+    def search_term
+      @search_term ||= params[:q].to_s.strip
+    end
   end
 end

data/app/helpers/madmin/application_helper.rb

@@ -13,5 +13,9 @@ module Madmin
       version += "-#{Rails::VERSION::PRE}" if Rails::VERSION::PRE
       version
     end
+
+    def clear_search_params
+      params.except(:q, :_page).permit(:page, :sort, :direction)
+    end
   end
 end

data/app/helpers/madmin/nav_helper.rb

@@ -0,0 +1,30 @@
+module Madmin::NavHelper
+  def nav_link_to(name = nil, options = {}, html_options = {}, &block)
+    if block
+      html_options = options
+      options = name
+      name = block
+    end
+
+    url = url_for(options)
+    starts_with = html_options.delete(:starts_with)
+    html_options[:class] = Array.wrap(html_options[:class])
+    active_class = html_options.delete(:active_class) || "active"
+    inactive_class = html_options.delete(:inactive_class) || ""
+
+    active = if (paths = Array.wrap(starts_with)) && paths.present?
+      paths.any? { |path| request.path.start_with?(path) }
+    else
+      request.path == url
+    end
+
+    classes = active ? active_class : inactive_class
+    html_options[:class] << classes unless classes.empty?
+
+    html_options.except!(:class) if html_options[:class].empty?
+
+    return link_to url, html_options, &block if block
+
+    link_to name, url, html_options
+  end
+end

data/app/helpers/madmin/sort_helper.rb

@@ -0,0 +1,32 @@
+module Madmin
+  module SortHelper
+    def sortable(column, title, options = {})
+      matching_column = (column.to_s == sort_column)
+      direction = sort_direction == "asc" ? "desc" : "asc"
+
+      link_to request.params.merge(sort: column, direction: direction), options do
+        concat title
+        if matching_column
+          concat " "
+          concat tag.i(sort_direction == "asc" ? "▲" : "▼")
+        end
+      end
+    end
+
+    def sort_column
+      resource.sortable_columns.include?(params[:sort]) ? params[:sort] : default_sort_column
+    end
+
+    def sort_direction
+      ["asc", "desc"].include?(params[:direction]) ? params[:direction] : default_sort_direction
+    end
+
+    def default_sort_column
+      resource.try(:default_sort_column) || (["created_at", "id", "uuid"] & resource.model.column_names).first
+    end
+
+    def default_sort_direction
+      resource.try(:default_sort_direction) || "desc"
+    end
+  end
+end

data/app/views/layouts/madmin/application.html.erb

@@ -7,19 +7,19 @@
     <title>
       Madmin: <%= Rails.application.class %>
     </title>
-    <link href="https://unpkg.com/tailwindcss@^2.0/dist/tailwind.min.css" rel="stylesheet" />
     <link href="https://unpkg.com/@tailwindcss/forms/dist/forms.min.css" rel="stylesheet" />
+    <link href="https://unpkg.com/tailwindcss@^2.0/dist/tailwind.min.css" rel="stylesheet" />
     <link href="https://unpkg.com/@tailwindcss/typography/dist/typography.min.css" rel="stylesheet" />
     <%= csrf_meta_tags %>
 
     <%= render "javascript" %>
   </head>
-  <body class="prose" style="max-width:none">
-    <div class="flex w-full p-4">
-      <div id="sidebar" class="w-64 flex-shrink-0">
+  <body class="min-h-screen">
+    <div class="md:flex w-full min-h-screen">
+      <div id="sidebar" class="md:w-64 p-4 flex-shrink-0 border-r">
         <%= render "navigation" -%>
       </div>
-      <main class="w-full" role="main">
+      <main class="flex-grow p-4" role="main">
         <%#= render "flashes" -%>
         <%= yield %>
       </main>

data/app/views/madmin/application/_form.html.erb

@@ -9,15 +9,13 @@
     </div>
   <% end %>
 
-  <% resource.attributes.each do |attribute| %>
-    <% next if attribute[:field].nil? %>
-    <% next unless attribute[:field].visible?(action_name) %>
-    <% next unless attribute[:field].visible?(:form) %>
+  <% resource.attributes.values.each do |attribute| %>
+    <% next if attribute.field.nil? %>
+    <% next unless attribute.field.visible?(action_name) %>
+    <% next unless attribute.field.visible?(:form) %>
 
-    <% field = attribute[:field] %>
-
-    <div class="mb-4 flex">
-      <%= render partial: field.to_partial_path("form"), locals: { field: field, record: record, form: form, resource: resource } %>
+    <div class="mb-4 md:flex">
+      <%= render partial: attribute.field.to_partial_path("form"), locals: { field: attribute.field, record: record, form: form, resource: resource } %>
     </div>
   <% end %>
 

data/app/views/madmin/application/_javascript.html.erb

@@ -1,24 +1,90 @@
-<%= stylesheet_link_tag "https://cdn.skypack.dev/flatpickr/dist/flatpickr.min.css", "data-turbo-track": "reload" %>
-<%= stylesheet_link_tag "https://cdn.skypack.dev/slim-select/dist/slimselect.min.css", "data-turbo-track": "reload" %>
-<%= stylesheet_link_tag "https://cdn.skypack.dev/trix/dist/trix.css", "data-turbo-track": "reload" %>
+<%= stylesheet_link_tag "https://unpkg.com/flatpickr/dist/flatpickr.min.css", "data-turbo-track": "reload" %>
+<%= stylesheet_link_tag "https://unpkg.com/trix/dist/trix.css", "data-turbo-track": "reload" %>
+<%= stylesheet_link_tag "https://unpkg.com/tom-select/dist/css/tom-select.min.css", "data-turbo-track": "reload" %>
 
 <script type="module">
-  import { Application } from 'https://cdn.skypack.dev/stimulus'
+  import { Application, Controller } from 'https://cdn.skypack.dev/stimulus'
   const application = Application.start()
 
+  import { Dropdown } from "https://cdn.skypack.dev/tailwindcss-stimulus-components"
+  application.register("dropdown", Dropdown)
+
   import stimulusFlatpickr from 'https://cdn.skypack.dev/stimulus-flatpickr'
   application.register("flatpickr", stimulusFlatpickr)
 
-  import stimulusSlimselect from 'https://cdn.skypack.dev/stimulus-slimselect'
-  application.register("slimselect", stimulusSlimselect)
+  import TomSelect from 'https://cdn.skypack.dev/tom-select'
 
   import Rails from 'https://cdn.skypack.dev/@rails/ujs@<%= npm_rails_version %>'
   import * as ActiveStorage from 'https://cdn.skypack.dev/@rails/activestorage@<%= npm_rails_version %>'
   import 'https://cdn.skypack.dev/trix'
   import 'https://cdn.skypack.dev/@rails/actiontext@<%= npm_rails_version %>'
 
-  Rails.start()
+  if (!window._rails_loaded) { Rails.start() }
   ActiveStorage.start()
 
   import * as Turbo from "https://cdn.skypack.dev/@hotwired/turbo"
+
+  (() => {
+    application.register('select', class extends Controller {
+      static values = {
+        options: Object,
+        url: String
+      }
+
+      connect() {
+        this.select = new TomSelect(this.element, {
+          plugins: ['remove_button'],
+          valueField: 'id',
+          labelField: 'name',
+          searchField: 'name',
+          load: (search, callback) => {
+            fetch(this.urlValue)
+              .then(response => response.json())
+              .then(json => {
+                callback(json);
+              }).catch(() => {
+                callback();
+              });
+          }
+        })
+      }
+
+      disconnect() {
+        this.select.destroy()
+      }
+    })
+
+    application.register('nested-form', class extends Controller {
+      static get targets() {
+        return [ "links", "template" ]
+      }
+
+      connect() {
+        this.wrapperClass = this.data.get("wrapperClass") || "nested-fields"
+      }
+
+      add_association(event) {
+        event.preventDefault()
+
+        var content = this.templateTarget.innerHTML.replace(/NEW_RECORD/g, new Date().getTime())
+        this.linksTarget.insertAdjacentHTML('beforebegin', content)
+      }
+
+      remove_association(event) {
+        event.preventDefault()
+
+        let wrapper = event.target.closest("." + this.wrapperClass)
+
+        // New records are simply removed from the page
+        if (wrapper.dataset.newRecord == "true") {
+          wrapper.remove()
+
+        // Existing records are hidden and flagged for deletion
+        } else {
+          wrapper.querySelector("input[name*='_destroy']").value = 1
+          wrapper.style.display = 'none'
+        }
+      }
+    })
+  })()
 </script>

data/app/views/madmin/application/_navigation.html.erb

@@ -1,6 +1,32 @@
-<div class="text-sm">
-  <%= link_to "← Back to App", main_app.root_url, class: "block p-1", data: { turbo: false } if main_app.respond_to?(:root_url) %>
-  <% Madmin.resources.each do |resource| %>
-    <%= link_to resource.friendly_name.pluralize, resource.index_path, class: "block p-1" %>
-  <% end %>
+<div class="flex flex-col h-full text-sm" data-controller="dropdown">
+  <div class="flex md:block justify-between items-center">
+    <div class="flex md:block items-center">
+      <h1 class="mr-2 md:p-2 text-xl font-semibold">Madmin</h1>
+      <% if main_app.respond_to?(:root_url) %>
+        <%= link_to main_app.root_url, class: "block p-2 rounded hover:bg-gray-200", data: { turbo: false } do %>
+          ← Back <span class="hidden md:inline">to App</span>
+        <% end %>
+      <% end %>
+    </div>
+
+    <div class="-mr-2 flex items-center md:hidden">
+      <button data-action="click->dropdown#toggle touch->dropdown#toggle click@window->dropdown#hide touch@window#dropdown->hide" type="button" class="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:bg-gray-200 focus:outline-none focus:ring-2 focus-ring-inset focus:ring-white" id="main-menu" aria-haspopup="true">
+        <span class="sr-only">Open main menu</span>
+        <!-- Heroicon name: outline/menu -->
+        <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
+        </svg>
+      </button>
+    </div>
+  </div>
+
+  <div class="hidden md:flex flex-col flex-grow justify-between" data-dropdown-target="menu">
+    <% Madmin.resources.each do |resource| %>
+      <%= nav_link_to resource.friendly_name.pluralize, resource.index_path, class: "block p-2 rounded hover:bg-gray-100", starts_with: resource.index_path, active_class: "font-bold text-black" %>
+    <% end %>
+
+    <div class="mt-auto">
+      <%= link_to "View Madmin on GitHub", "https://github.com/excid3/madmin", target: :_blank, class: "block p-2 rounded text-gray-500 hover:bg-gray-100" %>
+    </div>
+  </div>
 </div>

data/app/views/madmin/application/edit.html.erb

@@ -1,3 +1,7 @@
-<h1><%= link_to resource.friendly_name.pluralize, resource.index_path %> / Edit <%= resource.friendly_name %> #<%= @record.id %></h1>
+<h1 class="text-xl mb-4">
+  <%= link_to resource.friendly_name.pluralize, resource.index_path, class: "text-indigo-500" %>
+  /
+  <strong>Edit <%= link_to resource.display_name(@record), resource.show_path(@record), class: "text-indigo-500" %></strong>
+</h1>
 
 <%= render partial: "form", locals: { record: @record, resource: resource } %>

data/app/views/madmin/application/index.html.erb

@@ -1,44 +1,56 @@
-<div class="flex justify-between">
-  <h1><%= resource.friendly_name.pluralize %></h1>
-  <%= link_to "New #{resource.friendly_name}", resource.new_path %>
+<div class="md:flex justify-between items-center space-y-4 md:space-y-0">
+  <h1 class="text-xl font-semibold"><%= resource.friendly_name.pluralize %></h1>
+
+  <div class="flex-grow flex md:justify-end gap-4">
+    <form class="flex items-center gap-2 relative">
+      <%= hidden_field_tag :page, params[:page], value: 1, class: "hidden" %>
+      <%= search_field_tag :q, params[:q], placeholder: "Search", class: "rounded-full px-4 focus:bg-white focus:border-indigo-500" %>
+      <%= link_to clear_search_params, class: "absolute top-1/2 right-3 text-gray-500 bg-white transform -translate-y-1/2" do %>
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
+        </svg>
+      <% end %>
+    </form>
+
+    <%= link_to resource.new_path, class: "bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-4 border border-gray-400 rounded shadow" do %>
+      New <span class="hidden md:inline"><%= resource.friendly_name %></span>
+    <% end %>
+  </div>
 </div>
 
-<div>
+<div class="mb-4">
   <% if resource.scopes.any? %>
-    <%= link_to "All", resource.index_path %>
+    <%= link_to "All", resource.index_path, class: class_names("p-2 rounded", {"bg-gray-100" =>  params[:scope].blank?}) %>
   <% end %>
 
   <% resource.scopes.each do |scope| %>
-    <%= link_to scope.to_s.humanize, resource.index_path(scope: scope) %>
+    <%= link_to scope.to_s.humanize, resource.index_path(scope: scope), class: class_names("p-2 rounded", {"bg-gray-100" => params[:scope] == scope.to_s}) %>
   <% end %>
 </div>
 
-<table class="table-auto">
+<table class="min-w-full divide-y divide-gray-200">
   <thead>
-    <tr>
-      <% resource.attributes.each do |attribute| %>
-        <% next if attribute[:field].nil? %>
-        <% next unless attribute[:field].visible?(action_name) %>
+    <tr class="border-b border-gray-200">
+      <% resource.attributes.values.each do |attribute| %>
+        <% next if attribute.field.nil? %>
+        <% next unless attribute.field.visible?(action_name) %>
 
-        <th><%= attribute[:name].to_s.titleize %></th>
+        <th class="py-2 px-4 text-left text-xs text-gray-500 font-medium uppercase whitespace-nowrap"><%= sortable attribute.name, attribute.name.to_s.titleize %></th>
       <% end %>
-      <th>Actions</th>
+      <th class="py-2 px-4 text-left text-xs text-gray-500 font-medium uppercase">Actions</th>
     </tr>
   </thead>
 
-  <tbody>
+  <tbody class="text-sm divide-y">
     <% @records.each do |record| %>
       <tr>
-        <% resource.attributes.each do |attribute| %>
-          <% next if attribute[:field].nil? %>
-          <% next unless attribute[:field].visible?(action_name) %>
-
-          <% field = attribute[:field] %>
-
-          <td><%= render partial: field.to_partial_path("index"), locals: { field: field, record: record } %></td>
+        <% resource.attributes.values.each do |attribute| %>
+          <% next if attribute.field.nil? %>
+          <% next unless attribute.field.visible?(action_name) %>
+          <td class="px-4 py-2"><%= render partial: attribute.field.to_partial_path("index"), locals: { field: attribute.field, record: record } %></td>
         <% end %>
 
-        <td><%= link_to "View", resource.show_path(record) %></td>
+        <td class="px-4 py-2 text-center"><%= link_to "View", resource.show_path(record), class: "text-indigo-500" %></td>
       </tr>
     <% end %>
   </tbody>