fix: agregar parámetros por defecto y estado vacío amigable
All checks were successful
build-and-deploy / build (push) Successful in 43s
build-and-deploy / deploy (push) Successful in 3s

Soluciona dos problemas en la ejecución de queries de Metabase:

1. Error de parámetros faltantes:
   - Las queries requieren parámetros (incluir_anulados, fecha_desde, fecha_hasta)
   - Agregado valores por defecto a todas las llamadas POST:
     * incluir_anulados: false
     * fecha_desde: null (sin filtro)
     * fecha_hasta: null (sin filtro)

2. Estado vacío poco amigable:
   - Cuando rows y cols están vacíos mostraba solo JSON
   - Agregado EmptyState visual con:
     * Icono de tabla vacía
     * Mensaje "No hay datos"
     * Descripción explicativa

Cambios en:
- MetabaseCardDisplay.vue: executeQuery() con parámetros y EmptyState
- MetabaseCardsTable.vue: executeCard() con parámetros y EmptyState en modal
This commit is contained in:
2025-10-14 03:10:53 -06:00
parent bc10cd8e50
commit 02d17b816b
2 changed files with 42 additions and 4 deletions

View File

@@ -87,7 +87,19 @@
</UBadge>
</div>
<div class="overflow-x-auto">
<!-- Empty State -->
<div v-if="!queryResult.data?.rows || queryResult.data.rows.length === 0" class="p-8 text-center bg-gray-50 dark:bg-gray-900 rounded">
<div class="mx-auto w-16 h-16 mb-4 flex items-center justify-center bg-gray-200 dark:bg-gray-800 rounded-full">
<svg class="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"></path>
</svg>
</div>
<h3 class="text-sm font-medium text-gray-900 dark:text-gray-100 mb-1">No hay datos</h3>
<p class="text-xs text-gray-500 dark:text-gray-400">La consulta se ejecutó correctamente pero no devolvió resultados.</p>
</div>
<!-- Data Display -->
<div v-else class="overflow-x-auto">
<pre class="p-3 bg-gray-50 dark:bg-gray-900 rounded text-xs whitespace-pre-wrap break-words">{{ JSON.stringify(queryResult.data, null, 2) }}</pre>
</div>
</div>
@@ -155,7 +167,14 @@ async function executeQuery() {
try {
const result = await $fetch(`/api/metabase/cards/${props.card.id}/query`, {
method: 'POST'
method: 'POST',
body: {
parameters: [
{ type: 'category', target: ['variable', ['template-tag', 'incluir_anulados']], value: [false] },
{ type: 'date/single', target: ['variable', ['template-tag', 'fecha_desde']], value: null },
{ type: 'date/single', target: ['variable', ['template-tag', 'fecha_hasta']], value: null }
]
}
})
queryResult.value = result
} catch (e: any) {

View File

@@ -113,7 +113,19 @@
</div>
</div>
<div class="overflow-x-auto max-h-96">
<!-- Empty State -->
<div v-if="!currentResult.data?.rows || currentResult.data.rows.length === 0" class="p-8 text-center bg-gray-50 dark:bg-gray-900 rounded">
<div class="mx-auto w-16 h-16 mb-4 flex items-center justify-center bg-gray-200 dark:bg-gray-800 rounded-full">
<svg class="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"></path>
</svg>
</div>
<h3 class="text-sm font-medium text-gray-900 dark:text-gray-100 mb-1">No hay datos</h3>
<p class="text-xs text-gray-500 dark:text-gray-400">La consulta se ejecutó correctamente pero no devolvió resultados.</p>
</div>
<!-- Data Display -->
<div v-else class="overflow-x-auto max-h-96">
<pre class="p-3 bg-gray-50 dark:bg-gray-900 rounded text-xs whitespace-pre-wrap break-words">{{ JSON.stringify(currentResult.data, null, 2) }}</pre>
</div>
</div>
@@ -210,7 +222,14 @@ async function executeCard(card: any) {
try {
const result = await $fetch(`/api/metabase/cards/${card.id}/query`, {
method: 'POST'
method: 'POST',
body: {
parameters: [
{ type: 'category', target: ['variable', ['template-tag', 'incluir_anulados']], value: [false] },
{ type: 'date/single', target: ['variable', ['template-tag', 'fecha_desde']], value: null },
{ type: 'date/single', target: ['variable', ['template-tag', 'fecha_hasta']], value: null }
]
}
})
currentResult.value = result
showResults.value = true