infotable 1.4.1 → 1.6.0

data/app/assets/javascripts/infotable/controllers/table_controller.js

@@ -1,5 +1,10 @@
 import { Controller } from "@hotwired/stimulus"
 
+// Innermost pinned column on each side: an inset 1px line. A border would stay behind when the
+// cell sticks (collapsed borders belong to the table), a box-shadow moves with the cell
+const LEFT_EDGE = 'inset -1px 0 0 0 rgba(128, 128, 128, 0.45)'
+const RIGHT_EDGE = 'inset 1px 0 0 0 rgba(128, 128, 128, 0.45)'
+
 // Main table controller that coordinates table interactions
 export default class extends Controller {
   static values = {
@@ -48,6 +53,8 @@ export default class extends Controller {
 
     // Listen for column visibility changes to update export link
     this.boundUpdateExportLink = this.updateExportLink.bind(this)
+    this.boundApplyColumns = this.applyColumnsFromDrawer.bind(this)
+    document.addEventListener("infotable:apply-columns", this.boundApplyColumns)
     document.addEventListener("infotable:columns-changed", this.boundUpdateExportLink)
     document.addEventListener("infotable:filters-changed", this.boundUpdateExportLink)
   }
@@ -55,6 +62,7 @@ export default class extends Controller {
   disconnect() {
     this.element.removeEventListener("turbo:frame-load", this.boundApplyOrderAndVisibility)
     document.removeEventListener("infotable:columns-changed", this.boundUpdateExportLink)
+    document.removeEventListener("infotable:apply-columns", this.boundApplyColumns)
     document.removeEventListener("infotable:filters-changed", this.boundUpdateExportLink)
     window.removeEventListener("resize", this.boundFitHeight)
     cancelAnimationFrame(this.fitFrame)
@@ -88,22 +96,16 @@ export default class extends Controller {
     this.applyColumnPinning()
   }
 
-  // Handle loading states
-  beforeFetchRequest(event) {
-    this.showLoading()
-  }
-
-  afterFetchResponse(event) {
-    this.hideLoading()
-  }
-
   // Handle turbo frame load
   handleFrameLoad(event) {
     this.fitHeight()
     this.updateFilterCount(event.target)
     // rows matching the current filters, when the server knows it (not with countless pagination)
-    const total = parseInt(event.target.querySelector("[data-total-count]")?.dataset.totalCount, 10)
-    this.totalCount = Number.isFinite(total) ? total : null
+    // (a nested frame, e.g. the infinite-scroll "next page" one, carries no count: keep the last one)
+    if (event.target.id === `${this.nameValue}_content`) {
+      const total = parseInt(event.target.querySelector("[data-total-count]")?.dataset.totalCount, 10)
+      this.totalCount = Number.isFinite(total) ? total : null
+    }
     this.syncSelectionScope(event.target)
     if (this.urlStateValue && event.target.id === `${this.nameValue}_content`) this.syncUrl(event.target)
   }
@@ -179,7 +181,7 @@ export default class extends Controller {
     }
 
     // The first change on a fresh page replaces the entry, later ones add entries for Back
-    const state = { turbo: { restorationIdentifier: crypto.randomUUID() } }
+    const state = { turbo: { restorationIdentifier: (crypto.randomUUID?.() ?? `infotable-${Date.now()}-${Math.random().toString(36).slice(2)}`) } }
     if (this.urlStateStarted) {
       window.history.pushState(state, "", next)
     } else {
@@ -240,7 +242,17 @@ export default class extends Controller {
   // Fires for rows added later (next page, infinite scroll) so they pick up the selection
   rowCheckboxTargetConnected(checkbox) {
     checkbox.checked = this.selected.has(checkbox.value)
-    this.renderSelection()
+    this.scheduleRenderSelection()
+  }
+
+  // A page connects up to 500 checkboxes at once: render the selection once for all of them
+  scheduleRenderSelection() {
+    if (this.renderScheduled) return
+    this.renderScheduled = true
+    queueMicrotask(() => {
+      this.renderScheduled = false
+      this.renderSelection()
+    })
   }
 
   toggleRow(event) {
@@ -379,15 +391,6 @@ export default class extends Controller {
     form.remove()
   }
 
-  showLoading() {
-    // Add loading indicator (to be enhanced in later phases)
-    this.element.style.opacity = "0.6"
-  }
-
-  hideLoading() {
-    this.element.style.opacity = "1"
-  }
-
   // Shift+click on a sortable header adds/toggles the column in the multi-sort list
   // (sort=name:asc,age:desc). A plain click keeps the link's single-column behaviour.
   sortClick(event) {
@@ -491,8 +494,18 @@ export default class extends Controller {
     }
   }
 
-  // Apply column order from localStorage
-  applyColumnOrder() {
+  // The columns drawer changed order, visibility or pinning (it stored them in localStorage)
+  applyColumnsFromDrawer(event) {
+    const { tableName, order } = event.detail
+    if (tableName !== this.nameValue) return
+
+    this.applyColumnOrder(order)
+    this.applyColumnVisibility()
+    this.applyColumnPinning()
+  }
+
+  // Apply column order: the given one, else the one in localStorage
+  applyColumnOrder(explicitOrder = null) {
     const tableName = this.nameValue
     const orderKey = `infotable_column_order_${tableName}`
 
@@ -520,11 +533,11 @@ export default class extends Controller {
       const defaultSchema = headers.map(h => h.dataset.columnName)
 
       // Load stored order from localStorage
-      const storedOrder = this.loadColumnOrder(tableName)
+      const storedOrder = explicitOrder || this.loadColumnOrder(tableName)
       if (!storedOrder) return
 
       // Validate stored order against default schema
-      if (!this.isSchemaValid(storedOrder, defaultSchema)) {
+      if (!explicitOrder && !this.isSchemaValid(storedOrder, defaultSchema)) {
         console.warn(`Schema mismatch for table ${tableName}, clearing stored order`)
         this.clearColumnOrder(tableName)
         return
@@ -628,7 +641,6 @@ export default class extends Controller {
       }
 
       const headers = table.querySelectorAll("thead th[data-column-name]")
-      const rows = table.querySelectorAll("tbody tr")
 
       if (headers.length === 0) {
         console.warn(`No column headers found for table: ${tableName}`)
@@ -642,31 +654,18 @@ export default class extends Controller {
         visibility = JSON.parse(stored)
       }
 
+      const shown = new Map()
       headers.forEach((header) => {
         const columnName = header.dataset.columnName
-        const defaultVisible = header.dataset.defaultVisible === "true"
-
-        // Determine if column should be visible
-        let shouldShow
-        if (visibility && visibility.hasOwnProperty(columnName)) {
-          // Use saved preference
-          shouldShow = visibility[columnName]
-        } else {
-          // Use default visibility
-          shouldShow = defaultVisible
-        }
-
-        // Apply visibility
+        const saved = visibility && Object.prototype.hasOwnProperty.call(visibility, columnName)
+        const shouldShow = saved ? visibility[columnName] : header.dataset.defaultVisible === "true"
+        shown.set(columnName, shouldShow)
         header.style.display = shouldShow ? "" : "none"
+      })
 
-        // Hide/show corresponding cells in all rows
-        rows.forEach(row => {
-          const cells = row.querySelectorAll("td[data-column-name]")
-          const cell = Array.from(cells).find(c => c.dataset.columnName === columnName)
-          if (cell) {
-            cell.style.display = shouldShow ? "" : "none"
-          }
-        })
+      // One pass over the cells: hide/show each by its column
+      table.querySelectorAll("tbody td[data-column-name]").forEach(cell => {
+        if (shown.has(cell.dataset.columnName)) cell.style.display = shown.get(cell.dataset.columnName) ? "" : "none"
       })
     } catch (e) {
       console.warn("Failed to apply column visibility", e)
@@ -781,34 +780,31 @@ export default class extends Controller {
     // The data-turbo="false" ensures Turbo doesn't intercept this
   }
 
-  // Handle row click for clickable rows
+  // Row click (`row_link` and/or `row_click`). Fires a cancelable `infotable:row-click` on the row;
+  // when nothing calls preventDefault() the click falls back to following the row's link.
   handleRowClick(event) {
     const row = event.currentTarget
-    const url = row.dataset.rowLink
 
-    if (!url) return
+    // Clicks on controls inside the row belong to those controls
+    if (event.target.closest("a, button, summary, details, label, input, select, textarea")) return
 
-    // Don't navigate if clicking on interactive elements
-    const target = event.target
-    const tagName = target.tagName.toLowerCase()
+    const url = row.dataset.rowLink || null
+    const data = { ...row.dataset }
+    delete data.rowLink
+    delete data.action
 
-    // Ignore clicks on links, buttons, inputs, selects, etc.
-    if (tagName === "a" || tagName === "button" || tagName === "input" ||
-        tagName === "select" || tagName === "textarea") {
-      return
-    }
-
-    // Ignore clicks on elements inside buttons or links
-    if (target.closest("a") || target.closest("button")) {
-      return
-    }
+    const click = new CustomEvent("infotable:row-click", {
+      bubbles: true,
+      cancelable: true,
+      detail: { id: row.id || null, url, data, originalEvent: event }
+    })
+    if (!row.dispatchEvent(click) || !url) return
 
-    // Navigate to the URL
-    // Check if meta key (Cmd on Mac, Ctrl on Windows) is pressed for new tab
+    // Cmd on Mac, Ctrl elsewhere: new tab
     if (event.metaKey || event.ctrlKey) {
       window.open(url, "_blank")
     } else {
-      window.location.href = url
+      window.Turbo ? window.Turbo.visit(url) : (window.location.href = url)
     }
   }
 
@@ -966,6 +962,12 @@ export default class extends Controller {
   }
 
   // Apply column pinning (sticky positioning) from localStorage
+  // Small pushpin before a pinned column's label, tilted toward the side it is pinned to
+  addPinIcon(header, side) {
+    const tilt = side === "left" ? "-rotate-45" : "rotate-45"
+    header.insertAdjacentHTML("afterbegin", `<svg data-pin-icon aria-hidden="true" class="inline-block w-3 h-3 mr-1 -mt-0.5 text-indigo-500 dark:text-indigo-400 ${tilt}" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><path d="M12 17v5"/><path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z"/></svg>`)
+  }
+
   applyColumnPinning() {
     const tableName = this.nameValue
     const pinnedKey = `infotable_column_pinned_${tableName}`
@@ -992,7 +994,7 @@ export default class extends Controller {
         return
       }
 
-      const headers = Array.from(table.querySelectorAll("thead th[data-column-name]"))
+      let headers = Array.from(table.querySelectorAll("thead th[data-column-name]"))
 
       // Columns the user never pinned/unpinned fall back to the table's `pinned:` default
       headers.forEach(header => {
@@ -1003,6 +1005,32 @@ export default class extends Controller {
       })
       const rows = table.querySelectorAll("tbody tr")
 
+      // Pinned columns jump to their edge, keeping their relative order, so they sit side by side
+      // with no gap; unpinning restores the base order (stored order, else the server's)
+      const names = headers.map(h => h.dataset.columnName)
+      headers.forEach((h, i) => { if (h.dataset.pinBase === undefined) h.dataset.pinBase = String(i) })
+      const storedOrder = this.loadColumnOrder(tableName)
+      const base = storedOrder && this.isSchemaValid(storedOrder, names)
+        ? storedOrder
+        : [...headers].sort((a, b) => a.dataset.pinBase - b.dataset.pinBase).map(h => h.dataset.columnName)
+      const leftNames = base.filter(n => pinnedData[n] === 'left')
+      const rightNames = base.filter(n => pinnedData[n] === 'right')
+      const pinOrder = [...leftNames, ...base.filter(n => !leftNames.includes(n) && !rightNames.includes(n)), ...rightNames]
+      // Re-appending a node drops its focus, so only touch rows that are out of order
+      const inOrder = els => els.every((el, i) => el.dataset.columnName === pinOrder[i])
+      const headerRow = headers[0]?.parentElement
+      if (headerRow && !inOrder(headers)) {
+        const byName = new Map(headers.map(h => [h.dataset.columnName, h]))
+        pinOrder.forEach(n => byName.has(n) && headerRow.appendChild(byName.get(n)))
+        headers = Array.from(table.querySelectorAll("thead th[data-column-name]"))
+      }
+      rows.forEach(row => {
+        const cells = Array.from(row.querySelectorAll("td[data-column-name]"))
+        if (inOrder(cells)) return
+        const cellByName = new Map(cells.map(c => [c.dataset.columnName, c]))
+        pinOrder.forEach(n => cellByName.has(n) && row.appendChild(cellByName.get(n)))
+      })
+
 
       // Calculate positions for pinned columns
       let leftOffset = 0
@@ -1011,6 +1039,7 @@ export default class extends Controller {
       // First pass: reset all columns
       headers.forEach(header => {
         header.style.position = ''
+        header.style.top = ''
         header.style.left = ''
         header.style.right = ''
         header.style.zIndex = ''
@@ -1024,7 +1053,8 @@ export default class extends Controller {
         header.style.removeProperty('opacity')
         header.style.backgroundClip = ''
         header.style.boxShadow = ''
-        header.classList.remove('infotable-pinned-left', 'infotable-pinned-right', '!bg-gray-50', 'dark:!bg-gray-800', "after:content-['']", "after:absolute", "after:top-0", "after:right-0", "after:bottom-0", "after:w-5", "after:pointer-events-none", "after:bg-gradient-to-r", "after:from-transparent", "after:to-black/[0.04]", "after:z-[1]", "before:content-['']", "before:absolute", "before:top-0", "before:left-0", "before:bottom-0", "before:w-5", "before:pointer-events-none", "before:bg-gradient-to-l", "before:from-transparent", "before:to-black/[0.04]", "before:z-[1]")
+        header.querySelectorAll('[data-pin-icon]').forEach(icon => icon.remove())
+        header.classList.remove('infotable-pinned-left', 'infotable-pinned-right', '!bg-gray-50', 'dark:!bg-gray-800')
       })
 
       rows.forEach(row => {
@@ -1044,7 +1074,7 @@ export default class extends Controller {
           cell.style.removeProperty('opacity')
           cell.style.backgroundClip = ''
           cell.style.boxShadow = ''
-          cell.classList.remove('infotable-pinned-left', 'infotable-pinned-right', '!bg-white', 'dark:!bg-gray-900', "after:content-['']", "after:absolute", "after:top-0", "after:right-0", "after:bottom-0", "after:w-5", "after:pointer-events-none", "after:bg-gradient-to-r", "after:from-transparent", "after:to-black/[0.04]", "after:z-[1]", "before:content-['']", "before:absolute", "before:top-0", "before:left-0", "before:bottom-0", "before:w-5", "before:pointer-events-none", "before:bg-gradient-to-l", "before:from-transparent", "before:to-black/[0.04]", "before:z-[1]")
+          cell.classList.remove('infotable-pinned-left', 'infotable-pinned-right', '!bg-white', 'dark:!bg-gray-900', 'group-hover:!bg-gray-50', 'dark:group-hover:!bg-gray-800')
         })
       })
 
@@ -1063,8 +1093,10 @@ export default class extends Controller {
         }
       })
 
-      // Apply sticky positioning for pinned columns
-      headers.forEach(header => {
+      // Apply sticky positioning for pinned columns (right ones from the outer edge inwards)
+      const rightPinnedHeaders = headers.filter(h => pinnedData[h.dataset.columnName] === 'right')
+      const applyOrder = [...headers.filter(h => pinnedData[h.dataset.columnName] === 'left'), ...rightPinnedHeaders.reverse()]
+      applyOrder.forEach(header => {
         const columnName = header.dataset.columnName
         const pinned = pinnedData[columnName]
 
@@ -1078,27 +1110,17 @@ export default class extends Controller {
             top: 0px !important;
             left: ${leftOffset}px !important;
             z-index: 30 !important;
-            background: #f9fafb !important;
-            background-color: #f9fafb !important;
-            background-image: none !important;
-            background-position: initial !important;
-            background-size: initial !important;
-            background-repeat: initial !important;
-            background-attachment: initial !important;
             opacity: 1 !important;
             background-clip: padding-box !important;
-            box-shadow: 2px 0 4px -2px rgba(0, 0, 0, 0.1) !important;
+            box-shadow: ${columnName === lastLeftPinned ? LEFT_EDGE : 'none'} !important;
             ${existingStyles}
           `.replace(/\s+/g, ' ').trim()
 
           // Set all styles at once via setAttribute (most aggressive method)
           header.setAttribute('style', newStyles)
           header.classList.add('infotable-pinned-left', '!bg-gray-50', 'dark:!bg-gray-800')
+          this.addPinIcon(header, 'left')
 
-          // Mark last left-pinned column
-          if (columnName === lastLeftPinned) {
-            header.classList.add("after:content-['']", "after:absolute", "after:top-0", "after:right-0", "after:bottom-0", "after:w-5", "after:pointer-events-none", "after:bg-gradient-to-r", "after:from-transparent", "after:to-black/[0.04]", "after:z-[1]")
-          }
 
           // Apply to cells in all rows
           rows.forEach(row => {
@@ -1112,25 +1134,15 @@ export default class extends Controller {
                 position: sticky !important;
                 left: ${leftOffset}px !important;
                 z-index: 15 !important;
-                background: #ffffff !important;
-                background-color: #ffffff !important;
-                background-image: none !important;
-                background-position: initial !important;
-                background-size: initial !important;
-                background-repeat: initial !important;
-                background-attachment: initial !important;
                 opacity: 1 !important;
                 background-clip: padding-box !important;
-                box-shadow: 2px 0 4px -2px rgba(0, 0, 0, 0.1) !important;
+                box-shadow: ${columnName === lastLeftPinned ? LEFT_EDGE : 'none'} !important;
                 ${existingStyles}
               `.replace(/\s+/g, ' ').trim()
 
               cell.setAttribute('style', newStyles)
-              cell.classList.add('infotable-pinned-left', '!bg-white', 'dark:!bg-gray-900')
+              cell.classList.add('infotable-pinned-left', '!bg-white', 'dark:!bg-gray-900', 'group-hover:!bg-gray-50', 'dark:group-hover:!bg-gray-800')
 
-              if (columnName === lastLeftPinned) {
-                cell.classList.add("after:content-['']", "after:absolute", "after:top-0", "after:right-0", "after:bottom-0", "after:w-5", "after:pointer-events-none", "after:bg-gradient-to-r", "after:from-transparent", "after:to-black/[0.04]", "after:z-[1]")
-              }
             }
           })
 
@@ -1145,26 +1157,16 @@ export default class extends Controller {
             top: 0px !important;
             right: ${rightOffset}px !important;
             z-index: 30 !important;
-            background: #f9fafb !important;
-            background-color: #f9fafb !important;
-            background-image: none !important;
-            background-position: initial !important;
-            background-size: initial !important;
-            background-repeat: initial !important;
-            background-attachment: initial !important;
             opacity: 1 !important;
             background-clip: padding-box !important;
-            box-shadow: -2px 0 4px -2px rgba(0, 0, 0, 0.1) !important;
+            box-shadow: ${columnName === firstRightPinned ? RIGHT_EDGE : 'none'} !important;
             ${existingStyles}
           `.replace(/\s+/g, ' ').trim()
 
           header.setAttribute('style', newStyles)
           header.classList.add('infotable-pinned-right', '!bg-gray-50', 'dark:!bg-gray-800')
+          this.addPinIcon(header, 'right')
 
-          // Mark first right-pinned column
-          if (columnName === firstRightPinned) {
-            header.classList.add("before:content-['']", "before:absolute", "before:top-0", "before:left-0", "before:bottom-0", "before:w-5", "before:pointer-events-none", "before:bg-gradient-to-l", "before:from-transparent", "before:to-black/[0.04]", "before:z-[1]")
-          }
 
           // Apply to cells in all rows
           rows.forEach(row => {
@@ -1178,25 +1180,15 @@ export default class extends Controller {
                 position: sticky !important;
                 right: ${rightOffset}px !important;
                 z-index: 15 !important;
-                background: #ffffff !important;
-                background-color: #ffffff !important;
-                background-image: none !important;
-                background-position: initial !important;
-                background-size: initial !important;
-                background-repeat: initial !important;
-                background-attachment: initial !important;
                 opacity: 1 !important;
                 background-clip: padding-box !important;
-                box-shadow: -2px 0 4px -2px rgba(0, 0, 0, 0.1) !important;
+                box-shadow: ${columnName === firstRightPinned ? RIGHT_EDGE : 'none'} !important;
                 ${existingStyles}
               `.replace(/\s+/g, ' ').trim()
 
               cell.setAttribute('style', newStyles)
-              cell.classList.add('infotable-pinned-right', '!bg-white', 'dark:!bg-gray-900')
+              cell.classList.add('infotable-pinned-right', '!bg-white', 'dark:!bg-gray-900', 'group-hover:!bg-gray-50', 'dark:group-hover:!bg-gray-800')
 
-              if (columnName === firstRightPinned) {
-                cell.classList.add("before:content-['']", "before:absolute", "before:top-0", "before:left-0", "before:bottom-0", "before:w-5", "before:pointer-events-none", "before:bg-gradient-to-l", "before:from-transparent", "before:to-black/[0.04]", "before:z-[1]")
-              }
             }
           })