403 lines
14 KiB
JavaScript
403 lines
14 KiB
JavaScript
/**
|
||
* CSV Manager UI
|
||
* User interface for CRUD operations on CSV files
|
||
*/
|
||
|
||
import {
|
||
loadCSV,
|
||
toCSV,
|
||
downloadCSV,
|
||
getAvailableCSVFiles,
|
||
validateCSVData
|
||
} from '../utils/csv-manager.js';
|
||
|
||
// Current state
|
||
let currentCSVData = [];
|
||
let currentFilename = '';
|
||
let currentFileId = '';
|
||
let editingIndex = -1;
|
||
|
||
/**
|
||
* Open CSV Manager Modal
|
||
*/
|
||
export function openCSVManager() {
|
||
const modal = document.getElementById('csvManagerModal');
|
||
const select = document.getElementById('csvFileSelect');
|
||
|
||
// Populate file selector
|
||
const files = getAvailableCSVFiles();
|
||
select.innerHTML = '<option value="">-- Selecione um arquivo --</option>';
|
||
files.forEach(file => {
|
||
const option = document.createElement('option');
|
||
option.value = file.id;
|
||
option.textContent = `${file.icon} ${file.name} - ${file.description}`;
|
||
select.appendChild(option);
|
||
});
|
||
|
||
modal.classList.add('active');
|
||
}
|
||
|
||
/**
|
||
* Close CSV Manager Modal
|
||
*/
|
||
export function closeCSVManager() {
|
||
const modal = document.getElementById('csvManagerModal');
|
||
modal.classList.remove('active');
|
||
|
||
// Reset state
|
||
currentCSVData = [];
|
||
currentFilename = '';
|
||
currentFileId = '';
|
||
|
||
// Reset UI
|
||
document.getElementById('csvFileSelect').value = '';
|
||
document.getElementById('csvContent').innerHTML = `
|
||
<div style="text-align: center; padding: 60px 20px; color: var(--color-text-secondary);">
|
||
<div style="font-size: 64px; margin-bottom: 16px;">📁</div>
|
||
<p style="font-size: 18px; margin-bottom: 8px;">Selecione um arquivo CSV para começar</p>
|
||
<p style="font-size: 14px;">Você poderá visualizar, editar, adicionar e remover registros</p>
|
||
</div>
|
||
`;
|
||
|
||
// Hide buttons
|
||
document.getElementById('btnAddRecord').style.display = 'none';
|
||
document.getElementById('btnDownload').style.display = 'none';
|
||
}
|
||
|
||
/**
|
||
* Load selected CSV file
|
||
*/
|
||
export async function loadSelectedCSV() {
|
||
const select = document.getElementById('csvFileSelect');
|
||
const fileId = select.value;
|
||
|
||
if (!fileId) {
|
||
closeCSVManager();
|
||
openCSVManager();
|
||
return;
|
||
}
|
||
|
||
const files = getAvailableCSVFiles();
|
||
const file = files.find(f => f.id === fileId);
|
||
|
||
if (!file) return;
|
||
|
||
// Show loading
|
||
document.getElementById('csvContent').innerHTML = `
|
||
<div style="text-align: center; padding: 60px 20px;">
|
||
<div style="font-size: 48px; margin-bottom: 16px;">⏳</div>
|
||
<p style="font-size: 18px;">Carregando ${file.name}...</p>
|
||
</div>
|
||
`;
|
||
|
||
try {
|
||
// Load CSV
|
||
const data = await loadCSV(file.filename);
|
||
|
||
// Update state
|
||
currentCSVData = data;
|
||
currentFilename = file.filename;
|
||
currentFileId = fileId;
|
||
|
||
// Render table
|
||
renderCSVTable(data, file);
|
||
|
||
// Show buttons
|
||
document.getElementById('btnAddRecord').style.display = 'inline-block';
|
||
document.getElementById('btnDownload').style.display = 'inline-block';
|
||
|
||
} catch (error) {
|
||
document.getElementById('csvContent').innerHTML = `
|
||
<div style="text-align: center; padding: 60px 20px;">
|
||
<div style="font-size: 48px; margin-bottom: 16px; color: var(--color-error);">❌</div>
|
||
<p style="font-size: 18px; color: var(--color-error); margin-bottom: 8px;">Erro ao carregar arquivo</p>
|
||
<p style="font-size: 14px; color: var(--color-text-secondary);">${error.message}</p>
|
||
<button class="btn btn-primary" onclick="location.reload()" style="margin-top: 20px;">Recarregar Página</button>
|
||
</div>
|
||
`;
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Render CSV data as table
|
||
* @param {Array<object>} data - CSV data
|
||
* @param {object} file - File metadata
|
||
*/
|
||
function renderCSVTable(data, file) {
|
||
if (data.length === 0) {
|
||
document.getElementById('csvContent').innerHTML = `
|
||
<div style="text-align: center; padding: 60px 20px;">
|
||
<div style="font-size: 48px; margin-bottom: 16px;">📭</div>
|
||
<p style="font-size: 18px; margin-bottom: 8px;">Arquivo vazio</p>
|
||
<p style="font-size: 14px; color: var(--color-text-secondary);">Adicione o primeiro registro</p>
|
||
</div>
|
||
`;
|
||
return;
|
||
}
|
||
|
||
const headers = Object.keys(data[0]);
|
||
|
||
let html = `
|
||
<div style="margin-bottom: 20px; padding: 16px; background: var(--color-bg-1); border-radius: 8px;">
|
||
<div style="display: flex; align-items: center; gap: 12px; margin-bottom: 8px;">
|
||
<span style="font-size: 32px;">${file.icon}</span>
|
||
<div>
|
||
<h3 style="margin: 0; font-size: 18px;">${file.name}</h3>
|
||
<p style="margin: 0; font-size: 13px; color: var(--color-text-secondary);">${file.description}</p>
|
||
</div>
|
||
</div>
|
||
<div style="display: flex; gap: 20px; margin-top: 12px; font-size: 13px; color: var(--color-text-secondary);">
|
||
<span>📄 <strong>${data.length}</strong> registros</span>
|
||
<span>📊 <strong>${headers.length}</strong> colunas</span>
|
||
<span>💾 <strong>${currentFilename}</strong></span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="table-wrapper" style="overflow-x: auto;">
|
||
<table style="width: 100%; border-collapse: collapse; font-size: 13px;">
|
||
<thead>
|
||
<tr style="background: var(--color-primary); color: white;">
|
||
<th style="padding: 12px; text-align: left; position: sticky; left: 0; background: var(--color-primary);">#</th>
|
||
${headers.map(h => `<th style="padding: 12px; text-align: left; white-space: nowrap;">${h}</th>`).join('')}
|
||
<th style="padding: 12px; text-align: center; width: 120px;">Ações</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
${data.map((row, index) => `
|
||
<tr style="border-bottom: 1px solid var(--color-border); ${index % 2 === 0 ? 'background: var(--color-surface);' : ''}">
|
||
<td style="padding: 12px; font-weight: bold; position: sticky; left: 0; background: ${index % 2 === 0 ? 'var(--color-surface)' : 'var(--color-background)'};">${index + 1}</td>
|
||
${headers.map(h => `<td style="padding: 12px; white-space: nowrap;">${row[h] || '-'}</td>`).join('')}
|
||
<td style="padding: 12px; text-align: center;">
|
||
<button class="btn-icon-small" onclick="editRecord(${index})" title="Editar" style="background: var(--color-primary); color: white; border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer; margin-right: 4px;">✏️</button>
|
||
<button class="btn-icon-small" onclick="deleteRecord(${index})" title="Deletar" style="background: var(--color-error); color: white; border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer;">🗑️</button>
|
||
</td>
|
||
</tr>
|
||
`).join('')}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
`;
|
||
|
||
document.getElementById('csvContent').innerHTML = html;
|
||
}
|
||
|
||
/**
|
||
* Add new record
|
||
*/
|
||
export function addNewRecord() {
|
||
if (currentCSVData.length === 0) {
|
||
alert('⚠️ Não é possível adicionar registro em arquivo vazio. Faça upload de um arquivo com estrutura.');
|
||
return;
|
||
}
|
||
|
||
editingIndex = -1;
|
||
const headers = Object.keys(currentCSVData[0]);
|
||
showRecordModal('➕ Adicionar Novo Registro', headers, {});
|
||
}
|
||
|
||
/**
|
||
* Edit existing record
|
||
* @param {number} index - Record index
|
||
*/
|
||
export function editRecord(index) {
|
||
editingIndex = index;
|
||
const record = currentCSVData[index];
|
||
const headers = Object.keys(record);
|
||
showRecordModal(`✏️ Editar Registro #${index + 1}`, headers, record);
|
||
}
|
||
|
||
/**
|
||
* Delete record
|
||
* @param {number} index - Record index
|
||
*/
|
||
export function deleteRecord(index) {
|
||
const record = currentCSVData[index];
|
||
const recordName = record.nome || record.id || `Registro #${index + 1}`;
|
||
|
||
if (!confirm(`🗑️ Tem certeza que deseja deletar:\n\n"${recordName}"?\n\nEsta ação não pode ser desfeita.`)) {
|
||
return;
|
||
}
|
||
|
||
// Remove from array
|
||
currentCSVData.splice(index, 1);
|
||
|
||
// Re-render table
|
||
const files = getAvailableCSVFiles();
|
||
const file = files.find(f => f.id === currentFileId);
|
||
renderCSVTable(currentCSVData, file);
|
||
|
||
// Show success message
|
||
showToast('✅ Registro deletado com sucesso!', 'success');
|
||
}
|
||
|
||
/**
|
||
* Show record editor modal
|
||
* @param {string} title - Modal title
|
||
* @param {Array<string>} headers - Field names
|
||
* @param {object} data - Current data
|
||
*/
|
||
function showRecordModal(title, headers, data) {
|
||
document.getElementById('recordModalTitle').textContent = title;
|
||
|
||
let html = '<div style="display: flex; flex-direction: column; gap: 16px;">';
|
||
|
||
headers.forEach(header => {
|
||
const value = data[header] || '';
|
||
html += `
|
||
<div class="form-group" style="margin-bottom: 0;">
|
||
<label class="form-label">${header}</label>
|
||
<input
|
||
type="text"
|
||
class="form-control"
|
||
id="field_${header}"
|
||
value="${value}"
|
||
placeholder="Digite ${header}"
|
||
${header === 'id' ? 'required' : ''}
|
||
>
|
||
${header === 'id' ? '<small style="color: var(--color-text-secondary);">Campo obrigatório e único</small>' : ''}
|
||
</div>
|
||
`;
|
||
});
|
||
|
||
html += '</div>';
|
||
|
||
document.getElementById('recordModalBody').innerHTML = html;
|
||
document.getElementById('csvRecordModal').classList.add('active');
|
||
}
|
||
|
||
/**
|
||
* Close record editor modal
|
||
*/
|
||
export function closeRecordModal() {
|
||
document.getElementById('csvRecordModal').classList.remove('active');
|
||
editingIndex = -1;
|
||
}
|
||
|
||
/**
|
||
* Save record (add or edit)
|
||
*/
|
||
export function saveRecord() {
|
||
const headers = Object.keys(currentCSVData[0] || {});
|
||
const newRecord = {};
|
||
|
||
// Collect form data
|
||
headers.forEach(header => {
|
||
const input = document.getElementById(`field_${header}`);
|
||
if (input) {
|
||
newRecord[header] = input.value.trim();
|
||
}
|
||
});
|
||
|
||
// Validate required fields
|
||
if (!newRecord.id) {
|
||
alert('⚠️ O campo "id" é obrigatório!');
|
||
return;
|
||
}
|
||
|
||
// Check for duplicate ID (only when adding new)
|
||
if (editingIndex === -1) {
|
||
const duplicate = currentCSVData.find(r => r.id === newRecord.id);
|
||
if (duplicate) {
|
||
alert(`⚠️ Já existe um registro com o ID "${newRecord.id}"!\n\nEscolha um ID único.`);
|
||
return;
|
||
}
|
||
}
|
||
|
||
// Add or update
|
||
if (editingIndex === -1) {
|
||
// Add new
|
||
currentCSVData.push(newRecord);
|
||
showToast('✅ Registro adicionado com sucesso!', 'success');
|
||
} else {
|
||
// Update existing
|
||
currentCSVData[editingIndex] = newRecord;
|
||
showToast('✅ Registro atualizado com sucesso!', 'success');
|
||
}
|
||
|
||
// Re-render table
|
||
const files = getAvailableCSVFiles();
|
||
const file = files.find(f => f.id === currentFileId);
|
||
renderCSVTable(currentCSVData, file);
|
||
|
||
// Close modal
|
||
closeRecordModal();
|
||
}
|
||
|
||
/**
|
||
* Download current CSV
|
||
*/
|
||
export function downloadCurrentCSV() {
|
||
if (currentCSVData.length === 0) {
|
||
alert('⚠️ Não há dados para download!');
|
||
return;
|
||
}
|
||
|
||
// Validate data
|
||
const validation = validateCSVData(currentCSVData);
|
||
if (!validation.valid) {
|
||
const proceed = confirm(`⚠️ Dados contêm erros:\n\n${validation.errors.join('\n')}\n\nDeseja fazer download mesmo assim?`);
|
||
if (!proceed) return;
|
||
}
|
||
|
||
// Convert to CSV
|
||
const csvText = toCSV(currentCSVData);
|
||
|
||
// Download
|
||
downloadCSV(currentFilename, csvText);
|
||
|
||
showToast('💾 CSV baixado com sucesso!', 'success');
|
||
}
|
||
|
||
/**
|
||
* Show toast notification
|
||
* @param {string} message - Message text
|
||
* @param {string} type - Type (success, error, warning)
|
||
*/
|
||
function showToast(message, type = 'success') {
|
||
const toast = document.createElement('div');
|
||
toast.className = `toast toast-${type}`;
|
||
toast.textContent = message;
|
||
toast.style.cssText = `
|
||
position: fixed;
|
||
bottom: 24px;
|
||
right: 24px;
|
||
padding: 16px 24px;
|
||
background: ${type === 'success' ? 'var(--color-success)' : 'var(--color-error)'};
|
||
color: white;
|
||
border-radius: 8px;
|
||
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
||
z-index: 10000;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
opacity: 0;
|
||
transform: translateY(20px);
|
||
transition: all 0.3s ease;
|
||
`;
|
||
|
||
document.body.appendChild(toast);
|
||
|
||
setTimeout(() => {
|
||
toast.style.opacity = '1';
|
||
toast.style.transform = 'translateY(0)';
|
||
}, 10);
|
||
|
||
setTimeout(() => {
|
||
toast.style.opacity = '0';
|
||
toast.style.transform = 'translateY(20px)';
|
||
setTimeout(() => toast.remove(), 300);
|
||
}, 3000);
|
||
}
|
||
|
||
// Export to global scope for onclick handlers
|
||
if (typeof window !== 'undefined') {
|
||
window.openCSVManager = openCSVManager;
|
||
window.closeCSVManager = closeCSVManager;
|
||
window.loadSelectedCSV = loadSelectedCSV;
|
||
window.addNewRecord = addNewRecord;
|
||
window.editRecord = editRecord;
|
||
window.deleteRecord = deleteRecord;
|
||
window.closeRecordModal = closeRecordModal;
|
||
window.saveRecord = saveRecord;
|
||
window.downloadCurrentCSV = downloadCurrentCSV;
|
||
}
|