infotable 1.4.0 → 1.5.0

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

@@ -48,6 +48,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 +57,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 +91,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 +176,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 +237,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 +386,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 +489,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 +528,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 +636,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 +649,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 +775,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
 
-    // Don't navigate if clicking on interactive elements
-    const target = event.target
-    const tagName = target.tagName.toLowerCase()
+    // Clicks on controls inside the row belong to those controls
+    if (event.target.closest("a, button, summary, details, label, input, select, textarea")) return
 
-    // Ignore clicks on links, buttons, inputs, selects, etc.
-    if (tagName === "a" || tagName === "button" || tagName === "input" ||
-        tagName === "select" || tagName === "textarea") {
-      return
-    }
+    const url = row.dataset.rowLink || null
+    const data = { ...row.dataset }
+    delete data.rowLink
+    delete data.action
 
-    // 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)
     }
   }
 
@@ -848,11 +839,20 @@ export default class extends Controller {
     const cells = table.querySelectorAll(`th[data-column-name="${escaped}"], td[data-column-name="${escaped}"]`)
 
     cells.forEach(cell => {
-      if (cell.dataset.defaultWidth === undefined) cell.dataset.defaultWidth = cell.style.width
-      const value = width === null ? cell.dataset.defaultWidth : `${width}px`
-      cell.style.width = value
-      cell.style.maxWidth = value
-      cell.style.minWidth = width === null ? "" : value
+      // Remember how the server rendered the cell (action columns have width/min-width but no max-width)
+      if (cell.dataset.defaultWidth === undefined) {
+        cell.dataset.defaultWidth = cell.style.width
+        cell.dataset.defaultMaxWidth = cell.style.maxWidth
+        cell.dataset.defaultMinWidth = cell.style.minWidth
+      }
+
+      if (width === null) {
+        cell.style.width = cell.dataset.defaultWidth
+        cell.style.maxWidth = cell.dataset.defaultMaxWidth
+        cell.style.minWidth = cell.dataset.defaultMinWidth
+      } else {
+        cell.style.width = cell.style.maxWidth = cell.style.minWidth = `${width}px`
+      }
     })
   }
 
@@ -957,6 +957,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}`
@@ -1002,6 +1008,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 = ''
@@ -1015,6 +1022,7 @@ export default class extends Controller {
         header.style.removeProperty('opacity')
         header.style.backgroundClip = ''
         header.style.boxShadow = ''
+        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', "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]")
       })
 
@@ -1035,7 +1043,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', "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]")
         })
       })
 
@@ -1069,13 +1077,6 @@ 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;
@@ -1085,6 +1086,7 @@ export default class extends Controller {
           // 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) {
@@ -1103,13 +1105,6 @@ 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;
@@ -1117,7 +1112,7 @@ export default class extends Controller {
               `.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]")
@@ -1136,13 +1131,6 @@ 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;
@@ -1151,6 +1139,7 @@ export default class extends Controller {
 
           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) {
@@ -1169,13 +1158,6 @@ 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;
@@ -1183,7 +1165,7 @@ export default class extends Controller {
               `.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]")