@asteby/metacore-runtime-react 49.4.0 → 49.6.0

package/src/dynamic-table.tsx

@@ -10,7 +10,7 @@
 //   * `@/components/dynamic/dynamic-columns` → host-injected via the
 //     `getDynamicColumns` prop (hosts retain ownership because the rendered
 //     column cells are tightly coupled to their design system).
-import { useEffect, useState, useMemo, useCallback, useRef, type MouseEvent } from 'react'
+import { useEffect, useState, useMemo, useCallback, useRef, type MouseEvent, type ReactNode } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useTimeZone, useCurrency } from './org-runtime-context'
 import { format } from 'date-fns'
@@ -264,6 +264,36 @@ export interface DynamicTableProps {
      * render every row. A positive number overrides the threshold.
      */
     virtualizeRows?: boolean | number
+    /**
+     * Host-provided actions rendered in the floating bar that appears while
+     * rows are selected, next to the built-in "Eliminar". Pass a node, or a
+     * function that receives the current selection:
+     *   - `selectedRows`: the selected row objects (current page only);
+     *   - `selectedIds`: their `id`s;
+     *   - `clearSelection()`: unselect everything (call after a successful action);
+     *   - `refresh()`: reload the list.
+     * The selection is cleared whenever the page, page size, sort, search or
+     * column filters change (classic pagination), so a bulk action can never
+     * hit rows the user no longer sees. The host owns the write call and its
+     * authorization — the table only supplies the selection.
+     */
+    extraBulkActions?: ReactNode | ((ctx: DynamicTableBulkContext) => ReactNode)
+    /** Hide the built-in bulk "Eliminar" (e.g. a model whose rows must not be deleted in batch). */
+    hideBulkDelete?: boolean
+    /**
+     * First-use content shown instead of "No se encontraron resultados" when the
+     * list loaded fine, is empty, and no search/filter is active. Never shown
+     * after a load error (a retry is offered) or a 403.
+     */
+    emptyState?: ReactNode
+}
+
+/** Context handed to `DynamicTableProps.extraBulkActions` when it is a function. */
+export interface DynamicTableBulkContext {
+    selectedRows: any[]
+    selectedIds: Array<string | number>
+    clearSelection: () => void
+    refresh: () => void
 }
 
 /** True when an api-client error is an HTTP 403 (axios-style or fetch-style). */
@@ -292,6 +322,9 @@ export function DynamicTable({
     pagination: paginationMode,
     infiniteScroll: infiniteScrollProp = false,
     virtualizeRows,
+    extraBulkActions,
+    hideBulkDelete,
+    emptyState,
 }: DynamicTableProps) {
     // The org's timezone/currency: an explicit prop wins, else the app-wide
     // OrgRuntimeProvider (without it, money fell back to USD).
@@ -347,6 +380,9 @@ export function DynamicTable({
     // model. Rendered as "no permission" instead of masquerading as an empty
     // list. Purely display state — never a fetch dependency (no refetch loop).
     const [forbidden, setForbidden] = useState(false)
+    // A list request that failed for a reason other than 403 (500, network,
+    // `success: false`). Shown with a retry instead of a misleading "no results".
+    const [loadError, setLoadError] = useState(false)
     const infPageRef = useRef(1)
     const [optionsMap, setOptionsMap] = useState<Map<string, any[]>>(new Map())
 
@@ -897,6 +933,7 @@ export function DynamicTable({
             if (relationInclude) params.include = relationInclude
             const res = await api.get(endpoint || `/data/${model}`, { params }) as { data: ApiResponse<any[]> }
             setForbidden(false)
+            setLoadError(!res.data.success)
             if (res.data.success) {
                 const rows = res.data.data || []
                 setData(rows)
@@ -914,10 +951,12 @@ export function DynamicTable({
         } catch (error) {
             if (isForbiddenError(error)) {
                 setForbidden(true)
+                setLoadError(false)
                 setData([])
                 setRowCount(0)
             } else {
                 console.error('Error al cargar los datos', error)
+                setLoadError(true)
             }
         } finally {
             setLoadingData(false)
@@ -968,6 +1007,7 @@ export function DynamicTable({
                     params,
                 })) as { data: ApiResponse<any[]> }
                 setForbidden(false)
+                setLoadError(!res.data.success)
                 if (res.data.success) {
                     const rows = res.data.data || []
                     setData((prev) => (append ? dedupeById(prev, rows) : rows))
@@ -989,6 +1029,7 @@ export function DynamicTable({
             } catch (error) {
                 if (isForbiddenError(error)) {
                     setForbidden(true)
+                    setLoadError(false)
                     if (!append) {
                         setData([])
                         setRowCount(0)
@@ -996,6 +1037,7 @@ export function DynamicTable({
                     setInfExhausted(true)
                 } else {
                     console.error('Error al cargar los datos', error)
+                    setLoadError(true)
                 }
             } finally {
                 if (append) setLoadingMore(false)
@@ -1372,6 +1414,10 @@ export function DynamicTable({
         manualSorting: true,
         manualFiltering: true,
         enableRowSelection: true,
+        // Key the selection by record id, not by position in the page: a bulk
+        // action must act on the rows the user ticked, never on whatever row
+        // lands at the same index after the data changes.
+        getRowId: (row: any, index: number) => (row?.id != null ? String(row.id) : String(index)),
         onRowSelectionChange: setRowSelection,
         onSortingChange: setSorting,
         onColumnVisibilityChange: setColumnVisibility,
@@ -1387,6 +1433,21 @@ export function DynamicTable({
     })
 
     const tableRows = table.getRowModel().rows
+    const bulkSelectedRows = table.getFilteredSelectedRowModel().rows.map((r) => r.original as any)
+
+    // Classic pagination swaps the visible rows on every page / sort / search /
+    // filter change; drop the selection so it never refers to rows that are no
+    // longer on screen. Infinite mode accumulates rows (selection is id-keyed,
+    // so it stays valid) and is left alone.
+    const selectionScope = infiniteScroll ? '' : JSON.stringify([pagination.pageIndex, pagination.pageSize, sorting, columnFilters, globalFilter])
+    const prevSelectionScope = useRef(selectionScope)
+    useEffect(() => {
+        if (prevSelectionScope.current !== selectionScope) {
+            prevSelectionScope.current = selectionScope
+            setRowSelection({})
+        }
+    }, [selectionScope])
+
     const virtualizeThreshold = resolveVirtualizeThreshold(virtualizeRows)
     const shouldVirtualize =
         virtualizeThreshold !== false && tableRows.length >= virtualizeThreshold
@@ -1624,6 +1685,14 @@ export function DynamicTable({
                                                         <h3 className="text-lg font-semibold text-foreground" role="alert">{t('dynamic.forbidden_title', { defaultValue: 'Sin permiso para ver este módulo' })}</h3>
                                                         <p className="text-sm text-muted-foreground">{t('dynamic.forbidden_hint', { defaultValue: 'Tu rol no tiene acceso de lectura a estos datos. Pide acceso a un administrador.' })}</p>
                                                     </>
+                                                ) : loadError ? (
+                                                    <>
+                                                        <h3 className="text-lg font-semibold text-foreground" role="alert">{t('dynamic.load_error_title', { defaultValue: 'No se pudieron cargar los datos' })}</h3>
+                                                        <p className="text-sm text-muted-foreground">{t('dynamic.load_error_hint', { defaultValue: 'Ocurrió un error al consultar la lista. Inténtalo de nuevo.' })}</p>
+                                                        <Button variant="outline" size="sm" className="mt-2" onClick={handleRefresh}>{t('dynamic.retry', { defaultValue: 'Reintentar' })}</Button>
+                                                    </>
+                                                ) : emptyState && !hasActiveFilters ? (
+                                                    emptyState
                                                 ) : (
                                                     <>
                                                         <h3 className="text-lg font-semibold text-foreground">No se encontraron resultados</h3>
@@ -1823,6 +1892,14 @@ export function DynamicTable({
                                     <h3 className='text-base font-semibold text-foreground' role='alert'>{t('dynamic.forbidden_title', { defaultValue: 'Sin permiso para ver este módulo' })}</h3>
                                     <p className='text-sm text-muted-foreground'>{t('dynamic.forbidden_hint', { defaultValue: 'Tu rol no tiene acceso de lectura a estos datos. Pide acceso a un administrador.' })}</p>
                                 </>
+                            ) : loadError ? (
+                                <>
+                                    <h3 className='text-base font-semibold text-foreground' role='alert'>{t('dynamic.load_error_title', { defaultValue: 'No se pudieron cargar los datos' })}</h3>
+                                    <p className='text-sm text-muted-foreground'>{t('dynamic.load_error_hint', { defaultValue: 'Ocurrió un error al consultar la lista. Inténtalo de nuevo.' })}</p>
+                                    <Button variant='outline' size='sm' onClick={handleRefresh}>{t('dynamic.retry', { defaultValue: 'Reintentar' })}</Button>
+                                </>
+                            ) : emptyState && !hasActiveFilters ? (
+                                emptyState
                             ) : (
                                 <>
                                     <h3 className='text-base font-semibold text-foreground'>No se encontraron resultados</h3>
@@ -1896,9 +1973,19 @@ export function DynamicTable({
                 <ImportDialog open={importOpen} onOpenChange={setImportOpen} model={model} metadata={metadata} onImported={handleRefresh} />
             )}
             <DataTableBulkActions table={table} entityName="registro">
-                <Button variant="destructive" size="sm" className="h-8" onClick={() => setShowBulkDeleteConfirm(true)}>
-                    <Trash2 className="h-4 w-4 mr-1.5" /> Eliminar
-                </Button>
+                {typeof extraBulkActions === 'function'
+                    ? extraBulkActions({
+                        selectedRows: bulkSelectedRows,
+                        selectedIds: bulkSelectedRows.map((r) => r.id).filter((id) => id != null),
+                        clearSelection: () => table.resetRowSelection(),
+                        refresh: handleRefresh,
+                    })
+                    : extraBulkActions}
+                {!hideBulkDelete && (
+                    <Button variant="destructive" size="sm" className="h-8" onClick={() => setShowBulkDeleteConfirm(true)}>
+                        <Trash2 className="h-4 w-4 mr-1.5" /> Eliminar
+                    </Button>
+                )}
             </DataTableBulkActions>
         </OptionsContext.Provider>
         </RowActionsModelContext.Provider>

package/src/entity-select.tsx

@@ -1,5 +1,9 @@
 // EntitySelect — the shared, permission-aware single-select for a related model.
 //
+// Now a thin configuration of <RecordPicker> (record-picker.tsx); prefer it for
+// new screens. Kept with its exact props for consumers (POS, collections and
+// other federated addons).
+//
 // A searchable async combobox over a kernel model's records, plus the two
 // affordances every "pick a related record" control should have, exactly like
 // the dynamic create modal's relation fields (Categoría/Marca) do:
@@ -14,23 +18,11 @@
 // `/metadata/modal/:model` schema via <CreateRecordDialog>, so no per-model form
 // code is needed. This lives in the SDK so POS, purchases and any future addon
 // share ONE implementation instead of each re-porting a bespoke picker.
-import { useCallback, useEffect, useState } from 'react'
-import { Search, X, type LucideIcon } from 'lucide-react'
-import {
-    Button,
-    Command,
-    CommandGroup,
-    CommandInput,
-    CommandItem,
-    CommandList,
-    Popover,
-    PopoverContent,
-    PopoverTrigger,
-} from '@asteby/metacore-ui'
-import { CreateRecordDialog } from './dialogs/create-record-dialog'
-import { JOINED_TRIGGER_CLASS, PickerCreateItem, RecordPickerAction, hasRecordPickerAction } from './record-picker-actions'
+import type { LucideIcon } from 'lucide-react'
+import { RecordPicker, useLatestSearch } from './record-picker'
+import { recordLabel } from './record-picker-actions'
+import { useRecordPickerDialog } from './record-picker-dialog'
 import { useCan } from './permissions-context'
-import { useApi } from './api-context'
 
 /** One searchable option: `value` is the id, `label` the display text. */
 export interface EntitySelectOption {
@@ -96,13 +88,16 @@ function capabilityNamespace(model: string): string {
     return model.replace(/([a-z0-9])([A-Z])/g, '$1_$2').toLowerCase()
 }
 
+/**
+ * @deprecated Thin wrapper over {@link RecordPicker}; prefer it for new code.
+ */
 export function EntitySelect({
     model,
     value,
     label,
     onSelect,
     fetcher,
-    icon: Icon,
+    icon,
     placeholder = 'Seleccionar…',
     searchPlaceholder = 'Buscar…',
     emptyText = 'Sin resultados',
@@ -116,197 +111,53 @@ export function EntitySelect({
     lockedCreateFields,
 }: EntitySelectProps) {
     const can = useCan()
-    const api = useApi()
-
     const ns = capabilityNamespace(model)
     const mayCreate = canCreate ?? can(`${ns}.create`)
     const mayEdit = canEdit ?? can(`${ns}.update`)
-    const base = endpoint ?? `/data/${model}/me`
-
-    const [open, setOpen] = useState(false)
-    const [dialogOpen, setDialogOpen] = useState(false)
-    const [dialogRecordId, setDialogRecordId] = useState<string | undefined>(undefined)
-    const [searchTerm, setSearchTerm] = useState('')
-    const [results, setResults] = useState<EntitySelectOption[]>([])
-    const [isLoading, setIsLoading] = useState(false)
-
-    const minChars = preload ? 0 : 2
 
-    const run = useCallback(
-        async (q: string, signal: AbortSignal) => {
-            if (q.length < minChars) {
-                setResults([])
-                return
-            }
-            setIsLoading(true)
-            try {
-                const rows = await fetcher(q, signal)
-                if (!signal.aborted) setResults(rows)
-            } catch {
-                if (!signal.aborted) setResults([])
-            } finally {
-                if (!signal.aborted) setIsLoading(false)
-            }
+    // Read the {id,label} off a saved record and select it (create) or
+    // refresh its label (edit).
+    const { openCreate, openEdit, dialog } = useRecordPickerDialog({
+        model,
+        endpoint,
+        prefillField: labelField,
+        createDefaults,
+        lockedCreateFields,
+        onSaved: (rec) => {
+            const id = rec.id != null ? String(rec.id) : value ?? ''
+            onSelect(id, recordLabel(rec, labelField) ?? label ?? id)
         },
-        [fetcher, minChars],
-    )
-
-    useEffect(() => {
-        if (!open) return
-        const controller = new AbortController()
-        const timeout = setTimeout(() => run(searchTerm, controller.signal), 250)
-        return () => {
-            clearTimeout(timeout)
-            controller.abort()
-        }
-    }, [searchTerm, run, open])
-
-    const pick = (row: EntitySelectOption) => {
-        onSelect(row.value, row.label)
-        setOpen(false)
-        setSearchTerm('')
-    }
-
-    const clear = (e: React.MouseEvent) => {
-        e.stopPropagation()
-        onSelect(null, null)
-    }
-
-    const openCreate = () => {
-        setOpen(false)
-        setDialogRecordId(undefined)
-        setDialogOpen(true)
-    }
-    const openEdit = () => {
-        if (!value) return
-        setOpen(false)
-        setDialogRecordId(value)
-        setDialogOpen(true)
-    }
-
-    // Read the {id,label} off a saved record and select it. The transport
-    // matches the standard org-scoped CRUD the dynamic modal uses, so create/edit
-    // stay consistent with the rest of the app.
-    const selectSaved = (rec: Record<string, unknown> | undefined | null) => {
-        if (!rec) return
-        const id = rec.id != null ? String(rec.id) : value ?? ''
-        const lbl =
-            (rec[labelField] != null && String(rec[labelField])) ||
-            (rec.name != null && String(rec.name)) ||
-            label ||
-            id
-        onSelect(id, lbl)
-    }
-
-    const onCreate = mayCreate ? openCreate : undefined
-    const onEdit = mayEdit ? openEdit : undefined
-    const joined = hasRecordPickerAction(!!value, onCreate, onEdit)
+    })
+    const search = useLatestSearch(fetcher)
 
     return (
-        <div className="flex items-center" data-slot="entity-select">
-            <Popover open={open} onOpenChange={disabled ? undefined : setOpen}>
-                <PopoverTrigger asChild>
-                    <Button
-                        variant="outline"
-                        disabled={disabled}
-                        className={'w-full min-w-0 flex-1 justify-start gap-2 font-normal' + (joined ? ` ${JOINED_TRIGGER_CLASS}` : '')}
-                    >
-                        {Icon && <Icon className="text-muted-foreground size-4 shrink-0" />}
-                        <span className="flex-1 truncate text-left">{label ?? placeholder}</span>
-                        {value && (
-                            <span
-                                role="button"
-                                tabIndex={0}
-                                onClick={clear}
-                                onKeyDown={(e) => {
-                                    if (e.key === 'Enter' || e.key === ' ')
-                                        clear(e as unknown as React.MouseEvent)
-                                }}
-                                className="hover:bg-accent ml-auto shrink-0 rounded-sm p-0.5"
-                            >
-                                <X className="size-3.5" />
-                            </span>
-                        )}
-                    </Button>
-                </PopoverTrigger>
-                <PopoverContent
-                    className="p-0"
-                    align="start"
-                    collisionPadding={8}
-                    style={{ width: 'max(var(--radix-popover-trigger-width), 14rem)', maxWidth: 'calc(100vw - 1rem)' }}
-                >
-                    <Command shouldFilter={false}>
-                        <CommandInput
-                            placeholder={searchPlaceholder}
-                            value={searchTerm}
-                            onValueChange={setSearchTerm}
-                        />
-                        <CommandList>
-                            {isLoading && (
-                                <div className="text-muted-foreground py-4 text-center text-sm">
-                                    Buscando…
-                                </div>
-                            )}
-                            {!isLoading &&
-                                searchTerm.length >= minChars &&
-                                results.length === 0 && <div className="text-muted-foreground py-6 text-center text-sm">{emptyText}</div>}
-                            {!isLoading && results.length > 0 && (
-                                <CommandGroup className="max-h-64 overflow-auto">
-                                    {results.map((row) => (
-                                        <CommandItem
-                                            key={row.value}
-                                            value={row.value}
-                                            onSelect={() => pick(row)}
-                                            className="flex flex-col items-start gap-0.5"
-                                        >
-                                            <span className="text-sm font-medium">{row.label}</span>
-                                            {row.description && (
-                                                <span className="text-muted-foreground text-xs">
-                                                    {row.description}
-                                                </span>
-                                            )}
-                                        </CommandItem>
-                                    ))}
-                                </CommandGroup>
-                            )}
-                            {!isLoading && !preload && searchTerm.length < minChars && (
-                                <div className="text-muted-foreground flex flex-col items-center gap-1 py-6">
-                                    <Search className="size-5" />
-                                    <span className="text-xs">Escribe al menos 2 caracteres</span>
-                                </div>
-                            )}
-                            {onCreate && !isLoading && <PickerCreateItem label={model} onSelect={openCreate} />}
-                        </CommandList>
-                    </Command>
-                </PopoverContent>
-            </Popover>
-
-            {/* Selected → edit (pencil); empty → create (+). Each gated by perms. */}
-            <RecordPickerAction hasValue={!!value} label={model} onCreate={onCreate} onEdit={onEdit} disabled={disabled} />
-
-            {dialogOpen && (
-                <CreateRecordDialog
-                    modelKey={model}
-                    open={dialogOpen}
-                    onOpenChange={setDialogOpen}
-                    recordId={dialogRecordId}
-                    endpoint={base}
-                    defaults={dialogRecordId ? undefined : createDefaults}
-                    lockedFields={dialogRecordId ? undefined : lockedCreateFields}
-                    onCreate={async (data) => {
-                        const res = await api.post(base, data)
-                        const rec = (res.data?.data ?? res.data) as Record<string, unknown>
-                        selectSaved(rec)
-                        return rec.id != null ? { id: String(rec.id) } : undefined
-                    }}
-                    onUpdate={async (id, data) => {
-                        const res = await api.put(`${base}/${id}`, data)
-                        const rec = (res.data?.data ?? res.data) as Record<string, unknown>
-                        selectSaved({ id, ...rec })
-                        return { id: String(id) }
-                    }}
-                />
-            )}
-        </div>
+        <>
+            <RecordPicker<EntitySelectOption>
+                slot="entity-select"
+                search={search}
+                minChars={preload ? 0 : 2}
+                minCharsText="Escribe al menos 2 caracteres"
+                getKey={(o) => o.value}
+                getLabel={(o) => o.label}
+                getDescription={(o) => o.description}
+                showCheck={false}
+                value={value}
+                selected={value ? { value, label: label ?? value } : null}
+                onSelect={(o) => onSelect(o.value, o.label)}
+                onClear={() => onSelect(null, null)}
+                icon={icon}
+                placeholder={placeholder}
+                renderValue={(sel) => (
+                    <span className={'min-w-0 flex-1 truncate' + (sel ? '' : ' text-muted-foreground')}>{label ?? placeholder}</span>
+                )}
+                searchPlaceholder={searchPlaceholder}
+                emptyText={emptyText}
+                entityLabel={model}
+                onCreate={mayCreate ? (q) => openCreate(q) : undefined}
+                onEdit={mayEdit && value ? () => openEdit(value) : undefined}
+                disabled={disabled}
+            />
+            {dialog}
+        </>
     )
 }

package/src/index.ts

@@ -475,8 +475,33 @@ export type { DynamicRecordDialogProps, FieldDef, FieldOption, GetImageUrl } fro
 export { CreateRecordDialog } from './dialogs/create-record-dialog'
 export { EntitySelect } from './entity-select'
 export type { EntitySelectProps, EntitySelectOption } from './entity-select'
-export { RecordPickerAction, PickerCreateItem, JOINED_TRIGGER_CLASS, hasRecordPickerAction } from './record-picker-actions'
-export type { RecordPickerActionProps } from './record-picker-actions'
+// RecordPicker — the ONE "pick a related record" control (search, single /
+// multiple, create / edit, rich options, field / cell, portaled list). Every
+// picker above (DynamicSelectField, EntitySelect, Customer/Product/Vehicle
+// pickers, LineProductCell) is a thin configuration of it.
+export { RecordPicker, useRecordSearch, useLatestSearch, RECORD_PICKER_Z_INDEX } from './record-picker'
+export type {
+    RecordPickerProps,
+    RecordPickerItemState,
+    RecordPickerVariant,
+    RecordPickerTrigger,
+    UseRecordSearchOptions,
+    UseRecordSearchResult,
+} from './record-picker'
+export {
+    RecordPickerAction,
+    PickerCreateItem,
+    JOINED_TRIGGER_CLASS,
+    hasRecordPickerAction,
+    requestRecordCreate,
+    requestRecordEdit,
+    recordLabel,
+    withSearchPrefill,
+} from './record-picker-actions'
+export type { RecordPickerActionProps, RecordCreateRequest, RecordEditRequest } from './record-picker-actions'
+export { useRecordPickerDialog } from './record-picker-dialog'
+export type { UseRecordPickerDialogOptions, UseRecordPickerDialogResult } from './record-picker-dialog'
+export { OptionLead, OptionThumb } from './record-picker-option'
 export { ViewRecordDialog } from './dialogs/view-record-dialog'
 export type {
     ModelKey,

package/src/query-batch.ts

@@ -170,7 +170,19 @@ export function rememberInRows(
     }
 }
 
+/**
+ * Clients whose backend has no `/q` (it answered 404/405). They get plain GETs
+ * for the rest of the session instead of one failed POST per read.
+ */
+let unsupportedClients = new WeakSet<object>()
+
+function errorStatus(err: unknown): number | undefined {
+    const e = err as { status?: number; response?: { status?: number } } | null
+    return e?.status ?? e?.response?.status
+}
+
 export function resetQueryBatchCache(): void {
+    unsupportedClients = new WeakSet<object>()
     partCache.clear()
     entityCache.clear()
     waiters = []
@@ -320,6 +332,11 @@ async function flushQueryBatch() {
             waiter.resolve(merged)
         }
     } catch (err) {
+        // The host has no /q route: remember it so later reads skip the POST.
+        // Every waiter of this window still rejects and batchGet answers it
+        // with the plain GET, so no read is lost.
+        const status = errorStatus(err)
+        if (status === 404 || status === 405) unsupportedClients.add(api)
         const error = err instanceof Error ? err : new Error(String(err))
         for (const waiter of batch) waiter.reject(error)
     }
@@ -381,7 +398,7 @@ export async function batchGet(api: ApiClient, url: string, config?: { params?:
     // trailing `undefined` config reaching the host client.
     const plainGet = () => (config === undefined ? api.get(url) : api.get(url, config))
     const token = tokenForGet(url, config?.params)
-    if (!token) return plainGet()
+    if (!token || unsupportedClients.has(api)) return plainGet()
     try {
         const part = await loadQueryPart(api, token)
         if (!part.success) {