nucleo000/analiticaNucleo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix: Corregir configuración del modal de resultados
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 50s
Details

Browse Source 
- Cambiar v-model a v-model:open según @nuxt/ui v4.0.0
- Eliminar UCard interno que causaba renderizado permanente
- Usar slots nativos del Modal (#header) en lugar de Card
- Simplificar estilos usando clases de Tailwind estándar
- El modal ahora se mostrará solo cuando showResults sea true
This commit is contained in:
josedario87
2025-10-31 10:30:56 -06:00
parent 9768b31e3e
commit 16175b7fd4
1 changed files with 49 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
nuxt4-app/app/components/metabase/MetabaseCardsTable.vue
View File

@@ -32,63 +32,61 @@
/> />
<!-- Results Modal --> <!-- Results Modal -->
<UModal v-model="showResults"> <UModal v-model:open="showResults">
<UCard class="brand-card border border-transparent"> <template #header>
<template #header> <div class="flex justify-between items-center">
<div class="flex justify-between items-center"> <h3 class="text-lg font-semibold">Resultados: {{ selectedCardForResults?.name }}</h3>
<h3 class="text-lg font-semibold brand-section-title">Resultados: {{ selectedCardForResults?.name }}</h3> <UButton
<UButton color="gray"
color="gray" variant="ghost"
variant="ghost" icon="i-heroicons-x-mark"
icon="i-heroicons-x-mark" @click="showResults = false"
@click="showResults = false" />
/> </div>
</div> </template>
</template>
<div v-if="currentResult" class="space-y-3"> <div v-if="currentResult" class="space-y-3 p-4">
<div class="flex flex-wrap gap-4 text-sm text-[var(--brand-text)]"> <div class="flex flex-wrap gap-4 text-sm">
<div> <div>
<span class="font-medium text-[var(--brand-text-muted)]">Filas:</span> <span class="font-medium text-gray-500 dark:text-gray-400">Filas:</span>
<span class="ml-2">{{ currentResult.data?.rows?.length || 0 }}</span> <span class="ml-2">{{ currentResult.data?.rows?.length || 0 }}</span>
</div>
<div>
<span class="font-medium text-[var(--brand-text-muted)]">Tiempo:</span>
<span class="ml-2">{{ currentResult.running_time || 0 }}ms</span>
</div>
<div>
<span class="font-medium text-[var(--brand-text-muted)]">Estado:</span>
<UBadge :color="currentResult.status === 'completed' ? 'green' : 'yellow'">
{{ currentResult.status }}
</UBadge>
</div>
</div> </div>
<div>
<!-- Empty State --> <span class="font-medium text-gray-500 dark:text-gray-400">Tiempo:</span>
<div v-if="!currentResult.data?.rows || currentResult.data.rows.length === 0" class="p-8 text-center rounded-lg border border-[var(--brand-border)] bg-[var(--brand-surface)]"> <span class="ml-2">{{ currentResult.running_time || 0 }}ms</span>
<div class="mx-auto w-16 h-16 mb-4 flex items-center justify-center bg-[#3a2a16] rounded-full">
<svg class="w-8 h-8 text-[var(--brand-text-muted)]" 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-[var(--brand-text)] mb-1">No hay datos</h3>
<p class="text-xs text-[var(--brand-text-muted)]">La consulta se ejecutó correctamente pero no devolvió resultados.</p>
</div> </div>
<div>
<!-- Data Display --> <span class="font-medium text-gray-500 dark:text-gray-400">Estado:</span>
<div v-else class="overflow-x-auto max-h-96"> <UBadge :color="currentResult.status === 'completed' ? 'green' : 'yellow'">
<pre class="p-3 rounded-lg border border-[var(--brand-border)] bg-[var(--brand-surface)] text-xs whitespace-pre-wrap break-words text-[var(--brand-text)]">{{ JSON.stringify(currentResult.data, null, 2) }}</pre> {{ currentResult.status }}
</UBadge>
</div> </div>
</div> </div>
<UAlert <!-- Empty State -->
v-if="currentError" <div v-if="!currentResult.data?.rows || currentResult.data.rows.length === 0" class="p-8 text-center rounded-lg border dark:border-gray-700 bg-gray-50 dark:bg-gray-800">
color="red" <div class="mx-auto w-16 h-16 mb-4 flex items-center justify-center bg-gray-200 dark:bg-gray-700 rounded-full">
variant="soft" <svg class="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
:title="currentError" <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>
class="mt-3" </svg>
/> </div>
</UCard> <h3 class="text-sm font-medium 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 rounded-lg border dark:border-gray-700 bg-gray-50 dark:bg-gray-800 text-xs whitespace-pre-wrap break-words">{{ JSON.stringify(currentResult.data, null, 2) }}</pre>
</div>
</div>
<UAlert
v-if="currentError"
color="red"
variant="soft"
:title="currentError"
class="m-4"
/>
</UModal> </UModal>
</div> </div>
</template> </template>