innoboxrr-react-datatable 2.3.0 → 3.0.0

package/src/components/DataTableComponent.jsx

@@ -1,119 +1,178 @@
-import { useMemo } from 'react'
-import ActionListComponent from './ActionListComponent.jsx'
-import DatatableIcon from './DatatableIcon.jsx'
-import NavDropdownComponent from './NavDropdownComponent.jsx'
+import IconComponent from 'innoboxrr-react-form-elements/src/IconComponent.jsx'
+import MenuComponent from 'innoboxrr-react-form-elements/src/MenuComponent.jsx'
+import SkeletonComponent from 'innoboxrr-react-form-elements/src/SkeletonComponent.jsx'
 
-const cellValue = (head, row) => (
-    typeof head.parser === 'function' ? head.parser(row[head.id], row) : row[head.id]
-)
+import { DEFAULT_LABELS, ariaSort, cellValue, componentProps, sortIcon } from '../table.js'
+import useTheme from '../useTheme.js'
+
+const SKELETON_ROWS = 5
+
+const headOf = (cell) => cell.column.columnDef.meta?.head ?? {}
 
 /**
- * Gemelo de DataTableComponent.vue: la tabla propiamente dicha.
+ * Gemelo de DataTableComponent.vue: la tabla propiamente dicha, sobre una
+ * instancia de TanStack Table.
+ *
+ * El menú de cada fila espera a conocer los permisos antes de abrirse. Antes
+ * se abría al instante con todo deshabilitado y se habilitaba cuando llegaba
+ * la respuesta, y el usuario veía parpadear lo que no podía hacer.
  */
 export default function DataTableComponent({
+    table,
+    head = [],
+    rows = [],
+    clones = [],
+    loading = false,
+    error = null,
     actions = false,
-    dataTable,
-    extraParams = {},
-    extraQuery = {},
+    selectable = false,
     showTableHeader = true,
     dataTableComponents = {},
+    labels = DEFAULT_LABELS,
+    orderBy = null,
+    sort = {},
+    itemsFor = () => [],
+    prepareRow = async () => {},
     onSortColumn,
-    onActionButtonClicked,
-    onActionClicked,
+    onRetry,
 }) {
-    const head = useMemo(() => dataTable.head ?? [], [dataTable.head])
-
-    /**
-     * Copia aislada de cada fila, para que un parser del modelo no pueda mutar
-     * los datos de la tabla.
-     *
-     * La versión Vue clona con JSON dentro de setData(), es decir una vez por
-     * celda: con 20 filas y 8 columnas son 160 clonados en cada repintado. Un
-     * clon por fila y repintado deja lo mismo en 20 — y, a diferencia de una
-     * caché de módulo, un parser que escriba en su copia no la envenena para
-     * los repintados siguientes.
-     */
-    const body = useMemo(
-        () => (dataTable.body ?? []).map((row) => structuredClone(row)),
-        [dataTable.body]
-    )
+    const theme = useTheme()
+
+    const colspan = head.length + (selectable ? 1 : 0) + (actions ? 1 : 0)
+
+    const allSelected = rows.length > 0 && table.getIsAllPageRowsSelected()
+    const someSelected = table.getIsSomePageRowsSelected() && ! allSelected
+
+    const renderCell = (cell, row) => {
+        const column = headOf(cell)
+        const Component = column.component ? (dataTableComponents[column.component] ?? null) : null
+
+        if (Component) {
+            return (
+                <Component
+                    {...componentProps(cellValue(column, clones[row.index] ?? row.original))}
+                    onCallback={(payload) => (
+                        typeof column.callback === 'function' ? column.callback(payload, row.original) : null
+                    )} />
+            )
+        }
+
+        const value = cellValue(column, clones[row.index] ?? row.original)
+
+        return column.html ? <span dangerouslySetInnerHTML={{ __html: value }} /> : value
+    }
+
+    const renderBody = () => {
+        // Primera carga: la forma de las filas, mientras llegan.
+        if (loading && rows.length === 0) {
+            return Array.from({ length: SKELETON_ROWS }, (_, index) => (
+                <tr key={`skeleton-${index}`} data-skeleton="true">
+                    {selectable ? <td className={theme.tableSelect} /> : null}
+                    {head.map((column) => (
+                        <td key={column.id}><SkeletonComponent /></td>
+                    ))}
+                    {actions ? <td className={theme.tableSelect} /> : null}
+                </tr>
+            ))
+        }
+
+        // Sin filas se dice por qué: no es lo mismo vacío que prohibido.
+        if (rows.length === 0) {
+            return (
+                <tr>
+                    <td colSpan={colspan} className={theme.tableEmpty}>
+                        {error ? (
+                            <>
+                                <span role="alert">{error.message}</span>
+                                {error.retryable ? (
+                                    <button type="button" className={theme.buttonLink} onClick={() => onRetry?.()}>
+                                        {labels.retry}
+                                    </button>
+                                ) : null}
+                            </>
+                        ) : labels.empty}
+                    </td>
+                </tr>
+            )
+        }
+
+        return table.getRowModel().rows.map((row) => (
+            <tr key={row.id} data-selected={row.getIsSelected() ? 'true' : undefined}>
+                {selectable ? (
+                    <td className={theme.tableSelect}>
+                        <input
+                            type="checkbox"
+                            className={theme.checkbox}
+                            aria-label={`${labels.selectRow} ${row.original.id}`}
+                            checked={row.getIsSelected()}
+                            onChange={row.getToggleSelectedHandler()} />
+                    </td>
+                ) : null}
+
+                {row.getVisibleCells().map((cell) => (
+                    <td key={cell.id} className={headOf(cell).numeric ? theme.tableNumeric : undefined}>
+                        {renderCell(cell, row)}
+                    </td>
+                ))}
+
+                {actions ? (
+                    <td className={theme.tableSelect}>
+                        <MenuComponent
+                            items={itemsFor(row.original)}
+                            label={`${labels.rowActions} ${row.original.id}`}
+                            beforeOpen={() => prepareRow(row.original.id)} />
+                    </td>
+                ) : null}
+            </tr>
+        ))
+    }
 
     return (
-        <div className="sm:rounded-lg overflow-x-auto">
-            <table className="min-w-full w-full text-sm text-left text-slate-500 dark:text-slate-400 p-4">
+        <div className={theme.tableContainer}>
+            <table className={[theme.table, theme.tableSticky].filter(Boolean).join(' ')} aria-busy={loading ? 'true' : 'false'}>
                 {showTableHeader ? (
-                    <thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400 rounded-sm">
+                    <thead>
                         <tr>
+                            {selectable ? (
+                                <th scope="col" className={theme.tableSelect}>
+                                    <input
+                                        type="checkbox"
+                                        className={theme.checkbox}
+                                        aria-label={labels.selectAll}
+                                        checked={allSelected}
+                                        // React no tiene prop para esto: es una propiedad del DOM.
+                                        ref={(element) => {
+                                            if (element) {
+                                                element.indeterminate = someSelected
+                                            }
+                                        }}
+                                        disabled={rows.length === 0}
+                                        onChange={(event) => table.toggleAllPageRowsSelected(event.target.checked)} />
+                                </th>
+                            ) : null}
+
                             {head.map((column) => (
                                 <th
                                     key={column.id}
                                     id={`th_${column.id}`}
-                                    className={`px-6 py-3${column.sortable ? ' pointer' : ''}`}
                                     scope="col"
-                                    onClick={() => onSortColumn?.(column)}>
-                                    {column.value}
+                                    className={column.numeric ? theme.tableNumeric : undefined}
+                                    aria-sort={ariaSort(column, orderBy, sort)}>
+                                    {column.sortable === true ? (
+                                        <button type="button" className={theme.tableSort} onClick={() => onSortColumn?.(column)}>
+                                            <span>{column.value}</span>
+                                            <IconComponent name={sortIcon(column, orderBy, sort)} size={12} />
+                                        </button>
+                                    ) : column.value}
                                 </th>
                             ))}
-                            {actions ? <th className="fe-shrink"></th> : null}
+
+                            {actions ? <th scope="col" className={theme.tableSelect} aria-label={labels.actions} /> : null}
                         </tr>
                     </thead>
                 ) : null}
 
-                <tbody>
-                    {(dataTable.body ?? []).map((row, index) => (
-                        <tr
-                            key={row.id}
-                            className="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
-                            {head.map((column) => {
-                                // Las celdas leen de la copia; las acciones,
-                                // de la fila real, porque su identidad es lo
-                                // que el hook usa para sustituirlas al
-                                // resolver las politicas.
-                                const value = cellValue(column, body[index] ?? row)
-                                const Component = column.component ? dataTableComponents[column.component] : null
-
-                                return (
-                                    <td key={column.id} className="px-6 py-4">
-                                        {Component ? (
-                                            <Component
-                                                {...(typeof value === 'object' && value !== null ? value : { value })}
-                                                onCallback={(payload) => (
-                                                    typeof column.callback === 'function'
-                                                        ? column.callback(payload, row)
-                                                        : null
-                                                )} />
-                                        ) : column.html ? (
-                                            <span className="dark:text-white" dangerouslySetInnerHTML={{ __html: value }}></span>
-                                        ) : (
-                                            <span className="dark:text-white">{value}</span>
-                                        )}
-                                    </td>
-                                )
-                            })}
-
-                            {actions ? (
-                                <td className="fe-text-right">
-                                    <button
-                                        type="button"
-                                        aria-label={`Acciones del registro ${row.id}`}
-                                        className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-2 py-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
-                                        popoverTarget={`dropdown_${row.id}`}
-                                        onClick={() => onActionButtonClicked?.(row.actions)}>
-                                        <DatatableIcon icon="actions" />
-                                    </button>
-
-                                    <NavDropdownComponent id={`dropdown_${row.id}`} pos="left">
-                                        <ActionListComponent
-                                            actions={row.actions ?? []}
-                                            extraParams={extraParams}
-                                            extraQuery={extraQuery}
-                                            onActionClicked={onActionClicked} />
-                                    </NavDropdownComponent>
-                                </td>
-                            ) : null}
-                        </tr>
-                    ))}
-                </tbody>
+                <tbody>{renderBody()}</tbody>
             </table>
         </div>
     )

package/src/components/SelectPaginationComponent.jsx

@@ -1,69 +1,67 @@
+import IconComponent from 'innoboxrr-react-form-elements/src/IconComponent.jsx'
+
+import { DEFAULT_LABELS, summary } from '../table.js'
+import useTheme from '../useTheme.js'
+
 /**
- * Gemelo de SelectPaginationComponent.vue.
+ * Gemelo de SelectPaginationComponent.vue: cuántos registros se ven y en qué
+ * página se está.
  *
- * La página vive en el padre (el hook), así que aquí no hay estado local: la
- * versión Vue lo tenía y se le desincronizaba cuando la página cambiaba desde
- * fuera, por ejemplo al reiniciar los filtros.
+ * No guarda la página: la dueña es la tabla, y una copia local se
+ * desincronizaba cuando la página cambiaba desde fuera.
  */
-export default function SelectPaginationComponent({ meta = {}, onPageChange }) {
-    const current = meta.current_page ?? 1
-    const last = meta.last_page ?? 1
+export default function SelectPaginationComponent({ meta = {}, labels = null, onPageChange }) {
+    const theme = useTheme()
+    const text = { ...DEFAULT_LABELS, ...(labels ?? {}) }
+
+    const current = Number(meta?.current_page ?? 1)
+    const last = Number(meta?.last_page ?? 1)
+
+    const go = (value) => {
+        const page = Number(value)
+
+        if (page >= 1 && page <= last && page !== current) {
+            onPageChange?.(page)
+        }
+    }
 
     return (
-        <div className="pagination" fe-grid="">
-            <div className="fe-w-auto">
-                <ul className="fe-pagination fe-justify-start fe-mt-md" fe-mb="">
-                    <li>
-                        {meta.total > 0
-                            ? <span>Showing {meta.from} to {meta.to} of {meta.total} entries</span>
-                            : <span>No results found</span>}
-                    </li>
-                </ul>
-            </div>
+        <div className={theme.tableFooter}>
+            <span>{summary(meta ?? {}, text)}</span>
+
+            {last > 1 ? (
+                <div className={theme.tablePager}>
+                    <button
+                        type="button"
+                        className={theme.iconButton}
+                        aria-label={text.previous}
+                        disabled={current <= 1}
+                        onClick={() => go(current - 1)}>
+                        <IconComponent name="previous" size={14} />
+                    </button>
 
-            <div className="fe-w-expand">
-                <ul className="fe-pagination fe-justify-end fe-mt-md" fe-mb="">
-                    {current > 1 ? (
-                        <li>
-                            <a
-                                href="#"
-                                aria-label="Anterior"
-                                onClick={(event) => {
-                                    event.preventDefault()
-                                    onPageChange?.(current - 1)
-                                }}>
-                                <span fe-page-prev=""></span>
-                            </a>
-                        </li>
-                    ) : null}
+                    <select
+                        className={theme.select}
+                        aria-label={text.page}
+                        value={current}
+                        onChange={(event) => go(event.target.value)}>
+                        {Array.from({ length: last }, (_, index) => index + 1).map((page) => (
+                            <option key={page} value={page}>{page}</option>
+                        ))}
+                    </select>
 
-                    <li>
-                        <select
-                            aria-label="Página"
-                            className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-                            value={current}
-                            onChange={(event) => onPageChange?.(Number(event.target.value))}>
-                            {Array.from({ length: last }, (_, index) => index + 1).map((page) => (
-                                <option key={`page_${page}`} value={page}>{page}</option>
-                            ))}
-                        </select>
-                    </li>
+                    <span>{text.of} {last}</span>
 
-                    {current < last ? (
-                        <li>
-                            <a
-                                href="#"
-                                aria-label="Siguiente"
-                                onClick={(event) => {
-                                    event.preventDefault()
-                                    onPageChange?.(current + 1)
-                                }}>
-                                <span fe-page-next=""></span>
-                            </a>
-                        </li>
-                    ) : null}
-                </ul>
-            </div>
+                    <button
+                        type="button"
+                        className={theme.iconButton}
+                        aria-label={text.next}
+                        disabled={current >= last}
+                        onClick={() => go(current + 1)}>
+                        <IconComponent name="next" size={14} />
+                    </button>
+                </div>
+            ) : null}
         </div>
     )
 }

package/src/table.js

@@ -0,0 +1,251 @@
+/**
+ * Lo que la tabla decide sin depender de Vue ni de React: cómo se traduce el
+ * contrato del modelo a columnas de TanStack Table, qué se pide al servidor,
+ * qué se le dice al usuario cuando algo falla y en qué se convierte cada
+ * acción.
+ *
+ * El archivo es idéntico en innoboxrr-vue-datatable y en
+ * innoboxrr-react-datatable. Es lo que hace que las dos tablas se comporten
+ * igual: si cambia aquí, cambia allí.
+ */
+
+/** Las acciones que borran se pintan en rojo aunque el modelo no lo diga. */
+const DANGER_ACTIONS = ['delete', 'forceDelete']
+
+/** La clave con la que se guardan los permisos de la barra superior. */
+export const CRUD_POLICIES = '__crud__'
+
+export const DEFAULT_LABELS = {
+    actions: 'Acciones',
+    rowActions: 'Acciones del registro',
+    refresh: 'Actualizar',
+    filters: 'Filtros',
+    selectAll: 'Seleccionar todos los de esta página',
+    selectRow: 'Seleccionar el registro',
+    selection: 'Selección',
+    selected: 'seleccionados',
+    clearSelection: 'Quitar selección',
+    empty: 'No hay resultados',
+    retry: 'Reintentar',
+    of: 'de',
+    page: 'Página',
+    previous: 'Página anterior',
+    next: 'Página siguiente',
+    forbidden: 'No tienes permiso para ver estos registros.',
+    offline: 'No se pudo conectar con el servidor.',
+    failed: 'No se pudieron cargar los registros.',
+    policiesFailed: 'No se pudieron comprobar los permisos.',
+    notAllowed: 'No tienes permiso para esta acción.',
+    actionFailed: 'No se pudo completar la acción.',
+}
+
+/**
+ * Se leía de la global `csrf_token`, que la aplicación anfitriona tenía que
+ * definir en window: el componente no se podía montar fuera de ella.
+ */
+export const csrfToken = () => globalThis.csrf_token
+    ?? globalThis.document?.querySelector('meta[name="csrf-token"]')?.getAttribute('content')
+    ?? ''
+
+/**
+ * Sustituye a `_.isEqual` de lodash, que se usaba como global sin declararla
+ * como dependencia.
+ */
+export const isEqual = (a, b) => {
+    if (a === b) {
+        return true
+    }
+
+    if (typeof a !== 'object' || typeof b !== 'object' || a === null || b === null) {
+        return false
+    }
+
+    const keysA = Object.keys(a)
+    const keysB = Object.keys(b)
+
+    return keysA.length === keysB.length && keysA.every((key) => isEqual(a[key], b[key]))
+}
+
+/**
+ * Una foto de un objeto de filtros. Comparar contra el valor anterior no sirve
+ * cuando el anfitrión muta el mismo objeto: el anterior y el nuevo son el mismo.
+ */
+export const snapshot = (value) => JSON.stringify(value ?? {})
+
+/**
+ * Se admite tanto ['name'] como [{ id: 'name' }]: el contrato nunca estuvo
+ * documentado y por ahí circulan las dos formas.
+ */
+export const hiddenColumnIds = (hideColumns = []) => hideColumns
+    .map((column) => (typeof column === 'string' ? column : column?.id))
+    .filter(Boolean)
+
+/**
+ * `dataTableHead()` del modelo, en columnas de TanStack Table. La columna
+ * original viaja en `meta.head`, que es de donde la tabla saca el parser, el
+ * componente y si el valor es HTML.
+ */
+export const columnsFrom = (head = []) => head.map((column) => ({
+    id: column.id,
+    accessorFn: (row) => row?.[column.id],
+    header: column.value,
+    enableSorting: column.sortable === true,
+    meta: { head: column },
+}))
+
+/** Solo un `false` explícito oculta una columna en TanStack Table. */
+export const visibilityFrom = (hideColumns) => Object.fromEntries(
+    hiddenColumnIds(hideColumns).map((id) => [id, false])
+)
+
+/** El orden lo decide el servidor; la tabla solo lo refleja. */
+export const sortingFrom = (orderBy, sort = {}) => (
+    orderBy ? [{ id: orderBy, desc: sort[orderBy] === 'desc' }] : []
+)
+
+/**
+ * La primera pulsación sobre una columna que el modelo no ordena por defecto
+ * la deja ascendente; las siguientes alternan.
+ */
+export const toggledSort = (sort, id) => ({ ...sort, [id]: sort[id] === 'asc' ? 'desc' : 'asc' })
+
+export const ariaSort = (column, orderBy, sort = {}) => {
+    if (column.sortable !== true) {
+        return undefined
+    }
+
+    if (column.id !== orderBy) {
+        return 'none'
+    }
+
+    return sort[column.id] === 'desc' ? 'descending' : 'ascending'
+}
+
+export const sortIcon = (column, orderBy, sort = {}) => {
+    const state = ariaSort(column, orderBy, sort)
+
+    return state === 'ascending' ? 'sortUp' : state === 'descending' ? 'sortDown' : 'sort'
+}
+
+/**
+ * Lo que espera el backend. Con orden interno, el del usuario gana a lo que
+ * traigan los filtros externos; sin él, es al revés.
+ */
+export const requestFilters = ({ formFilters = {}, externalFilters = {}, orderBy, sort = {}, page, internalSort }) => {
+    const params = { _token: csrfToken(), managed: true, except_view_any: true }
+    const order = { orderBy, orderMode: sort[orderBy] }
+
+    return internalSort
+        ? { ...params, ...formFilters, ...externalFilters, ...order, page }
+        : { ...params, ...formFilters, ...order, ...externalFilters, page }
+}
+
+export const requestConfig = (method, url, payload) => ({
+    method,
+    url,
+    data: method === 'post' ? payload : null,
+    params: method === 'get' ? payload : null,
+})
+
+/** El usuario canceló una confirmación: no es un error que haya que contar. */
+export const isCancelled = (error) => ['RequestCancelledError', 'CanceledError'].includes(error?.name)
+
+/**
+ * Qué decirle al usuario. Antes un fallo se reintentaba tres veces en silencio
+ * y un 403 dejaba la tabla vacía con «No results found», como si no hubiera
+ * registros.
+ */
+export const describeError = (error, labels = DEFAULT_LABELS, fallback = labels.failed) => {
+    const status = error?.response?.status ?? null
+
+    if (status === 403) {
+        return { status, message: labels.forbidden, retryable: false }
+    }
+
+    // Un fallo de red no trae respuesta; un error de programa, tampoco, y no
+    // es cosa de la conexión.
+    if (! error?.response) {
+        const offline = Boolean(error?.request) || error?.code === 'ERR_NETWORK' || error?.message === 'Network Error'
+
+        return { status, message: offline ? labels.offline : fallback, retryable: true }
+    }
+
+    const message = error.response.data?.message
+
+    return {
+        status,
+        message: typeof message === 'string' && message !== '' ? message : fallback,
+        retryable: true,
+    }
+}
+
+/**
+ * Marca `policy` en cada acción según lo que respondió el backend. Una acción
+ * que el modelo declara ya permitida se queda así.
+ */
+export const withPolicies = (actions = [], allowed = null) => actions.map((action) => ({
+    ...action,
+    policy: action.policy === true || allowed?.[action.id] === true,
+}))
+
+export const actionKind = (action) => {
+    if (! action.route) {
+        return 'callback'
+    }
+
+    return action.link ? 'link' : 'route'
+}
+
+export const routeTarget = (action, extraParams = {}, extraQuery = {}) => {
+    const to = action.params?.to ?? {}
+
+    return {
+        name: to.name,
+        params: { ...(to.params ?? {}), ...extraParams },
+        query: to.query ? { ...to.query, ...extraQuery } : { ...extraQuery },
+    }
+}
+
+/**
+ * Las acciones del contrato, como elementos de MenuComponent. Una acción sin
+ * permiso se ve deshabilitada y dice por qué: quien no puede tiene que saber
+ * que existe.
+ */
+export const menuItems = (actions = [], labels, run) => actions.map((action, index) => {
+    const allowed = action.policy === true
+
+    return {
+        id: action.id ?? `${action.name}-${index}`,
+        label: action.name,
+        icon: action.icon || undefined,
+        danger: action.danger ?? DANGER_ACTIONS.includes(action.id),
+        disabled: ! allowed,
+        disabledReason: allowed ? undefined : labels.notAllowed,
+        action: () => run(action),
+    }
+})
+
+/**
+ * Copia aislada de una fila, para que un parser del modelo no pueda mutar los
+ * datos de la tabla. Se hace una vez por fila y carga, no una por celda.
+ */
+export const cloneRow = (row) => JSON.parse(JSON.stringify(row ?? {}))
+
+export const cellValue = (column, row) => (
+    typeof column.parser === 'function' ? column.parser(row?.[column.id], row) : row?.[column.id]
+)
+
+/** Un componente de celda recibe el objeto que devuelve el parser, o `{ value }`. */
+export const componentProps = (value) => (
+    typeof value === 'object' && value !== null && ! Array.isArray(value) ? value : { value }
+)
+
+export const summary = (meta = {}, labels = DEFAULT_LABELS) => (
+    meta.total > 0 ? `${meta.from}–${meta.to} ${labels.of} ${meta.total}` : labels.empty
+)
+
+/**
+ * La casilla de un rango con Mayúsculas. El evento de cambio de una casilla
+ * no siempre trae la tecla; el clic, sí.
+ */
+export const isRangeEvent = (event) => Boolean(event?.shiftKey ?? event?.nativeEvent?.shiftKey)