ywana-core8 0.1.79 → 0.1.80

package/src/html/table-export-utils.js

@@ -0,0 +1,483 @@
+/**
+ * Utilidades de exportación para DataTable2
+ * Proporciona funciones para exportar datos a diferentes formatos
+ */
+
+/**
+ * Detectar entorno de ejecución
+ */
+const detectEnvironment = () => {
+    const isInIframe = window !== window.top
+    const isPreviewJs = window.location.href.includes('previewjs') ||
+                       window.location.href.includes('localhost:3140')
+    const isLocalhost = window.location.hostname === 'localhost' ||
+                       window.location.hostname === '127.0.0.1'
+
+    return {
+        isInIframe,
+        isPreviewJs,
+        isLocalhost,
+        isRestricted: isInIframe || isPreviewJs
+    }
+}
+
+/**
+ * Exportar datos a CSV
+ */
+export const exportToCSV = (data, columns, filename = 'table-export.csv') => {
+    try {
+        const env = detectEnvironment()
+
+        // Crear headers
+        const headers = columns.map(col => col.label || col.id)
+
+        // Crear filas de datos
+        const rows = data.map(row =>
+            columns.map(col => {
+                let value = row[col.id]
+
+                // Manejar valores especiales
+                if (value === null || value === undefined) {
+                    value = ''
+                } else if (typeof value === 'object') {
+                    value = JSON.stringify(value)
+                } else if (typeof value === 'string') {
+                    // Escapar comillas dobles
+                    value = `"${value.replace(/"/g, '""')}"`
+                } else {
+                    value = String(value)
+                }
+
+                return value
+            })
+        )
+
+        // Combinar headers y datos
+        const csvContent = [
+            headers.join(','),
+            ...rows.map(row => row.join(','))
+        ].join('\n')
+
+        // Crear y descargar archivo
+        downloadFile(csvContent, filename, 'text/csv;charset=utf-8;')
+
+        const message = env.isRestricted
+            ? `Exportado ${data.length} filas a CSV (se abrirá en nueva ventana)`
+            : `Exportado ${data.length} filas a CSV`
+
+        return { success: true, message }
+    } catch (error) {
+        console.error('Error exporting to CSV:', error)
+        return { success: false, message: 'Error al exportar a CSV' }
+    }
+}
+
+/**
+ * Exportar datos a JSON
+ */
+export const exportToJSON = (data, columns, filename = 'table-export.json') => {
+    try {
+        const env = detectEnvironment()
+
+        // Filtrar solo las columnas visibles
+        const filteredData = data.map(row => {
+            const filteredRow = {}
+            columns.forEach(col => {
+                filteredRow[col.id] = row[col.id]
+            })
+            return filteredRow
+        })
+
+        const jsonContent = JSON.stringify(filteredData, null, 2)
+
+        downloadFile(jsonContent, filename, 'application/json;charset=utf-8;')
+
+        const message = env.isRestricted
+            ? `Exportado ${data.length} filas a JSON (se abrirá en nueva ventana)`
+            : `Exportado ${data.length} filas a JSON`
+
+        return { success: true, message }
+    } catch (error) {
+        console.error('Error exporting to JSON:', error)
+        return { success: false, message: 'Error al exportar a JSON' }
+    }
+}
+
+/**
+ * Exportar datos a Excel (formato TSV compatible)
+ */
+export const exportToExcel = (data, columns, filename = 'table-export.xlsx') => {
+    try {
+        // Crear headers
+        const headers = columns.map(col => col.label || col.id)
+        
+        // Crear filas de datos (usando tabulaciones para Excel)
+        const rows = data.map(row => 
+            columns.map(col => {
+                let value = row[col.id]
+                
+                if (value === null || value === undefined) {
+                    value = ''
+                } else if (typeof value === 'object') {
+                    value = JSON.stringify(value)
+                } else {
+                    value = String(value)
+                }
+                
+                return value
+            })
+        )
+        
+        // Combinar con tabulaciones (TSV)
+        const tsvContent = [
+            headers.join('\t'),
+            ...rows.map(row => row.join('\t'))
+        ].join('\n')
+        
+        // Usar extensión .xls para compatibilidad
+        const excelFilename = filename.replace('.xlsx', '.xls')
+        downloadFile(tsvContent, excelFilename, 'application/vnd.ms-excel;charset=utf-8;')
+        
+        return { success: true, message: `Exportado ${data.length} filas a Excel` }
+    } catch (error) {
+        console.error('Error exporting to Excel:', error)
+        return { success: false, message: 'Error al exportar a Excel' }
+    }
+}
+
+/**
+ * Exportar datos a XML
+ */
+export const exportToXML = (data, columns, filename = 'table-export.xml') => {
+    try {
+        let xmlContent = '<?xml version="1.0" encoding="UTF-8"?>\n<data>\n'
+        
+        data.forEach(row => {
+            xmlContent += '  <row>\n'
+            columns.forEach(col => {
+                const value = row[col.id]
+                const escapedValue = escapeXML(value)
+                xmlContent += `    <${col.id}>${escapedValue}</${col.id}>\n`
+            })
+            xmlContent += '  </row>\n'
+        })
+        
+        xmlContent += '</data>'
+        
+        downloadFile(xmlContent, filename, 'application/xml;charset=utf-8;')
+        
+        return { success: true, message: `Exportado ${data.length} filas a XML` }
+    } catch (error) {
+        console.error('Error exporting to XML:', error)
+        return { success: false, message: 'Error al exportar a XML' }
+    }
+}
+
+/**
+ * Exportar solo filas seleccionadas
+ */
+export const exportSelected = (data, columns, selectedRows, format = 'csv') => {
+    const selectedData = data.filter(row => selectedRows.includes(row.id))
+    
+    if (selectedData.length === 0) {
+        return { success: false, message: 'No hay filas seleccionadas para exportar' }
+    }
+    
+    const filename = `selected-rows.${format}`
+    
+    switch (format) {
+        case 'csv':
+            return exportToCSV(selectedData, columns, filename)
+        case 'json':
+            return exportToJSON(selectedData, columns, filename)
+        case 'excel':
+            return exportToExcel(selectedData, columns, filename)
+        case 'xml':
+            return exportToXML(selectedData, columns, filename)
+        default:
+            return { success: false, message: 'Formato no soportado' }
+    }
+}
+
+/**
+ * Función auxiliar para descargar archivos
+ * Maneja diferentes entornos incluyendo preview.js y iframes
+ */
+const downloadFile = (content, filename, mimeType) => {
+    try {
+        const blob = new Blob([content], { type: mimeType })
+
+        // Método 1: Intentar descarga directa (funciona en la mayoría de navegadores)
+        if (window.navigator && window.navigator.msSaveOrOpenBlob) {
+            // IE/Edge
+            window.navigator.msSaveOrOpenBlob(blob, filename)
+            return
+        }
+
+        // Método 2: Crear URL y link (estándar)
+        const url = URL.createObjectURL(blob)
+
+        // Verificar si estamos en un iframe o entorno restringido
+        const isInIframe = window !== window.top
+        const isPreviewJs = window.location.href.includes('previewjs') ||
+                           window.location.href.includes('localhost:3140')
+
+        if (isInIframe || isPreviewJs) {
+            // Método alternativo para entornos restringidos
+            downloadFileAlternative(content, filename, mimeType, blob, url)
+        } else {
+            // Método estándar
+            downloadFileStandard(url, filename)
+        }
+
+        // Limpiar URL después de un tiempo
+        setTimeout(() => {
+            try {
+                URL.revokeObjectURL(url)
+            } catch (e) {
+                // Ignorar errores de limpieza
+            }
+        }, 2000)
+
+    } catch (error) {
+        console.error('Error downloading file:', error)
+        // Fallback: mostrar contenido en nueva ventana
+        showContentInNewWindow(content, filename, mimeType)
+    }
+}
+
+/**
+ * Descarga estándar con link
+ */
+const downloadFileStandard = (url, filename) => {
+    const link = document.createElement('a')
+    link.href = url
+    link.download = filename
+    link.style.display = 'none'
+    link.target = '_blank'
+    link.rel = 'noopener noreferrer'
+
+    document.body.appendChild(link)
+
+    // Usar setTimeout para asegurar que el elemento esté en el DOM
+    setTimeout(() => {
+        try {
+            link.click()
+        } catch (e) {
+            // Si click() falla, intentar dispatchEvent
+            const event = new MouseEvent('click', {
+                view: window,
+                bubbles: true,
+                cancelable: true
+            })
+            link.dispatchEvent(event)
+        }
+
+        // Remover el link después de un breve delay
+        setTimeout(() => {
+            if (link.parentNode) {
+                document.body.removeChild(link)
+            }
+        }, 100)
+    }, 10)
+}
+
+/**
+ * Método alternativo para entornos restringidos
+ */
+const downloadFileAlternative = (content, filename, mimeType, blob, url) => {
+    try {
+        // Método 1: Intentar abrir en nueva ventana con data URL
+        const dataUrl = `data:${mimeType};charset=utf-8,${encodeURIComponent(content)}`
+
+        // Verificar tamaño del contenido (data URLs tienen límites)
+        if (content.length < 1000000) { // 1MB límite aproximado
+            const newWindow = window.open(dataUrl, '_blank')
+            if (newWindow) {
+                // Sugerir al usuario que guarde el archivo
+                setTimeout(() => {
+                    try {
+                        newWindow.document.title = `Descargar ${filename}`
+                        const instruction = newWindow.document.createElement('div')
+                        instruction.innerHTML = `
+                            <div style="padding: 20px; font-family: Arial, sans-serif;">
+                                <h3>Archivo listo para descargar</h3>
+                                <p>Nombre: <strong>${filename}</strong></p>
+                                <p>Para guardar: <kbd>Ctrl+S</kbd> (Windows) o <kbd>Cmd+S</kbd> (Mac)</p>
+                                <button onclick="window.close()" style="padding: 10px 20px; margin-top: 10px;">Cerrar</button>
+                            </div>
+                        `
+                        newWindow.document.body.insertBefore(instruction, newWindow.document.body.firstChild)
+                    } catch (e) {
+                        // Ignorar errores de manipulación del DOM en la nueva ventana
+                    }
+                }, 100)
+                return
+            }
+        }
+
+        // Método 2: Copiar al portapapeles como fallback
+        copyToClipboard(content, filename)
+
+    } catch (error) {
+        console.error('Error in alternative download:', error)
+        // Último recurso: mostrar en consola
+        console.log(`Contenido del archivo ${filename}:`, content)
+        alert(`No se pudo descargar el archivo. El contenido se ha mostrado en la consola del navegador.`)
+    }
+}
+
+/**
+ * Mostrar contenido en nueva ventana como último recurso
+ */
+const showContentInNewWindow = (content, filename, mimeType) => {
+    try {
+        const newWindow = window.open('', '_blank')
+        if (newWindow) {
+            newWindow.document.write(`
+                <html>
+                    <head>
+                        <title>${filename}</title>
+                        <style>
+                            body { font-family: monospace; padding: 20px; }
+                            .header { background: #f0f0f0; padding: 10px; margin-bottom: 20px; }
+                            .content { white-space: pre-wrap; }
+                        </style>
+                    </head>
+                    <body>
+                        <div class="header">
+                            <h3>Archivo: ${filename}</h3>
+                            <p>Tipo: ${mimeType}</p>
+                            <p>Para guardar: Ctrl+S (Windows) o Cmd+S (Mac)</p>
+                        </div>
+                        <div class="content">${content.replace(/</g, '&lt;').replace(/>/g, '&gt;')}</div>
+                    </body>
+                </html>
+            `)
+            newWindow.document.close()
+        }
+    } catch (error) {
+        console.error('Error showing content in new window:', error)
+        alert('No se pudo descargar el archivo. Verifique la consola del navegador.')
+    }
+}
+
+/**
+ * Copiar contenido al portapapeles
+ */
+const copyToClipboard = async (content, filename) => {
+    try {
+        if (navigator.clipboard && navigator.clipboard.writeText) {
+            await navigator.clipboard.writeText(content)
+            alert(`Contenido del archivo "${filename}" copiado al portapapeles. Puedes pegarlo en un editor de texto y guardarlo.`)
+        } else {
+            // Fallback para navegadores sin Clipboard API
+            const textArea = document.createElement('textarea')
+            textArea.value = content
+            textArea.style.position = 'fixed'
+            textArea.style.opacity = '0'
+            document.body.appendChild(textArea)
+            textArea.select()
+
+            try {
+                document.execCommand('copy')
+                alert(`Contenido del archivo "${filename}" copiado al portapapeles.`)
+            } catch (e) {
+                console.log('Fallback copy failed:', e)
+            }
+
+            document.body.removeChild(textArea)
+        }
+    } catch (error) {
+        console.error('Error copying to clipboard:', error)
+    }
+}
+
+/**
+ * Función auxiliar para escapar XML
+ */
+const escapeXML = (value) => {
+    if (value === null || value === undefined) {
+        return ''
+    }
+    
+    return String(value)
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;')
+}
+
+/**
+ * Obtener estadísticas de exportación
+ */
+export const getExportStats = (data, columns) => {
+    return {
+        totalRows: data.length,
+        totalColumns: columns.length,
+        visibleColumns: columns.filter(col => !col.hidden).length,
+        estimatedSize: {
+            csv: Math.round((data.length * columns.length * 10) / 1024) + ' KB',
+            json: Math.round((JSON.stringify(data).length) / 1024) + ' KB'
+        }
+    }
+}
+
+/**
+ * Validar datos antes de exportar
+ */
+export const validateExportData = (data, columns) => {
+    const errors = []
+    
+    if (!data || data.length === 0) {
+        errors.push('No hay datos para exportar')
+    }
+    
+    if (!columns || columns.length === 0) {
+        errors.push('No hay columnas definidas')
+    }
+    
+    return {
+        isValid: errors.length === 0,
+        errors
+    }
+}
+
+/**
+ * Formatos de exportación disponibles
+ */
+export const exportFormats = {
+    csv: {
+        id: 'csv',
+        label: 'CSV',
+        description: 'Valores separados por comas',
+        icon: 'description',
+        mimeType: 'text/csv',
+        extension: '.csv'
+    },
+    excel: {
+        id: 'excel',
+        label: 'Excel',
+        description: 'Hoja de cálculo de Microsoft Excel',
+        icon: 'table_chart',
+        mimeType: 'application/vnd.ms-excel',
+        extension: '.xls'
+    },
+    json: {
+        id: 'json',
+        label: 'JSON',
+        description: 'JavaScript Object Notation',
+        icon: 'code',
+        mimeType: 'application/json',
+        extension: '.json'
+    },
+    xml: {
+        id: 'xml',
+        label: 'XML',
+        description: 'Extensible Markup Language',
+        icon: 'code',
+        mimeType: 'application/xml',
+        extension: '.xml'
+    }
+}