From 0cdae3d4f56934784d0dad96c2d82ccdc8363369 Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Sat, 18 Oct 2025 16:33:24 -0600
Subject: [PATCH] Fix: Cambiar accordion de multiple a single con collapsible
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Cambiar de type='multiple' a type='single' (solo un item abierto a la vez)
- Todos los accordions pueden estar cerrados (collapsible: true por defecto)
- Actualizar estado accordionAbierto de string[] a string | undefined
- Actualizar lógica toggleCollapseAll para modo single
- Agregar border-t al content del accordion para mejor separación visual
- Actualizar títulos del botón flotante: 'Abrir primera muestra' / 'Cerrar muestra abierta'
---
 nuxt4/app/composables/useCatacion.ts |  6 +++---
 nuxt4/app/pages/cata/sesion.vue      | 17 ++++++++---------
 2 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/nuxt4/app/composables/useCatacion.ts b/nuxt4/app/composables/useCatacion.ts
index 7203415..4286f4b 100644
--- a/nuxt4/app/composables/useCatacion.ts
+++ b/nuxt4/app/composables/useCatacion.ts
@@ -53,7 +53,7 @@ export const useCatacion = () => {
   // Estado de la UI
   const tabActiva = useState<TabCatacion>('tab-activa', () => 'organoleptica')
   const subcategoriasPorTab = useState<SubcategoriasPorTab>('subcategorias-por-tab', cargarSubcategoriasDesdeStorage)
-  const accordionAbierto = useState<string[]>('accordion-abierto', () => [])
+  const accordionAbierto = useState<string | undefined>('accordion-abierto', () => undefined)
 
   // Computed para obtener las subcategorías de la tab actual
   const subcategoriasActivas = computed(() => subcategoriasPorTab.value[tabActiva.value])
@@ -81,7 +81,7 @@ export const useCatacion = () => {
       await guardar(nuevaSesion)
       // Resetear estado de UI
       tabActiva.value = 'organoleptica'
-      accordionAbierto.value = []
+      accordionAbierto.value = undefined
       return nuevaSesion
     } catch (err) {
       console.error('Error al crear nueva sesión:', err)
@@ -308,7 +308,7 @@ export const useCatacion = () => {
     try {
       await eliminar()
       tabActiva.value = 'organoleptica'
-      accordionAbierto.value = []
+      accordionAbierto.value = undefined
     } catch (err) {
       console.error('Error al eliminar sesión:', err)
       throw err
diff --git a/nuxt4/app/pages/cata/sesion.vue b/nuxt4/app/pages/cata/sesion.vue
index 06c1af0..fb96b16 100644
--- a/nuxt4/app/pages/cata/sesion.vue
+++ b/nuxt4/app/pages/cata/sesion.vue
@@ -158,12 +158,11 @@
       <div class="muestras-container container mx-auto px-0 sm:px-4 py-4">
         <UAccordion
           v-model="accordionAbierto"
-          type="multiple"
           :items="accordionItems"
           :ui="{
             item: 'border-b border-default',
             trigger: 'accordion-trigger w-full px-4 py-3 transition-colors',
-            content: '',
+            content: 'border-t border-default',
           }"
         >
           <!-- Header personalizado con ResumenMuestra -->
@@ -196,7 +195,7 @@
         <button
           class="floating-action-button cata-button p-2 rounded-full flex items-center justify-center"
           @click="toggleCollapseAll"
-          :title="todosColapsados ? 'Expandir todas las muestras' : 'Colapsar todas las muestras'"
+          :title="todosColapsados ? 'Abrir primera muestra' : 'Cerrar muestra abierta'"
         >
           <UIcon
             :name="todosColapsados ? 'i-lucide-maximize-2' : 'i-lucide-minimize-2'"
@@ -313,17 +312,17 @@ const obtenerMuestraPorValue = (value: string): Muestra | null => {
 
 // Verificar si todos los acordiones están colapsados
 const todosColapsados = computed(() => {
-  return accordionAbierto.value.length === 0
+  return !accordionAbierto.value
 })
 
-// Colapsar o expandir todos los acordiones
+// Colapsar o expandir el primer accordion
 const toggleCollapseAll = () => {
   if (todosColapsados.value) {
-    // Expandir todos: agregar todos los values
-    accordionAbierto.value = accordionItems.value.map(item => item.value)
+    // Abrir el primero
+    accordionAbierto.value = accordionItems.value[0]?.value
   } else {
-    // Colapsar todos: vaciar el array
-    accordionAbierto.value = []
+    // Cerrar todo
+    accordionAbierto.value = undefined
   }
 }