diff --git a/nuxt4-app/app/pages/explorer.vue b/nuxt4-app/app/pages/explorer.vue index 5a37a53..202b8e4 100644 --- a/nuxt4-app/app/pages/explorer.vue +++ b/nuxt4-app/app/pages/explorer.vue @@ -170,6 +170,10 @@ definePageMeta({ title: 'Explorador de datos' }) +// Get query params from URL +const route = useRoute() +const router = useRouter() + // State const selectedDatabase = ref(null) const selectedTable = ref(null) @@ -185,6 +189,9 @@ const tables = ref([]) const tableData = ref([]) const visibleColumns = ref([]) +// Track if we should auto-load data from URL params +const shouldAutoLoad = ref(false) + // Computed const databaseOptions = computed(() => { return databases.value.map(db => db.name) @@ -251,8 +258,21 @@ async function loadDatabases() { const response = await $fetch('/api/metabase/databases') databases.value = response as any[] - // Auto-select first database - if (databases.value.length > 0) { + // Check if we have a database from URL params + const dbParam = route.query.db as string + + if (dbParam && databases.value.length > 0) { + // Try to find database by name + const db = databases.value.find(d => d.name === dbParam) + if (db) { + selectedDatabase.value = db.name + shouldAutoLoad.value = true + } else { + // If not found, auto-select first database + selectedDatabase.value = databases.value[0].name + } + } else if (databases.value.length > 0) { + // Auto-select first database if no param selectedDatabase.value = databases.value[0].name } } catch (err: any) { @@ -277,6 +297,27 @@ async function loadTables() { // Metabase returns tables in the 'tables' property tables.value = metadata.tables || [] + + // Check if we have a table from URL params + const tableParam = route.query.table as string + + if (tableParam && tables.value.length > 0 && shouldAutoLoad.value) { + // Try to find table by name or display_name + const table = tables.value.find(t => + (t.display_name || t.name) === tableParam || + t.name === tableParam + ) + + if (table) { + selectedTable.value = table.display_name || table.name + // Load data automatically after table is selected + await nextTick() + await loadTableData() + } + + // Reset auto-load flag + shouldAutoLoad.value = false + } } catch (err: any) { error.value = `Error al cargar tablas: ${err.message || 'Error desconocido'}` console.error('Error loading tables:', err) @@ -340,8 +381,31 @@ function toggleColumn(columnKey: string) { } // Watchers -watch(selectedDatabase, () => { +watch(selectedDatabase, (newDb) => { loadTables() + + // Update URL query params when database changes + if (newDb && !shouldAutoLoad.value) { + router.push({ + query: { + ...route.query, + db: newDb, + table: undefined // Clear table when db changes + } + }) + } +}) + +watch(selectedTable, (newTable) => { + // Update URL query params when table changes + if (newTable && !shouldAutoLoad.value) { + router.push({ + query: { + ...route.query, + table: newTable + } + }) + } }) // Lifecycle