rails_admin_next 1.0.0

data/src/rails_admin/controllers/nested_form_controller.js

@@ -0,0 +1,117 @@
+import { Controller } from "@hotwired/stimulus";
+
+// Drives RailsAdminNext's nested association forms. The server renders subforms
+// with native Rails
+// `fields_for` + `accepts_nested_attributes_for`; this controller owns the
+// add/remove/mark-for-destroy lifecycle:
+//
+//   - add: clones a blank subform from the <template>. For a has_many
+//     association the template carries a child-index placeholder
+//     (e.g. "new_nested_field_tests") which is swapped for a unique value so
+//     each new row submits under its own index; has_one/belongs_to subforms
+//     have no placeholder. Focus then moves to the first visible field.
+//   - remove on an unsaved subform deletes it from the DOM.
+//   - remove on a persisted subform sets its `_destroy` hidden field and dims
+//     it ("will be removed on save"); the record is destroyed only on submit.
+//     Required inputs in a doomed subform are relaxed so they can't block
+//     native form validation. A second click un-marks it.
+//   - singular (has_one/belongs_to) associations hold at most one subform; the
+//     Add control's visibility is not mirrored here — :has() CSS (skin.css)
+//     derives it from the subform's presence, including one marked for
+//     destruction.
+//
+// A 422 re-render keeps the submitted subforms — Rails re-renders them from the
+// invalid object — and the form-wide feedback controller moves focus to the
+// first invalid field, so there is nothing to restore here.
+export default class extends Controller {
+  static targets = ["container", "template"];
+  static values = {
+    // has_many child-index token to replace on add; empty for singular
+    // (has_one/belongs_to) associations, which mark themselves with
+    // data-nested-form-singular-value="true" — read only by the skin.css
+    // add-control rule, not by this controller.
+    placeholder: String,
+  };
+
+  static index = 0;
+
+  add(event) {
+    event?.preventDefault();
+    let html = this.templateTarget.innerHTML;
+    if (this.placeholderValue) {
+      html = html.replaceAll(this.placeholderValue, this.#nextIndex());
+    }
+    const fragment = document.createRange().createContextualFragment(html);
+    const subform = fragment.firstElementChild;
+    this.containerTarget.appendChild(fragment);
+    // Stimulus widgets in the new subform (date pickers, selects) auto-connect via
+    // the MutationObserver; this fires rails_admin.dom_ready so the dom_ready-based
+    // initialisers (rich-text editors) pick up the freshly inserted fields too.
+    document.dispatchEvent(
+      new CustomEvent("rails_admin.dom_ready", { detail: subform })
+    );
+    this.#focusFirstField(subform);
+  }
+
+  remove(event) {
+    event?.preventDefault();
+    const subform = event.target.closest("[data-nested-form-target='subform']");
+    if (!subform) return;
+
+    if (this.#persisted(subform)) {
+      this.#toggleMarkedForDestruction(subform);
+    } else {
+      subform.remove();
+    }
+  }
+
+  // A persisted record carries a populated `id` hidden field (Rails emits one
+  // automatically for existing nested records); a brand-new subform has none.
+  #persisted(subform) {
+    const id = subform.querySelector("input[name$='[id]']");
+    return Boolean(id && id.value);
+  }
+
+  #toggleMarkedForDestruction(subform) {
+    const marked = subform.classList.toggle("marked_for_destruction");
+    const destroy = subform.querySelector(
+      "input[data-nested-form-target='destroy']"
+    );
+    if (destroy) destroy.value = marked ? "1" : "";
+    this.#relaxRequired(subform, marked);
+  }
+
+  // Required inputs in a doomed subform must not block native form submission;
+  // relax them while marked and restore them if the user un-marks.
+  #relaxRequired(subform, marked) {
+    if (marked) {
+      subform.querySelectorAll("[required]").forEach((input) => {
+        input.dataset.nestedFormWasRequired = "true";
+        input.required = false;
+      });
+    } else {
+      subform
+        .querySelectorAll("[data-nested-form-was-required]")
+        .forEach((input) => {
+          input.required = true;
+          delete input.dataset.nestedFormWasRequired;
+        });
+    }
+  }
+
+  #focusFirstField(subform) {
+    const fields = subform.querySelectorAll(
+      "input:not([type='hidden']):not([type='submit']):not([type='button']), select, textarea"
+    );
+    // querySelectorAll does not descend into a nested <template>'s inert
+    // content, so deeply-nested blank fields are never matched here.
+    const target =
+      Array.from(fields).find((field) => field.offsetParent !== null) ||
+      fields[0];
+    target?.focus();
+  }
+
+  #nextIndex() {
+    return `${Date.now()}${this.constructor.index++}`;
+  }
+}

data/src/rails_admin/controllers/polymorphic_controller.js

@@ -0,0 +1,26 @@
+import { Controller } from "@hotwired/stimulus";
+
+// When the polymorphic type <select> changes, swap the object <select>'s
+// filtering-select source to the chosen type's options, which makes that
+// controller rebuild itself (reload).
+//
+// Wired by data-controller="polymorphic" + data-action="change->polymorphic#change"
+// on the type select; the per-type option blobs live in sibling
+// `#<type>-js-options` divs (data-options), and the object select carries
+// data-controller="filtering-select".
+export default class extends Controller {
+  change() {
+    const type = this.element.value.toLowerCase().replace(/::/g, "-");
+    const row = this.element.closest(".row");
+    const optionsEl = row?.querySelector(`#${CSS.escape(type)}-js-options`);
+    const objectSelect = row?.querySelector(
+      '[data-controller~="filtering-select"]'
+    );
+    if (!objectSelect || !optionsEl) return;
+
+    objectSelect.setAttribute(
+      "data-filtering-select-options-value",
+      optionsEl.dataset.options || "{}"
+    );
+  }
+}

data/src/rails_admin/controllers/remote_form_controller.js

@@ -0,0 +1,173 @@
+import { Controller } from "@hotwired/stimulus";
+
+const ACCEPT_FORM = "text/javascript";
+const ACCEPT_SUBMIT = "application/json, text/javascript";
+
+// Inline create/edit of associated records. Attached to the .row wrapping an
+// association's hidden <select> and its add/edit links. Clicking "Add a new …"
+// (or "Edit this …", or double-clicking a multiselect option) loads the
+// server-rendered new/edit form into the shared modal; submitting goes through
+// the modal and, on success, injects the saved record straight into the select.
+// Validation errors re-render the form in the modal in place.
+export default class extends Controller {
+  static outlets = ["modal"];
+
+  connect() {
+    // The modal renders the same association partials, so its forms also carry
+    // this controller — but nested inline-add is not supported, so skip it.
+    if (this.element.closest("#modal")) return;
+    this.element.addEventListener("click", this.onClick);
+    this.element.addEventListener("dblclick", this.onDblclick);
+  }
+
+  disconnect() {
+    this.element.removeEventListener("click", this.onClick);
+    this.element.removeEventListener("dblclick", this.onDblclick);
+  }
+
+  onClick = (event) => {
+    const create = event.target.closest(".create");
+    if (create) {
+      event.preventDefault();
+      this.#open(create.dataset.link);
+      return;
+    }
+    const update = event.target.closest(".update");
+    if (update) {
+      event.preventDefault();
+      if (update.classList.contains("disabled")) return;
+      const value = this.#select?.value;
+      if (value) this.#open(update.dataset.link.replace("__ID__", value));
+    }
+  };
+
+  onDblclick = (event) => {
+    const option = event.target.closest("option");
+    if (!option || option.disabled || !option.closest(".ra-multiselect"))
+      return;
+    const editUrl = this.#editUrl;
+    if (editUrl) this.#open(editUrl.replace("__ID__", option.value));
+  };
+
+  async #open(url) {
+    if (!this.hasModalOutlet) return;
+    const modal = this.modalOutlet;
+    modal.open();
+    const onSave = () => this.#submit();
+    modal.onSave = onSave;
+    this.loadAbortController?.abort();
+    const controller = (this.loadAbortController = new AbortController());
+    try {
+      const html = await this.#load(url, controller.signal);
+      // The modal is shared by every association field. If it was dismissed or
+      // reopened for a different field while this request was in flight,
+      // `modal.onSave` no longer points at the callback we just set — discard
+      // the response instead of rendering a stale form under someone else's
+      // Save handler (and injecting into the wrong hidden select).
+      if (modal.onSave !== onSave) return;
+      modal.renderContent(html);
+    } catch (error) {
+      if (error.name === "AbortError") return;
+      modal.close();
+    }
+  }
+
+  async #load(url, signal) {
+    const response = await fetch(url, {
+      headers: { Accept: ACCEPT_FORM, "X-Requested-With": "XMLHttpRequest" },
+      credentials: "same-origin",
+      signal,
+    });
+    return response.text();
+  }
+
+  async #submit() {
+    const modal = this.modalOutlet;
+    // Same staleness guard as #open: if the shared modal was dismissed or
+    // reopened for another field while this request was in flight,
+    // `modal.onSave` no longer points at this field's callback and the modal
+    // chrome must be left alone. Deliberately no AbortController here — a
+    // submit that reached the server saves the record regardless, and the
+    // response must still be injected into this field's row.
+    const onSave = modal.onSave;
+    modal.disableSave();
+    try {
+      const form = modal.bodyTarget.querySelector("form");
+      if (!form) return;
+      const response = await fetch(form.action, {
+        method: form.method,
+        headers: {
+          Accept: ACCEPT_SUBMIT,
+          "X-Requested-With": "XMLHttpRequest",
+        },
+        body: new FormData(form),
+        credentials: "same-origin",
+      });
+      if (
+        response.ok &&
+        response.headers.get("Content-Type")?.includes("json")
+      ) {
+        // Always inject — #inject targets this.element (the submitting
+        // field's own row), not the modal, so the saved record lands in the
+        // right select even if the modal has moved on.
+        this.#inject(await response.json());
+        if (modal.onSave === onSave) modal.close();
+      } else if (modal.onSave === onSave) {
+        modal.renderContent(await response.text());
+      }
+    } catch (error) {
+      if (modal.onSave === onSave) modal.close();
+    } finally {
+      if (modal.onSave === onSave) modal.enableSave();
+    }
+  }
+
+  // Place the saved record into the field's hidden <select> (the submitted value)
+  // and reflect it in the visible widget.
+  #inject({ id, label }) {
+    const select = this.#select;
+    if (!select) return;
+    const multiselect = this.element.querySelector(".ra-multiselect");
+    if (multiselect) {
+      const existing = multiselect.querySelector(`option[value="${id}"]`);
+      if (existing) {
+        select
+          .querySelectorAll(`option[value="${id}"]`)
+          .forEach((option) => (option.text = label));
+        multiselect
+          .querySelectorAll(`option[value="${id}"]`)
+          .forEach((option) => (option.text = label));
+      } else {
+        select.add(new Option(label, id, true, true));
+        multiselect
+          .querySelector("select.ra-multiselect-selection")
+          ?.add(new Option(label, id));
+      }
+    } else {
+      const input = this.element.querySelector(".ra-filtering-select-input");
+      if (input) input.value = label;
+      if (select.querySelector(`option[value="${id}"]`)) {
+        Array.from(select.options).forEach(
+          (option) => (option.selected = option.value === String(id))
+        );
+      } else {
+        select.replaceChildren(new Option(label, id, true, true));
+      }
+      this.element.querySelector(".update")?.classList.remove("disabled");
+    }
+  }
+
+  get #select() {
+    return this.element.querySelector("select");
+  }
+
+  get #editUrl() {
+    const options = this.#select?.dataset.options;
+    if (!options) return null;
+    try {
+      return JSON.parse(options)["edit-url"] || null;
+    } catch {
+      return null;
+    }
+  }
+}

data/src/rails_admin/controllers/sidescroll_controller.js

@@ -0,0 +1,23 @@
+import { Controller } from "@hotwired/stimulus";
+
+// Positions the sticky (frozen) columns of a horizontally scrollable list table.
+// Each sticky cell is offset by its distance from the first sticky cell in the
+// row so the frozen columns stack flush against the left edge while the rest of
+// the table scrolls under them.
+//
+// It runs on connect: Turbo Drive re-inserts #sidescroll on each visit, so the
+// controller reconnects and recomputes the offsets automatically without a
+// separate dom_ready listener.
+export default class extends Controller {
+  connect() {
+    this.element.querySelectorAll("tr").forEach((tr) => {
+      let firstPosition;
+      tr.querySelectorAll("th.sticky, td.sticky").forEach((cell, index) => {
+        if (index === 0) {
+          firstPosition = cell.offsetLeft;
+        }
+        cell.style.left = `${cell.offsetLeft - firstPosition}px`;
+      });
+    });
+  }
+}

data/src/rails_admin/dom-ready.js

@@ -0,0 +1,20 @@
+import I18n from "rails_admin/i18n";
+
+// Fires the `rails_admin.dom_ready` event exactly once per navigation:
+// DOMContentLoaded covers the cold page load, turbo:render covers subsequent
+// Turbo Drive visits — the two are mutually exclusive.
+function triggerDomReady() {
+  const admin = document.getElementById("admin-js");
+  I18n.init(document.documentElement.lang, admin && admin.dataset.i18nOptions);
+  document.dispatchEvent(new CustomEvent("rails_admin.dom_ready"));
+}
+
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", triggerDomReady);
+} else {
+  // Already loaded: defer to the next tick so the rest of the module graph (and
+  // any host-registered rails_admin.dom_ready listeners imported after us) has
+  // finished evaluating before the event fires.
+  setTimeout(triggerDomReady, 0);
+}
+document.addEventListener("turbo:render", triggerDomReady);

data/src/rails_admin/dom.js

@@ -0,0 +1,19 @@
+// Minimal DOM-builder shared by the filter/select Stimulus controllers
+// (filter_box, filtering_select, filtering_multiselect). Boolean `true`
+// in `attrs` renders a bare HTML boolean attribute (setAttribute(key, key),
+// e.g. { multiple: true } -> multiple="multiple"); `false`/`null`/`undefined`
+// skip the attribute entirely; anything else is stringified via setAttribute.
+// `null`/`undefined` children are skipped so callers can splice in
+// conditional content inline.
+export function el(tag, attrs = {}, ...children) {
+  const node = document.createElement(tag);
+  for (const [key, value] of Object.entries(attrs)) {
+    if (value === true) node.setAttribute(key, key);
+    else if (value != null && value !== false) node.setAttribute(key, value);
+  }
+  for (const child of children) {
+    if (child == null) continue;
+    node.append(child);
+  }
+  return node;
+}

data/src/rails_admin/i18n.js

@@ -0,0 +1,20 @@
+var I18n = {
+  locale: null,
+  translations: null,
+  init(locale, translations) {
+    this.locale = locale;
+    this.translations = translations;
+    if (typeof this.translations === "string") {
+      this.translations = JSON.parse(this.translations);
+    }
+  },
+  t(key) {
+    var humanize;
+    humanize = key.charAt(0).toUpperCase() + key.replace(/_/g, " ").slice(1);
+    // Stimulus controllers can connect before dom-ready.js calls I18n.init, so
+    // tolerate translations not being loaded yet (fall back to the humanized key).
+    return (this.translations && this.translations[key]) || humanize;
+  },
+};
+
+export { I18n as default };

data/src/rails_admin/icons.js

@@ -0,0 +1,64 @@
+// Inline-SVG icons for client-rendered widgets (filter box, filtering select and
+// multiselect). Mirrors the server-side RailsAdminNext::Icons helper
+// (lib/rails_admin_next/icons.rb): the same Font Awesome Free 6.1.1 (solid) glyph
+// data and the same data-icon/class output, so JS- and server-rendered icons match.
+// Only the glyphs drawn at runtime live here; the full set is owned by the Ruby side.
+
+const SVG_NS = "http://www.w3.org/2000/svg";
+
+const GLYPHS = {
+  delete: {
+    viewBox: "0 0 320 512",
+    path: "M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z",
+  },
+  minus: {
+    viewBox: "0 0 448 512",
+    path: "M400 288h-352c-17.69 0-32-14.32-32-32.01s14.31-31.99 32-31.99h352c17.69 0 32 14.3 32 31.99S417.7 288 400 288z",
+  },
+  move_down: {
+    viewBox: "0 0 512 512",
+    path: "M256 0C114.6 0 0 114.6 0 256c0 141.4 114.6 256 256 256s256-114.6 256-256C512 114.6 397.4 0 256 0zM390.6 246.6l-112 112C272.4 364.9 264.2 368 256 368s-16.38-3.125-22.62-9.375l-112-112c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L256 290.8l89.38-89.38c12.5-12.5 32.75-12.5 45.25 0S403.1 234.1 390.6 246.6z",
+  },
+  move_left: {
+    viewBox: "0 0 512 512",
+    path: "M256 0C114.6 0 0 114.6 0 256c0 141.4 114.6 256 256 256s256-114.6 256-256C512 114.6 397.4 0 256 0zM310.6 345.4c12.5 12.5 12.5 32.75 0 45.25s-32.75 12.5-45.25 0l-112-112C147.1 272.4 144 264.2 144 256s3.125-16.38 9.375-22.62l112-112c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25L221.3 256L310.6 345.4z",
+  },
+  move_right: {
+    viewBox: "0 0 512 512",
+    path: "M256 0C114.6 0 0 114.6 0 256c0 141.4 114.6 256 256 256s256-114.6 256-256C512 114.6 397.4 0 256 0zM358.6 278.6l-112 112c-12.5 12.5-32.75 12.5-45.25 0s-12.5-32.75 0-45.25L290.8 256L201.4 166.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l112 112C364.9 239.6 368 247.8 368 256S364.9 272.4 358.6 278.6z",
+  },
+  move_up: {
+    viewBox: "0 0 512 512",
+    path: "M256 0C114.6 0 0 114.6 0 256c0 141.4 114.6 256 256 256s256-114.6 256-256C512 114.6 397.4 0 256 0zM390.6 310.6c-12.5 12.5-32.75 12.5-45.25 0L256 221.3L166.6 310.6c-12.5 12.5-32.75 12.5-45.25 0s-12.5-32.75 0-45.25l112-112C239.6 147.1 247.8 144 256 144s16.38 3.125 22.62 9.375l112 112C403.1 277.9 403.1 298.1 390.6 310.6z",
+  },
+  new: {
+    viewBox: "0 0 448 512",
+    path: "M432 256c0 17.69-14.33 32.01-32 32.01H256v144c0 17.69-14.33 31.99-32 31.99s-32-14.3-32-31.99v-144H48c-17.67 0-32-14.32-32-32.01s14.33-31.99 32-31.99H192v-144c0-17.69 14.33-32.01 32-32.01s32 14.32 32 32.01v144h144C417.7 224 432 238.3 432 256z",
+  },
+  trash: {
+    viewBox: "0 0 448 512",
+    path: "M135.2 17.69C140.6 6.848 151.7 0 163.8 0H284.2C296.3 0 307.4 6.848 312.8 17.69L320 32H416C433.7 32 448 46.33 448 64C448 81.67 433.7 96 416 96H32C14.33 96 0 81.67 0 64C0 46.33 14.33 32 32 32H128L135.2 17.69zM394.8 466.1C393.2 492.3 372.3 512 346.9 512H101.1C75.75 512 54.77 492.3 53.19 466.1L31.1 128H416L394.8 466.1z",
+  },
+};
+
+// Semantic synonyms => canonical glyph name, mirroring the Ruby ALIASES subset.
+const ALIASES = { cancel: "delete", plus: "new", times: "delete" };
+
+// Build an inline <svg> element for a logical icon name (see GLYPHS), or null if
+// the name is unknown. Output mirrors the server-side rails_admin_icon helper.
+export function icon(name, { className = "" } = {}) {
+  const key = GLYPHS[name] ? name : ALIASES[name];
+  const glyph = key && GLYPHS[key];
+  if (!glyph) return null;
+
+  const svg = document.createElementNS(SVG_NS, "svg");
+  svg.setAttribute("viewBox", glyph.viewBox);
+  svg.setAttribute("aria-hidden", "true");
+  svg.setAttribute("focusable", "false");
+  svg.setAttribute("data-icon", key);
+  svg.setAttribute("class", `rails-admin-icon ${className}`.trim());
+  const path = document.createElementNS(SVG_NS, "path");
+  path.setAttribute("d", glyph.path);
+  svg.appendChild(path);
+  return svg;
+}