@asteby/metacore-runtime-react 18.28.2 → 18.28.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @asteby/metacore-runtime-react
 
+## 18.28.3
+
+### Patch Changes
+
+- e5e9fca: feat(action-modal): a field-action modal now renders the acted-on record's related-lists (model metadata.relations) below the form, as read-only context — e.g. the reception history of a transfer shown right inside the "Recibir" modal. Create actions (no record) render nothing; reuses the same DynamicRelations the detail view uses.
+
 ## 18.28.2
 
 ### Patch Changes

package/dist/action-modal-dispatcher.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"action-modal-dispatcher.d.ts","sourceRoot":"","sources":["../src/action-modal-dispatcher.tsx"],"names":[],"mappings":"AA+CA,OAAO,EACH,KAAK,cAAc,EACnB,KAAK,gBAAgB,EAExB,MAAM,sBAAsB,CAAA;AAE7B,YAAY,EAAE,cAAc,EAAE,gBAAgB,EAAE,CAAA;AA0FhD,wBAAgB,qBAAqB,CAAC,EAClC,IAAI,EACJ,YAAY,EACZ,MAAM,EACN,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,GACZ,EAAE,gBAAgB,sCAiDlB"}
+{"version":3,"file":"action-modal-dispatcher.d.ts","sourceRoot":"","sources":["../src/action-modal-dispatcher.tsx"],"names":[],"mappings":"AAgDA,OAAO,EACH,KAAK,cAAc,EACnB,KAAK,gBAAgB,EAExB,MAAM,sBAAsB,CAAA;AAE7B,YAAY,EAAE,cAAc,EAAE,gBAAgB,EAAE,CAAA;AA0FhD,wBAAgB,qBAAqB,CAAC,EAClC,IAAI,EACJ,YAAY,EACZ,MAAM,EACN,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,GACZ,EAAE,gBAAgB,sCAiDlB"}

package/dist/action-modal-dispatcher.js

@@ -15,6 +15,7 @@ import { toast } from 'sonner';
 import { useApi } from './api-context';
 import { DynamicIcon } from './dynamic-icon';
 import { DynamicLineItems } from './dynamic-line-items';
+import { DynamicRelations } from './dynamic-relations';
 import { DynamicSelectField } from './dynamic-select-field';
 import { DynamicDateField } from './dynamic-date-field';
 import { UploadField } from './upload-field';
@@ -137,6 +138,34 @@ function GenericActionModal({ open, onOpenChange, action, model, record, endpoin
     const api = useApi();
     const [formData, setFormData] = useState({});
     const [executing, setExecuting] = useState(false);
+    // Related records to surface BELOW the form, as read-only context for the
+    // record being acted on — e.g. the reception history of a transfer while
+    // receiving against it. Sourced from the model's metadata.relations (the
+    // same declarative relations the detail view renders). Only row actions on a
+    // real record show them; create actions (no record.id) render nothing.
+    const [relations, setRelations] = useState([]);
+    const recordId = record?.id;
+    useEffect(() => {
+        let cancelled = false;
+        if (!open || recordId == null) {
+            setRelations([]);
+            return;
+        }
+        api.get(`/metadata/table/${model}`)
+            .then((res) => {
+            if (cancelled)
+                return;
+            const rels = res?.data?.relations ?? res?.data?.data?.relations ?? [];
+            setRelations(Array.isArray(rels) ? rels : []);
+        })
+            .catch(() => {
+            if (!cancelled)
+                setRelations([]);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [open, model, recordId, api]);
     useEffect(() => {
         if (open && action.fields) {
             const defaults = {};
@@ -209,12 +238,12 @@ function GenericActionModal({ open, onOpenChange, action, model, record, endpoin
         : hasLineItems
             ? '820px'
             : undefined;
-    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: 'flex max-h-[90vh] flex-col overflow-hidden ' + (widthPx ? '' : 'sm:max-w-lg'), style: { maxHeight: '90vh', ...(widthPx ? { maxWidth: widthPx, width: '95vw' } : {}) }, children: [_jsxs(DialogHeader, { className: "shrink-0", children: [_jsxs(DialogTitle, { className: "flex items-center gap-2", children: [_jsx(DynamicIcon, { name: action.icon, className: "h-5 w-5" }), action.label] }), action.confirmMessage && _jsx(DialogDescription, { children: action.confirmMessage })] }), _jsx("div", { className: "-mx-1 grid min-h-0 flex-1 gap-4 overflow-y-auto px-1 py-4 sm:grid-cols-2", children: action.fields?.map((field) => {
-                        const fullWidth = isLineItemsField(field) ||
-                            resolveWidget(field) === 'textarea' ||
-                            resolveWidget(field) === 'richtext';
-                        return (_jsxs("div", { className: 'grid gap-2 ' + (fullWidth ? 'sm:col-span-2' : ''), children: [_jsxs(Label, { htmlFor: field.key, children: [field.label, field.required && _jsx("span", { className: "text-red-500 ml-1", children: "*" })] }), renderField(field, formData[field.key], (v) => updateField(field.key, v), formData)] }, field.key));
-                    }) }), _jsxs(DialogFooter, { className: "shrink-0", children: [_jsx(Button, { variant: "outline", onClick: () => onOpenChange(false), disabled: executing, children: t('common.cancel') }), _jsxs(Button, { onClick: execute, disabled: executing, style: action.color ? { backgroundColor: action.color, color: 'white' } : undefined, children: [executing ? _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }) : _jsx(DynamicIcon, { name: action.icon, className: "mr-2 h-4 w-4" }), action.label] })] })] }) }));
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: 'flex max-h-[90vh] flex-col overflow-hidden ' + (widthPx ? '' : 'sm:max-w-lg'), style: { maxHeight: '90vh', ...(widthPx ? { maxWidth: widthPx, width: '95vw' } : {}) }, children: [_jsxs(DialogHeader, { className: "shrink-0", children: [_jsxs(DialogTitle, { className: "flex items-center gap-2", children: [_jsx(DynamicIcon, { name: action.icon, className: "h-5 w-5" }), action.label] }), action.confirmMessage && _jsx(DialogDescription, { children: action.confirmMessage })] }), _jsxs("div", { className: "-mx-1 grid min-h-0 flex-1 gap-4 overflow-y-auto px-1 py-4 sm:grid-cols-2", children: [action.fields?.map((field) => {
+                            const fullWidth = isLineItemsField(field) ||
+                                resolveWidget(field) === 'textarea' ||
+                                resolveWidget(field) === 'richtext';
+                            return (_jsxs("div", { className: 'grid gap-2 ' + (fullWidth ? 'sm:col-span-2' : ''), children: [_jsxs(Label, { htmlFor: field.key, children: [field.label, field.required && _jsx("span", { className: "text-red-500 ml-1", children: "*" })] }), renderField(field, formData[field.key], (v) => updateField(field.key, v), formData)] }, field.key));
+                        }), relations.length > 0 && (_jsx("div", { className: "sm:col-span-2", children: _jsx(DynamicRelations, { record: record, relations: relations }) }))] }), _jsxs(DialogFooter, { className: "shrink-0", children: [_jsx(Button, { variant: "outline", onClick: () => onOpenChange(false), disabled: executing, children: t('common.cancel') }), _jsxs(Button, { onClick: execute, disabled: executing, style: action.color ? { backgroundColor: action.color, color: 'white' } : undefined, children: [executing ? _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }) : _jsx(DynamicIcon, { name: action.icon, className: "mr-2 h-4 w-4" }), action.label] })] })] }) }));
 }
 function renderField(field, value, onChange, 
 // Full current form values — lets a line-items grid (and any cascading

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asteby/metacore-runtime-react",
-  "version": "18.28.2",
+  "version": "18.28.3",
   "description": "React runtime for metacore hosts — renders addon contributions dynamically",
   "repository": {
     "type": "git",
@@ -34,8 +34,8 @@
     "react-i18next": ">=13",
     "sonner": ">=1.7",
     "zustand": ">=5",
-    "@asteby/metacore-sdk": "^3.2.0",
-    "@asteby/metacore-ui": "^2.5.2"
+    "@asteby/metacore-ui": "^2.5.2",
+    "@asteby/metacore-sdk": "^3.2.0"
   },
   "peerDependenciesMeta": {
     "@tanstack/react-router": {
@@ -64,8 +64,8 @@
     "typescript": "^6.0.0",
     "vitest": "^4.0.0",
     "zustand": "^5.0.0",
-    "@asteby/metacore-sdk": "3.2.0",
-    "@asteby/metacore-ui": "2.5.2"
+    "@asteby/metacore-ui": "2.5.2",
+    "@asteby/metacore-sdk": "3.2.0"
   },
   "scripts": {
     "build": "tsc -p tsconfig.json",

package/src/action-modal-dispatcher.tsx

@@ -39,6 +39,7 @@ import { toast } from 'sonner'
 import { useApi } from './api-context'
 import { DynamicIcon } from './dynamic-icon'
 import { DynamicLineItems } from './dynamic-line-items'
+import { DynamicRelations } from './dynamic-relations'
 import { DynamicSelectField } from './dynamic-select-field'
 import { DynamicDateField } from './dynamic-date-field'
 import { UploadField } from './upload-field'
@@ -270,6 +271,32 @@ function GenericActionModal({ open, onOpenChange, action, model, record, endpoin
     const api = useApi()
     const [formData, setFormData] = useState<Record<string, any>>({})
     const [executing, setExecuting] = useState(false)
+    // Related records to surface BELOW the form, as read-only context for the
+    // record being acted on — e.g. the reception history of a transfer while
+    // receiving against it. Sourced from the model's metadata.relations (the
+    // same declarative relations the detail view renders). Only row actions on a
+    // real record show them; create actions (no record.id) render nothing.
+    const [relations, setRelations] = useState<any[]>([])
+    const recordId = record?.id
+    useEffect(() => {
+        let cancelled = false
+        if (!open || recordId == null) {
+            setRelations([])
+            return
+        }
+        api.get(`/metadata/table/${model}`)
+            .then((res) => {
+                if (cancelled) return
+                const rels = res?.data?.relations ?? res?.data?.data?.relations ?? []
+                setRelations(Array.isArray(rels) ? rels : [])
+            })
+            .catch(() => {
+                if (!cancelled) setRelations([])
+            })
+        return () => {
+            cancelled = true
+        }
+    }, [open, model, recordId, api])
 
     useEffect(() => {
         if (open && action.fields) {
@@ -389,6 +416,11 @@ function GenericActionModal({ open, onOpenChange, action, model, record, endpoin
                             </div>
                         )
                     })}
+                    {relations.length > 0 && (
+                        <div className="sm:col-span-2">
+                            <DynamicRelations record={record} relations={relations} />
+                        </div>
+                    )}
                 </div>
                 <DialogFooter className="shrink-0">
                     <Button variant="outline" onClick={() => onOpenChange(false)} disabled={executing}>