plutonium 0.49.1 → 0.51.0

data/src/js/controllers/register_controllers.js

@@ -24,6 +24,14 @@ import BulkActionsController from "./bulk_actions_controller.js"
 import FilterPanelController from "./filter_panel_controller.js"
 import TextareaAutogrowController from "./textarea_autogrow_controller.js"
 import ClipboardController from "./clipboard_controller.js"
+import IconRailController from "./icon_rail_controller.js"
+import IconRailFlyoutController from "./icon_rail_flyout_controller.js"
+import TableHeaderController from "./table_header_controller.js"
+import TableColumnMenuController from "./table_column_menu_controller.js"
+import CaptureUrlController from "./capture_url_controller.js"
+import RowClickController from "./row_click_controller.js"
+import ViewSwitcherController from "./view_switcher_controller.js"
+import AutosubmitController from "./autosubmit_controller.js"
 
 export default function (application) {
   // Register controllers here
@@ -52,4 +60,12 @@ export default function (application) {
   application.register("filter-panel", FilterPanelController)
   application.register("textarea-autogrow", TextareaAutogrowController)
   application.register("clipboard", ClipboardController)
+  application.register("icon-rail", IconRailController)
+  application.register("icon-rail-flyout", IconRailFlyoutController)
+  application.register("table-header", TableHeaderController)
+  application.register("table-column-menu", TableColumnMenuController)
+  application.register("capture-url", CaptureUrlController)
+  application.register("row-click", RowClickController)
+  application.register("view-switcher", ViewSwitcherController)
+  application.register("autosubmit", AutosubmitController)
 }

data/src/js/controllers/resource_tab_list_controller.js

@@ -1,6 +1,15 @@
 import { Controller } from "@hotwired/stimulus"
 
 // Connects to data-controller="resource-tab-list"
+//
+// URL hash sync:
+// - On connect, if location.hash matches a tab identifier, that tab is
+//   selected (overrides defaultTabValue). Falls back to defaultTabValue
+//   or the first tab.
+// - On user click, the URL hash is updated via history.replaceState
+//   (no scroll, no back-button entry).
+// - On hashchange (back/forward, manual hash edit), the matching tab
+//   is re-selected.
 export default class extends Controller {
   static targets = ["btn", "tab"]
   static values = {
@@ -13,14 +22,37 @@ export default class extends Controller {
     this.activeClasses = this.hasActiveClassesValue ? this.activeClassesValue.split(" ") : []
     this.inActiveClasses = this.hasInActiveClassesValue ? this.inActiveClassesValue.split(" ") : []
 
-    this.#selectInternal(this.defaultTabValue || this.btnTargets[0].id)
+    const fromHash = this.#buttonIdFromHash()
+    const initialId = fromHash || this.defaultTabValue || this.btnTargets[0]?.id
+    this.#selectInternal(initialId, { skipFocus: true, skipHashUpdate: true })
+
+    this._syncFromHash = this._syncFromHash.bind(this)
+    // hashchange covers manual hash edits and back/forward.
+    window.addEventListener("hashchange", this._syncFromHash)
+    // turbo:load covers Turbo navigations (including morph) where the URL
+    // changes via pushState — which doesn't fire hashchange. Without this,
+    // a second submit landing via morph leaves the previously-active tab
+    // selected even though the URL hash points elsewhere.
+    document.addEventListener("turbo:load", this._syncFromHash)
+  }
+
+  disconnect() {
+    if (this._syncFromHash) {
+      window.removeEventListener("hashchange", this._syncFromHash)
+      document.removeEventListener("turbo:load", this._syncFromHash)
+    }
+  }
+
+  _syncFromHash() {
+    const id = this.#buttonIdFromHash()
+    if (id) this.#selectInternal(id, { skipFocus: true, skipHashUpdate: true })
   }
 
   select(event) {
     this.#selectInternal(event.currentTarget.id)
   }
 
-  #selectInternal(id) {
+  #selectInternal(id, options = {}) {
     const selectedBtn = this.btnTargets.find(element => element.id === id)
     if (!selectedBtn) {
       console.error(`Tab Button with id "${id}" not found`)
@@ -56,9 +88,30 @@ export default class extends Controller {
     selectedTab.hidden = false
     selectedTab.setAttribute('aria-hidden', 'false')
 
+    // Sync URL hash so the tab is shareable / restorable on reload.
+    if (!options.skipHashUpdate) this.#updateHash(id)
+
     // Focus management
-    if (selectedBtn !== document.activeElement) {
+    if (!options.skipFocus && selectedBtn !== document.activeElement) {
       selectedBtn.focus()
     }
   }
+
+  // Button ids follow `${identifier}-tab`. The URL hash carries just
+  // the identifier (e.g., #details, #orders).
+  #buttonIdFromHash() {
+    const hash = window.location.hash.replace(/^#/, "")
+    if (!hash) return null
+    const candidateId = `${hash}-tab`
+    const exists = this.btnTargets.some(btn => btn.id === candidateId)
+    return exists ? candidateId : null
+  }
+
+  #updateHash(buttonId) {
+    const identifier = buttonId.replace(/-tab$/, "")
+    const newHash = `#${identifier}`
+    if (window.location.hash !== newHash) {
+      history.replaceState(null, "", newHash)
+    }
+  }
 }

data/src/js/controllers/row_click_controller.js

@@ -0,0 +1,21 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="row-click"
+//
+// Makes a table row or grid card behave like the resource's Show
+// affordance: clicking anywhere except a real interactive element
+// triggers the row's existing Show button. Single source of truth for
+// the URL — turbo-frame targets, modal opening, and any other
+// configuration on the Show action are inherited automatically.
+//
+// Mark the show element with `data-row-click-target="show"`.
+// Opt out of triggering for a specific element with
+// `data-row-click-ignore`.
+export default class extends Controller {
+  click(event) {
+    if (event.target.closest("a, button, input, label, select, textarea, [data-row-click-ignore]")) {
+      return
+    }
+    this.element.querySelector('[data-row-click-target="show"]')?.click()
+  }
+}

data/src/js/controllers/slim_select_controller.js

@@ -1,7 +1,19 @@
 import { Controller } from "@hotwired/stimulus";
 
 // Connects to data-controller="slim-select"
+//
+// Optional values (used by the typeahead-capable ResourceSelect):
+//   typeahead-url   — backend endpoint that returns
+//                     {results: [{value, label}, ...], has_more: bool}.
+//                     When present, SlimSelect's built-in client-side
+//                     filter is replaced by a debounced fetch through
+//                     this URL.
 export default class extends Controller {
+  static values = {
+    typeaheadUrl: String,
+    typeaheadDebounceMs: { type: Number, default: 200 }
+  }
+
   connect() {
     if (this.slimSelect) return;
 
@@ -47,9 +59,18 @@ export default class extends Controller {
       settings.openPosition = "auto";
     }
 
+    const events = {};
+
+    if (this.hasTypeaheadUrlValue && this.typeaheadUrlValue) {
+      // Replace SlimSelect's client-side filter with a server fetch.
+      // Returns the SlimSelect data array shape: {value, text}.
+      events.search = (search, currentData) => this.#typeaheadFetch(search, currentData);
+    }
+
     this.slimSelect = new SlimSelect({
       select: this.element,
       settings: settings,
+      events: events,
     });
 
     // Add event listeners for better positioning
@@ -177,6 +198,46 @@ export default class extends Controller {
     this.#cleanupSlimSelect();
   }
 
+  // Server-driven search. SlimSelect calls events.search on each
+  // keystroke; we debounce so that rapid typing produces a single
+  // request, and abort any in-flight fetch when a newer one starts.
+  // Returns a Promise resolving to either a DataArray (rendered as
+  // options) or a string (rendered as the no-results label).
+  #typeaheadFetch(search, _currentData) {
+    if (this._typeaheadDebounce) clearTimeout(this._typeaheadDebounce);
+    if (this._typeaheadAbort) this._typeaheadAbort.abort();
+
+    return new Promise((resolve) => {
+      this._typeaheadDebounce = setTimeout(() => {
+        this._typeaheadAbort = new AbortController();
+        this.#performTypeaheadFetch(search, this._typeaheadAbort.signal).then(resolve);
+      }, this.typeaheadDebounceMsValue);
+    });
+  }
+
+  async #performTypeaheadFetch(search, signal) {
+    const url = new URL(this.typeaheadUrlValue, window.location.origin);
+    url.searchParams.set("q", search || "");
+
+    try {
+      const res = await fetch(url.toString(), {
+        headers: { Accept: "application/json" },
+        signal: signal,
+      });
+      if (!res.ok) return "Search failed";
+      const json = await res.json();
+      const results = Array.isArray(json.results) ? json.results : [];
+      return results.map((row) => ({
+        value: String(row.value ?? ""),
+        text: String(row.label ?? ""),
+      }));
+    } catch (e) {
+      if (e.name === "AbortError") return [];
+      console.warn("[slim-select] typeahead error", e);
+      return "Search failed";
+    }
+  }
+
   #handleMorph() {
     if (!this.element.isConnected) return;
 

data/src/js/controllers/table_column_menu_controller.js

@@ -0,0 +1,43 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="table-column-menu"
+// Toggles the column ⋯ menu panel; closes on outside click and Escape.
+export default class extends Controller {
+  static targets = ["panel"]
+
+  connect() {
+    this._onDocClick = this._onDocClick.bind(this)
+  }
+
+  toggle(event) {
+    event.preventDefault()
+    event.stopPropagation()
+    if (this.hasPanelTarget) {
+      const isNowVisible = !this.panelTarget.classList.toggle("hidden")
+      if (isNowVisible) {
+        document.addEventListener("click", this._onDocClick)
+        this._onKey = (e) => { if (e.key === "Escape") this._close() }
+        document.addEventListener("keydown", this._onKey)
+      } else {
+        this._unbind()
+      }
+    }
+  }
+
+  _close() {
+    if (this.hasPanelTarget) this.panelTarget.classList.add("hidden")
+    this._unbind()
+  }
+
+  _unbind() {
+    document.removeEventListener("click", this._onDocClick)
+    if (this._onKey) {
+      document.removeEventListener("keydown", this._onKey)
+      this._onKey = null
+    }
+  }
+
+  _onDocClick(event) {
+    if (!this.element.contains(event.target)) this._close()
+  }
+}

data/src/js/controllers/table_header_controller.js

@@ -0,0 +1,16 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="table-header"
+// Routes column-header clicks: shift-click navigates to multi-href instead of href,
+// adding the column to the existing sort stack (multi-sort).
+// Plain click lets the default link navigation happen, which replaces all sorts.
+export default class extends Controller {
+  headerClick(event) {
+    if (!event.shiftKey) return // plain click: let the link navigate normally
+    const link = event.currentTarget
+    const multiHref = link.dataset.tableHeaderMultiHref
+    if (!multiHref) return
+    event.preventDefault()
+    Turbo.visit(multiHref)
+  }
+}

data/src/js/controllers/view_switcher_controller.js

@@ -0,0 +1,29 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="view-switcher"
+// Persists the user's chosen index view in a cookie so the server can
+// render the right shape on next request. Reload after writing so the
+// page comes back with everything (toolbar, filters, table/grid)
+// matching the new view.
+export default class extends Controller {
+  static values = { cookieName: String, cookiePath: { type: String, default: "/" } }
+
+  select(event) {
+    const view = event.params.view
+    if (!view || !this.cookieNameValue) return
+
+    // 1 year, scoped to the portal's mount path so different portals
+    // can hold different view preferences for the same resource.
+    // SameSite=Lax keeps it on top-level navigations but blocks
+    // cross-site requests from carrying it along.
+    const maxAge = 60 * 60 * 24 * 365
+    const path = this.cookiePathValue || "/"
+    document.cookie = `${this.cookieNameValue}=${encodeURIComponent(view)}; Path=${path}; Max-Age=${maxAge}; SameSite=Lax`
+
+    // Strip any legacy `?view=` param so the cookie is the source of
+    // truth from now on.
+    const url = new URL(window.location.href)
+    url.searchParams.delete("view")
+    window.location.href = url.toString()
+  }
+}

data/src/js/turbo/turbo_actions.js

@@ -6,3 +6,36 @@ Turbo.StreamActions.redirect = function () {
   const url = this.getAttribute("url")
   Turbo.visit(url)
 }
+
+// Closes the <dialog> rendered inside the targeted turbo-frame and
+// empties the frame so the dialog can be re-opened later. Used by the
+// stacked-modal flow: after a successful create inside the secondary
+// modal, the server tells the browser to dismiss it.
+Turbo.StreamActions.close_frame = function () {
+  const frameId = this.getAttribute("target")
+  if (!frameId) return
+
+  const frame = document.getElementById(frameId)
+  if (!frame) return
+
+  const dialog = frame.querySelector("dialog")
+  if (dialog && typeof dialog.close === "function") dialog.close()
+
+  // Clearing the frame's content keeps a future visit to the same URL
+  // re-fetching (turbo would otherwise treat the frame as cached).
+  frame.innerHTML = ""
+  frame.removeAttribute("src")
+}
+
+// Reloads the targeted turbo-frame from its current src. Used after a
+// secondary-modal action mutates data the primary modal depends on
+// (e.g. a newly created association option) so the primary re-renders.
+Turbo.StreamActions.reload_frame = function () {
+  const frameId = this.getAttribute("target")
+  if (!frameId) return
+
+  const frame = document.getElementById(frameId)
+  if (!frame || typeof frame.reload !== "function") return
+
+  frame.reload()
+}