From 45ff3777a7ffb568bcde7f8c11c0716d390162b7 Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Tue, 14 Oct 2025 03:51:00 -0600
Subject: [PATCH] =?UTF-8?q?feat:=20agregar=20formulario=20configurable=20d?=
 =?UTF-8?q?e=20par=C3=A1metros=20en=20queries?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Agregar sección expandible para configurar parámetros antes de ejecutar
- Inputs dinámicos según tipo: toggle para boolean, date picker para fechas, text para otros
- Inicialización automática con valores por defecto de template-tags
- Botón para restablecer parámetros a valores originales
- Usar valores del formulario al ejecutar queries
- Mejorar UX con labels legibles y estilos consistentes
---
 .../metabase/MetabaseCardDisplay.vue          | 107 ++++++++++++++++--
 1 file changed, 99 insertions(+), 8 deletions(-)

diff --git a/nuxt4-app/app/components/metabase/MetabaseCardDisplay.vue b/nuxt4-app/app/components/metabase/MetabaseCardDisplay.vue
index 98050ba..be5defa 100644
--- a/nuxt4-app/app/components/metabase/MetabaseCardDisplay.vue
+++ b/nuxt4-app/app/components/metabase/MetabaseCardDisplay.vue
@@ -45,6 +45,60 @@
         </details>
       </div>
 
+      <!-- Parameters Form -->
+      <div v-if="hasParameters" class="mt-4">
+        <details class="group" :open="showParameters">
+          <summary class="cursor-pointer text-sm font-medium text-primary flex items-center gap-2 py-2">
+            <UIcon name="i-heroicons-adjustments-horizontal" class="w-4 h-4" />
+            <span>Configurar Parámetros</span>
+            <UIcon name="i-heroicons-chevron-down-20-solid" class="w-4 h-4 transition-transform group-open:rotate-180" />
+          </summary>
+
+          <div class="mt-3 p-4 bg-gray-50 dark:bg-gray-900 rounded-lg space-y-3">
+            <div v-for="(param, key) in parameterValues" :key="key" class="flex flex-col gap-1">
+              <label class="text-xs font-medium text-gray-700 dark:text-gray-300">
+                {{ getParameterLabel(key) }}
+              </label>
+
+              <!-- Boolean parameter -->
+              <UToggle
+                v-if="getParameterType(key) === 'boolean'"
+                v-model="parameterValues[key]"
+                size="sm"
+              />
+
+              <!-- Date parameter -->
+              <input
+                v-else-if="getParameterType(key) === 'date'"
+                v-model="parameterValues[key]"
+                type="date"
+                class="px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
+              />
+
+              <!-- Text parameter -->
+              <input
+                v-else
+                v-model="parameterValues[key]"
+                type="text"
+                class="px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
+              />
+            </div>
+
+            <div class="flex gap-2 pt-2">
+              <UButton
+                @click="resetParameters"
+                color="gray"
+                variant="soft"
+                size="xs"
+                icon="i-heroicons-arrow-path"
+              >
+                Restablecer
+              </UButton>
+            </div>
+          </div>
+        </details>
+      </div>
+
       <!-- Actions -->
       <div class="flex flex-wrap gap-2 mt-4 pt-4 border-t dark:border-gray-700">
         <UButton
@@ -174,6 +228,32 @@ const executingCached = ref(false)
 const queryResult = ref<any>(null)
 const error = ref<string | null>(null)
 const copied = ref(false)
+const showParameters = ref(false)
+const parameterValues = ref<Record<string, any>>({})
+
+// Initialize parameter values from card template tags
+const templateTags = computed(() => props.card.dataset_query?.native?.['template-tags'] || {})
+
+const hasParameters = computed(() => Object.keys(templateTags.value).length > 0)
+
+// Initialize parameters on mount
+function initializeParameters() {
+  const params: Record<string, any> = {}
+  for (const [tagName, tagConfig] of Object.entries(templateTags.value)) {
+    const config = tagConfig as any
+    if (config.type === 'boolean') {
+      params[tagName] = config.default?.[0] ?? false
+    } else {
+      params[tagName] = config.default ?? ''
+    }
+  }
+  parameterValues.value = params
+}
+
+// Watch for card changes and reinitialize
+watch(() => props.card, () => {
+  initializeParameters()
+}, { immediate: true })
 
 const exportItems = [[
   {
@@ -193,6 +273,20 @@ const exportItems = [[
   }
 ]]
 
+function getParameterType(key: string): string {
+  const config = templateTags.value[key] as any
+  return config?.type || 'text'
+}
+
+function getParameterLabel(key: string): string {
+  const config = templateTags.value[key] as any
+  return config?.['display-name'] || key
+}
+
+function resetParameters() {
+  initializeParameters()
+}
+
 function getStatusColor(card: any) {
   if (card.archived) return 'red'
   if (card.dataset) return 'blue'
@@ -214,24 +308,21 @@ async function executeQuery() {
   queryResult.value = null
 
   try {
-    // Extract template tags and their defaults from the card
-    const templateTags = props.card.dataset_query?.native?.['template-tags'] || {}
     const parameters = []
 
-    // Build parameters from template tags
-    for (const [tagName, tagConfig] of Object.entries(templateTags)) {
+    // Build parameters from current form values
+    for (const [tagName, tagConfig] of Object.entries(templateTags.value)) {
       const config = tagConfig as any
       let paramType = 'text'
-      let paramValue = config.default
+      let paramValue = parameterValues.value[tagName]
 
       // Determine parameter type based on tag type
       if (config.type === 'date') {
         paramType = 'date/single'
-        // Use default value if present
-        paramValue = config.default || null
+        paramValue = parameterValues.value[tagName] || null
       } else if (config.type === 'boolean') {
         paramType = 'category'
-        paramValue = config.default || [false]
+        paramValue = [parameterValues.value[tagName]]
       }
 
       parameters.push({