Refactor: controlar peticiones a Metabase en panorama facturador
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 47s

Cambios realizados:
- Mover botón "Actualizar" al footer del card de Filtros
- Implementar guard para prevenir peticiones simultáneas
- Eliminar watcher automático de fechas
- Deshabilitar recarga automática al cambiar "incluir anulados"
- Usuario debe hacer clic explícito en "Actualizar" para cargar datos

Esto garantiza que solo una petición a Metabase esté activa a la vez
y da control total al usuario sobre cuándo recargar los datos.
This commit is contained in:
2025-10-29 15:22:35 -06:00
parent 33e0319272
commit f1f5b84af9

View File

@@ -13,7 +13,7 @@
<!-- Error State -->
<div v-else-if="error" class="rounded-lg border border-red-500/40 bg-red-500/18 p-4 text-sm text-red-200">
<p>Error al cargar datos: {{ error }}</p>
<UButton class="mt-4" @click="loadData" color="primary">
<UButton class="mt-4" :loading="loading" :disabled="loading" @click="loadData" color="primary">
Reintentar
</UButton>
</div>
@@ -58,23 +58,14 @@
/>
<template #footer>
<div class="text-xs text-[var(--brand-text-muted)]">
Rango activo: {{ rangoLegible }} · Registros considerados: Ingresos {{ data.conteos.ingresos_filtrados }}/{{ data.conteos.ingresos_total }} · Rechazos {{ data.conteos.rechazos_filtrados }}/{{ data.conteos.rechazos_total }}
</div>
</template>
</UCard>
<!-- Totales Financieros - Resumen Principal -->
<UCard class="brand-card border border-transparent">
<template #header>
<div class="flex items-center justify-between">
<div>
<h2 class="text-2xl font-bold brand-section-title">Totales Financieros</h2>
<p class="text-sm text-[var(--brand-text-muted)] mt-1">Vista general de ingresos, inversiones y rechazos</p>
<div class="flex flex-col sm:flex-row items-center justify-between gap-3">
<div class="text-xs text-[var(--brand-text-muted)]">
Rango activo: {{ rangoLegible }} · Registros considerados: Ingresos {{ data.conteos.ingresos_filtrados }}/{{ data.conteos.ingresos_total }} · Rechazos {{ data.conteos.rechazos_filtrados }}/{{ data.conteos.rechazos_total }}
</div>
<UButton
:loading="loading"
:ui="{ base: 'bg-[#c08040] text-[#1b1209] border border-[#d99a56] hover:bg-[#d99a56] hover:border-[#f0c07c]' }"
:disabled="loading"
:ui="{ base: 'bg-[#c08040] text-[#1b1209] border border-[#d99a56] hover:bg-[#d99a56] hover:border-[#f0c07c] disabled:opacity-50 disabled:cursor-not-allowed' }"
size="sm"
@click="loadData"
>
@@ -85,6 +76,16 @@
</UButton>
</div>
</template>
</UCard>
<!-- Totales Financieros - Resumen Principal -->
<UCard class="brand-card border border-transparent">
<template #header>
<div>
<h2 class="text-2xl font-bold brand-section-title">Totales Financieros</h2>
<p class="text-sm text-[var(--brand-text-muted)] mt-1">Vista general de ingresos, inversiones y rechazos</p>
</div>
</template>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="rounded-lg border border-[#3a2a16] bg-[#1c140c] px-6 py-4">
@@ -172,6 +173,12 @@ const formatCurrency = (value: number) => {
// Methods
async function loadData() {
// Prevenir múltiples peticiones simultáneas
if (loading.value) {
console.warn('Ya hay una petición en proceso, ignorando nueva solicitud')
return
}
loading.value = true
error.value = null
@@ -218,8 +225,7 @@ async function onToggleAnulados(newValue: boolean | 'indeterminate') {
}
}
// Recargar datos con el nuevo valor
await loadData()
// NO recargar automáticamente - el usuario debe hacer clic en "Actualizar"
}
function onUpdatePreset(value: PresetValue) {
@@ -234,11 +240,6 @@ function onUpdateFechaHasta(value: string | null) {
fechaHasta.value = value
}
// Watchers - reload data when filters change
watch([fechaDesde, fechaHasta], () => {
loadData()
})
// Load data on mount
onMounted(() => {
// Default preset: cosecha 25-26