76 lines
2.5 KiB
JavaScript
76 lines
2.5 KiB
JavaScript
import { escapeHtml } from '../utils/escapeHtml.js';
|
|
|
|
export function InvoiceItem(invoice, onView) {
|
|
const item = document.createElement('tr');
|
|
item.className = 'invoice-item';
|
|
|
|
// Formatear fecha
|
|
const formatDate = (dateString) => {
|
|
const date = new Date(dateString);
|
|
return date.toLocaleDateString('es-ES');
|
|
};
|
|
|
|
// Formatear moneda
|
|
const formatCurrency = (amount) => {
|
|
return new Intl.NumberFormat('es-ES', {
|
|
style: 'currency',
|
|
currency: 'EUR'
|
|
}).format(amount);
|
|
};
|
|
|
|
// Obtener clase de estado
|
|
const getStatusClass = (status) => {
|
|
const statusMap = {
|
|
'draft': 'status-draft',
|
|
'validated': 'status-validated',
|
|
'paid': 'status-paid',
|
|
'unpaid': 'status-unpaid',
|
|
'canceled': 'status-canceled'
|
|
};
|
|
return statusMap[status] || 'status-default';
|
|
};
|
|
|
|
// Obtener texto de estado
|
|
const getStatusText = (status) => {
|
|
const statusTextMap = {
|
|
'draft': 'Borrador',
|
|
'validated': 'Validada',
|
|
'paid': 'Pagada',
|
|
'unpaid': 'Impagada',
|
|
'canceled': 'Cancelada'
|
|
};
|
|
return statusTextMap[status] || status;
|
|
};
|
|
|
|
item.innerHTML = /*html*/`
|
|
<td class="invoice-number">${escapeHtml(invoice.number)}</td>
|
|
<td class="invoice-status">
|
|
<span class="status-badge ${getStatusClass(invoice.status)}" role="status">
|
|
${getStatusText(invoice.status)}
|
|
</span>
|
|
</td>
|
|
<td class="invoice-client">
|
|
<span class="client-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg></span>
|
|
${escapeHtml(invoice.clientName || 'Sin nombre')}
|
|
</td>
|
|
<td class="invoice-date">${formatDate(invoice.date)}</td>
|
|
<td class="invoice-total">${formatCurrency(invoice.total)}</td>
|
|
<td class="invoice-remain">${formatCurrency(invoice.remainToPay)}</td>
|
|
<td class="invoice-actions">
|
|
<button class="btn-action btn-view" data-invoice-id="${invoice.id}" title="Ver/Editar detalles" aria-label="Ver detalles de factura ${escapeHtml(invoice.number)}">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
|
|
</button>
|
|
</td>
|
|
`;
|
|
|
|
// Event listener para el botón de ver
|
|
const viewBtn = item.querySelector('.btn-view');
|
|
viewBtn.addEventListener('click', () => {
|
|
if (onView) {
|
|
onView(invoice.id);
|
|
}
|
|
});
|
|
|
|
return item;
|
|
}
|