@asteby/metacore-runtime-react 23.6.0 → 23.7.1

package/src/action-modal-dispatcher.tsx

@@ -26,7 +26,6 @@ import {
     Button,
     Input,
     Textarea,
-    Label,
     Select,
     SelectContent,
     SelectItem,
@@ -44,6 +43,7 @@ import { DynamicSelectField } from './dynamic-select-field'
 import { DynamicDateField } from './dynamic-date-field'
 import { UploadField } from './upload-field'
 import { isLineItemsField, resolveWidget, resolveDependsValue, getDependsOn } from './dynamic-form-schema'
+import { FieldGrid, FieldCell, FieldLabel } from './field-grid'
 import type { ActionFieldDef } from './types'
 // Canonical registry lives in @asteby/metacore-sdk
 import {
@@ -218,6 +218,10 @@ function ConfirmActionDialog({ open, onOpenChange, action, model, record, endpoi
     const { t } = useTranslation()
     const api = useApi()
     const [executing, setExecuting] = useState(false)
+    // `action.label` is an addon-contributed i18n key; its locale bundle loads
+    // asynchronously, so translate at render (defaultValue keeps an already
+    // localized label unchanged).
+    const label = t(action.label, { defaultValue: action.label })
 
     const execute = async () => {
         setExecuting(true)
@@ -244,10 +248,10 @@ function ConfirmActionDialog({ open, onOpenChange, action, model, record, endpoi
                 <AlertDialogHeader>
                     <AlertDialogTitle className="flex items-center gap-2">
                         <DynamicIcon name={action.icon} className="h-5 w-5" />
-                        {action.label}
+                        {label}
                     </AlertDialogTitle>
                     <AlertDialogDescription>
-                        {action.confirmMessage || `${action.label}?`}
+                        {action.confirmMessage || `${label}?`}
                     </AlertDialogDescription>
                 </AlertDialogHeader>
                 <AlertDialogFooter>
@@ -258,7 +262,7 @@ function ConfirmActionDialog({ open, onOpenChange, action, model, record, endpoi
                         style={action.color ? { backgroundColor: action.color } : undefined}
                     >
                         {executing ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <DynamicIcon name={action.icon} className="mr-2 h-4 w-4" />}
-                        {action.label}
+                        {label}
                     </AlertDialogAction>
                 </AlertDialogFooter>
             </AlertDialogContent>
@@ -268,6 +272,10 @@ function ConfirmActionDialog({ open, onOpenChange, action, model, record, endpoi
 
 function GenericActionModal({ open, onOpenChange, action, model, record, endpoint, onSuccess }: ActionModalProps) {
     const { t } = useTranslation()
+    // Addon-contributed labels (action + fields) are i18n keys whose locale
+    // bundle loads asynchronously; translate at render so they don't render raw.
+    // defaultValue keeps an already-localized string unchanged.
+    const tl = (s: string) => t(s, { defaultValue: s })
     const api = useApi()
     const [formData, setFormData] = useState<Record<string, any>>({})
     const [executing, setExecuting] = useState(false)
@@ -326,13 +334,13 @@ function GenericActionModal({ open, onOpenChange, action, model, record, endpoin
                 if (isLineItemsField(field)) {
                     const rows = formData[field.key]
                     if (!Array.isArray(rows) || rows.length === 0) {
-                        toast.error(`${field.label} requiere al menos un renglón`)
+                        toast.error(`${tl(field.label)} requiere al menos un renglón`)
                         return
                     }
                     continue
                 }
                 if (!formData[field.key] && formData[field.key] !== false) {
-                    toast.error(`${field.label} es requerido`)
+                    toast.error(`${tl(field.label)} es requerido`)
                     return
                 }
             }
@@ -383,44 +391,43 @@ function GenericActionModal({ open, onOpenChange, action, model, record, endpoin
                 is inline (guaranteed) since an arbitrary max-h-[90vh] class may be
                 dropped by a consuming app's Tailwind scan. */}
             <DialogContent
-                className={'flex max-h-[90vh] flex-col overflow-hidden ' + (widthPx ? '' : 'sm:max-w-lg')}
+                className={'flex max-h-[90vh] flex-col overflow-hidden ' + (widthPx ? '' : 'sm:max-w-xl')}
                 style={{ maxHeight: '90vh', ...(widthPx ? { maxWidth: widthPx, width: '95vw' } : {}) }}
             >
                 <DialogHeader className="shrink-0">
                     <DialogTitle className="flex items-center gap-2">
                         <DynamicIcon name={action.icon} className="h-5 w-5" />
-                        {action.label}
+                        {tl(action.label)}
                     </DialogTitle>
                     {action.confirmMessage && <DialogDescription>{action.confirmMessage}</DialogDescription>}
                 </DialogHeader>
-                {/* Scrollable body. Responsive 2-column grid: scalar fields
-                    (journal, date, reference) flow side-by-side instead of one
-                    tall vertical stack; line-items grids and textareas span the
-                    full width. Mirrors DynamicForm — driven only by field shape. */}
-                <div className="-mx-1 grid min-h-0 flex-1 gap-4 overflow-y-auto px-1 py-4 sm:grid-cols-2">
-                    {action.fields?.map((field) => {
-                        const fullWidth =
-                            isLineItemsField(field) ||
-                            resolveWidget(field) === 'textarea' ||
-                            resolveWidget(field) === 'richtext'
-                        return (
-                            <div
-                                key={field.key}
-                                className={'grid gap-2 ' + (fullWidth ? 'sm:col-span-2' : '')}
-                            >
-                                <Label htmlFor={field.key}>
-                                    {field.label}
-                                    {field.required && <span className="text-red-500 ml-1">*</span>}
-                                </Label>
-                                {renderField(field, formData[field.key], (v: any) => updateField(field.key, v), formData)}
-                            </div>
-                        )
-                    })}
-                    {relations.length > 0 && (
-                        <div className="sm:col-span-2">
-                            <DynamicRelations record={record} relations={relations} />
-                        </div>
-                    )}
+                {/* Scrollable body. The shared FieldGrid lays scalar fields out
+                    in two responsive columns (single column on phones); line-items
+                    grids and textareas span the full width. `min-w-0` on each cell
+                    (in FieldCell) keeps a long select/input value from blowing the
+                    grid past the dialog and spawning a horizontal scrollbar. */}
+                <div className="-mx-1 min-h-0 flex-1 overflow-y-auto px-1 py-4">
+                    <FieldGrid>
+                        {action.fields?.map((field) => {
+                            const fullWidth =
+                                isLineItemsField(field) ||
+                                resolveWidget(field) === 'textarea' ||
+                                resolveWidget(field) === 'richtext'
+                            return (
+                                <FieldCell key={field.key} fullWidth={fullWidth}>
+                                    <FieldLabel htmlFor={field.key} required={field.required}>
+                                        {tl(field.label)}
+                                    </FieldLabel>
+                                    {renderField(field, formData[field.key], (v: any) => updateField(field.key, v), formData)}
+                                </FieldCell>
+                            )
+                        })}
+                        {relations.length > 0 && (
+                            <FieldCell fullWidth>
+                                <DynamicRelations record={record} relations={relations} />
+                            </FieldCell>
+                        )}
+                    </FieldGrid>
                 </div>
                 <DialogFooter className="shrink-0">
                     <Button variant="outline" onClick={() => onOpenChange(false)} disabled={executing}>
@@ -432,7 +439,7 @@ function GenericActionModal({ open, onOpenChange, action, model, record, endpoin
                         style={action.color ? { backgroundColor: action.color, color: 'white' } : undefined}
                     >
                         {executing ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <DynamicIcon name={action.icon} className="mr-2 h-4 w-4" />}
-                        {action.label}
+                        {tl(action.label)}
                     </Button>
                 </DialogFooter>
             </DialogContent>