madmin 1.2.11 → 2.0.1

data/app/assets/stylesheets/madmin/sidebar.css

@@ -0,0 +1,80 @@
+main {
+  padding-top: 1rem;
+  padding-right: 1rem;
+  padding-bottom: 1rem;
+  padding-left: calc(1rem + var(--sidebar-width));
+}
+
+#sidebar {
+  border-right: 1px solid var(--border-color);
+  height: 100%;
+  margin: 0;
+  overflow: auto;
+  padding: 1rem;
+  position: fixed;
+  width: var(--sidebar-width);
+
+  h1 {
+    margin-top: 0;
+
+    a {
+      color: var(--text-color);
+      text-decoration: none;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  nav {
+    h4 {
+      margin-top: 0.5rem;
+      margin-bottom: 0.25rem;
+    }
+
+    a {
+      border-radius: .375rem;
+      color: var(--text-color);
+      display: block;
+      font-weight: 500;
+      padding: 0.5rem;
+      text-decoration: none;
+
+      margin-top: 0.1rem;
+      margin-bottom: 0.1rem;
+
+      &:hover {
+        background-color: rgb(243 244 246);
+      }
+
+      &.active {
+        background-color: rgb(243 244 246);
+        font-weight: 600;
+      }
+    }
+  }
+
+  footer {
+    border-top: 1px solid var(--border-color);
+    padding-top: 1rem;
+    margin-top: 1rem;
+
+    a {
+      color: rgb(75 85 99);
+      display: flex;
+      align-items: center;
+      gap: 0.25rem;
+      padding: 0.5rem;
+      text-decoration: none;
+
+      svg {
+        display: inline-block;
+      }
+    }
+
+    &:hover {
+      color: var(--primary-color);
+    }
+  }
+}

data/app/assets/stylesheets/madmin/tables.css

@@ -0,0 +1,56 @@
+.table-scroll {
+  border-radius: 6px;
+  border: 1px solid var(--border-color);
+  overflow-x: auto;
+  position: relative;
+}
+
+table {
+  border-collapse: collapse;
+  min-width: 100%;
+
+  th {
+    background-color: var(--background-color);
+    border-bottom: 1px solid var(--border-color);
+    text-align: left;
+    padding-bottom: 0.75rem;
+    padding-top: 0.75rem;
+    padding-right: 0.875rem;
+    padding-left: 0.875rem;
+
+    a {
+      color: rgb(17 24 39);
+      text-decoration: none;
+    }
+
+    svg {
+      display: inline-block;
+      vertical-align: middle;
+    }
+
+    &.label {
+      background-color: var(--background-color);
+      border-right: 1px solid var(--border-color);
+      width: 16rem;
+    }
+  }
+
+  td {
+    padding-bottom: 0.75rem;
+    padding-top: 0.75rem;
+    padding-right: 0.875rem;
+    padding-left: 0.875rem;
+
+    a {
+      font-weight: 500;
+    }
+  }
+
+  tr {
+    border-bottom: 1px solid var(--border-color);
+
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+}

data/app/controllers/madmin/application_controller.rb

@@ -1,22 +1,17 @@
 module Madmin
   class ApplicationController < Madmin::BaseController
+    include Rails.application.routes.url_helpers
+
     before_action :authenticate_admin_user
 
     def authenticate_admin_user
       # TODO: Add your authentication logic here
 
-      # For example, we could redirect if the user isn't an admin
-      # redirect_to "/", alert: "Not authorized." unless user_signed_in? && current_user.admin?
-    end
-
-    # Authenticate with Clearance
-    # include Clearance::Controller
-    # before_action :require_login
+      # For example, with Rails 8 authentication
+      # redirect_to "/", alert: "Not authorized." unless authenticated? && Current.user.admin?
 
-    # Authenticate with Devise
-    # before_action :authenticate_user!
-
-    # Authenticate with Basic Auth
-    # http_basic_authenticate_with(name: Rails.application.credentials.admin_username, password: Rails.application.credentials.admin_password)
+      # Or with Devise
+      # redirect_to "/", alert: "Not authorized." unless current_user&.admin?
+    end
   end
 end

data/app/controllers/madmin/base_controller.rb

@@ -1,5 +1,6 @@
 module Madmin
   class BaseController < ActionController::Base
+    include ::ActiveStorage::SetCurrent if defined?(::ActiveStorage)
     include Pagy::Backend
 
     protect_from_forgery with: :exception

data/app/controllers/madmin/resource_controller.rb

@@ -25,7 +25,7 @@ module Madmin
     end
 
     def new
-      @record = resource.model.new
+      @record = resource.model.new(new_resource_params)
     end
 
     def create
@@ -85,6 +85,12 @@ module Madmin
         .transform_values { |v| change_polymorphic(v) }
     end
 
+    def new_resource_params
+      params.fetch(resource.param_key, {}).permit!
+        .permit(*resource.permitted_params)
+        .transform_values { |v| change_polymorphic(v) }
+    end
+
     def change_polymorphic(data)
       return data unless data.is_a?(ActionController::Parameters) && data[:type]
 

data/app/helpers/madmin/application_helper.rb

@@ -1,18 +1,7 @@
 module Madmin
   module ApplicationHelper
     include Pagy::Frontend
-
-    # Converts a Rails version to a NPM version
-    def npm_rails_version
-      version = [
-        Rails::VERSION::MAJOR,
-        Rails::VERSION::MINOR,
-        Rails::VERSION::TINY
-      ].join(".")
-
-      version += "-#{Rails::VERSION::PRE}" if Rails::VERSION::PRE
-      version
-    end
+    include Rails.application.routes.url_helpers
 
     def clear_search_params
       resource.index_path(sort: params[:sort], direction: params[:direction])

data/app/helpers/madmin/sort_helper.rb

@@ -8,7 +8,7 @@ module Madmin
         concat title
         if matching_column
           concat " "
-          concat tag.i((sort_direction == "asc") ? "▲" : "▼")
+          concat tag.span((sort_direction == "asc") ? asc_icon : desc_icon)
         end
       end
     end
@@ -28,5 +28,21 @@ module Madmin
     def default_sort_direction
       resource.try(:default_sort_direction) || "desc"
     end
+
+    def asc_icon
+      <<~SVG.html_safe
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" height="1rem" width="1rem">
+          <path fill-rule="evenodd" d="M11.78 9.78a.75.75 0 0 1-1.06 0L8 7.06 5.28 9.78a.75.75 0 0 1-1.06-1.06l3.25-3.25a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06Z" clip-rule="evenodd" />
+        </svg>
+      SVG
+    end
+
+    def desc_icon
+      <<~SVG.html_safe
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" height="1rem" width="1rem">
+          <path fill-rule="evenodd" d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
+        </svg>
+      SVG
+    end
   end
 end

data/app/javascript/madmin/application.js

@@ -0,0 +1,4 @@
+import "@hotwired/turbo-rails"
+import "trix"
+import "@rails/actiontext"
+import "controllers"

data/app/javascript/madmin/controllers/application.js

@@ -0,0 +1,12 @@
+import { Application } from "@hotwired/stimulus"
+
+const application = Application.start()
+
+// Configure Stimulus development experience
+application.debug = false
+window.Stimulus   = application
+
+export { application }
+
+import { Dropdown } from "tailwindcss-stimulus-components"
+application.register("dropdown", Dropdown)

data/app/javascript/madmin/controllers/index.js

@@ -0,0 +1,5 @@
+import { application } from "controllers/application"
+
+// Eager load all controllers defined in the import map under controllers/**/*_controller
+import { eagerLoadControllersFrom } from "@hotwired/stimulus-loading"
+eagerLoadControllersFrom("controllers", application)

data/app/javascript/madmin/controllers/nested_form_controller.js

@@ -0,0 +1,34 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default 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'
+    }
+  }
+}

data/app/javascript/madmin/controllers/select_controller.js

@@ -0,0 +1,32 @@
+import { Controller } from "@hotwired/stimulus"
+import TomSelect from "tom-select"
+
+export default 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) => {
+        let url = search ? `${this.urlValue}?q=${search}` : this.urlValue;
+        fetch(url)
+          .then(response => response.json())
+          .then(json => {
+            callback(json);
+          }).catch(() => {
+            callback();
+          });
+      }
+    })
+  }
+
+  disconnect() {
+    this.select.destroy()
+  }
+}

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

@@ -5,22 +5,21 @@
     <meta name="ROBOTS" content="NOODP">
     <meta name="viewport" content="initial-scale=1">
     <title>
-      Madmin: <%= Rails.application.class %>
+      <% if content_for? :title %>
+        <%= yield(:title) %> -
+      <% end %>
+      <%= Madmin.site_name %> Admin
     </title>
-
     <%= csrf_meta_tags %>
-
     <%= render "javascript" %>
   </head>
-  <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="flex-grow p-4 overflow-x-scroll" role="main">
-        <%#= render "flashes" -%>
-        <%= yield %>
-      </main>
-    </div>
+  <body>
+    <aside id="sidebar">
+      <%= render "navigation" %>
+    </aside>
+    <main>
+      <%= render "flash" %>
+      <%= yield %>
+    </main>
   </body>
 </html>

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

@@ -0,0 +1,13 @@
+<% if alert %>
+  <div class="alert alert-danger">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"><path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14ZM8 4a.75.75 0 0 1 .75.75v3a.75.75 0 0 1-1.5 0v-3A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" clip-rule="evenodd"></path></svg>
+    <%= alert %>
+  </div>
+<% end %>
+
+<% if notice %>
+  <div class="alert alert-notice">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"><path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Zm3.844-8.791a.75.75 0 0 0-1.188-.918l-3.7 4.79-1.649-1.833a.75.75 0 1 0-1.114 1.004l2.25 2.5a.75.75 0 0 0 1.15-.043l4.25-5.5Z" clip-rule="evenodd"></path></svg>
+    <%= notice %>
+  </div>
+<% end %>

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

@@ -1,23 +1,24 @@
 <%= form_with model: [:madmin, record], url: (record.persisted? ? resource.show_path(record) : resource.index_path), local: true do |form| %>
   <% if form.object.errors.any? %>
-    <div class="mb-4 rounded-md text-sm text-red-700 bg-red-100 p-4">
-      <div class="mb-2 font-medium leading-5 text-red-800">There was <%= pluralize form.object.errors.full_messages.count, "error" %> with your submission</div>
+    <div class="alert alert-danger">
+      <div class="">There was <%= pluralize form.object.errors.full_messages.count, "error" %> with your submission:</div>
 
-      <% form.object.errors.full_messages.each do |message| %>
-        <div class="ml-4"><%= message %></div>
-      <% end %>
+      <ul>
+        <% form.object.errors.full_messages.each do |message| %>
+          <li><%= message %></li>
+        <% end %>
+      </ul>
     </div>
   <% end %>
 
-  <% resource.attributes.values.each do |attribute| %>
-    <% next if attribute.field.nil? %>
-    <% next unless attribute.field.visible?(action_name) %>
-    <% next unless attribute.field.visible?(:form) %>
-
-    <div class="mb-4 md:flex">
+  <% resource.attributes.values.select{ _1.field.present? && _1.field.visible?(action_name) }.each do |attribute| %>
+    <div class="form-group">
+      <%= render "madmin/shared/label", form: form, field: attribute.field %>
       <%= render partial: attribute.field.to_partial_path("form"), locals: { field: attribute.field, record: record, form: form, resource: resource } %>
+      <%= tag.div attribute.field.options.description, class: "form-description" if attribute.field.options.description.present? %>
     </div>
   <% end %>
 
-  <%= form.submit class: "bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-4 border border-gray-400 rounded shadow" %>
+  <%= form.submit class: "btn btn-primary" %>
+  <%= link_to "Cancel", (record.persisted? ? resource.show_path(record) : resource.index_path), class: "btn" %>
 <% end %>

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

@@ -1,138 +1,5 @@
-<script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>
+<%= javascript_importmap_tags "application", importmap: Madmin.importmap %>
+
+<%= stylesheet_link_tag *Madmin.stylesheets, "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" %>
-<style type="text/tailwindcss">
-.pagy {
-  @apply isolate inline-flex rounded-md;
-
-  a:first-child {
-    @apply rounded-l-md;
-  }
-  a:last-child {
-    @apply rounded-r-md;
-  }
-
-  a {
-    @apply relative -ml-px inline-flex items-center bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-100 focus:z-10;
-
-    &:not([href]) {
-      @apply text-gray-300 cursor-default;
-    }
-
-    &.current {
-      @apply text-white bg-blue-500 ring-blue-500;
-    }
-  }
-
-  label {
-    @apply inline-block whitespace-nowrap bg-gray-200 rounded-lg px-3 py-0.5;
-    input {
-      @apply bg-gray-100 border-none rounded-md;
-    }
-  }
-}
-</style>
-
-<script type="importmap" data-turbo-track="reload">
-  {
-    "imports": {
-      "@hotwired/stimulus": "https://unpkg.com/@hotwired/stimulus/dist/stimulus.js",
-      "@hotwired/turbo": "https://unpkg.com/@hotwired/turbo",
-      "@hotwired/turbo-rails": "https://unpkg.com/@hotwired/turbo-rails",
-      "@rails/actiontext": "https://unpkg.com/@rails/actiontext@<%= npm_rails_version %>/app/assets/javascripts/actiontext.js",
-      "@rails/activestorage": "https://unpkg.com/@rails/activestorage@<%= npm_rails_version %>/app/assets/javascripts/activestorage.esm.js",
-      "flatpickr": "https://unpkg.com/flatpickr/dist/esm/index.js",
-      "stimulus-flatpickr": "https://unpkg.com/stimulus-flatpickr@3.0.0-0/dist/index.m.js",
-      "tailwindcss-stimulus-components": "https://unpkg.com/tailwindcss-stimulus-components/dist/tailwindcss-stimulus-components.module.js",
-      "tom-select": "https://unpkg.com/tom-select/dist/esm/tom-select.complete.js",
-      "trix": "https://unpkg.com/trix"
-    }
-  }
-</script>
-<script async src="https://unpkg.com/es-module-shims/dist/es-module-shims.js"></script>
-
-<script type="module">
-  import * as Turbo from "@hotwired/turbo-rails"
-
-  import * as ActiveStorage from "@rails/activestorage"
-  ActiveStorage.start()
-  import "trix"
-  import "@rails/actiontext"
-
-  import { Application, Controller } from '@hotwired/stimulus'
-  const application = Application.start()
-
-  import { Dropdown } from "tailwindcss-stimulus-components"
-  application.register("dropdown", Dropdown)
-
-  import StimulusFlatpickr from "stimulus-flatpickr"
-  application.register("flatpickr", StimulusFlatpickr)
-
-  import TomSelect from "tom-select"
-
-  (() => {
-    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) => {
-            let url = search ? `${this.urlValue}?q=${search}` : this.urlValue;
-            fetch(url)
-              .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,29 +1,24 @@
-<div class="flex flex-col h-full text-sm">
-  <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>
+<h1><%= link_to_if respond_to?(:root_url), Madmin.site_name, root_url, data: {turbo: false}  %></h1>
 
-    <div class="-mr-2 flex items-center md:hidden relative" data-controller="dropdown">
-      <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>
+<nav>
+  <%= nav_link_to "Dashboard", madmin_root_path %>
 
-      <div class="absolute top-12 right-0 bg-white rounded-lg min-w-64 shadow-lg hidden md:flex flex-col flex-grow justify-between" data-dropdown-target="menu">
-        <%= render "menu_resources" %>
-      </div>
-    </div>
-    <div class="hidden md:block">
-      <%= render "menu_resources" %>
-    </div>
-  </div>
-</div>
+  <% Madmin.menu.render do |item| %>
+    <% if item.url %>
+      <%= nav_link_to item.label, item.url, starts_with: item.url %>
+    <% else %>
+      <h4><%= item.label %></h4>
+    <% end %>
+
+    <% item.items.each do |item| %>
+      <%= nav_link_to item.label, item.url, starts_with: item.url %>
+    <% end %>
+  <% end %>
+</nav>
+
+<footer>
+  <%= link_to "https://github.com/excid3/madmin", target: :_blank do %>
+    <svg viewBox="0 0 16 16" height="1rem" width="1rem" fill="currentColor" aria-hidden="true"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg>
+    Madmin on GitHub
+  <% end %>
+</footer>

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

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