@asteby/metacore-runtime-react 20.1.6 → 21.0.0

package/src/dynamic-row-actions.tsx

@@ -0,0 +1,195 @@
+// useDynamicRowActions — the single source of truth for what a per-row action
+// (the "…" kebab → Ver / Editar / Eliminar / custom / link) DOES when clicked.
+//
+// Extracted verbatim from DynamicTable so the kanban board's per-card menu
+// behaves IDENTICALLY to a table row (it used to forward the raw action object
+// to the host and silently no-op). Both renderers call the returned
+// `handleInternalAction(actionKey, row)` with the action's STRING key and mount
+// the returned `dialogs` node once in their tree:
+//
+//   delete                 → opens the SDK's own confirm dialog, then DELETEs.
+//   view / edit            → host `onAction(action, row)` when provided (string
+//                            contract), else the built-in record dialog.
+//   link action            → navigate to the action's templated `linkUrl`.
+//   custom (fields/confirm/
+//   executable) action     → opens the ActionModal via the dispatcher.
+//   anything else          → host `onAction` + refresh (or just refresh).
+//
+// The host `onAction` contract is a STRING action key on purpose — the existing
+// ops `handleAction(action: string, row)` keeps working unchanged.
+import { useCallback, useState } from 'react'
+import { useNavigate } from '@tanstack/react-router'
+import { useTranslation } from 'react-i18next'
+import { toast } from 'sonner'
+import {
+    AlertDialog,
+    AlertDialogAction,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+} from '@asteby/metacore-ui/primitives'
+import { useApi } from './api-context'
+import { ActionModalDispatcher } from './action-modal-dispatcher'
+import { DynamicRecordDialog } from './dialogs/dynamic-record'
+import type { TableMetadata, ActionMetadata } from './types'
+
+export interface UseDynamicRowActionsParams {
+    /** Model key as registered on the backend (e.g. "issue"). */
+    model: string
+    /**
+     * Data endpoint base. The per-record DELETE hits `<endpoint>/<id>`; when
+     * omitted it falls back to `/data/<model>/<id>`. Pass the SAME base the
+     * caller lists from (e.g. `/data/<model>/me`) so writes stay org-scoped.
+     */
+    endpoint?: string
+    /** Raw model metadata — used to resolve link/custom action definitions. */
+    metadata: TableMetadata | null
+    /**
+     * Host hook for `view`/`edit` (and any unhandled key). STRING contract:
+     * receives the action key, not the action object. When absent, `view`/`edit`
+     * fall back to the built-in record dialog.
+     */
+    onAction?: (action: string, row: any) => void
+    /** Called after a successful delete / custom action to refetch the list. */
+    onRefresh: () => void
+}
+
+export interface DynamicRowActions {
+    /** Dispatch a row action by its STRING key. */
+    handleInternalAction: (action: string, row: any) => Promise<void>
+    /**
+     * The delete-confirm dialog + record dialog + action modal this handler
+     * drives. Render it ONCE in the consuming component's tree.
+     */
+    dialogs: React.ReactElement
+}
+
+/**
+ * Owns the state + dialogs + dispatch logic for per-row actions, shared by
+ * DynamicTable and DynamicKanban so both behave identically.
+ */
+export function useDynamicRowActions({
+    model,
+    endpoint,
+    metadata,
+    onAction,
+    onRefresh,
+}: UseDynamicRowActionsParams): DynamicRowActions {
+    const { t } = useTranslation()
+    const api = useApi()
+    const navigate = useNavigate()
+
+    const [recordDialog, setRecordDialog] = useState<{
+        open: boolean
+        mode: 'view' | 'edit' | 'create'
+        recordId: string | null
+    }>({ open: false, mode: 'view', recordId: null })
+
+    const [rowToDelete, setRowToDelete] = useState<any | null>(null)
+    const [isDeleting, setIsDeleting] = useState(false)
+
+    const [actionModal, setActionModal] = useState<{
+        open: boolean
+        action: ActionMetadata | null
+        record: any | null
+    }>({ open: false, action: null, record: null })
+
+    const handleInternalAction = useCallback(async (action: string, row: any) => {
+        if (action === 'delete') { setRowToDelete(row); return }
+        if (action === 'view' || action === 'edit') {
+            if (onAction) await Promise.resolve(onAction(action, row))
+            else setRecordDialog({ open: true, mode: action, recordId: row.id })
+            return
+        }
+        const linkDef = metadata?.actions?.find((a) => a.key === action && a.type === 'link')
+        if (linkDef?.linkUrl) {
+            const url = linkDef.linkUrl.replace(/\{(\w+)\}/g, (_: string, field: string) => String(row[field] ?? ''))
+            navigate({ to: url })
+            return
+        }
+        const actionDef = metadata?.actions?.find((a) => a.key === action)
+        if (actionDef && (actionDef.fields?.length || actionDef.confirm || actionDef.executable)) {
+            setActionModal({
+                open: true,
+                action: {
+                    key: actionDef.key,
+                    label: actionDef.label,
+                    icon: actionDef.icon || 'Zap',
+                    color: actionDef.color,
+                    confirm: actionDef.confirm,
+                    confirmMessage: actionDef.confirmMessage,
+                    fields: actionDef.fields,
+                    requiresState: actionDef.requiresState,
+                    executable: actionDef.executable,
+                },
+                record: row,
+            })
+            return
+        }
+        if (onAction) { await Promise.resolve(onAction(action, row)); onRefresh() }
+        else onRefresh()
+    }, [onAction, onRefresh, metadata, navigate])
+
+    const confirmDelete = async () => {
+        if (!rowToDelete) return
+        setIsDeleting(true)
+        try {
+            const deleteEndpoint = endpoint ? `${endpoint}/${rowToDelete.id}` : `/data/${model}/${rowToDelete.id}`
+            const res = await api.delete(deleteEndpoint)
+            if (res.data.success) { toast.success(res.data.message || 'Eliminado correctamente'); onRefresh() }
+            else toast.error(res.data.message || 'Error al eliminar')
+        } catch (error) {
+            console.error('Error al eliminar', error)
+            toast.error('Error al eliminar el registro')
+        } finally {
+            setIsDeleting(false)
+            setRowToDelete(null)
+        }
+    }
+
+    const dialogs = (
+        <>
+            <AlertDialog open={!!rowToDelete} onOpenChange={(open: boolean) => !open && setRowToDelete(null)}>
+                <AlertDialogContent>
+                    <AlertDialogHeader>
+                        <AlertDialogTitle>¿Está absolutamente seguro?</AlertDialogTitle>
+                        <AlertDialogDescription>Esta acción no se puede deshacer. Esto eliminará permanentemente el registro seleccionado de nuestros servidores.</AlertDialogDescription>
+                    </AlertDialogHeader>
+                    <AlertDialogFooter>
+                        <AlertDialogCancel disabled={isDeleting}>{t('common.cancel')}</AlertDialogCancel>
+                        <AlertDialogAction onClick={(e: React.MouseEvent) => { e.preventDefault(); confirmDelete() }} className="bg-red-600 hover:bg-red-700" disabled={isDeleting}>
+                            {isDeleting ? 'Eliminando...' : 'Eliminar'}
+                        </AlertDialogAction>
+                    </AlertDialogFooter>
+                </AlertDialogContent>
+            </AlertDialog>
+
+            <DynamicRecordDialog
+                open={recordDialog.open}
+                onOpenChange={(open: boolean) => setRecordDialog((prev) => ({ ...prev, open }))}
+                mode={recordDialog.mode}
+                model={model}
+                recordId={recordDialog.recordId}
+                endpoint={endpoint}
+                onSaved={onRefresh}
+            />
+
+            {actionModal.action && (
+                <ActionModalDispatcher
+                    open={actionModal.open}
+                    onOpenChange={(open: boolean) => setActionModal((prev) => ({ ...prev, open }))}
+                    action={actionModal.action}
+                    model={model}
+                    record={actionModal.record}
+                    endpoint={endpoint}
+                    onSuccess={onRefresh}
+                />
+            )}
+        </>
+    )
+
+    return { handleInternalAction, dialogs }
+}

package/src/dynamic-table.tsx

@@ -11,7 +11,6 @@
 //     `getDynamicColumns` prop (hosts retain ownership because the rendered
 //     column cells are tightly coupled to their design system).
 import { useEffect, useState, useMemo, useCallback, useRef } from 'react'
-import { useNavigate } from '@tanstack/react-router'
 import { useTranslation } from 'react-i18next'
 import { format } from 'date-fns'
 import type { DateRange } from 'react-day-picker'
@@ -68,11 +67,10 @@ import { useApi, useCurrentBranch } from './api-context'
 import type { ColumnFilterConfig, GetDynamicColumns } from './dynamic-columns-shim'
 import { defaultGetDynamicColumns, DATE_CELL_TYPES, aggregateOf, formatAggregateTotal } from './dynamic-columns'
 import { OptionsContext } from './options-context'
-import { ActionModalDispatcher } from './action-modal-dispatcher'
-import type { TableMetadata, ApiResponse, ActionMetadata } from './types'
+import type { TableMetadata, ApiResponse } from './types'
 import { getSearchableColumnKeys } from './column-visibility'
 import { useCan, usePermissionsActive, gateTableMetadata } from './permissions-context'
-import { DynamicRecordDialog } from './dialogs/dynamic-record'
+import { useDynamicRowActions } from './dynamic-row-actions'
 import { ExportDialog } from './dialogs/export'
 import { ImportDialog } from './dialogs/import'
 
@@ -131,7 +129,6 @@ export function DynamicTable({
     const { t, i18n } = useTranslation()
     const api = useApi()
     const currentBranch = useCurrentBranch()
-    const navigate = useNavigate()
 
     const prevBranchId = useRef(currentBranch?.id)
 
@@ -147,24 +144,9 @@ export function DynamicTable({
     const [loadingData, setLoadingData] = useState(true)
     const [optionsMap, setOptionsMap] = useState<Map<string, any[]>>(new Map())
 
-    const [recordDialog, setRecordDialog] = useState<{
-        open: boolean
-        mode: 'view' | 'edit' | 'create'
-        recordId: string | null
-    }>({ open: false, mode: 'view', recordId: null })
-
-    const [rowToDelete, setRowToDelete] = useState<any | null>(null)
-    const [isDeleting, setIsDeleting] = useState(false)
-
     const [exportOpen, setExportOpen] = useState(false)
     const [importOpen, setImportOpen] = useState(false)
 
-    const [actionModal, setActionModal] = useState<{
-        open: boolean
-        action: ActionMetadata | null
-        record: any | null
-    }>({ open: false, action: null, record: null })
-
     const [showBulkDeleteConfirm, setShowBulkDeleteConfirm] = useState(false)
     const [isBulkDeleting, setIsBulkDeleting] = useState(false)
     const [bulkDeleteProgress, setBulkDeleteProgress] = useState(0)
@@ -506,58 +488,15 @@ export function DynamicTable({
 
     const handleRefresh = useCallback(() => { fetchData(); fetchAggregates() }, [fetchData, fetchAggregates])
 
-    const handleInternalAction = useCallback(async (action: string, row: any) => {
-        if (action === 'delete') { setRowToDelete(row); return }
-        if (action === 'view' || action === 'edit') {
-            if (onAction) await Promise.resolve(onAction(action, row))
-            else setRecordDialog({ open: true, mode: action, recordId: row.id })
-            return
-        }
-        const linkDef = metadata?.actions?.find((a) => a.key === action && a.type === 'link')
-        if (linkDef?.linkUrl) {
-            const url = linkDef.linkUrl.replace(/\{(\w+)\}/g, (_: string, field: string) => String(row[field] ?? ''))
-            navigate({ to: url })
-            return
-        }
-        const actionDef = metadata?.actions?.find((a) => a.key === action)
-        if (actionDef && (actionDef.fields?.length || actionDef.confirm || actionDef.executable)) {
-            setActionModal({
-                open: true,
-                action: {
-                    key: actionDef.key,
-                    label: actionDef.label,
-                    icon: actionDef.icon || 'Zap',
-                    color: actionDef.color,
-                    confirm: actionDef.confirm,
-                    confirmMessage: actionDef.confirmMessage,
-                    fields: actionDef.fields,
-                    requiresState: actionDef.requiresState,
-                    executable: actionDef.executable,
-                },
-                record: row,
-            })
-            return
-        }
-        if (onAction) { await Promise.resolve(onAction(action, row)); handleRefresh() }
-        else handleRefresh()
-    }, [onAction, handleRefresh, metadata, navigate])
-
-    const confirmDelete = async () => {
-        if (!rowToDelete) return
-        setIsDeleting(true)
-        try {
-            const deleteEndpoint = endpoint ? `${endpoint}/${rowToDelete.id}` : `/data/${model}/${rowToDelete.id}`
-            const res = await api.delete(deleteEndpoint)
-            if (res.data.success) { toast.success(res.data.message || 'Eliminado correctamente'); handleRefresh() }
-            else toast.error(res.data.message || 'Error al eliminar')
-        } catch (error) {
-            console.error('Error al eliminar', error)
-            toast.error('Error al eliminar el registro')
-        } finally {
-            setIsDeleting(false)
-            setRowToDelete(null)
-        }
-    }
+    // Per-row action dispatch (view/edit/delete/link/custom) + its dialogs live
+    // in the shared hook so DynamicKanban's card menu behaves identically.
+    const { handleInternalAction, dialogs: rowActionDialogs } = useDynamicRowActions({
+        model,
+        endpoint,
+        metadata,
+        onAction,
+        onRefresh: handleRefresh,
+    })
 
     const confirmBulkDelete = async () => {
         const selectedRows = table.getFilteredSelectedRowModel().rows
@@ -974,20 +913,7 @@ export function DynamicTable({
                 </div>
             </div>
 
-            <AlertDialog open={!!rowToDelete} onOpenChange={(open: boolean) => !open && setRowToDelete(null)}>
-                <AlertDialogContent>
-                    <AlertDialogHeader>
-                        <AlertDialogTitle>¿Está absolutamente seguro?</AlertDialogTitle>
-                        <AlertDialogDescription>Esta acción no se puede deshacer. Esto eliminará permanentemente el registro seleccionado de nuestros servidores.</AlertDialogDescription>
-                    </AlertDialogHeader>
-                    <AlertDialogFooter>
-                        <AlertDialogCancel disabled={isDeleting}>{t('common.cancel')}</AlertDialogCancel>
-                        <AlertDialogAction onClick={(e: React.MouseEvent) => { e.preventDefault(); confirmDelete() }} className="bg-red-600 hover:bg-red-700" disabled={isDeleting}>
-                            {isDeleting ? 'Eliminando...' : 'Eliminar'}
-                        </AlertDialogAction>
-                    </AlertDialogFooter>
-                </AlertDialogContent>
-            </AlertDialog>
+            {rowActionDialogs}
 
             <AlertDialog open={showBulkDeleteConfirm} onOpenChange={(open: boolean) => !open && !isBulkDeleting && setShowBulkDeleteConfirm(false)}>
                 <AlertDialogContent>
@@ -1013,33 +939,12 @@ export function DynamicTable({
                 </AlertDialogContent>
             </AlertDialog>
 
-            <DynamicRecordDialog
-                open={recordDialog.open}
-                onOpenChange={(open: boolean) => setRecordDialog((prev) => ({ ...prev, open }))}
-                mode={recordDialog.mode}
-                model={model}
-                recordId={recordDialog.recordId}
-                endpoint={endpoint}
-                onSaved={handleRefresh}
-            />
-
             {viewMetadata?.canExport && (
                 <ExportDialog open={exportOpen} onOpenChange={setExportOpen} model={model} metadata={metadata} currentFilters={buildFilterParams()} hasActiveFilters={hasActiveFilters} />
             )}
             {viewMetadata?.canImport && (
                 <ImportDialog open={importOpen} onOpenChange={setImportOpen} model={model} metadata={metadata} onImported={handleRefresh} />
             )}
-            {actionModal.action && (
-                <ActionModalDispatcher
-                    open={actionModal.open}
-                    onOpenChange={(open: boolean) => setActionModal((prev) => ({ ...prev, open }))}
-                    action={actionModal.action}
-                    model={model}
-                    record={actionModal.record}
-                    endpoint={endpoint}
-                    onSuccess={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

package/src/index.ts

@@ -23,6 +23,11 @@ export {
     resolveActiveView,
     type DynamicViewProps,
 } from './dynamic-view'
+export {
+    useDynamicFilters,
+    type UseDynamicFiltersOptions,
+    type UseDynamicFiltersResult,
+} from './use-dynamic-filters'
 export * from './dynamic-form'
 export {
     ActionModalDispatcher,
@@ -53,9 +58,15 @@ export {
     capabilityForActionKey,
     modelCapability,
     gateTableMetadata,
+    resolveRowActions,
     type CanFn,
     type PermissionsProviderProps,
 } from './permissions-context'
+export {
+    useDynamicRowActions,
+    type UseDynamicRowActionsParams,
+    type DynamicRowActions,
+} from './dynamic-row-actions'
 export {
     PermissionsManager,
     moduleActionCapability,

package/src/permissions-context.tsx

@@ -156,3 +156,42 @@ export function gateTableMetadata(
             metadata.canCreate === undefined ? undefined : metadata.canCreate && allowed('create'),
     }
 }
+
+/**
+ * Resolves the per-row (`placement: 'row'`) action list for a model exactly the
+ * way DynamicTable's action column does, so the kanban card menu shows the SAME
+ * actions:
+ *   - when a <PermissionsProvider> is active, the metadata is run through
+ *     `gateTableMetadata` first (filters by capability + materializes the CRUD
+ *     trio), otherwise the raw metadata is used.
+ *   - explicit actions win; absent them, the implicit View/Edit/Delete trio is
+ *     materialized when `enableCRUDActions` is on.
+ *   - table/create-placement actions are stripped (they belong to the toolbar).
+ *
+ * Pure. `tx` resolves the trio's i18n labels (defaults to the Spanish fallbacks).
+ */
+export function resolveRowActions(
+    metadata: TableMetadata,
+    model: string,
+    can: CanFn,
+    permissionsActive: boolean,
+    tx: (i18nKey: string, fallback: string) => string = (_k, fallback) => fallback,
+): ActionDefinition[] {
+    const gated = permissionsActive ? gateTableMetadata(metadata, model, can, tx) : metadata
+    const explicit = gated.actions ?? []
+    const hasExplicit = (gated.hasActions ?? explicit.length > 0) && explicit.length > 0
+    const base: ActionDefinition[] = hasExplicit
+        ? explicit
+        : gated.enableCRUDActions
+          ? DEFAULT_TRIO.map(
+                (a) =>
+                    ({
+                        key: a.key,
+                        name: a.key,
+                        label: tx(a.i18nKey, a.fallback),
+                        icon: a.icon,
+                    }) as ActionDefinition,
+            )
+          : []
+    return base.filter((a) => ((a.placement ?? 'row') as string) === 'row')
+}