@hakumi-dev/hakumi-components 0.1.18-pre → 0.1.19-pre

package/app/javascript/hakumi_components/controllers/hakumi/table_controller.js

@@ -1,5 +1,6 @@
 import RegistryController from "../base/registry_controller.js"
 import Sortable from "sortablejs"
+import TableEditable from "./table/editable.js"
 
 export default class extends RegistryController {
 
@@ -45,7 +46,7 @@ export default class extends RegistryController {
     this._filters = new Map()
     this._sorter = null
     this._expandedRowKeys = new Set(this.#expandedRowKeysFromDom())
-    this._shouldCellUpdateHooks = new Map()
+    this._editable = new TableEditable(this)
     this._rowSortable = null
     this._columnSortable = null
     this._pagination = { current: 1, pageSize: this.pageSizeValue || 10, total: 0 }
@@ -98,16 +99,7 @@ export default class extends RegistryController {
 
   disconnect() {
     this.#teardownScrollSync()
-
-    // Clean up sortable instances
-    if (this._rowSortable) {
-      this._rowSortable.destroy()
-      this._rowSortable = null
-    }
-    if (this._columnSortable) {
-      this._columnSortable.destroy()
-      this._columnSortable = null
-    }
+    this.#teardownDragSorting()
 
     super.disconnect()
   }
@@ -325,15 +317,11 @@ export default class extends RegistryController {
   }
 
   registerShouldCellUpdate(name, fn) {
-    if (typeof fn !== "function") {
-      console.warn(`[Hakumi Table] registerShouldCellUpdate: "${name}" must be a function`)
-      return
-    }
-    this._shouldCellUpdateHooks.set(name, fn)
+    this._editable.registerShouldCellUpdate(name, fn)
   }
 
   unregisterShouldCellUpdate(name) {
-    this._shouldCellUpdateHooks.delete(name)
+    this._editable.unregisterShouldCellUpdate(name)
   }
 
   getRowOrder() {
@@ -350,44 +338,12 @@ export default class extends RegistryController {
 
   async loadData(options = {}) {
     if (!this.hasDataUrlValue) return null
-    
-    const page = options.page ?? this._pagination.current
-    const pageSize = options.pageSize ?? this._pagination.pageSize
-    const sorter = options.sorter ?? this._sorter
-    
-    const params = new URLSearchParams()
-    params.set("page", page)
-    params.set("per_page", pageSize)
-    if (sorter?.field) {
-      params.set("sort_field", sorter.field)
-      params.set("sort_order", sorter.order || "ascend")
-    }
-    
-    const fullUrl = `${this.dataUrlValue}?${params.toString()}`
-    
+
     this.element.classList.add("hakumi-table-loading")
-    
+
     try {
-      const response = await fetch(fullUrl, {
-        headers: { "Accept": "application/json" }
-      })
-      
-      if (!response.ok) throw new Error(`HTTP ${response.status}`)
-      
-      const json = await response.json()
-      
-      this._pagination = {
-        current: json.pagination.current,
-        pageSize: json.pagination.pageSize,
-        total: json.pagination.total
-      }
-      
-      if (json.sorter) {
-        this._sorter = json.sorter
-      }
-      
-      this.#renderRows(json.data)
-      this.#updatePagination()
+      const json = await this.#fetchData(this.#buildDataUrl(options))
+      this.#applyDataResponse(json)
       this.#dispatchLoadComplete(json)
       return json
     } catch (error) {
@@ -418,6 +374,52 @@ export default class extends RegistryController {
     return this.loadData()
   }
 
+  #buildDataUrl(options = {}) {
+    const { page, pageSize, sorter } = this.#dataRequestState(options)
+    const params = new URLSearchParams()
+    params.set("page", page)
+    params.set("per_page", pageSize)
+    if (sorter?.field) {
+      params.set("sort_field", sorter.field)
+      params.set("sort_order", sorter.order || "ascend")
+    }
+
+    return `${this.dataUrlValue}?${params.toString()}`
+  }
+
+  #dataRequestState(options = {}) {
+    return {
+      page: options.page ?? this._pagination.current,
+      pageSize: options.pageSize ?? this._pagination.pageSize,
+      sorter: options.sorter ?? this._sorter
+    }
+  }
+
+  async #fetchData(url) {
+    const response = await fetch(url, {
+      headers: { "Accept": "application/json" }
+    })
+
+    if (!response.ok) throw new Error(`HTTP ${response.status}`)
+
+    return response.json()
+  }
+
+  #applyDataResponse(json) {
+    this._pagination = {
+      current: json.pagination.current,
+      pageSize: json.pagination.pageSize,
+      total: json.pagination.total
+    }
+
+    if (json.sorter) {
+      this._sorter = json.sorter
+    }
+
+    this.#renderRows(json.data)
+    this.#updatePagination()
+  }
+
   #renderRows(data) {
     const tbody = this.element.querySelector("tbody")
     if (!tbody) return
@@ -469,29 +471,26 @@ export default class extends RegistryController {
     if (!this.hasDataUrlValue) return
     this.#syncPaginationFromComponent()
     this.#bindPaginationEvents()
-    this.loadData()
+    this.loadData().catch(() => {})
   }
 
   #syncPaginationFromComponent() {
-    const paginationEl = this.element.querySelector(".hakumi-table-pagination .hakumi-pagination")
+    const paginationEl = this.#paginationElement()
     if (!paginationEl) return
     
-    const controller = this.application.getControllerForElementAndIdentifier(paginationEl, "hakumi--pagination")
+    const controller = this.#paginationController()
     if (controller) {
       this._pagination.pageSize = controller.pageSizeValue || this._pagination.pageSize
     }
   }
 
   #getPaginationComponent() {
-    const paginationEl = this.element.querySelector(".hakumi-table-pagination .hakumi-pagination")
+    const paginationEl = this.#paginationElement()
     return paginationEl?.hakumiPagination || paginationEl?.hakumiComponent?.api
   }
 
   #updatePagination() {
-    const paginationEl = this.element.querySelector(".hakumi-table-pagination .hakumi-pagination")
-    if (!paginationEl) return
-    
-    const controller = this.application.getControllerForElementAndIdentifier(paginationEl, "hakumi--pagination")
+    const controller = this.#paginationController()
     if (!controller) return
     
     const { current, pageSize, total } = this._pagination
@@ -503,260 +502,51 @@ export default class extends RegistryController {
   }
 
   #bindPaginationEvents() {
-    const container = this.element.querySelector(".hakumi-table-pagination")
+    const container = this.#paginationContainer()
     if (!container || container._paginationBound) return
     container._paginationBound = true
     
-    container.addEventListener("hakumi--pagination:change", (e) => {
-      e.stopPropagation()
-      const page = e.detail.current
-      if (page !== this._pagination.current) {
-        this._pagination.current = page
-        this.loadData()
-      }
-    })
+    container.addEventListener("hakumi--pagination:change", (e) => this.#handlePaginationChange(e))
     
-    container.addEventListener("hakumi--pagination:sizeChange", (e) => {
-      e.stopPropagation()
-      const size = e.detail.pageSize
-      if (size !== this._pagination.pageSize) {
-        this._pagination.pageSize = size
-        this._pagination.current = 1
-        this.loadData()
-      }
-    })
+    container.addEventListener("hakumi--pagination:sizeChange", (e) => this.#handlePaginationSizeChange(e))
   }
 
-  editCell(event) {
-    const cell = event.currentTarget
-    if (cell.querySelector(".hakumi-table-cell-editor")) return
-
-    const tableConfig = this.editableConfigValue || {}
-    const mode = tableConfig.mode || "cell"
-
-    if (mode === "row") {
-      this.#editRow(cell)
-    } else {
-      this.#editSingleCell(cell)
-    }
+  #paginationContainer() {
+    return this.element.querySelector(".hakumi-table-pagination")
   }
 
-  #editSingleCell(cell) {
-    const { input, editor, originalContent, originalValue, config } = this.#createCellEditor(cell)
-    input.focus()
-
-    const rowElement = cell.closest("tr")
-    const rowKey = rowElement?.dataset.rowKey
-    const columnKey = config.key || cell.dataset.columnKey
-    const dataIndex = config.data_index
-
-    const save = () => {
-      if (!editor.isConnected) return
-
-      const newValue = input.value
-      const detail = { rowKey, columnKey, dataIndex, value: newValue, originalValue }
-
-      if (!this.#shouldUpdateCell(cell, detail)) {
-        if (originalContent) originalContent.style.display = ""
-        editor.remove()
-        return
-      }
-
-      if (originalContent) {
-        originalContent.textContent = newValue
-        originalContent.style.display = ""
-      }
-      cell.dataset.value = newValue
-      editor.remove()
-
-      this.#dispatchEdit(detail)
-    }
-
-    const cancel = () => {
-      if (!editor.isConnected) return
-      if (originalContent) originalContent.style.display = ""
-      editor.remove()
-    }
-
-    input.addEventListener("blur", save)
-
-    input.addEventListener("keydown", (e) => {
-      if (e.key === "Enter") {
-        e.preventDefault()
-        input.blur()
-      } else if (e.key === "Escape") {
-        e.preventDefault()
-        input.removeEventListener("blur", save)
-        cancel()
-      }
-    })
+  #paginationElement() {
+    return this.element.querySelector(".hakumi-table-pagination .hakumi-pagination")
   }
 
-  #editRow(clickedCell) {
-    const row = clickedCell.closest("tr")
-    if (!row || row.classList.contains("hakumi-table-row-editing")) return
-
-    row.classList.add("hakumi-table-row-editing")
-    const rowKey = row.dataset.rowKey
-    const editableCells = row.querySelectorAll("td[data-editable='true']")
-    const editors = []
-
-    editableCells.forEach((cell) => {
-      const { input, originalContent, originalValue, config } = this.#createCellEditor(cell)
-      input.dataset.columnKey = config.key || cell.dataset.columnKey
-      input.dataset.dataIndex = config.data_index
-      input.dataset.originalValue = originalValue
-
-      editors.push({ cell, input, originalContent, originalValue, config })
-    })
-
-    const clickedInput = clickedCell.querySelector(".hakumi-table-cell-input")
-    if (clickedInput) {
-      clickedInput.focus()
-    } else if (editors.length > 0) {
-      editors[0].input.focus()
-    }
-
-    const saveRow = () => {
-      const changes = []
-      let allValid = true
+  #paginationController() {
+    const paginationEl = this.#paginationElement()
+    if (!paginationEl) return null
 
-      editors.forEach(({ cell, input, originalContent, originalValue, config }) => {
-        const newValue = input.value
-        const columnKey = config.key || cell.dataset.columnKey
-        const dataIndex = config.data_index
-        const detail = { rowKey, columnKey, dataIndex, value: newValue, originalValue }
-
-        if (!this.#shouldUpdateCell(cell, detail)) {
-          allValid = false
-          return
-        }
-
-        changes.push({ cell, originalContent, newValue, detail })
-      })
-
-      if (!allValid) {
-        cancelRow()
-        return
-      }
-
-      changes.forEach(({ cell, originalContent, newValue }) => {
-        if (originalContent) {
-          originalContent.textContent = newValue
-          originalContent.style.display = ""
-        }
-        cell.dataset.value = newValue
-        cell.querySelector(".hakumi-table-cell-editor")?.remove()
-      })
-
-      row.classList.remove("hakumi-table-row-editing")
-
-      this.#dispatchRowEdit({
-        rowKey,
-        changes: changes.map(({ detail }) => detail)
-      })
-    }
-
-    const cancelRow = () => {
-      editors.forEach(({ cell, originalContent }) => {
-        if (originalContent) originalContent.style.display = ""
-        cell.querySelector(".hakumi-table-cell-editor")?.remove()
-      })
-      row.classList.remove("hakumi-table-row-editing")
-    }
-
-    editors.forEach(({ input }) => {
-      input.addEventListener("keydown", (e) => {
-        if (e.key === "Enter") {
-          e.preventDefault()
-          saveRow()
-        } else if (e.key === "Escape") {
-          e.preventDefault()
-          cancelRow()
-        }
-      })
-    })
-
-    this.dispatch("rowEditing", {
-      detail: { rowKey, save: saveRow, cancel: cancelRow }
-    })
-  }
-
-  #dispatchEdit(detail) {
-    this.dispatch("edit", { detail })
+    return this.application.getControllerForElementAndIdentifier(paginationEl, "hakumi--pagination")
   }
 
-  #dispatchRowEdit(detail) {
-    const params = this.#changesToParams(detail.changes)
-
-    this.dispatch("rowEdit", {
-      detail: {
-        ...detail,
-        params
-      }
-    })
-  }
-
-  #changesToParams(changes) {
-    const params = {}
-    if (!changes || !Array.isArray(changes)) return params
-    
-    changes.forEach(({ columnKey, dataIndex, value }) => {
-      const key = dataIndex || columnKey
-      if (key) {
-        params[key] = value
-      }
-    })
-    return params
-  }
-
-  #shouldUpdateCell(cell, detail) {
-    const hookName = cell?.dataset.shouldCellUpdate
-    if (!hookName) return true
-
-    const hook = this.#resolveHook(hookName)
-    if (typeof hook !== "function") {
-      console.warn(`[Hakumi Table] shouldCellUpdate hook "${hookName}" is not a function`)
-      return true
-    }
-
-    try {
-      const result = hook(detail)
-      if (result === false) return false
-
-      if (typeof result === "string") {
-        this.dispatch("cellUpdatePrevented", {
-          detail: {
-            ...detail,
-            reason: result
-          }
-        })
-        return false
-      }
-
-      return true
-    } catch (error) {
-      console.error(`[Hakumi Table] shouldCellUpdate hook "${hookName}" failed`, error)
-      return true
+  #handlePaginationChange(event) {
+    event.stopPropagation()
+    const page = event.detail.current
+    if (page !== this._pagination.current) {
+      this._pagination.current = page
+      this.loadData()
     }
   }
 
-  #resolveHook(name) {
-    if (!name) return null
-
-
-    if (this._shouldCellUpdateHooks.has(name)) {
-      return this._shouldCellUpdateHooks.get(name)
-    }
-
-
-    if (typeof window === "undefined") return null
-
-    if (window.HakumiTableShouldCellUpdate && typeof window.HakumiTableShouldCellUpdate[name] === "function") {
-      return window.HakumiTableShouldCellUpdate[name]
+  #handlePaginationSizeChange(event) {
+    event.stopPropagation()
+    const size = event.detail.pageSize
+    if (size !== this._pagination.pageSize) {
+      this._pagination.pageSize = size
+      this._pagination.current = 1
+      this.loadData()
     }
+  }
 
-    return name.split(".").reduce((acc, key) => (acc ? acc[key] : undefined), window)
+  editCell(event) {
+    this._editable.editCell(event)
   }
 
   #exposeApi(api) {
@@ -780,8 +570,9 @@ export default class extends RegistryController {
     })
 
 
-    if (this._sorter && this._sorter.key && this._sorter.order) {
-      url.searchParams.set(this.sortFieldParamValue, this._sorter.key)
+    const sorterKey = this._sorter?.field || this._sorter?.key
+    if (sorterKey && this._sorter.order) {
+      url.searchParams.set(this.sortFieldParamValue, sorterKey)
       url.searchParams.set(this.sortOrderParamValue, this._sorter.order)
     } else {
       url.searchParams.delete(this.sortFieldParamValue)
@@ -808,27 +599,6 @@ export default class extends RegistryController {
     }
   }
 
-  #createCellEditor(cell) {
-    const config = this.#parseJson(cell.dataset.editableConfig, {})
-    const originalContent = cell.querySelector(".hakumi-table-cell-content")
-    const originalValue = cell.dataset.value ?? (originalContent?.textContent?.trim() || "")
-
-    const editor = document.createElement("div")
-    editor.className = "hakumi-table-cell-editor"
-
-    const input = document.createElement("input")
-    input.type = config.input_type || "text"
-    input.value = originalValue
-    input.className = "hakumi-table-cell-input"
-
-    editor.appendChild(input)
-
-    if (originalContent) originalContent.style.display = "none"
-    cell.appendChild(editor)
-
-    return { input, editor, originalContent, originalValue, config }
-  }
-
   #syncSelection() {
     const keys = this._selectedRowKeys
     this.selectionCheckboxTargets.forEach((input) => {
@@ -853,7 +623,7 @@ export default class extends RegistryController {
   }
 
   #expandedRowKeysFromDom() {
-    const expandedRows = this.element.querySelectorAll("tr[data-row-type='expanded'].is-expanded")
+    const expandedRows = this.element.querySelectorAll("tr[data-row-type='expanded'].hakumi-table-row-expanded")
     return Array.from(expandedRows).map((row) => String(row.dataset.rowKey))
   }
 
@@ -967,13 +737,13 @@ export default class extends RegistryController {
       if (!expandedRow || expandedRow.dataset.rowType !== "expanded") return
       const expanded = this._expandedRowKeys.has(key)
       
-      expandedRow.hidden = !expanded
-      expandedRow.classList.toggle("is-expanded", expanded)
+      expandedRow.hidden = row.hidden || !expanded
+      expandedRow.classList.toggle("hakumi-table-row-expanded", expanded)
       
       const button = row.querySelector("[data-hakumi--table-target='expandToggle']")
       if (button) {
         button.setAttribute("aria-expanded", expanded)
-        button.classList.toggle("is-expanded", expanded)
+        button.classList.toggle("hakumi-table-expand-button-expanded", expanded)
       }
     })
   }
@@ -1007,19 +777,8 @@ export default class extends RegistryController {
   #syncScrollState() {
     if (!this.hasScrollContainerTarget) return
 
-    const el = this.scrollContainerTarget
-    const maxScrollLeft = el.scrollWidth - el.clientWidth
-    const hasLeft = el.scrollLeft > 0
-    const hasRight = el.scrollLeft < maxScrollLeft - 1
-
-    this.element.classList.toggle("hakumi-table-scroll-left", hasLeft)
-    this.element.classList.toggle("hakumi-table-scroll-right", hasRight)
-    
-    if (this.hasScrollBarTarget && !this._syncingFromBar) {
-      this._syncingFromContainer = true
-      this.scrollBarTarget.scrollLeft = el.scrollLeft
-      this._syncingFromContainer = false
-    }
+    this.#syncScrollEdgeClasses()
+    this.#syncMirrorScrollBarFromContainer()
   }
   
   #syncFromScrollBar() {
@@ -1027,6 +786,7 @@ export default class extends RegistryController {
     
     this._syncingFromBar = true
     this.scrollContainerTarget.scrollLeft = this.scrollBarTarget.scrollLeft
+    this.#syncScrollState()
     this._syncingFromBar = false
   }
   
@@ -1037,6 +797,24 @@ export default class extends RegistryController {
     this.scrollBarThumbTarget.style.width = `${el.scrollWidth}px`
   }
 
+  #syncScrollEdgeClasses() {
+    const el = this.scrollContainerTarget
+    const maxScrollLeft = el.scrollWidth - el.clientWidth
+    const hasLeft = el.scrollLeft > 0
+    const hasRight = el.scrollLeft < maxScrollLeft - 1
+
+    this.element.classList.toggle("hakumi-table-scroll-left", hasLeft)
+    this.element.classList.toggle("hakumi-table-scroll-right", hasRight)
+  }
+
+  #syncMirrorScrollBarFromContainer() {
+    if (!this.hasScrollBarTarget || this._syncingFromBar) return
+
+    this._syncingFromContainer = true
+    this.scrollBarTarget.scrollLeft = this.scrollContainerTarget.scrollLeft
+    this._syncingFromContainer = false
+  }
+
   #nextSortOrder(currentOrder) {
     if (!currentOrder) return this._sortDirections[0]
     const index = this._sortDirections.indexOf(currentOrder)
@@ -1077,62 +855,84 @@ export default class extends RegistryController {
     }
   }
 
+  #teardownDragSorting() {
+    if (this._rowSortable) {
+      this._rowSortable.destroy()
+      this._rowSortable = null
+    }
+    if (this._columnSortable) {
+      this._columnSortable.destroy()
+      this._columnSortable = null
+    }
+  }
+
   #setupRowDrag() {
     const tbody = this.element.querySelector("tbody")
     if (!tbody) return
 
+    this._rowSortable = Sortable.create(tbody, this.#rowDragOptions())
+  }
+
+  #rowDragOptions() {
     const options = {
       animation: 150,
       ghostClass: "hakumi-table-row-ghost",
       chosenClass: "hakumi-table-row-chosen",
       dragClass: "hakumi-table-row-drag",
       filter: ".hakumi-table-expanded-row",
-      onEnd: (evt) => {
-        if (evt.oldIndex === evt.newIndex) return
-        
-        const row = evt.item
-        const rowKey = row.dataset.rowKey
-        
-
-        const expandedRow = row.nextElementSibling
-        if (expandedRow?.dataset.rowType === "expanded") {
-          row.parentNode.insertBefore(expandedRow, row.nextSibling)
-        }
-        
-        this.#dispatchRowReorder(evt.oldIndex, evt.newIndex, rowKey)
-      }
+      onEnd: (evt) => this.#handleRowDragEnd(evt)
     }
 
-
     if (this.rowDragHandleValue) {
       options.handle = ".hakumi-table-drag-handle"
     }
 
-    this._rowSortable = Sortable.create(tbody, options)
+    return options
+  }
+
+  #handleRowDragEnd(evt) {
+    if (evt.oldIndex === evt.newIndex) return
+
+    const row = evt.item
+    const rowKey = row.dataset.rowKey
+
+    this.#moveExpandedRowAfterDataRow(row)
+    this.#dispatchRowReorder(evt.oldIndex, evt.newIndex, rowKey)
+  }
+
+  #moveExpandedRowAfterDataRow(row) {
+    const expandedRow = row.nextElementSibling
+    if (expandedRow?.dataset.rowType === "expanded") {
+      row.parentNode.insertBefore(expandedRow, row.nextSibling)
+    }
   }
 
   #setupColumnDrag() {
     const headerRow = this.element.querySelector(".hakumi-table-header-row")
     if (!headerRow) return
 
-    this._columnSortable = Sortable.create(headerRow, {
+    this._columnSortable = Sortable.create(headerRow, this.#columnDragOptions())
+  }
+
+  #columnDragOptions() {
+    return {
       animation: 150,
       ghostClass: "hakumi-table-column-ghost",
       chosenClass: "hakumi-table-column-chosen",
       dragClass: "hakumi-table-column-drag",
       filter: ".hakumi-table-selection-column, .hakumi-table-expand-column",
-      onEnd: (evt) => {
-        if (evt.oldIndex === evt.newIndex) return
-        
-        const th = evt.item
-        const columnKey = th.dataset.columnKey
-        
-
-        this.#reorderBodyColumns(evt.oldIndex, evt.newIndex)
-        
-        this.#dispatchColumnReorder(evt.oldIndex, evt.newIndex, columnKey)
-      }
-    })
+      onEnd: (evt) => this.#handleColumnDragEnd(evt)
+    }
+  }
+
+  #handleColumnDragEnd(evt) {
+    if (evt.oldIndex === evt.newIndex) return
+
+    const th = evt.item
+    const columnKey = th.dataset.columnKey
+
+    this.#reorderBodyColumns(evt.oldIndex, evt.newIndex)
+    this.#dispatchColumnReorder(evt.oldIndex, evt.newIndex, columnKey)
   }
 
   #reorderBodyColumns(oldIndex, newIndex) {