jos3duardo/upload-apollo-client
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add TabelaDocumentos component to display documents table

Browse Source
This commit is contained in:
Jose Eduardo 2025-08-28 23:39:41 -04:00
parent 2a5b927988
commit d79eda7ffd
1 changed files with 207 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

207
app/components/TabelaDocumentos.mjs Normal file
View File

@ -0,0 +1,207 @@
// @ts-check
import { useState, useEffect } from "react";
import { createElement as h } from "react";
export default function TabelaDocumentos() {
const [documentos, setDocumentos] = useState([]);
function loadDocuments() {
const docs = JSON.parse(localStorage.getItem('documentos') || '[]');
// Ordena por timestamp mais recente primeiro
const sortedDocs = docs.sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp));
setDocumentos(sortedDocs);
}
function clearAllDocuments() {
localStorage.removeItem('documentos');
setDocumentos([]);
}
function removeDocument(index) {
const updatedDocs = documentos.filter((_, i) => i !== index);
localStorage.setItem('documentos', JSON.stringify(updatedDocs));
setDocumentos(updatedDocs);
}
useEffect(() => {
// Carrega documentos ao montar o componente
loadDocuments();
// Escuta evento customizado para recarregar quando novo documento é criado
function handleDocumentCreated() {
loadDocuments();
}
window.addEventListener('documentoCreated', handleDocumentCreated);
return () => {
window.removeEventListener('documentoCreated', handleDocumentCreated);
};
}, []);
if (documentos.length === 0) {
return h('div', { style: { padding: '20px', textAlign: 'center', color: '#666' } },
'Nenhum documento encontrado'
);
}
return h('div', { style: { padding: '20px' } }, [
// Cabeçalho com botão limpar
h('div', {
key: 'header',
style: {
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
marginBottom: '20px'
}
}, [
h('span', { key: 'count' }, `Total: ${documentos.length} documento(s)`),
h('button', {
key: 'clear-btn',
onClick: clearAllDocuments,
style: {
background: '#dc3545',
color: 'white',
border: 'none',
borderRadius: '3px',
padding: '5px 10px',
cursor: 'pointer'
}
}, 'Limpar Todos')
]),
// Tabela
h('div', { key: 'table-container', style: { overflowX: 'auto' } },
h('table', {
style: {
width: '100%',
borderCollapse: 'collapse',
border: '1px solid #ddd'
}
}, [
// Cabeçalho da tabela
h('thead', { key: 'thead' },
h('tr', { style: { backgroundColor: '#f8f9fa' } }, [
h('th', {
key: 'th-id',
style: {
border: '1px solid #ddd',
padding: '12px',
textAlign: 'left'
}
}, 'ID'),
h('th', {
key: 'th-situacao',
style: {
border: '1px solid #ddd',
padding: '12px',
textAlign: 'left'
}
}, 'Situação'),
h('th', {
key: 'th-arquivo',
style: {
border: '1px solid #ddd',
padding: '12px',
textAlign: 'left'
}
}, 'Arquivo Atual'),
h('th', {
key: 'th-chave',
style: {
border: '1px solid #ddd',
padding: '12px',
textAlign: 'left'
}
}, 'Chave'),
h('th', {
key: 'th-data',
style: {
border: '1px solid #ddd',
padding: '12px',
textAlign: 'left'
}
}, 'Data/Hora'),
h('th', {
key: 'th-acoes',
style: {
border: '1px solid #ddd',
padding: '12px',
textAlign: 'center'
}
}, 'Ações')
])
),
// Corpo da tabela
h('tbody', { key: 'tbody' },
documentos.map((doc, index) =>
h('tr', {
key: index,
style: { backgroundColor: index % 2 === 0 ? 'white' : '#f8f9fa' }
}, [
h('td', {
key: 'td-id',
style: {
border: '1px solid #ddd',
padding: '12px'
}
}, doc.id || 'N/A'),
h('td', {
key: 'td-situacao',
style: {
border: '1px solid #ddd',
padding: '12px'
}
}, doc.situacao || 'N/A'),
h('td', {
key: 'td-arquivo',
style: {
border: '1px solid #ddd',
padding: '12px'
}
}, doc.arquivoAtual || 'N/A'),
h('td', {
key: 'td-chave',
style: {
border: '1px solid #ddd',
padding: '12px'
}
}, doc.chave || 'N/A'),
h('td', {
key: 'td-data',
style: {
border: '1px solid #ddd',
padding: '12px'
}
}, new Date(doc.timestamp).toLocaleString('pt-BR')),
h('td', {
key: 'td-acoes',
style: {
border: '1px solid #ddd',
padding: '12px',
textAlign: 'center'
}
},
h('button', {
onClick: () => removeDocument(index),
style: {
background: '#dc3545',
color: 'white',
border: 'none',
borderRadius: '3px',
padding: '4px 8px',
cursor: 'pointer',
fontSize: '12px'
}
}, 'Remover')
)
])
)
)
])
)
]);
}