madmin 2.6.0 → 3.1.0

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

@@ -28,11 +28,11 @@
     margin-bottom: 0.1rem;
 
     &:hover {
-      background-color: rgb(243 244 246);
+      background-color: var(--hover-color);
     }
 
     &.active {
-      background-color: rgb(243 244 246);
+      background-color: var(--hover-color);
       font-weight: 600;
     }
   }
@@ -90,11 +90,11 @@ main {
       margin-bottom: 0.1rem;
 
       &:hover {
-        background-color: rgb(243 244 246);
+        background-color: var(--hover-color);
       }
 
       &.active {
-        background-color: rgb(243 244 246);
+        background-color: var(--hover-color);
         font-weight: 600;
       }
     }
@@ -106,7 +106,7 @@ main {
     margin-top: 1rem;
 
     a {
-      color: rgb(75 85 99);
+      color: var(--light-text-color);
       display: flex;
       align-items: center;
       gap: 0.25rem;
@@ -119,7 +119,7 @@ main {
     }
 
     &:hover {
-      color: var(--primary-color);
+      color: var(--link-color);
     }
   }
 }

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

@@ -21,7 +21,7 @@ table {
     text-align: left;
 
     a {
-      color: rgb(17 24 39);
+      color: var(--text-color);
       text-decoration: none;
     }
 

data/app/controllers/madmin/base_controller.rb

@@ -2,11 +2,7 @@ module Madmin
   class BaseController < ActionController::Base
     include ::ActiveStorage::SetCurrent if defined?(::ActiveStorage)
 
-    if Gem::Version.new(Pagy::VERSION) >= Gem::Version.new("43.0.0.rc")
-      include Pagy::Method
-    else
-      include Pagy::Backend
-    end
+    include Madmin::Pagination
 
     protect_from_forgery with: :exception
 

data/app/controllers/madmin/resource_controller.rb

@@ -9,7 +9,7 @@ module Madmin
     before_action :set_paper_trail_whodunnit, if: -> { respond_to?(:set_paper_trail_whodunnit, true) }
 
     def index
-      @pagy, @records = paginate_collection(scoped_resources)
+      @page, @records = paginate_collection(scoped_resources)
 
       respond_to do |format|
         format.html
@@ -27,8 +27,8 @@ module Madmin
     end
 
     def create
-      @record = resource.model.new(resource_params)
-      if @record.save
+      @record = resource.model.new
+      if save_record(resource_params)
         redirect_to resource.show_path(@record)
       else
         render :new, status: :unprocessable_entity
@@ -39,7 +39,7 @@ module Madmin
     end
 
     def update
-      if @record.update(resource_params)
+      if save_record(resource_params)
         redirect_to resource.show_path(@record)
       else
         render :edit, status: :unprocessable_entity
@@ -68,15 +68,17 @@ module Madmin
 
     def scoped_resources
       resources = resource.model.send(valid_scope)
-      resources = Madmin::Search.new(resources, resource, search_term).run
+      resources = Madmin::Search.new(resources, resource, search_term, filters).run
 
       return resources if sort_column.blank?
 
       resources.reorder(sort_column => sort_direction)
     end
 
+    # Returns [page, records]. Override for non-ActiveRecord collections and
+    # return an object responding to the Madmin::Page interface.
     def paginate_collection(collection)
-      pagy(collection)
+      paginate(collection, page: params[:page])
     end
 
     def valid_scope
@@ -85,31 +87,50 @@ module Madmin
     end
 
     def resource_params
-      params.require(resource.param_key)
-        .permit(*resource.permitted_params)
-        .transform_values { |v| change_polymorphic(v) }
+      cast_fields params.require(resource.param_key).permit(*resource.permitted_params)
     end
 
     def new_resource_params
-      params.fetch(resource.param_key, {}).permit!
-        .permit(*resource.permitted_params)
-        .transform_values { |v| change_polymorphic(v) }
+      cast_fields params.fetch(resource.param_key, {}).permit!.permit(*resource.permitted_params)
     end
 
-    def change_polymorphic(data)
-      return data unless data.is_a?(ActionController::Parameters) && data[:type]
+    # Lets each field convert its submitted value, such as parsing JSON
+    def cast_fields(attributes)
+      attributes.to_h.to_h do |name, value|
+        field = field_for(name)
+        [name, field ? field.cast(value) : value]
+      end
+    end
+
+    # Assigns the attributes and saves, unless a field doesn't accept its value
+    def save_record(attributes)
+      @record.assign_attributes(attributes)
+
+      rejected = attributes.select { |name, value| field_for(name)&.accepts?(value) == false }.keys
 
-      if data[:type] == "polymorphic"
-        GlobalID::Locator.locate(data[:value])
+      if rejected.any?
+        @record.validate
+        rejected.each { |name| @record.errors.add(name, :invalid) }
+        false
       else
-        raise "Unrecognised param data: #{data.inspect}"
+        @record.save
       end
     end
 
+    def field_for(name)
+      resource.get_attribute(name.to_sym)&.field
+    end
+
     def search_term
       @search_term ||= params[:q].to_s.strip
     end
 
+    # The index filters from `filters[][column]`, `filters[][operator]` and `filters[][value]`
+    def filters
+      @filters ||= Madmin::Filter.from_params(resource, params.slice(:filters).permit(filters: [:column, :operator, :value]).fetch(:filters, []))
+    end
+    helper_method :filters
+
     def enforce_readonly
       redirect_to resource.index_path, alert: t("madmin.flash.readonly", name: resource.friendly_name) if resource.readonly?
     end

data/app/helpers/madmin/application_helper.rb

@@ -1,10 +1,23 @@
 module Madmin
   module ApplicationHelper
-    include Pagy::Frontend if defined? Pagy::Frontend
     include Rails.application.routes.url_helpers
 
+    # Links to the record's page in its resource. Renders the name without a
+    # link when the resource's show route isn't drawn.
+    def link_to_record(resource, record, **options)
+      link_to resource.display_name(record), resource.show_path(record), **options
+    rescue Madmin::MissingRoute
+      resource.display_name(record)
+    end
+
     def clear_search_params
-      resource.index_path(sort: params[:sort], direction: params[:direction])
+      index_path_with(q: nil)
+    end
+
+    # The current index URL with some params changed, keeping the search,
+    # scope, sort and filters. Any change goes back to the first page
+    def index_path_with(**changes)
+      resource.index_path(request.query_parameters.symbolize_keys.except(:page).merge(changes))
     end
   end
 end

data/app/helpers/madmin/filters_helper.rb

@@ -0,0 +1,26 @@
+module Madmin
+  module FiltersHelper
+    FILTER_INPUT_TYPES = {string: "text", number: "number", date: "date", datetime: "datetime-local", boolean: "text", array: "text"}.freeze
+
+    # Operators that don't take a value are marked so the filters controller can hide the value input
+    def filter_operator_options(type)
+      Filter::OPERATORS.fetch(type).map do |operator|
+        option = [t("madmin.filters.operators.#{type}.#{operator}"), operator]
+        Filter::WITHOUT_VALUE.include?(operator) ? option << {data: {without_value: true}} : option
+      end
+    end
+
+    def filter_column_options(resource)
+      resource.filterable_attributes.map do |attribute|
+        type = attribute.field.filter_type
+        [attribute.field.label, attribute.name, {data: {input_type: filter_input_type(type), filter_type: type}}]
+      end
+    end
+
+    def filter_input_type(type) = FILTER_INPUT_TYPES.fetch(type)
+
+    def filter_value_label(filter)
+      filter.type.in?([:date, :datetime]) ? l(filter.typed_value, format: :long) : filter.value
+    end
+  end
+end

data/app/helpers/madmin/sort_helper.rb

@@ -4,7 +4,7 @@ module Madmin
       matching_column = (column.to_s == sort_column)
       direction = (sort_direction == "asc") ? "desc" : "asc"
 
-      link_to resource.index_path(sort: column, direction: direction, scope: params[:scope], q: params[:q]), options do
+      link_to index_path_with(sort: column, direction: direction), options do
         concat title
         if matching_column
           concat " "

data/app/javascript/madmin/application.js

@@ -1,3 +1,7 @@
 import "@hotwired/turbo-rails"
 import "@rails/actiontext"
+import * as ActiveStorage from "@rails/activestorage"
 import "controllers"
+
+// Uploads files straight to storage for fields with `direct_upload: true`. Other file fields submit with the form
+ActiveStorage.start()

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

@@ -7,6 +7,3 @@ application.debug = false
 window.Stimulus   = application
 
 export { application }
-
-import { Dropdown } from "tailwindcss-stimulus-components"
-application.register("dropdown", Dropdown)

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

@@ -0,0 +1,35 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Adds and removes index filter rows. When the column changes, the row gets
+// that column's operators and input type from the server-rendered markup
+export default class extends Controller {
+  static targets = ["rows", "row", "operators"]
+
+  add() {
+    this.rowsTarget.append(this.rowTarget.content.cloneNode(true))
+    this.rowsTarget.lastElementChild.querySelector("select").focus()
+  }
+
+  remove(event) {
+    event.target.closest("[data-filter-row]").remove()
+  }
+
+  changeColumn(event) {
+    const row = event.target.closest("[data-filter-row]")
+    const column = event.target.selectedOptions[0]
+    const operator = row.querySelector("[name='filters[][operator]']")
+    const value = row.querySelector("[name='filters[][value]']")
+    const operators = this.operatorsTargets.find(template => template.dataset.filterType == column.dataset.filterType)
+
+    operator.replaceChildren(operators.content.cloneNode(true))
+    value.type = column.dataset.inputType
+    value.step = value.type == "number" ? "any" : ""
+    value.value = ""
+    this.changeOperator({ target: operator })
+  }
+
+  changeOperator(event) {
+    const row = event.target.closest("[data-filter-row]")
+    row.querySelector("[name='filters[][value]']").hidden = "withoutValue" in event.target.selectedOptions[0].dataset
+  }
+}

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

@@ -7,6 +7,8 @@ export default class extends Controller {
 
   connect() {
     this.wrapperClass = this.data.get("wrapperClass") || "nested-fields"
+    // A has_one only allows one record, so the add link hides while it has one
+    this.single = this.data.get("single") == "true"
   }
 
   add_association(event) {
@@ -14,6 +16,7 @@ export default class extends Controller {
 
     var content = this.templateTarget.innerHTML.replace(/NEW_RECORD/g, new Date().getTime())
     this.linksTarget.insertAdjacentHTML('beforebegin', content)
+    if (this.single) this.linksTarget.hidden = true
   }
 
   remove_association(event) {
@@ -30,5 +33,7 @@ export default class extends Controller {
       wrapper.querySelector("input[name*='_destroy']").value = 1
       wrapper.style.display = 'none'
     }
+
+    if (this.single) this.linksTarget.hidden = false
   }
 }

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

@@ -1,37 +1,284 @@
 import { Controller } from "@hotwired/stimulus"
-import TomSelect from "tom-select"
 
+let count = 0
+
+// Turns a <select> into a searchable combobox. The <select> stays in the form,
+// hidden, and is what gets submitted.
+//
+// Without a url, the <select>'s own options are filtered as you type.
+// With a url, options are loaded from the server when it opens and as you type:
+//
+//   <select data-controller="select" data-select-url-value="/madmin/users.json">
+//
+//   GET /madmin/users.json           =>  [{"id": 1, "name": "Chris Oliver"}, ...]
+//   GET /madmin/users.json?q=chris   =>  [{"id": 1, "name": "Chris Oliver"}]
 export default class extends Controller {
-  static values = {
-    options: Object,
-    url: String
-  }
+  static values = { url: String }
 
   connect() {
-    let options = {
-      plugins: ['remove_button'],
-      valueField: 'id',
-      labelField: 'name',
-      searchField: 'name',
+    this.multiple = this.element.multiple
+    this.results = []
+    this.activeIndex = -1
+
+    this.build()
+    this.element.hidden = true
+    this.element.after(this.wrapper)
+    this.labelFor(this.element.id)?.setAttribute("for", this.input.id)
+    this.render()
+  }
+
+  disconnect() {
+    clearTimeout(this.timeout)
+    this.abortController?.abort()
+    this.labelFor(this.input.id)?.setAttribute("for", this.element.id)
+    this.wrapper.remove()
+    this.element.hidden = false
+  }
+
+  // Events
+
+  focus() {
+    if (!this.multiple) this.input.select()
+    this.search()
+  }
+
+  typed() {
+    clearTimeout(this.timeout)
+    if (this.hasUrlValue) {
+      this.timeout = setTimeout(() => this.search(), 300)
+    } else {
+      this.search()
     }
+  }
+
+  keydown(event) {
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault()
+        this.isOpen ? this.moveActive(1) : this.search()
+        break
+      case "ArrowUp":
+        event.preventDefault()
+        this.moveActive(-1)
+        break
+      case "Enter":
+        if (this.isOpen && this.results[this.activeIndex]) {
+          event.preventDefault()
+          this.choose(this.results[this.activeIndex])
+        }
+        break
+      case "Escape":
+        if (this.isOpen) {
+          event.preventDefault()
+          this.close()
+        }
+        break
+      case "Backspace":
+        if (this.multiple && this.input.value === "") {
+          this.remove(this.selectedOptions.at(-1)?.value)
+        }
+        break
+    }
+  }
+
+  blur() {
+    // Clearing the text of a single select clears its value
+    if (!this.multiple && this.input.value === "" && this.element.value !== "") {
+      this.choose({ id: "", name: "" })
+    }
+    this.close()
+  }
+
+  // Searching
+
+  async search() {
+    const query = this.query
 
     if (this.hasUrlValue) {
-      options["load"] = (search, callback) => {
-        let url = search ? `${this.urlValue}?q=${search}` : this.urlValue;
-        fetch(url)
-          .then(response => response.json())
-          .then(json => {
-            callback(json);
-          }).catch(() => {
-            callback();
-          });
+      this.abortController?.abort()
+      this.abortController = new AbortController()
+
+      const url = new URL(this.urlValue, window.location.origin)
+      if (query) url.searchParams.set("q", query)
+
+      try {
+        const response = await fetch(url, { headers: { Accept: "application/json" }, signal: this.abortController.signal })
+        this.open(await response.json())
+      } catch (error) {
+        if (error.name !== "AbortError") this.open([])
       }
+    } else {
+      this.open(this.localResults(query))
     }
+  }
 
-    this.select = new TomSelect(this.element, options)
+  localResults(query) {
+    return Array.from(this.element.options)
+      .filter(option => option.value !== "")
+      .map(option => ({ id: option.value, name: option.text }))
+      .filter(result => result.name.toLowerCase().includes(query.toLowerCase()))
   }
 
-  disconnect() {
-    this.select.destroy()
+  // Choosing
+
+  choose({ id, name }) {
+    const value = String(id)
+    let option = Array.from(this.element.options).find(option => option.value === value)
+    if (!option) {
+      option = new Option(name, value)
+      this.element.add(option)
+    }
+    option.selected = true
+    this.changed()
+
+    if (this.multiple) this.input.value = ""
+    this.close()
+  }
+
+  remove(value) {
+    const option = this.selectedOptions.find(option => option.value === value)
+    if (option) {
+      option.selected = false
+      this.changed()
+    }
+  }
+
+  changed() {
+    this.element.dispatchEvent(new Event("change", { bubbles: true }))
+    this.render()
+  }
+
+  // Rendering
+
+  build() {
+    this.wrapper = document.createElement("div")
+    this.wrapper.className = "combobox"
+
+    this.control = document.createElement("div")
+    this.control.className = "combobox-control"
+    this.control.addEventListener("click", () => this.input.focus())
+
+    this.input = document.createElement("input")
+    this.input.type = "text"
+    this.input.id = `${this.element.id || `select_${++count}`}_combobox`
+    this.input.className = "combobox-input"
+    this.input.autocomplete = "off"
+    this.input.setAttribute("role", "combobox")
+    this.input.setAttribute("aria-autocomplete", "list")
+    this.input.setAttribute("aria-expanded", "false")
+    this.input.addEventListener("focus", () => this.focus())
+    this.input.addEventListener("input", () => this.typed())
+    this.input.addEventListener("keydown", event => this.keydown(event))
+    this.input.addEventListener("blur", () => this.blur())
+
+    this.listbox = document.createElement("ul")
+    this.listbox.id = `${this.input.id}_listbox`
+    this.listbox.className = "combobox-listbox"
+    this.listbox.hidden = true
+    this.listbox.setAttribute("role", "listbox")
+    // Keep focus in the input so choosing an option doesn't blur it first
+    this.listbox.addEventListener("mousedown", event => event.preventDefault())
+    this.input.setAttribute("aria-controls", this.listbox.id)
+
+    this.control.append(this.input)
+    this.wrapper.append(this.control, this.listbox)
+  }
+
+  render() {
+    if (this.multiple) {
+      this.control.querySelectorAll(".combobox-chip").forEach(chip => chip.remove())
+      this.selectedOptions.forEach(option => this.input.before(this.chip(option)))
+    } else {
+      const option = this.selectedOptions[0]
+      this.input.value = option && option.value !== "" ? option.text : ""
+    }
+  }
+
+  chip(option) {
+    const chip = document.createElement("span")
+    chip.className = "combobox-chip"
+    chip.textContent = option.text
+
+    const button = document.createElement("button")
+    button.type = "button"
+    button.textContent = "×"
+    button.setAttribute("aria-label", `Remove ${option.text}`)
+    button.addEventListener("click", event => {
+      event.stopPropagation()
+      this.remove(option.value)
+    })
+
+    chip.append(button)
+    return chip
+  }
+
+  open(results) {
+    const selected = this.selectedOptions.map(option => option.value)
+    this.results = this.multiple ? results.filter(result => !selected.includes(String(result.id))) : results
+    this.activeIndex = this.results.length ? 0 : -1
+
+    this.listbox.replaceChildren(...this.results.map((result, index) => {
+      const item = document.createElement("li")
+      item.id = `${this.listbox.id}_${index}`
+      item.textContent = result.name
+      item.setAttribute("role", "option")
+      item.addEventListener("click", () => this.choose(result))
+      return item
+    }))
+
+    if (this.results.length === 0) {
+      const empty = document.createElement("li")
+      empty.className = "combobox-empty"
+      empty.textContent = "No results"
+      this.listbox.append(empty)
+    }
+
+    this.listbox.hidden = false
+    this.input.setAttribute("aria-expanded", "true")
+    this.highlight()
+  }
+
+  close() {
+    clearTimeout(this.timeout)
+    this.abortController?.abort()
+    this.listbox.hidden = true
+    this.input.setAttribute("aria-expanded", "false")
+    this.input.removeAttribute("aria-activedescendant")
+    this.render()
+  }
+
+  moveActive(step) {
+    if (this.results.length === 0) return
+    this.activeIndex = (this.activeIndex + step + this.results.length) % this.results.length
+    this.highlight()
+  }
+
+  highlight() {
+    this.listbox.querySelectorAll("[role=option]").forEach((item, index) => {
+      const active = index === this.activeIndex
+      item.setAttribute("aria-selected", active)
+      if (active) {
+        this.input.setAttribute("aria-activedescendant", item.id)
+        item.scrollIntoView({ block: "nearest" })
+      }
+    })
+  }
+
+  // Helpers
+
+  get query() {
+    return this.multiple || this.input.value !== this.selectedOptions[0]?.text ? this.input.value.trim() : ""
+  }
+
+  get isOpen() {
+    return !this.listbox.hidden
+  }
+
+  get selectedOptions() {
+    return Array.from(this.element.selectedOptions).filter(option => option.value !== "")
+  }
+
+  labelFor(id) {
+    return id ? document.querySelector(`label[for="${CSS.escape(id)}"]`) : null
   }
 }

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

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta name="ROBOTS" content="NOODP">
     <meta name="viewport" content="initial-scale=1">
+    <meta name="color-scheme" content="light dark">
     <title>
       <% if content_for? :title %>
         <%= yield(:title) %> -

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

@@ -0,0 +1,15 @@
+<% if filters.any? %>
+  <div class="active-filters">
+    <% filters.each do |filter| %>
+      <span class="filter-chip">
+        <span>
+          <strong><%= filter.field.label %></strong>
+          <%= t("madmin.filters.operators.#{filter.type}.#{filter.operator}") %>
+          <%= tag.strong filter_value_label(filter) if filter.value? %>
+        </span>
+        <%= link_to "×", index_path_with(filters: filters.excluding(filter).map(&:to_h).presence), aria: {label: t("madmin.filters.remove")} %>
+      </span>
+    <% end %>
+    <%= link_to t("madmin.filters.clear_all"), index_path_with(filters: nil) %>
+  </div>
+<% end %>

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

@@ -0,0 +1,13 @@
+<div class="filter-row" data-filter-row>
+  <%= select_tag "filters[][column]", options_for_select(filter_column_options(resource), filter.column),
+        id: nil, aria: {label: t("madmin.filters.column")}, data: {action: "filters#changeColumn"} %>
+
+  <%= select_tag "filters[][operator]", options_for_select(filter_operator_options(filter.type), filter.operator),
+        id: nil, aria: {label: t("madmin.filters.operator")}, data: {action: "filters#changeOperator"} %>
+
+  <%= tag.input name: "filters[][value]", value: filter.value, id: nil,
+        type: filter_input_type(filter.type), step: ("any" if filter.type == :number),
+        hidden: !filter.value?, aria: {label: t("madmin.filters.value")} %>
+
+  <button type="button" class="filter-remove" aria-label="<%= t("madmin.filters.remove") %>" data-action="filters#remove">&times;</button>
+</div>