@asteby/metacore-runtime-react 18.1.0 → 18.3.0

package/src/dynamic-form.tsx

@@ -129,6 +129,7 @@ export function DynamicForm({
                                 field={field}
                                 value={values[field.key]}
                                 onChange={(v: any) => update(field.key, v)}
+                                initialValues={initialValues}
                             />
                             {errors[field.key] && (
                                 <span className="text-red-500 text-sm" role="alert">{errors[field.key]}</span>
@@ -155,9 +156,38 @@ interface FieldRendererProps {
     field: ActionFieldDef
     value: any
     onChange: (v: any) => void
+    /** The form's initial record — used to seed an FK picker's existing label/image. */
+    initialValues?: Record<string, any>
+}
+
+// seedOptionFromSibling builds a pre-resolved option for an FK field from the
+// resolved sibling the backend served on the initial record (e.g. a line item's
+// `product = { value, label, image }` alongside `product_id`). Lets the picker
+// show the name + thumbnail for an existing value without a lookup. Returns
+// undefined when the sibling carries nothing renderable.
+function seedOptionFromSibling(
+    field: ActionFieldDef,
+    value: any,
+    initialValues?: Record<string, any>,
+): ResolvedOption | undefined {
+    if (!field.key.endsWith('_id')) return undefined
+    const sib = initialValues?.[field.key.replace(/_id$/, '')]
+    if (!sib || typeof sib !== 'object') return undefined
+    const label = sib.label ?? sib.name ?? ''
+    if (!label && !sib.image) return undefined
+    const id = String(sib.value ?? sib.id ?? value ?? '')
+    return {
+        id,
+        value: id,
+        label: String(label),
+        name: String(label),
+        image: sib.image,
+        color: sib.color,
+        icon: sib.icon,
+    }
 }
 
-function FieldRenderer({ field, value, onChange }: FieldRendererProps) {
+function FieldRenderer({ field, value, onChange, initialValues }: FieldRendererProps) {
     // Repeatable line-items group → render the row grid. Its value is an array
     // of row objects rather than a scalar.
     if (isLineItemsField(field)) {
@@ -168,7 +198,8 @@ function FieldRenderer({ field, value, onChange }: FieldRendererProps) {
     // Preferred for FK fields with large option sets — no UUID typing, no
     // dumping every row into a plain <select>.
     if (widget === 'dynamic_select') {
-        return <DynamicSelectField field={field} value={value} onChange={onChange} />
+        const seedOption = seedOptionFromSibling(field, value, initialValues)
+        return <DynamicSelectField field={field} value={value} onChange={onChange} seedOption={seedOption} />
     }
     // File upload → themed picker that POSTs to the host upload endpoint and
     // stores the returned file url/path as the field value.

package/src/dynamic-relation-helpers.ts

@@ -20,6 +20,20 @@ function isEnumLikeColumn(col: ColumnDefinition): boolean {
 
 export type DynamicRelationKind = 'one_to_many' | 'many_to_many'
 
+// Server-managed / audit columns that must never become editable form inputs.
+// They're set by the backend and several ship as resolved objects (e.g.
+// `created_by = { name, avatar, email }`) that would render as `[object Object]`.
+const MANAGED_RELATION_COLUMNS = new Set([
+    'id',
+    'created_at',
+    'updated_at',
+    'deleted_at',
+    'created_by',
+    'created_by_id',
+    'updated_by',
+    'updated_by_id',
+])
+
 // Pulls a human label off a resolved relation/user object a backend serves:
 // `{ value, label }` (FK sibling), `{ name, … }` (user object such as
 // created_by) or `{ title }`. Returns undefined for plain/empty objects so the
@@ -146,6 +160,10 @@ export function deriveRelationFormFields(
     for (const col of metadata.columns) {
         if (col.key === foreignKey) continue
         if (col.hidden) continue
+        // Managed/audit columns are server-owned and ship resolved objects
+        // (`created_by = { name, avatar, … }`); making them editable inputs
+        // renders `[object Object]`. Never surface them in the inline form.
+        if (MANAGED_RELATION_COLUMNS.has(col.key.toLowerCase())) continue
         out.push({
             key: col.key,
             label: col.label,

package/src/dynamic-relation.tsx

@@ -25,6 +25,8 @@ import { Plus, Trash2, Pencil } from 'lucide-react'
 import { useApi } from './api-context'
 import { useMetadataCache } from './metadata-cache'
 import { DynamicForm } from './dynamic-form'
+import { useImageUrl } from './image-url-context'
+import { OptionThumb } from './dynamic-select-field'
 import { useOptionsResolver } from './use-options-resolver'
 import type { ApiResponse, TableMetadata } from './types'
 import {
@@ -169,6 +171,7 @@ function OneToManyRelation({
     onChange,
 }: DynamicRelationOneToManyProps) {
     const api = useApi()
+    const getImageUrl = useImageUrl()
     const { getMetadata, setMetadata: cacheMetadata } = useMetadataCache()
     const cachedMeta = getMetadata(model)
     const labels = { ...DEFAULT_STRINGS, ...(strings || {}) }
@@ -305,6 +308,22 @@ function OneToManyRelation({
                             <div className="flex-1 grid grid-cols-[repeat(auto-fit,minmax(0,1fr))] gap-2 text-sm">
                                 {visibleColumns.map(col => {
                                     const cell = formatRelationCell(row, col)
+                                    // FK column whose backend-resolved sibling
+                                    // carries an image → render a thumbnail + label
+                                    // instead of plain text (e.g. a line item's
+                                    // product photo). The sibling is the column key
+                                    // with the trailing `_id` stripped.
+                                    const isFk = !!col.ref || col.key.endsWith('_id')
+                                    const sibling = isFk ? (row as any)[col.key.replace(/_id$/, '')] : undefined
+                                    if (sibling && typeof sibling === 'object' && sibling.image) {
+                                        const label = sibling.label ?? sibling.name ?? cell
+                                        return (
+                                            <span key={col.key} className="flex min-w-0 items-center gap-2" title={String(label)}>
+                                                <OptionThumb image={getImageUrl(sibling.image)} size={20} />
+                                                <span className="truncate">{label}</span>
+                                            </span>
+                                        )
+                                    }
                                     return (
                                         <span key={col.key} className="truncate" title={cell}>
                                             {cell}

package/src/dynamic-select-field.tsx

@@ -48,7 +48,7 @@ import type { ActionFieldDef } from './types'
  * not a gallery). Inline style for the box dimensions: arbitrary Tailwind
  * classes from a federated addon don't always survive the host's class scan.
  */
-function OptionThumb({ image, size = 20 }: { image?: string | null; size?: number }) {
+export function OptionThumb({ image, size = 20 }: { image?: string | null; size?: number }) {
     const box = { width: size, height: size }
     if (!image) {
         return (
@@ -83,7 +83,7 @@ function OptionThumb({ image, size = 20 }: { image?: string | null; size?: numbe
  * else a declared icon, else a color dot (enum/status options with a color).
  * Returns null when the option carries none, so plain text options stay plain.
  */
-function OptionLead({
+export function OptionLead({
     option,
     size = 20,
 }: {
@@ -138,9 +138,16 @@ export interface DynamicSelectFieldProps {
     field: ActionFieldDef
     value: any
     onChange: (v: any) => void
+    /**
+     * Pre-resolved option for the CURRENT value (label + image/color/icon) the
+     * caller already has — e.g. the relation sibling the table served. Lets the
+     * trigger show the name + thumbnail for an existing value without waiting for
+     * a lookup (which only loads once the popover opens). Matched by id == value.
+     */
+    seedOption?: ResolvedOption | null
 }
 
-export function DynamicSelectField({ field, value, onChange }: DynamicSelectFieldProps) {
+export function DynamicSelectField({ field, value, onChange, seedOption }: DynamicSelectFieldProps) {
     const [open, setOpen] = useState(false)
     const [search, setSearch] = useState('')
     const debounced = useDebounced(search, 250)
@@ -172,6 +179,7 @@ export function DynamicSelectField({ field, value, onChange }: DynamicSelectFiel
     const selectedOption =
         (picked && String(picked.id) === String(value) ? picked : null) ??
         options.find((o) => String(o.id) === String(value)) ??
+        (seedOption && String(seedOption.id) === String(value) ? seedOption : null) ??
         null
 
     const selectedLabel = selectedOption?.label ?? (value ? String(value) : '')

package/src/image-url-context.tsx

@@ -0,0 +1,23 @@
+// Image-url resolver context — its own module so any renderer (record dialog,
+// relation cells, …) can consume the host's storage-path → URL resolver without
+// importing from `dialogs/dynamic-record`. That dialog imports
+// `dynamic-relations` (which renders `dynamic-relation`), so the relation cell
+// cannot import the context back from the dialog without a circular import —
+// hence this standalone module is the single source of truth.
+import { createContext, useContext } from 'react'
+
+/** Resolves a (possibly relative) storage path into a fetchable URL. */
+export type GetImageUrl = (path: string | null | undefined) => string
+
+/** Default resolver: pass the path through unchanged (works same-origin). */
+export const identityImageUrl: GetImageUrl = (p) => p ?? ''
+
+/**
+ * Threads the host's image-url resolver to nested field/cell components without
+ * prop-drilling. Provided by `DynamicRecordDialog`; consumers outside a provider
+ * fall back to `identityImageUrl` (the relative path, which renders same-origin).
+ */
+export const ImageUrlContext = createContext<GetImageUrl>(identityImageUrl)
+
+/** Reads the nearest image-url resolver (identity outside a provider). */
+export const useImageUrl = () => useContext(ImageUrlContext)

package/src/index.ts

@@ -68,7 +68,8 @@ export {
 } from './dynamic-columns'
 export { humanizeToken } from './dynamic-columns-helpers'
 export { NIL_UUID, isNilUuid, normalizeNilUuid } from './nil-uuid'
-export { DynamicRecordDialog } from './dialogs/dynamic-record'
+export { DynamicRecordDialog, ViewValue } from './dialogs/dynamic-record'
+export type { DynamicRecordDialogProps, FieldDef, FieldOption, GetImageUrl } from './dialogs/dynamic-record'
 export { CreateRecordDialog } from './dialogs/create-record-dialog'
 export { ViewRecordDialog } from './dialogs/view-record-dialog'
 export type {