Refactor invoice loading and search functionality for improved performance and user experience
This commit is contained in:
parent
810dbd7781
commit
aa8f049444
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in New Issue