77 lines
2.2 KiB
JavaScript
77 lines
2.2 KiB
JavaScript
|
export function InvoiceItem(invoice) {
|
|||
|
|
const item = document.createElement('div');
|
|||
|
|
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*/`
|
|||
|
|
<div class="invoice-checkbox">
|
|||
|
|
<input type="checkbox" id="invoice-${invoice.id}" />
|
|||
|
|
</div>
|
|||
|
|
<div class="invoice-number">${invoice.number}</div>
|
|||
|
|
<div class="invoice-status">
|
|||
|
|
<span class="status-badge ${getStatusClass(invoice.status)}">
|
|||
|
|
${getStatusText(invoice.status)}
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="invoice-client">
|
|||
|
|
<span class="client-icon">👤</span>
|
|||
|
|
Cliente #${invoice.clientId}
|
|||
|
|
</div>
|
|||
|
|
<div class="invoice-date">${formatDate(invoice.date)}</div>
|
|||
|
|
<div class="invoice-total">${formatCurrency(invoice.total)}</div>
|
|||
|
|
<div class="invoice-remain">${formatCurrency(invoice.remainToPay)}</div>
|
|||
|
|
<div class="invoice-actions">
|
|||
|
|
<button class="btn-view" data-invoice-id="${invoice.id}" title="Ver detalles">
|
|||
|
|
👁️
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
|
|||
|
|
// Event listener para el botón de ver
|
|||
|
|
const viewBtn = item.querySelector('.btn-view');
|
|||
|
|
viewBtn.addEventListener('click', () => {
|
|||
|
|
console.log('Ver factura:', invoice.id);
|
|||
|
|
// Aquí puedes agregar la lógica para ver los detalles
|
|||
|
|
alert(`Ver detalles de factura: ${invoice.number}`);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
return item;
|
|||
|
|
}
|