diff --git a/frontend/src/routes/dashboard/invoices/+page.svelte b/frontend/src/routes/dashboard/invoices/+page.svelte index 5be46574..93f23c50 100644 --- a/frontend/src/routes/dashboard/invoices/+page.svelte +++ b/frontend/src/routes/dashboard/invoices/+page.svelte @@ -57,6 +57,46 @@ } }); + // Efecto para actualizar la URL cuando cambien los filtros + $effect(() => { + if (browser) { + const params = new URLSearchParams(); + + if (filters.operation_type) params.set('operation_type', filters.operation_type); + if (filters.invoice_type) params.set('invoice_type', filters.invoice_type); + if (filters.invoice_number) params.set('invoice_number', filters.invoice_number); + if (filters.project_number) params.set('project_number', filters.project_number); + if (filters.year) params.set('year', filters.year); + + const queryString = params.toString(); + const newUrl = queryString ? `?${queryString}` : window.location.pathname; + + // Solo actualizar si la URL es diferente (evitar loops infinitos) + if (window.location.search !== (queryString ? `?${queryString}` : '')) { + window.history.replaceState({}, '', newUrl); + } + } + }); + + // Efecto para aplicar filtros automáticamente cuando cambian + let filterTimeout: ReturnType | null = null; + $effect(() => { + // Observar cambios en los filtros + const _ = { + operation_type: filters.operation_type, + invoice_type: filters.invoice_type, + invoice_number: filters.invoice_number, + project_number: filters.project_number, + year: filters.year + }; + + // Debounce para evitar múltiples llamadas rápidas + if (filterTimeout) clearTimeout(filterTimeout); + filterTimeout = setTimeout(() => { + applyFilters(); + }, 300); // Esperar 300ms después del último cambio + }); + // Sincronizar token de cookies a localStorage al montar el componente onMount(() => { if (browser) { @@ -269,19 +309,16 @@ } function handleCreateClick() { - // Construir URL con los filtros actuales como query parameters - const params = new URLSearchParams(); + // Leer los filtros actuales desde la URL (que ya se actualizó con el $effect) + const params = new URLSearchParams(window.location.search); // Mapear operation_type de 'imp'/'exp' a números 1/2 - if (filters.operation_type) { - const operationTypeNumber = filters.operation_type === 'exp' ? 1 : 2; + const operationType = params.get('operation_type'); + if (operationType) { + const operationTypeNumber = operationType === 'exp' ? 1 : 2; params.set('operation_type', operationTypeNumber.toString()); } - if (filters.invoice_type) { - params.set('invoice_type', filters.invoice_type); - } - const queryString = params.toString(); const url = queryString ? `/dashboard/invoices/edit/new?${queryString}` @@ -358,10 +395,10 @@ Filtros - Filtra las facturas por diferentes criterios + Filtra las facturas por diferentes criterios (los filtros se aplican automáticamente) -
{ e.preventDefault(); applyFilters(); }} class="grid grid-cols-1 md:grid-cols-5 gap-4"> +