@asteby/metacore-runtime-react 11.0.0 → 13.0.0

package/src/dynamic-line-items.tsx

@@ -0,0 +1,221 @@
+// DynamicLineItems — renders a repeatable line-items group: a table/grid of
+// rows where each column is one of the field's `itemFields` (the v3
+// `item_fields`). Powers declarative multi-line action modals (e.g. the item
+// rows of a "Recibir mercancía" modal, or the debit/credit lines of a journal
+// entry) without needing a custom federated modal.
+//
+// The value is an array of row objects keyed by the item field keys. Add/remove
+// row controls mutate the array; each cell is a widget resolved via
+// `resolveWidget`, matching the flat-field renderer in dynamic-form.tsx.
+import {
+    Input,
+    Textarea,
+    Switch,
+    Button,
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from '@asteby/metacore-ui/primitives'
+import { Plus, Trash2 } from 'lucide-react'
+import type { ActionFieldDef } from './types'
+import { resolveWidget, getItemFields } from './dynamic-form-schema'
+import { useOptionsResolver, type ResolvedOption } from './use-options-resolver'
+
+export interface DynamicLineItemsProps {
+    field: ActionFieldDef
+    value: any[] | undefined
+    onChange: (rows: any[]) => void
+    disabled?: boolean
+}
+
+function emptyRow(itemFields: ActionFieldDef[]): Record<string, any> {
+    const row: Record<string, any> = {}
+    for (const f of itemFields) {
+        row[f.key] = f.defaultValue ?? (f.type === 'boolean' ? false : '')
+    }
+    return row
+}
+
+export function DynamicLineItems({ field, value, onChange, disabled = false }: DynamicLineItemsProps) {
+    const itemFields = getItemFields(field)
+    const rows: any[] = Array.isArray(value) ? value : []
+
+    const addRow = () => onChange([...rows, emptyRow(itemFields)])
+    const removeRow = (idx: number) => onChange(rows.filter((_, i) => i !== idx))
+    const updateCell = (idx: number, key: string, cellValue: any) =>
+        onChange(rows.map((r, i) => (i === idx ? { ...r, [key]: cellValue } : r)))
+
+    return (
+        <div className="grid gap-2" data-widget="line_items">
+            <div className="overflow-x-auto rounded-md border">
+                <table className="w-full text-sm">
+                    <thead className="bg-muted/50">
+                        <tr>
+                            {itemFields.map((col) => (
+                                <th key={col.key} className="px-3 py-2 text-left font-medium">
+                                    {col.label}
+                                    {col.required && <span className="text-red-500 ml-1">*</span>}
+                                </th>
+                            ))}
+                            <th className="w-12 px-3 py-2" aria-label="acciones" />
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {rows.length === 0 && (
+                            <tr>
+                                <td
+                                    colSpan={itemFields.length + 1}
+                                    className="px-3 py-4 text-center text-muted-foreground"
+                                >
+                                    Sin renglones
+                                </td>
+                            </tr>
+                        )}
+                        {rows.map((row, idx) => (
+                            <tr key={idx} className="border-t align-top">
+                                {itemFields.map((col) => (
+                                    <td key={col.key} className="px-2 py-1.5">
+                                        <CellRenderer
+                                            field={col}
+                                            value={row?.[col.key]}
+                                            onChange={(v: any) => updateCell(idx, col.key, v)}
+                                            disabled={disabled}
+                                        />
+                                    </td>
+                                ))}
+                                <td className="px-2 py-1.5 text-center">
+                                    <Button
+                                        type="button"
+                                        variant="ghost"
+                                        size="icon"
+                                        onClick={() => removeRow(idx)}
+                                        disabled={disabled}
+                                        aria-label="Eliminar renglón"
+                                    >
+                                        <Trash2 className="h-4 w-4 text-red-500" />
+                                    </Button>
+                                </td>
+                            </tr>
+                        ))}
+                    </tbody>
+                </table>
+            </div>
+            <div>
+                <Button type="button" variant="outline" size="sm" onClick={addRow} disabled={disabled}>
+                    <Plus className="mr-1 h-4 w-4" />
+                    Agregar renglón
+                </Button>
+            </div>
+        </div>
+    )
+}
+
+interface CellRendererProps {
+    field: ActionFieldDef
+    value: any
+    onChange: (v: any) => void
+    disabled?: boolean
+}
+
+// Per-cell widget. Mirrors the flat FieldRenderer in dynamic-form.tsx but
+// without the per-field Label (the column header is the label) and sized for a
+// table cell. Nested line-items inside a row are not supported (a row column is
+// a scalar widget).
+function CellRenderer({ field, value, onChange, disabled }: CellRendererProps) {
+    const widget = resolveWidget(field)
+    if (widget === 'select' && field.ref) {
+        return <RefCell field={field} value={value} onChange={onChange} disabled={disabled} />
+    }
+    switch (widget) {
+        case 'textarea':
+        case 'richtext':
+            return (
+                <Textarea
+                    value={value || ''}
+                    onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => onChange(e.target.value)}
+                    placeholder={field.placeholder}
+                    disabled={disabled}
+                    rows={2}
+                />
+            )
+        case 'color':
+            return (
+                <Input
+                    type="color"
+                    value={value || '#000000'}
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.value)}
+                    disabled={disabled}
+                />
+            )
+        case 'select':
+            return (
+                <Select value={value || ''} onValueChange={onChange} disabled={disabled}>
+                    <SelectTrigger>
+                        <SelectValue placeholder={field.placeholder || 'Seleccionar...'} />
+                    </SelectTrigger>
+                    <SelectContent>
+                        {field.options?.map((opt) => (
+                            <SelectItem key={opt.value} value={opt.value}>
+                                {opt.label}
+                            </SelectItem>
+                        ))}
+                    </SelectContent>
+                </Select>
+            )
+        case 'switch':
+            return <Switch checked={!!value} onCheckedChange={onChange} disabled={disabled} />
+        case 'number':
+            return (
+                <Input
+                    type="number"
+                    value={value ?? ''}
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.valueAsNumber || '')}
+                    placeholder={field.placeholder}
+                    disabled={disabled}
+                />
+            )
+        case 'date':
+            return (
+                <Input
+                    type="date"
+                    value={value || ''}
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.value)}
+                    disabled={disabled}
+                />
+            )
+        default:
+            return (
+                <Input
+                    type={field.type === 'email' ? 'email' : field.type === 'url' ? 'url' : 'text'}
+                    value={value || ''}
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.value)}
+                    placeholder={field.placeholder}
+                    disabled={disabled}
+                />
+            )
+    }
+}
+
+function RefCell({ field, value, onChange, disabled }: CellRendererProps) {
+    const { options, loading } = useOptionsResolver({
+        modelKey: '',
+        fieldKey: 'id',
+        ref: field.ref,
+    })
+    return (
+        <Select value={value || ''} onValueChange={onChange} disabled={disabled || loading}>
+            <SelectTrigger>
+                <SelectValue placeholder={loading ? 'Cargando…' : field.placeholder || 'Seleccionar...'} />
+            </SelectTrigger>
+            <SelectContent>
+                {options.map((opt: ResolvedOption) => (
+                    <SelectItem key={String(opt.id)} value={String(opt.id)}>
+                        {opt.label}
+                    </SelectItem>
+                ))}
+            </SelectContent>
+        </Select>
+    )
+}

package/src/dynamic-table.tsx

@@ -569,7 +569,13 @@ export function DynamicTable({
 
     const columns = useMemo(() => {
         if (!metadata) return []
-        const baseColumns = getDynamicColumns(metadata, handleInternalAction, t, i18n.language, columnFilterConfigs)
+        // Row-action column only renders per-row actions. Table-level placements
+        // ("table"/"create") are surfaced by <ModelActionToolbar> at the page
+        // level, so strip them here to avoid a meaningless per-row button.
+        const rowMetadata = metadata.actions?.some((a) => a.placement === 'table' || a.placement === 'create')
+            ? { ...metadata, actions: metadata.actions.filter((a) => !a.placement || a.placement === 'row') }
+            : metadata
+        const baseColumns = getDynamicColumns(rowMetadata, handleInternalAction, t, i18n.language, columnFilterConfigs)
         const filteredBase = baseColumns.filter((col: ColumnDef<any>) => !hiddenColumns.includes(col.id as string))
         const actionsCol = filteredBase.find((c: ColumnDef<any>) => c.id === 'actions')
         const otherCols = filteredBase.filter((c: ColumnDef<any>) => c.id !== 'actions')

package/src/index.ts

@@ -11,6 +11,12 @@ export {
     ActionModalDispatcher,
     type ActionModalProps,
 } from './action-modal-dispatcher'
+export {
+    ModelActionToolbar,
+    useModelActions,
+    type ModelActionToolbarProps,
+    type ActionPlacement,
+} from './model-action-toolbar'
 export * from './addon-loader'
 export {
     AddonLayoutProvider,
@@ -59,6 +65,16 @@ export {
     type DynamicColumnsHelpers,
 } from './dynamic-columns'
 export { DynamicRecordDialog } from './dialogs/dynamic-record'
+export { CreateRecordDialog } from './dialogs/create-record-dialog'
+export { ViewRecordDialog } from './dialogs/view-record-dialog'
+export type {
+    ModelKey,
+    ModelSchema,
+    CreateResult,
+    RecordDialogProps,
+    CreateRecordDialogProps,
+    ViewRecordDialogProps,
+} from './dialogs/types'
 export { ExportDialog } from './dialogs/export'
 export { ImportDialog } from './dialogs/import'
 export {

package/src/model-action-toolbar.tsx

@@ -0,0 +1,154 @@
+// ModelActionToolbar — renders page-level (toolbar) triggers for a model's
+// declarative actions and owns the modal dispatch for them.
+//
+// A model's actions carry a `placement` hint (see manifest/v3 Action.placement):
+//   "row" (default) — rendered per-row inside <DynamicTable>'s action column.
+//   "table"         — a plain toolbar button (no record context).
+//   "create"        — a primary toolbar button that replaces the generic
+//                     "create" button, for addons shipping a custom create
+//                     experience (e.g. a journal entry with debit/credit lines).
+//
+// This component renders the buttons for the placements it's asked to surface
+// (default: table + create) and mounts the <ActionModalDispatcher>, which
+// resolves either a custom federated modal (registered via the action registry)
+// or the generic declarative form. For create-style actions there is no record
+// yet, so the dispatcher receives an empty record `{}`.
+//
+// It is the single generic primitive every host consumes — DynamicCRUDPage uses
+// it internally, and bespoke host pages (e.g. ops `/m/$model`) mount it directly
+// next to their own toolbar. Hosts never reimplement action-button plumbing.
+import { useEffect, useMemo, useState } from 'react'
+import { Button } from '@asteby/metacore-ui/primitives'
+import { useApi } from './api-context'
+import { useMetadataCache } from './metadata-cache'
+import { DynamicIcon } from './dynamic-icon'
+import { ActionModalDispatcher } from './action-modal-dispatcher'
+import type { ActionDefinition, ActionMetadata, TableMetadata } from './types'
+
+export type ActionPlacement = 'row' | 'table' | 'create'
+
+export interface ModelActionToolbarProps {
+    /** Model key as registered on the backend (e.g. "JournalEntry"). */
+    model: string
+    /** Data endpoint passed to the dispatcher. Defaults to `/data/<model>/me`. */
+    endpoint?: string
+    /**
+     * Pre-fetched action definitions. When omitted the toolbar reads them from
+     * the metadata cache, falling back to `/metadata/table/<model>`. Pass this
+     * when the host page already holds the metadata to avoid a second fetch.
+     */
+    actions?: ActionDefinition[]
+    /** Which placements to render. Defaults to `['table', 'create']`. */
+    placements?: ActionPlacement[]
+    /** Fired after an action's modal reports success. */
+    onChange?: () => void
+    /** Extra classes on the button row container. */
+    className?: string
+}
+
+const DEFAULT_PLACEMENTS: ActionPlacement[] = ['table', 'create']
+
+function toActionMetadata(a: ActionDefinition): ActionMetadata {
+    return {
+        key: a.key,
+        label: a.label,
+        icon: a.icon || 'Zap',
+        color: a.color,
+        confirm: a.confirm,
+        confirmMessage: a.confirmMessage,
+        fields: a.fields,
+        requiresState: a.requiresState,
+        executable: a.executable,
+        placement: a.placement,
+    }
+}
+
+/**
+ * Returns the model's actions matching the requested placements. Reads from the
+ * `actions` prop when provided, else the metadata cache, else fetches once.
+ */
+export function useModelActions(
+    model: string,
+    placements: ActionPlacement[] = DEFAULT_PLACEMENTS,
+    provided?: ActionDefinition[],
+): ActionDefinition[] {
+    const api = useApi()
+    const cached = useMetadataCache((s) => s.getMetadata(model))
+    const [fetched, setFetched] = useState<TableMetadata | null>(null)
+
+    const haveSource = provided != null || cached != null
+    useEffect(() => {
+        if (haveSource) return
+        let cancelled = false
+        api
+            .get(`/metadata/table/${model}`)
+            .then((res) => {
+                if (!cancelled) setFetched((res.data?.data ?? res.data) as TableMetadata)
+            })
+            .catch(() => {
+                if (!cancelled) setFetched(null)
+            })
+        return () => {
+            cancelled = true
+        }
+    }, [model, haveSource, api])
+
+    const all = provided ?? cached?.actions ?? fetched?.actions ?? []
+    return useMemo(
+        () => all.filter((a) => placements.includes((a.placement ?? 'row') as ActionPlacement)),
+        [all, placements],
+    )
+}
+
+export function ModelActionToolbar({
+    model,
+    endpoint,
+    actions,
+    placements = DEFAULT_PLACEMENTS,
+    onChange,
+    className,
+}: ModelActionToolbarProps) {
+    const surfaced = useModelActions(model, placements, actions)
+    const [active, setActive] = useState<ActionMetadata | null>(null)
+    const dataEndpoint = endpoint ?? `/data/${model}/me`
+
+    if (surfaced.length === 0) return null
+
+    return (
+        <>
+            <div className={className ?? 'flex items-center gap-2'}>
+                {surfaced.map((a) => {
+                    const isCreate = (a.placement ?? 'row') === 'create'
+                    return (
+                        <Button
+                            key={a.key}
+                            variant={isCreate ? 'default' : 'outline'}
+                            onClick={() => setActive(toActionMetadata(a))}
+                            style={a.color && !isCreate ? { borderColor: a.color, color: a.color } : undefined}
+                        >
+                            <DynamicIcon name={a.icon || (isCreate ? 'Plus' : 'Zap')} className="mr-2 h-4 w-4" />
+                            {a.label}
+                        </Button>
+                    )
+                })}
+            </div>
+
+            {active && (
+                <ActionModalDispatcher
+                    open={!!active}
+                    onOpenChange={(open) => {
+                        if (!open) setActive(null)
+                    }}
+                    action={active}
+                    model={model}
+                    record={{}}
+                    endpoint={dataEndpoint}
+                    onSuccess={() => {
+                        setActive(null)
+                        onChange?.()
+                    }}
+                />
+            )}
+        </>
+    )
+}

package/src/types.ts

@@ -135,6 +135,16 @@ export interface ActionFieldDef {
      * `useOptionsResolver` against `/api/options/<ref>?field=id`.
      */
     ref?: string
+    /**
+     * Columns of a repeatable line-items group. Mirrors the kernel v3
+     * `ActionField.item_fields` (json `item_fields`). Present on a field
+     * with `type: "array"` — the multi-row container (e.g. the item rows
+     * of a "Recibir mercancía" modal, or the debit/credit lines of a
+     * journal entry). Each entry is itself an ActionFieldDef describing
+     * one column's cell widget. The field value is an array of objects
+     * keyed by these item field keys. Rendered by `DynamicLineItems`.
+     */
+    itemFields?: ActionFieldDef[]
 }
 
 export interface ActionDefinition {
@@ -152,6 +162,13 @@ export interface ActionDefinition {
     fields?: ActionFieldDef[]
     requiresState?: string[]
     executable?: boolean
+    /**
+     * Where the host surfaces the trigger. Mirrors manifest/v3 Action.placement.
+     *   "row" (default) — per-row table action.
+     *   "table"         — page toolbar button (no record context).
+     *   "create"        — toolbar button that replaces the generic create button.
+     */
+    placement?: 'row' | 'table' | 'create'
 }
 
 export interface ApiResponse<T> {
@@ -184,4 +201,5 @@ export interface ActionMetadata {
     fields?: ActionFieldDef[]
     requiresState?: string[]
     executable?: boolean
+    placement?: 'row' | 'table' | 'create'
 }