@archbase/components 3.0.0

package/src/datagrid/modals/export-data.tsx

@@ -0,0 +1,183 @@
+// @ts-nocheck
+import { saveAs } from 'file-saver';
+import { utils, write } from 'xlsx';
+import { format } from 'date-fns';
+
+// Tipos de exportação suportados
+export type ExportFormat = 'csv' | 'excel' | 'pdf';
+
+// Configurações de exportação
+export interface ExportConfig {
+  format: ExportFormat;
+  filename?: string;
+  includeHeaders?: boolean;
+  delimiter?: string;
+  encoding?: string;
+  sheetName?: string;
+  selectedColumns?: string[];
+  dateFormat?: string;
+  numberFormat?: string;
+}
+
+// Função auxiliar para obter valor da célula
+const getCellValue = (row: any, column: any): any => {
+  if (!column || !column.field) return '';
+  
+  // Lidar com caminhos aninhados (ex: user.address.street)
+  if (column.field.includes('.')) {
+    const parts = column.field.split('.');
+    let value = row;
+    for (const part of parts) {
+      if (value && typeof value === 'object') {
+        value = value[part];
+      } else {
+        return '';
+      }
+    }
+    return value;
+  }
+  
+  // Usar valueGetter se disponível
+  if (column.valueGetter) {
+    try {
+      return column.valueGetter(undefined, row, column);
+    } catch (e) {
+      console.error('Error in valueGetter:', e);
+      return '';
+    }
+  }
+  
+  // Acesso direto à propriedade
+  return row[column.field];
+};
+
+// Função principal de exportação
+export async function exportData(
+  data: any[],
+  columns: any[],
+  config: ExportConfig
+): Promise<void> {
+  const selectedColumns = config.selectedColumns || columns.map(col => col.field);
+  const exportColumns = columns.filter(col => selectedColumns.includes(col.field));
+
+  // Preparar os dados
+  const exportData = data.map(row => {
+    const exportRow: any = {};
+    exportColumns.forEach(col => {
+      let value = getCellValue(row, col);
+      
+      // Formatação baseada no tipo de dados
+      if (value !== null && value !== undefined) {
+        if ((col.dataType === 'date' || col.type === 'date') && config.dateFormat) {
+          try {
+            const dateValue = new Date(value);
+            if (!isNaN(dateValue.getTime())) {
+              value = format(dateValue, config.dateFormat);
+            }
+          } catch (e) {
+            console.error('Error formatting date:', e);
+          }
+        } else if ((col.dataType === 'number' || col.dataType === 'currency') && config.numberFormat) {
+          try {
+            value = new Intl.NumberFormat(undefined, {
+              minimumFractionDigits: 2,
+              maximumFractionDigits: 2,
+              style: col.dataType === 'currency' ? 'currency' : 'decimal',
+              currency: 'BRL'
+            }).format(value);
+          } catch (e) {
+            console.error('Error formatting number:', e);
+          }
+        } else if (col.dataType === 'boolean') {
+          value = value ? 'Sim' : 'Não';
+        }
+      }
+      
+      exportRow[col.headerName || col.field] = value !== null && value !== undefined ? value : '';
+    });
+    return exportRow;
+  });
+
+  // Exportar no formato selecionado
+  switch (config.format) {
+    case 'csv':
+      await exportToCSV(exportData, config);
+      break;
+    case 'excel':
+      await exportToExcel(exportData, config);
+      break;
+    case 'pdf':
+      await exportToPDF(exportData, config);
+      break;
+  }
+}
+
+// Exportação para CSV
+async function exportToCSV(data: any[], config: ExportConfig): Promise<void> {
+  const delimiter = config.delimiter || ',';
+  const headers = Object.keys(data[0]);
+  
+  let csv = config.includeHeaders 
+    ? headers.join(delimiter) + '\n'
+    : '';
+
+  csv += data.map(row => 
+    headers.map(header => {
+      const value = row[header];
+      if (typeof value === 'string' && (value.includes(delimiter) || value.includes('"') || value.includes('\n'))) {
+        return `"${value.replace(/"/g, '""')}"`;
+      }
+      return value !== null && value !== undefined ? value : '';
+    }).join(delimiter)
+  ).join('\n');
+
+  const blob = new Blob([csv], { 
+    type: `text/csv;charset=${config.encoding || 'utf-8'};` 
+  });
+  
+  saveAs(blob, `${config.filename || 'export'}.csv`);
+}
+
+// Exportação para Excel
+async function exportToExcel(data: any[], config: ExportConfig): Promise<void> {
+  const wb = utils.book_new();
+  const ws = utils.json_to_sheet(data, {
+    header: Object.keys(data[0])
+  });
+
+  // Adicionar estilos e formatação
+  const range = utils.decode_range(ws['!ref'] || 'A1');
+  const headerStyle = {
+    font: { bold: true },
+    fill: { fgColor: { rgb: "CCCCCC" } }
+  };
+
+  // Aplicar estilos ao cabeçalho
+  for (let col = range.s.c; col <= range.e.c; col++) {
+    const cell = ws[utils.encode_cell({ r: 0, c: col })];
+    if (cell) {
+      cell.s = headerStyle;
+    }
+  }
+
+  utils.book_append_sheet(wb, ws, config.sheetName || 'Sheet1');
+  
+  const wbout = write(wb, { 
+    bookType: 'xlsx', 
+    type: 'array',
+    bookSST: false,
+    compression: true
+  });
+  
+  const blob = new Blob([wbout], { 
+    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' 
+  });
+  
+  saveAs(blob, `${config.filename || 'export'}.xlsx`);
+}
+
+// Exportação para PDF (placeholder - necessita implementação específica)
+async function exportToPDF(data: any[], config: ExportConfig): Promise<void> {
+  console.warn('Exportação para PDF ainda não implementada. Considere usar a função printData em seu lugar.');
+  // Implementar lógica de exportação PDF ou usar a função printData
+}

package/src/datagrid/modals/export-modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"export-modal.d.ts","sourceRoot":"","sources":["export-modal.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAgB,MAAM,eAAe,CAAC;AAG3D,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;IACzC,OAAO,EAAE,GAAG,EAAE,CAAC;IACf,aAAa,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;CACvC;AAGD,wBAAgB,WAAW,CAAC,EAC1B,MAAM,EACN,OAAO,EACP,QAAQ,EACR,OAAO,EACP,aAAkB,EACnB,EAAE,gBAAgB,2CAkJlB"}

package/src/datagrid/modals/export-modal.tsx

@@ -0,0 +1,168 @@
+import React, { useState, useCallback } from 'react';
+import { Modal, Stack, Group, Button, TextInput, Checkbox, Select, Box, ScrollArea } from '@mantine/core';
+import { useArchbaseTranslation } from '@archbase/core';
+import { ExportConfig, ExportFormat } from './export-data';
+
+// Props para o modal de exportação
+export interface ExportModalProps {
+  opened: boolean;
+  onClose: () => void;
+  onExport: (config: ExportConfig) => void;
+  columns: any[];
+  defaultConfig?: Partial<ExportConfig>;
+}
+
+// Componente Modal para configuração de exportação com ScrollArea
+export function ExportModal({
+  opened,
+  onClose,
+  onExport,
+  columns,
+  defaultConfig = {}
+}: ExportModalProps) {
+  const { t } = useArchbaseTranslation();
+  const [config, setConfig] = useState<ExportConfig>({
+    format: 'excel',
+    filename: 'export',
+    includeHeaders: true,
+    delimiter: ',',
+    encoding: 'utf-8',
+    sheetName: 'Sheet1',
+    selectedColumns: columns.map(col => col.id),
+    dateFormat: 'dd/MM/yyyy',
+    numberFormat: '#,##0.00',
+    ...defaultConfig
+  });
+
+  const handleExport = useCallback(() => {
+    onExport(config);
+  }, [config, onExport]);
+
+  const handleFormatChange = useCallback((value: string | null) => {
+    if (value && (value === 'excel' || value === 'csv' || value === 'pdf')) {
+      setConfig(prev => ({ ...prev, format: value as ExportFormat }));
+    }
+  }, []);
+
+  return (
+    <Modal 
+      opened={opened} 
+      onClose={onClose} 
+      title={`${t('Exportar Dados')}`}
+      size="lg"
+      styles={{
+        body: {
+          padding: 0, // Removendo padding para o ScrollArea ocupar todo o espaço
+          paddingBottom: 60 // Espaço para os botões fixos
+        }
+      }}
+    >
+      <ScrollArea.Autosize mah="70vh" p="md" offsetScrollbars>
+        <Stack gap="md" pb={8}>
+          <Select
+            label={`${t('Formato de Exportação')}`}
+            value={config.format}
+            onChange={handleFormatChange}
+            data={[
+              { value: 'excel', label: 'Excel (.xlsx)' },
+              { value: 'csv', label: 'CSV' },
+              { value: 'pdf', label: 'PDF' }
+            ]}
+          />
+
+          <TextInput
+            label={`${t('Nome do Arquivo')}`}
+            value={config.filename}
+            onChange={(e) => setConfig(prev => ({ ...prev, filename: e.target.value }))}
+          />
+
+          {config.format === 'csv' && (
+            <>
+              <TextInput
+                label={`${t('Delimitador')}`}
+                value={config.delimiter}
+                onChange={(e) => setConfig(prev => ({ ...prev, delimiter: e.target.value }))}
+              />
+              <Select
+                label={`${t('Codificação')}`}
+                value={config.encoding}
+                onChange={(value: string | null) => setConfig(prev => ({ 
+                  ...prev, 
+                  encoding: value || 'utf-8' 
+                }))}
+                data={[
+                  { value: 'utf-8', label: 'UTF-8' },
+                  { value: 'ascii', label: 'ASCII' },
+                  { value: 'iso-8859-1', label: 'ISO-8859-1' }
+                ]}
+              />
+            </>
+          )}
+
+          {config.format === 'excel' && (
+            <TextInput
+              label={`${t('Nome da Planilha')}`}
+              value={config.sheetName}
+              onChange={(e) => setConfig(prev => ({ ...prev, sheetName: e.target.value }))}
+            />
+          )}
+
+          <Box>
+            <Checkbox
+              label={`${t('Incluir Cabeçalhos')}`}
+              checked={config.includeHeaders}
+              onChange={(e) => setConfig(prev => ({ 
+                ...prev, 
+                includeHeaders: e.currentTarget.checked 
+              }))}
+            />
+          </Box>
+
+          <Box>
+            <Box mb="xs">{`${t('Selecionar Colunas')}`}</Box>
+            <Stack gap="xs">
+              {columns.map(column => (
+                <Checkbox
+                  key={column.id}
+                  label={column.title}
+                  checked={config.selectedColumns?.includes(column.id)}
+                  onChange={(e) => {
+                    const checked = e.currentTarget.checked;
+                    setConfig(prev => ({
+                      ...prev,
+                      selectedColumns: checked
+                        ? [...(prev.selectedColumns || []), column.id]
+                        : prev.selectedColumns?.filter(id => id !== column.id)
+                    }));
+                  }}
+                />
+              ))}
+            </Stack>
+          </Box>
+        </Stack>
+      </ScrollArea.Autosize>
+      
+      {/* Botões fixos na parte inferior */}
+      <Group 
+        justify="right" 
+        style={{
+          position: 'absolute',
+          bottom: 0,
+          left: 0,
+          right: 0,
+          padding: '16px',
+          borderTop: '1px solid #e0e0e0',
+          background: 'white',
+          marginTop: 'auto'
+        }}
+      >
+        <Button variant="light" onClick={onClose}>
+          {`${t('Cancelar')}`}
+        </Button>
+        <Button onClick={handleExport}>
+          {`${t('Exportar')}`}
+        </Button>
+      </Group>
+    </Modal>
+  );
+}

package/src/datagrid/modals/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC"}

package/src/datagrid/modals/index.tsx

@@ -0,0 +1,6 @@
+export { ExportModal } from './export-modal';
+export { PrintModal } from './print-modal';
+export { exportData } from './export-data';
+export { printData } from './print-data';
+export * from './export-data';
+export * from './print-data';

package/src/datagrid/modals/print-data.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"print-data.d.ts","sourceRoot":"","sources":["print-data.tsx"],"names":[],"mappings":"AAEA,OAAO,iBAAiB,CAAC;AAQzB,MAAM,WAAW,WAAW;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,UAAU,GAAG,WAAW,CAAC;IACvC,QAAQ,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,QAAQ,CAAC;IAClC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;CAC5B;AAGD,wBAAgB,SAAS,CAAC,CAAC,EACzB,IAAI,EAAE,CAAC,EAAE,EACT,OAAO,EAAE,GAAG,EAAE,EACd,MAAM,EAAE,WAAW,GAClB,IAAI,CA2ON"}

package/src/datagrid/modals/print-data.tsx

@@ -0,0 +1,267 @@
+// @ts-nocheck
+import { format } from 'date-fns';
+import { jsPDF } from 'jspdf';
+import 'jspdf-autotable';
+
+// Interface para jsPDF com autoTable
+interface JsPDFCustom extends jsPDF {
+  autoTable: (options: any) => void;
+}
+
+// Interface para configurações de impressão
+export interface PrintConfig {
+  title?: string;
+  subtitle?: string;
+  orientation?: 'portrait' | 'landscape';
+  pageSize?: 'A4' | 'A3' | 'Letter';
+  showHeader?: boolean;
+  showFooter?: boolean;
+  headerText?: string;
+  footerText?: string;
+  showPageNumbers?: boolean;
+  showDate?: boolean;
+  logo?: string;
+  selectedColumns?: string[];
+}
+
+// Função principal de impressão corrigida
+export function printData<T>(
+  data: T[],
+  columns: any[],
+  config: PrintConfig
+): void {
+  try {
+    // Verificar se jsPDF está disponível
+    if (typeof jsPDF !== 'function') {
+      console.error('jsPDF não está disponível');
+      return;
+    }
+
+    // Criar instância de PDF
+    const doc = new jsPDF({
+      orientation: config.orientation || 'landscape',
+      unit: 'mm',
+      format: config.pageSize || 'A4'
+    }) as JsPDFCustom;
+
+    // Garantir que autoTable está disponível
+    if (typeof doc.autoTable !== 'function') {
+      console.error('jspdf-autotable não está disponível');
+      return;
+    }
+
+    // Calcular dimensões da página
+    const pageWidth = doc.internal.pageSize.getWidth();
+    const pageHeight = doc.internal.pageSize.getHeight();
+    const margin = 10;
+    let currentY = margin;
+
+    // Adicionar logo se fornecido
+    if (config.logo) {
+      try {
+        doc.addImage(config.logo, 'JPEG', margin, currentY, 30, 15);
+        currentY += 20;
+      } catch (error) {
+        console.warn('Erro ao adicionar logo:', error);
+      }
+    }
+
+    // Adicionar cabeçalho
+    if (config.showHeader) {
+      if (config.title) {
+        doc.setFontSize(18);
+        doc.text(config.title, pageWidth / 2, currentY, { align: 'center' });
+        currentY += 10;
+      }
+
+      if (config.subtitle) {
+        doc.setFontSize(14);
+        doc.text(config.subtitle, pageWidth / 2, currentY, { align: 'center' });
+        currentY += 8;
+      }
+
+      if (config.headerText) {
+        doc.setFontSize(12);
+        doc.text(config.headerText, pageWidth / 2, currentY, { align: 'center' });
+        currentY += 8;
+      }
+
+      if (config.showDate) {
+        doc.setFontSize(10);
+        doc.text(
+          format(new Date(), 'dd/MM/yyyy HH:mm'),
+          pageWidth - margin,
+          margin,
+          { align: 'right' }
+        );
+      }
+    }
+
+    // Preparar dados para a tabela
+    const selectedColumns = columns.filter((col) => 
+      !config.selectedColumns || config.selectedColumns.includes(col.field)
+    );
+    
+    const headers = selectedColumns.map((col) => col.headerName || col.field);
+    
+    const tableData = data.map((row) =>
+      selectedColumns.map((col) => {
+        // Extrair valor
+        let value;
+        
+        // Usar valueGetter se disponível
+        if (typeof col.valueGetter === 'function') {
+          try {
+            value = col.valueGetter(undefined, row, col);
+          } catch (e) {
+            console.error('Erro ao obter valor via valueGetter:', e);
+            value = '';
+          }
+        } 
+        // Suporte para caminhos aninhados
+        else if (col.field && col.field.includes('.')) {
+          const parts = col.field.split('.');
+          let result : any | undefined = row;
+          for (const part of parts) {
+            if (result && typeof result === 'object') {
+              result = result[part];
+            } else {
+              result = undefined;
+              break;
+            }
+          }
+          value = result;
+        } 
+        // Acesso direto
+        else {
+          value = row[col.field];
+        }
+
+        // Formatação baseada no tipo de dados
+        if (value !== null && value !== undefined) {
+          if (col.dataType === 'date') {
+            try {
+              const dateValue = new Date(value);
+              if (!isNaN(dateValue.getTime())) {
+                value = format(dateValue, 'dd/MM/yyyy');
+              }
+            } catch (e) {
+              console.error('Error formatting date:', e);
+            }
+          } else if (col.dataType === 'datetime') {
+            try {
+              const dateValue = new Date(value);
+              if (!isNaN(dateValue.getTime())) {
+                value = format(dateValue, 'dd/MM/yyyy HH:mm');
+              }
+            } catch (e) {
+              console.error('Error formatting datetime:', e);
+            }
+          } else if (col.dataType === 'boolean') {
+            value = value ? '✓' : '✗';
+          } else if (col.dataType === 'currency') {
+            try {
+              value = new Intl.NumberFormat('pt-BR', {
+                style: 'currency',
+                currency: 'BRL'
+              }).format(Number(value));
+            } catch (e) {
+              console.error('Error formatting currency:', e);
+            }
+          } else if (col.dataType === 'number') {
+            try {
+              value = new Intl.NumberFormat('pt-BR', {
+                minimumFractionDigits: 2,
+                maximumFractionDigits: 2
+              }).format(Number(value));
+            } catch (e) {
+              console.error('Error formatting number:', e);
+            }
+          }
+        }
+        
+        return value !== null && value !== undefined ? value : '';
+      })
+    );
+
+    // Configurar a tabela com jspdf-autotable
+    doc.autoTable({
+      head: [headers],
+      body: tableData,
+      startY: currentY,
+      theme: 'grid',
+      styles: {
+        fontSize: 10,
+        cellPadding: 2,
+        font: 'helvetica',
+        overflow: 'linebreak'
+      },
+      headStyles: {
+        fillColor: [51, 51, 51],
+        textColor: 255,
+        fontSize: 10,
+        font: 'helvetica',
+        fontStyle: 'bold',
+        halign: 'center'
+      },
+      columnStyles: selectedColumns.reduce((acc, col, index) => {
+        if (col.dataType === 'number' || col.dataType === 'currency') {
+          acc[index] = { halign: 'right' };
+        } else if (
+          col.dataType === 'boolean' ||
+          col.dataType === 'date' ||
+          col.dataType === 'datetime'
+        ) {
+          acc[index] = { halign: 'center' };
+        }
+        return acc;
+      }, {} as Record<number, { halign: 'left' | 'right' | 'center' }>),
+      didDrawPage: function (data: any) {
+        // Adicionar rodapé em cada página
+        if (config.showFooter) {
+          const bottom = doc.internal.pageSize.getHeight() - 10;
+
+          if (config.footerText) {
+            doc.setFontSize(8);
+            doc.text(config.footerText, margin, bottom - 5);
+          }
+
+          if (config.showPageNumbers) {
+            doc.setFontSize(8);
+            
+            // Obter o número da página de maneira segura
+            let pageNumber = 1;
+            try {
+              // Tente diferentes maneiras de obter o número da página
+              if (typeof doc.getNumberOfPages === 'function') {
+                pageNumber = doc.getNumberOfPages();
+              } else if (doc.internal.pages) {
+                // As páginas começam em 1, então a contagem real é length - 1
+                pageNumber = Math.max(1, doc.internal.pages.length - 1);
+              }
+            } catch (e) {
+              console.warn('Não foi possível obter o número da página:', e);
+            }
+            
+            const pageInfo = `Página ${pageNumber}`;
+            doc.text(pageInfo, pageWidth - margin, bottom - 5, { align: 'right' });
+          }
+
+          if (config.showDate) {
+            doc.setFontSize(8);
+            const dateText = `Data: ${format(new Date(), 'dd/MM/yyyy HH:mm')}`;
+            doc.text(dateText, pageWidth / 2, bottom - 5, { align: 'center' });
+          }
+        }
+      }
+    });
+
+    // Abrir em nova janela
+    const pdfBlob = doc.output('blob');
+    const pdfUrl = URL.createObjectURL(pdfBlob);
+    window.open(pdfUrl, '_blank');
+  } catch (error) {
+    console.error('Erro ao gerar PDF:', error);
+    alert('Ocorreu um erro ao gerar o PDF. Verifique o console para mais detalhes.');
+  }
+}

package/src/datagrid/modals/print-modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"print-modal.d.ts","sourceRoot":"","sources":["print-modal.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAG3C,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IACvC,OAAO,EAAE,GAAG,EAAE,CAAC;IACf,aAAa,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;CACtC;AAGD,wBAAgB,UAAU,CAAC,EACzB,MAAM,EACN,OAAO,EACP,OAAO,EACP,OAAO,EACP,aAAkB,EACnB,EAAE,eAAe,2CAkLjB"}