@asteby/metacore-runtime-react 29.2.11 → 29.2.12

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @asteby/metacore-runtime-react
 
+## 29.2.12
+
+### Patch Changes
+
+- 0150e2f: ExportDialog localizes labels (core text + manifest i18n keys) and sends column_labels so CSV headers match the UI.
+
 ## 29.2.11
 
 ### Patch Changes

package/dist/dialogs/export.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"export.d.ts","sourceRoot":"","sources":["../../src/dialogs/export.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AAG7C,UAAU,iBAAiB;IACvB,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,aAAa,CAAA;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACpC,gBAAgB,CAAC,EAAE,OAAO,CAAA;CAC7B;AAED,wBAAgB,YAAY,CAAC,EACzB,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,QAAQ,EACR,cAAc,EACd,gBAAgB,GACnB,EAAE,iBAAiB,+BA0SnB"}
+{"version":3,"file":"export.d.ts","sourceRoot":"","sources":["../../src/dialogs/export.tsx"],"names":[],"mappings":"AA8BA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AAG7C,UAAU,iBAAiB;IACvB,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,aAAa,CAAA;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACpC,gBAAgB,CAAC,EAAE,OAAO,CAAA;CAC7B;AAED,wBAAgB,YAAY,CAAC,EACzB,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,QAAQ,EACR,cAAc,EACd,gBAAgB,GACnB,EAAE,iBAAiB,+BAwUnB"}

package/dist/dialogs/export.js

@@ -1,8 +1,17 @@
 import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 // ExportDialog — lets users pick format (csv/json) + columns and kicks off
 // either a sync download or an async export job (polled via /exports/:id/status).
-// Axios-like client is provided by <ApiProvider>.
-import { useState, useEffect, useCallback } from 'react';
+//
+// Labels work for BOTH host styles:
+//   - Core DefineTable with human text ("Especialidades") → shown as-is via
+//     t(label, { defaultValue: label })
+//   - Manifest i18n keys ("purchases.field.state") → resolved by the host i18n
+//     bundle the same way DynamicTable already translates column headers
+// The localized labels are also sent to the API as `column_labels` so the CSV
+// headers match what the user sees in the dialog (backend may not have the
+// addon locale bundles that only live on the frontend).
+import { useState, useEffect, useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, Button, Label, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, } from '@asteby/metacore-ui/primitives';
 import { Progress, RadioGroup, RadioGroupItem } from './_primitives';
 import { toast } from 'sonner';
@@ -10,6 +19,7 @@ import { Download, ChevronDown, Loader2 } from 'lucide-react';
 import { useApi } from '../api-context';
 export function ExportDialog({ open, onOpenChange, model, metadata, currentFilters, hasActiveFilters, }) {
     const api = useApi();
+    const { t, i18n } = useTranslation();
     const [format, setFormat] = useState('csv');
     const [exportAll, setExportAll] = useState(false);
     const [selectedColumns, setSelectedColumns] = useState([]);
@@ -17,11 +27,22 @@ export function ExportDialog({ open, onOpenChange, model, metadata, currentFilte
     const [exporting, setExporting] = useState(false);
     const [progress, setProgress] = useState(0);
     const [asyncJobId, setAsyncJobId] = useState(null);
+    const tr = useCallback((label, fallback) => {
+        const raw = (label && label.trim()) || fallback || '';
+        if (!raw)
+            return fallback || '';
+        return t(raw, { defaultValue: raw });
+    }, [t]);
+    const title = useMemo(() => tr(metadata.titleKey || metadata.title, metadata.title || model), [metadata, model, tr]);
+    const visibleColumns = useMemo(() => (metadata?.columns?.filter((col) => !col.hidden) ?? []).map((col) => ({
+        ...col,
+        displayLabel: tr(col.label, col.key),
+    })), [metadata, tr]);
     useEffect(() => {
         if (open && metadata?.columns) {
             setSelectedColumns(metadata.columns
-                .filter(col => !col.hidden)
-                .map(col => col.key));
+                .filter((col) => !col.hidden)
+                .map((col) => col.key));
             setFormat('csv');
             setExportAll(false);
             setColumnsOpen(false);
@@ -36,16 +57,14 @@ export function ExportDialog({ open, onOpenChange, model, metadata, currentFilte
             : [...prev, key]);
     }, []);
     const toggleAllColumns = useCallback(() => {
-        const visibleKeys = metadata.columns
-            .filter(col => !col.hidden)
-            .map(col => col.key);
+        const visibleKeys = visibleColumns.map((col) => col.key);
         if (selectedColumns.length === visibleKeys.length) {
             setSelectedColumns([]);
         }
         else {
             setSelectedColumns(visibleKeys);
         }
-    }, [metadata, selectedColumns]);
+    }, [visibleColumns, selectedColumns]);
     useEffect(() => {
         if (!asyncJobId)
             return;
@@ -99,9 +118,19 @@ export function ExportDialog({ open, onOpenChange, model, metadata, currentFilte
         setExporting(true);
         setProgress(0);
         try {
+            const columnLabels = {};
+            for (const col of visibleColumns) {
+                if (selectedColumns.includes(col.key)) {
+                    columnLabels[col.key] = col.displayLabel;
+                }
+            }
             const params = {
                 format,
                 columns: selectedColumns.join(','),
+                // Localized headers so CSV matches the dialog (core text OR
+                // manifest i18n keys resolved by the host frontend).
+                column_labels: JSON.stringify(columnLabels),
+                lang: i18n.language || 'es',
             };
             if (!exportAll && currentFilters) {
                 Object.entries(currentFilters).forEach(([key, value]) => {
@@ -141,6 +170,5 @@ export function ExportDialog({ open, onOpenChange, model, metadata, currentFilte
             toast.error('Error al exportar los datos');
         }
     };
-    const visibleColumns = metadata?.columns?.filter(col => !col.hidden) ?? [];
-    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "sm:max-w-md max-h-[90vh] flex flex-col p-0 gap-0 overflow-hidden", children: [_jsxs(DialogHeader, { className: "p-6 pb-4 border-b shrink-0", children: [_jsxs(DialogTitle, { children: ["Exportar ", metadata.title] }), _jsx(DialogDescription, { children: "Selecciona el formato y las columnas a exportar." })] }), _jsx("div", { className: "flex-1 overflow-y-auto p-6 space-y-6", children: exporting ? (_jsxs("div", { className: "space-y-4", children: [_jsx("p", { className: "text-sm text-muted-foreground text-center", children: "Exportando datos..." }), _jsx(Progress, { value: progress }), _jsx("p", { className: "text-xs text-muted-foreground text-center", children: progress > 0 ? `${Math.round(progress)}%` : 'Preparando...' })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "space-y-3", children: [_jsx(Label, { className: "text-sm font-medium", children: "Formato" }), _jsxs(RadioGroup, { value: format, onValueChange: (val) => setFormat(val), className: "flex gap-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(RadioGroupItem, { value: "csv", id: "format-csv" }), _jsx(Label, { htmlFor: "format-csv", className: "font-normal cursor-pointer", children: "CSV" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(RadioGroupItem, { value: "json", id: "format-json" }), _jsx(Label, { htmlFor: "format-json", className: "font-normal cursor-pointer", children: "JSON" })] })] })] }), hasActiveFilters && (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: "export-all", checked: exportAll, onCheckedChange: (checked) => setExportAll(checked === true) }), _jsx(Label, { htmlFor: "export-all", className: "font-normal cursor-pointer text-sm", children: "Exportar todos los registros (ignorar filtros)" })] })), _jsxs(Collapsible, { open: columnsOpen, onOpenChange: setColumnsOpen, children: [_jsx(CollapsibleTrigger, { asChild: true, children: _jsxs(Button, { variant: "ghost", size: "sm", className: "w-full justify-between px-0 hover:bg-transparent", children: [_jsxs("span", { className: "text-sm font-medium", children: ["Columnas (", selectedColumns.length, "/", visibleColumns.length, ")"] }), _jsx(ChevronDown, { className: `h-4 w-4 transition-transform ${columnsOpen ? 'rotate-180' : ''}` })] }) }), _jsxs(CollapsibleContent, { className: "space-y-2 pt-2", children: [_jsxs("div", { className: "flex items-center gap-2 pb-2 border-b", children: [_jsx(Checkbox, { id: "select-all-columns", checked: selectedColumns.length === visibleColumns.length, onCheckedChange: toggleAllColumns }), _jsx(Label, { htmlFor: "select-all-columns", className: "font-normal cursor-pointer text-sm", children: "Seleccionar todas" })] }), _jsx("div", { className: "grid grid-cols-2 gap-2 max-h-48 overflow-y-auto", children: visibleColumns.map(col => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: `col-${col.key}`, checked: selectedColumns.includes(col.key), onCheckedChange: () => toggleColumn(col.key) }), _jsx(Label, { htmlFor: `col-${col.key}`, className: "font-normal cursor-pointer text-sm truncate", children: col.label })] }, col.key))) })] })] })] })) }), _jsxs(DialogFooter, { className: "p-4 border-t shrink-0", children: [_jsx(Button, { variant: "outline", onClick: () => onOpenChange(false), disabled: exporting, children: "Cancelar" }), !exporting && (_jsxs(Button, { onClick: handleExport, disabled: selectedColumns.length === 0, children: [_jsx(Download, { className: "h-4 w-4 mr-1" }), "Exportar"] })), exporting && (_jsxs(Button, { disabled: true, children: [_jsx(Loader2, { className: "h-4 w-4 mr-1 animate-spin" }), "Exportando..."] }))] })] }) }));
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "sm:max-w-md max-h-[90vh] flex flex-col p-0 gap-0 overflow-hidden", children: [_jsxs(DialogHeader, { className: "p-6 pb-4 border-b shrink-0", children: [_jsxs(DialogTitle, { children: ["Exportar ", title] }), _jsx(DialogDescription, { children: "Selecciona el formato y las columnas a exportar." })] }), _jsx("div", { className: "flex-1 overflow-y-auto p-6 space-y-6", children: exporting ? (_jsxs("div", { className: "space-y-4", children: [_jsx("p", { className: "text-sm text-muted-foreground text-center", children: "Exportando datos..." }), _jsx(Progress, { value: progress }), _jsx("p", { className: "text-xs text-muted-foreground text-center", children: progress > 0 ? `${Math.round(progress)}%` : 'Preparando...' })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "space-y-3", children: [_jsx(Label, { className: "text-sm font-medium", children: "Formato" }), _jsxs(RadioGroup, { value: format, onValueChange: (val) => setFormat(val), className: "flex gap-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(RadioGroupItem, { value: "csv", id: "format-csv" }), _jsx(Label, { htmlFor: "format-csv", className: "font-normal cursor-pointer", children: "CSV" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(RadioGroupItem, { value: "json", id: "format-json" }), _jsx(Label, { htmlFor: "format-json", className: "font-normal cursor-pointer", children: "JSON" })] })] })] }), hasActiveFilters && (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: "export-all", checked: exportAll, onCheckedChange: (checked) => setExportAll(checked === true) }), _jsx(Label, { htmlFor: "export-all", className: "font-normal cursor-pointer text-sm", children: "Exportar todos los registros (ignorar filtros)" })] })), _jsxs(Collapsible, { open: columnsOpen, onOpenChange: setColumnsOpen, children: [_jsx(CollapsibleTrigger, { asChild: true, children: _jsxs(Button, { variant: "ghost", size: "sm", className: "w-full justify-between px-0 hover:bg-transparent", children: [_jsxs("span", { className: "text-sm font-medium", children: ["Columnas (", selectedColumns.length, "/", visibleColumns.length, ")"] }), _jsx(ChevronDown, { className: `h-4 w-4 transition-transform ${columnsOpen ? 'rotate-180' : ''}` })] }) }), _jsxs(CollapsibleContent, { className: "space-y-2 pt-2", children: [_jsxs("div", { className: "flex items-center gap-2 pb-2 border-b", children: [_jsx(Checkbox, { id: "select-all-columns", checked: selectedColumns.length === visibleColumns.length, onCheckedChange: toggleAllColumns }), _jsx(Label, { htmlFor: "select-all-columns", className: "font-normal cursor-pointer text-sm", children: "Seleccionar todas" })] }), _jsx("div", { className: "grid grid-cols-2 gap-2 max-h-48 overflow-y-auto", children: visibleColumns.map(col => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: `col-${col.key}`, checked: selectedColumns.includes(col.key), onCheckedChange: () => toggleColumn(col.key) }), _jsx(Label, { htmlFor: `col-${col.key}`, className: "font-normal cursor-pointer text-sm truncate", children: col.displayLabel })] }, col.key))) })] })] })] })) }), _jsxs(DialogFooter, { className: "p-4 border-t shrink-0", children: [_jsx(Button, { variant: "outline", onClick: () => onOpenChange(false), disabled: exporting, children: "Cancelar" }), !exporting && (_jsxs(Button, { onClick: handleExport, disabled: selectedColumns.length === 0, children: [_jsx(Download, { className: "h-4 w-4 mr-1" }), "Exportar"] })), exporting && (_jsxs(Button, { disabled: true, children: [_jsx(Loader2, { className: "h-4 w-4 mr-1 animate-spin" }), "Exportando..."] }))] })] }) }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asteby/metacore-runtime-react",
-  "version": "29.2.11",
+  "version": "29.2.12",
   "description": "React runtime for metacore hosts — renders addon contributions dynamically",
   "repository": {
     "type": "git",

package/src/dialogs/export.tsx

@@ -1,7 +1,16 @@
 // ExportDialog — lets users pick format (csv/json) + columns and kicks off
 // either a sync download or an async export job (polled via /exports/:id/status).
-// Axios-like client is provided by <ApiProvider>.
-import { useState, useEffect, useCallback } from 'react'
+//
+// Labels work for BOTH host styles:
+//   - Core DefineTable with human text ("Especialidades") → shown as-is via
+//     t(label, { defaultValue: label })
+//   - Manifest i18n keys ("purchases.field.state") → resolved by the host i18n
+//     bundle the same way DynamicTable already translates column headers
+// The localized labels are also sent to the API as `column_labels` so the CSV
+// headers match what the user sees in the dialog (backend may not have the
+// addon locale bundles that only live on the frontend).
+import { useState, useEffect, useCallback, useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
 import {
     Dialog,
     DialogContent,
@@ -40,6 +49,7 @@ export function ExportDialog({
     hasActiveFilters,
 }: ExportDialogProps) {
     const api = useApi()
+    const { t, i18n } = useTranslation()
     const [format, setFormat] = useState<'csv' | 'json'>('csv')
     const [exportAll, setExportAll] = useState(false)
     const [selectedColumns, setSelectedColumns] = useState<string[]>([])
@@ -48,12 +58,34 @@ export function ExportDialog({
     const [progress, setProgress] = useState(0)
     const [asyncJobId, setAsyncJobId] = useState<string | null>(null)
 
+    const tr = useCallback(
+        (label?: string, fallback?: string) => {
+            const raw = (label && label.trim()) || fallback || ''
+            if (!raw) return fallback || ''
+            return t(raw, { defaultValue: raw })
+        },
+        [t],
+    )
+
+    const title = useMemo(
+        () => tr((metadata as { titleKey?: string }).titleKey || metadata.title, metadata.title || model),
+        [metadata, model, tr],
+    )
+
+    const visibleColumns = useMemo(
+        () =>
+            (metadata?.columns?.filter((col) => !col.hidden) ?? []).map((col) => ({
+                ...col,
+                displayLabel: tr(col.label, col.key),
+            })),
+        [metadata, tr],
+    )
     useEffect(() => {
         if (open && metadata?.columns) {
             setSelectedColumns(
                 metadata.columns
-                    .filter(col => !col.hidden)
-                    .map(col => col.key)
+                    .filter((col) => !col.hidden)
+                    .map((col) => col.key),
             )
             setFormat('csv')
             setExportAll(false)
@@ -68,21 +100,19 @@ export function ExportDialog({
         setSelectedColumns((prev: string[]) =>
             prev.includes(key)
                 ? prev.filter((k: string) => k !== key)
-                : [...prev, key]
+                : [...prev, key],
         )
     }, [])
 
     const toggleAllColumns = useCallback(() => {
-        const visibleKeys = metadata.columns
-            .filter(col => !col.hidden)
-            .map(col => col.key)
+        const visibleKeys = visibleColumns.map((col) => col.key)
 
         if (selectedColumns.length === visibleKeys.length) {
             setSelectedColumns([])
         } else {
             setSelectedColumns(visibleKeys)
         }
-    }, [metadata, selectedColumns])
+    }, [visibleColumns, selectedColumns])
 
     useEffect(() => {
         if (!asyncJobId) return
@@ -145,9 +175,20 @@ export function ExportDialog({
         setProgress(0)
 
         try {
+            const columnLabels: Record<string, string> = {}
+            for (const col of visibleColumns) {
+                if (selectedColumns.includes(col.key)) {
+                    columnLabels[col.key] = col.displayLabel
+                }
+            }
+
             const params: Record<string, any> = {
                 format,
                 columns: selectedColumns.join(','),
+                // Localized headers so CSV matches the dialog (core text OR
+                // manifest i18n keys resolved by the host frontend).
+                column_labels: JSON.stringify(columnLabels),
+                lang: i18n.language || 'es',
             }
 
             if (!exportAll && currentFilters) {
@@ -190,13 +231,11 @@ export function ExportDialog({
         }
     }
 
-    const visibleColumns = metadata?.columns?.filter(col => !col.hidden) ?? []
-
     return (
         <Dialog open={open} onOpenChange={onOpenChange}>
             <DialogContent className="sm:max-w-md max-h-[90vh] flex flex-col p-0 gap-0 overflow-hidden">
                 <DialogHeader className="p-6 pb-4 border-b shrink-0">
-                    <DialogTitle>Exportar {metadata.title}</DialogTitle>
+                    <DialogTitle>Exportar {title}</DialogTitle>
                     <DialogDescription>
                         Selecciona el formato y las columnas a exportar.
                     </DialogDescription>
@@ -301,7 +340,7 @@ export function ExportDialog({
                                                     htmlFor={`col-${col.key}`}
                                                     className="font-normal cursor-pointer text-sm truncate"
                                                 >
-                                                    {col.label}
+                                                    {col.displayLabel}
                                                 </Label>
                                             </div>
                                         ))}