Refactor invoice loading and search functionality for improved performance and user experience

This commit is contained in:
javiermengual 2026-02-03 11:45:54 +01:00
parent 810dbd7781
commit aa8f049444
1 changed files with 14 additions and 15 deletions

View File

@ -67,7 +67,7 @@ export function renderFacturasPage() {
// Función para renderizar la página actual
function renderPage(page = 1) {
const invoicesList = container.querySelector('.invoices-list');
currentPage = page;
totalPages = Math.ceil(filteredInvoices.length / pageSize);
@ -100,23 +100,23 @@ export function renderFacturasPage() {
// Función para cargar todas las facturas
async function loadAllInvoices() {
const invoicesList = container.querySelector('.invoices-list');
try {
invoicesList.innerHTML = '<div class="loading">Cargando facturas...</div>';
const token = localStorage.getItem('token');
// Construir URL con parámetros
let url = `${import.meta.env.VITE_API_BASE_URL}/api/Invoices?limit=1000`;
if (currentFilter) {
url += `&status=${currentFilter}`;
}
if (searchTerm) {
url += `&search=${encodeURIComponent(searchTerm)}`;
}
const response = await fetch(url, {
method: 'GET',
headers: {
@ -130,13 +130,13 @@ export function renderFacturasPage() {
}
const data = await response.json();
// Manejo de respuesta - obtener todas las facturas
allInvoices = Array.isArray(data) ? data : data.data || data.invoices || [];
filteredInvoices = [...allInvoices];
console.log(`Total de facturas cargadas: ${allInvoices.length}`);
// Renderizar la primera página
renderPage(1);
@ -183,16 +183,15 @@ export function renderFacturasPage() {
const searchInput = container.querySelector('.search-input');
searchInput.addEventListener('input', (e) => {
const inputValue = e.target.value;
const inputValue = e.target.value.trim();
// Debounce para no hacer muchas llamadas
clearTimeout(searchInput.debounceTimer);
searchInput.debounceTimer = setTimeout(() => {
// Solo aplicar búsqueda si contiene al menos un número
const hasNumber = /\d/.test(inputValue);
if (hasNumber && inputValue !== 'I' && inputValue !== 'IN' && inputValue !== 'N') {
// Validación mínima: al menos 2 caracteres para activar búsqueda
if (inputValue.length >= 2) {
searchTerm = inputValue;
} else {
searchTerm = ''; // Si no tiene número, mostrar todas
searchTerm = ''; // Si es muy corto, mostrar todas
}
applyFilters();
}, 500); // Espera 500ms después de que el usuario deja de escribir