From 3eb9e987c77e457968417867b63c1da14374d991 Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Sat, 18 Oct 2025 16:06:35 -0600
Subject: [PATCH] =?UTF-8?q?Feat:=20Filtrar=20chips=20de=20ResumenMuestra?=
 =?UTF-8?q?=20seg=C3=BAn=20tab=20activa?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Agregar prop tabActiva a ResumenMuestra.vue
- Implementar computed properties para filtrado:
  * mostrarChipsOrganolepticos (organoleptica + impresion-global)
  * mostrarChipsIntensidades (descriptiva-afectiva + impresion-global)
  * mostrarChipsDefectos (defectos + impresion-global)
- Envolver grupos de chips con template v-if según filtrado
- Pasar prop :tab-activa desde sesion.vue a ResumenMuestra
- En impresion-global se muestran TODOS los chips
- En otras tabs solo chips pertinentes a esa categoría
---
 nuxt4/app/components/cata/ResumenMuestra.vue | 172 +++++++++++--------
 nuxt4/app/pages/cata/sesion.vue              |   1 +
 2 files changed, 100 insertions(+), 73 deletions(-)

diff --git a/nuxt4/app/components/cata/ResumenMuestra.vue b/nuxt4/app/components/cata/ResumenMuestra.vue
index 5168a8d..dacdaea 100644
--- a/nuxt4/app/components/cata/ResumenMuestra.vue
+++ b/nuxt4/app/components/cata/ResumenMuestra.vue
@@ -22,104 +22,117 @@
 
     <!-- Segunda línea: Chips informativos -->
     <div class="chips-container flex flex-wrap gap-0.5">
-      <!-- Fragancia/Aroma -->
-      <div v-if="muestra.fraganciaAromaNotas.categorias.length > 0" class="chip">
-        <span class="chip-label">F/A:</span>
-        <span class="chip-value">{{ categoriasFragancia }}</span>
-      </div>
+      <!-- Chips Organolépticos -->
+      <template v-if="mostrarChipsOrganolepticos">
+        <!-- Fragancia/Aroma -->
+        <div v-if="muestra.fraganciaAromaNotas.categorias.length > 0" class="chip">
+          <span class="chip-label">F/A:</span>
+          <span class="chip-value">{{ categoriasFragancia }}</span>
+        </div>
 
-      <!-- Sabor -->
-      <div v-if="muestra.saborNotas.categorias.length > 0" class="chip">
-        <span class="chip-label">Sab:</span>
-        <span class="chip-value">{{ categoriasSabor }}</span>
-      </div>
+        <!-- Sabor -->
+        <div v-if="muestra.saborNotas.categorias.length > 0" class="chip">
+          <span class="chip-label">Sab:</span>
+          <span class="chip-value">{{ categoriasSabor }}</span>
+        </div>
 
-      <!-- Gustos predominantes -->
-      <div v-if="muestra.gustosPredominantes.length > 0" class="chip">
-        <span class="chip-label">Gus:</span>
-        <span class="chip-value">{{ muestra.gustosPredominantes.join(', ') }}</span>
-      </div>
+        <!-- Gustos predominantes -->
+        <div v-if="muestra.gustosPredominantes.length > 0" class="chip">
+          <span class="chip-label">Gus:</span>
+          <span class="chip-value">{{ muestra.gustosPredominantes.join(', ') }}</span>
+        </div>
 
-      <!-- Sensación en boca -->
-      <div v-if="muestra.sensacionEnBoca.length > 0" class="chip">
-        <span class="chip-label">Sen:</span>
-        <span class="chip-value">{{ muestra.sensacionEnBoca.join(', ') }}</span>
-      </div>
+        <!-- Sensación en boca -->
+        <div v-if="muestra.sensacionEnBoca.length > 0" class="chip">
+          <span class="chip-label">Sen:</span>
+          <span class="chip-value">{{ muestra.sensacionEnBoca.join(', ') }}</span>
+        </div>
+      </template>
 
-      <!-- Valores Descriptivo/Afectivo -->
-      <div v-if="muestra.intensidades.fragancia.afectiva !== null || muestra.intensidades.fragancia.descriptiva !== null" class="chip">
-        <span class="chip-label">Fra:</span>
-        <span v-if="muestra.intensidades.fragancia.afectiva !== null" class="chip-value">{{ muestra.intensidades.fragancia.afectiva }}❤️</span>
-        <span v-if="muestra.intensidades.fragancia.descriptiva !== null" class="chip-value">{{ muestra.intensidades.fragancia.descriptiva }}📊</span>
-      </div>
+      <!-- Chips Intensidades (Descriptiva/Afectiva) -->
+      <template v-if="mostrarChipsIntensidades">
+        <div v-if="muestra.intensidades.fragancia.afectiva !== null || muestra.intensidades.fragancia.descriptiva !== null" class="chip">
+          <span class="chip-label">Fra:</span>
+          <span v-if="muestra.intensidades.fragancia.afectiva !== null" class="chip-value">{{ muestra.intensidades.fragancia.afectiva }}❤️</span>
+          <span v-if="muestra.intensidades.fragancia.descriptiva !== null" class="chip-value">{{ muestra.intensidades.fragancia.descriptiva }}📊</span>
+        </div>
 
-      <div v-if="muestra.intensidades.aroma.afectiva !== null || muestra.intensidades.aroma.descriptiva !== null" class="chip">
-        <span class="chip-label">Aro:</span>
-        <span v-if="muestra.intensidades.aroma.afectiva !== null" class="chip-value">{{ muestra.intensidades.aroma.afectiva }}❤️</span>
-        <span v-if="muestra.intensidades.aroma.descriptiva !== null" class="chip-value">{{ muestra.intensidades.aroma.descriptiva }}📊</span>
-      </div>
+        <div v-if="muestra.intensidades.aroma.afectiva !== null || muestra.intensidades.aroma.descriptiva !== null" class="chip">
+          <span class="chip-label">Aro:</span>
+          <span v-if="muestra.intensidades.aroma.afectiva !== null" class="chip-value">{{ muestra.intensidades.aroma.afectiva }}❤️</span>
+          <span v-if="muestra.intensidades.aroma.descriptiva !== null" class="chip-value">{{ muestra.intensidades.aroma.descriptiva }}📊</span>
+        </div>
 
-      <div v-if="muestra.intensidades.sabor.afectiva !== null || muestra.intensidades.sabor.descriptiva !== null" class="chip">
-        <span class="chip-label">Sb:</span>
-        <span v-if="muestra.intensidades.sabor.afectiva !== null" class="chip-value">{{ muestra.intensidades.sabor.afectiva }}❤️</span>
-        <span v-if="muestra.intensidades.sabor.descriptiva !== null" class="chip-value">{{ muestra.intensidades.sabor.descriptiva }}📊</span>
-      </div>
+        <div v-if="muestra.intensidades.sabor.afectiva !== null || muestra.intensidades.sabor.descriptiva !== null" class="chip">
+          <span class="chip-label">Sb:</span>
+          <span v-if="muestra.intensidades.sabor.afectiva !== null" class="chip-value">{{ muestra.intensidades.sabor.afectiva }}❤️</span>
+          <span v-if="muestra.intensidades.sabor.descriptiva !== null" class="chip-value">{{ muestra.intensidades.sabor.descriptiva }}📊</span>
+        </div>
 
-      <div v-if="muestra.intensidades.saborResidual.afectiva !== null || muestra.intensidades.saborResidual.descriptiva !== null" class="chip">
-        <span class="chip-label">S.R:</span>
-        <span v-if="muestra.intensidades.saborResidual.afectiva !== null" class="chip-value">{{ muestra.intensidades.saborResidual.afectiva }}❤️</span>
-        <span v-if="muestra.intensidades.saborResidual.descriptiva !== null" class="chip-value">{{ muestra.intensidades.saborResidual.descriptiva }}📊</span>
-      </div>
+        <div v-if="muestra.intensidades.saborResidual.afectiva !== null || muestra.intensidades.saborResidual.descriptiva !== null" class="chip">
+          <span class="chip-label">S.R:</span>
+          <span v-if="muestra.intensidades.saborResidual.afectiva !== null" class="chip-value">{{ muestra.intensidades.saborResidual.afectiva }}❤️</span>
+          <span v-if="muestra.intensidades.saborResidual.descriptiva !== null" class="chip-value">{{ muestra.intensidades.saborResidual.descriptiva }}📊</span>
+        </div>
 
-      <div v-if="muestra.intensidades.acidez.afectiva !== null || muestra.intensidades.acidez.descriptiva !== null" class="chip">
-        <span class="chip-label">Aci:</span>
-        <span v-if="muestra.intensidades.acidez.afectiva !== null" class="chip-value">{{ muestra.intensidades.acidez.afectiva }}❤️</span>
-        <span v-if="muestra.intensidades.acidez.descriptiva !== null" class="chip-value">{{ muestra.intensidades.acidez.descriptiva }}📊</span>
-      </div>
+        <div v-if="muestra.intensidades.acidez.afectiva !== null || muestra.intensidades.acidez.descriptiva !== null" class="chip">
+          <span class="chip-label">Aci:</span>
+          <span v-if="muestra.intensidades.acidez.afectiva !== null" class="chip-value">{{ muestra.intensidades.acidez.afectiva }}❤️</span>
+          <span v-if="muestra.intensidades.acidez.descriptiva !== null" class="chip-value">{{ muestra.intensidades.acidez.descriptiva }}📊</span>
+        </div>
 
-      <div v-if="muestra.intensidades.dulzor.afectiva !== null || muestra.intensidades.dulzor.descriptiva !== null" class="chip">
-        <span class="chip-label">Dul:</span>
-        <span v-if="muestra.intensidades.dulzor.afectiva !== null" class="chip-value">{{ muestra.intensidades.dulzor.afectiva }}❤️</span>
-        <span v-if="muestra.intensidades.dulzor.descriptiva !== null" class="chip-value">{{ muestra.intensidades.dulzor.descriptiva }}📊</span>
-      </div>
+        <div v-if="muestra.intensidades.dulzor.afectiva !== null || muestra.intensidades.dulzor.descriptiva !== null" class="chip">
+          <span class="chip-label">Dul:</span>
+          <span v-if="muestra.intensidades.dulzor.afectiva !== null" class="chip-value">{{ muestra.intensidades.dulzor.afectiva }}❤️</span>
+          <span v-if="muestra.intensidades.dulzor.descriptiva !== null" class="chip-value">{{ muestra.intensidades.dulzor.descriptiva }}📊</span>
+        </div>
 
-      <div v-if="muestra.intensidades.sensacionBoca.afectiva !== null || muestra.intensidades.sensacionBoca.descriptiva !== null" class="chip">
-        <span class="chip-label">Sn:</span>
-        <span v-if="muestra.intensidades.sensacionBoca.afectiva !== null" class="chip-value">{{ muestra.intensidades.sensacionBoca.afectiva }}❤️</span>
-        <span v-if="muestra.intensidades.sensacionBoca.descriptiva !== null" class="chip-value">{{ muestra.intensidades.sensacionBoca.descriptiva }}📊</span>
-      </div>
+        <div v-if="muestra.intensidades.sensacionBoca.afectiva !== null || muestra.intensidades.sensacionBoca.descriptiva !== null" class="chip">
+          <span class="chip-label">Sn:</span>
+          <span v-if="muestra.intensidades.sensacionBoca.afectiva !== null" class="chip-value">{{ muestra.intensidades.sensacionBoca.afectiva }}❤️</span>
+          <span v-if="muestra.intensidades.sensacionBoca.descriptiva !== null" class="chip-value">{{ muestra.intensidades.sensacionBoca.descriptiva }}📊</span>
+        </div>
 
-      <div v-if="muestra.intensidades.impresionGlobal.afectiva !== null || muestra.intensidades.impresionGlobal.descriptiva !== null" class="chip">
-        <span class="chip-label">Imp:</span>
-        <span v-if="muestra.intensidades.impresionGlobal.afectiva !== null" class="chip-value">{{ muestra.intensidades.impresionGlobal.afectiva }}❤️</span>
-        <span v-if="muestra.intensidades.impresionGlobal.descriptiva !== null" class="chip-value">{{ muestra.intensidades.impresionGlobal.descriptiva }}📊</span>
-      </div>
+        <div v-if="muestra.intensidades.impresionGlobal.afectiva !== null || muestra.intensidades.impresionGlobal.descriptiva !== null" class="chip">
+          <span class="chip-label">Imp:</span>
+          <span v-if="muestra.intensidades.impresionGlobal.afectiva !== null" class="chip-value">{{ muestra.intensidades.impresionGlobal.afectiva }}❤️</span>
+          <span v-if="muestra.intensidades.impresionGlobal.descriptiva !== null" class="chip-value">{{ muestra.intensidades.impresionGlobal.descriptiva }}📊</span>
+        </div>
+      </template>
 
-      <!-- Tazas no uniformes -->
-      <div v-if="muestra.tazasNoUniformes.length > 0" class="chip chip-warning">
-        <span class="chip-label">NoUnif:</span>
-        <span class="chip-value">{{ muestra.tazasNoUniformes.join(',') }}</span>
-      </div>
+      <!-- Chips Defectos -->
+      <template v-if="mostrarChipsDefectos">
+        <!-- Tazas no uniformes -->
+        <div v-if="muestra.tazasNoUniformes.length > 0" class="chip chip-warning">
+          <span class="chip-label">NoUnif:</span>
+          <span class="chip-value">{{ muestra.tazasNoUniformes.join(',') }}</span>
+        </div>
 
-      <!-- Tazas defectuosas -->
-      <div v-if="muestra.tazasDefectuosas.length > 0" class="chip chip-error">
-        <span class="chip-label">Defec:</span>
-        <span class="chip-value">{{ muestra.tazasDefectuosas.join(',') }}</span>
-        <span v-if="muestra.defecto" class="chip-value">({{ muestra.defecto }})</span>
-      </div>
+        <!-- Tazas defectuosas -->
+        <div v-if="muestra.tazasDefectuosas.length > 0" class="chip chip-error">
+          <span class="chip-label">Defec:</span>
+          <span class="chip-value">{{ muestra.tazasDefectuosas.join(',') }}</span>
+          <span v-if="muestra.defecto" class="chip-value">({{ muestra.defecto }})</span>
+        </div>
+      </template>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import type { Muestra } from '~/types/catacion'
+import type { TabCatacion } from '~/composables/useCatacion'
 
 interface ResumenMuestraProps {
   /** Muestra a mostrar */
   muestra: Muestra
+  /** Tab activa para filtrar chips */
+  tabActiva?: TabCatacion
 }
 
-const props = defineProps<ResumenMuestraProps>()
+const props = withDefaults(defineProps<ResumenMuestraProps>(), {
+  tabActiva: 'impresion-global',
+})
 
 // Formatear categorías de fragancia/aroma
 const categoriasFragancia = computed(() => {
@@ -140,6 +153,19 @@ const puntajeClass = computed(() => {
   if (puntaje >= 70) return 'puntaje-regular'
   return 'puntaje-bajo'
 })
+
+// Determinar qué chips mostrar según la tab activa
+const mostrarChipsOrganolepticos = computed(() => {
+  return props.tabActiva === 'organoleptica' || props.tabActiva === 'impresion-global'
+})
+
+const mostrarChipsIntensidades = computed(() => {
+  return props.tabActiva === 'descriptiva-afectiva' || props.tabActiva === 'impresion-global'
+})
+
+const mostrarChipsDefectos = computed(() => {
+  return props.tabActiva === 'defectos' || props.tabActiva === 'impresion-global'
+})
 </script>
 
 <style scoped>
diff --git a/nuxt4/app/pages/cata/sesion.vue b/nuxt4/app/pages/cata/sesion.vue
index 73e2797..7f115cb 100644
--- a/nuxt4/app/pages/cata/sesion.vue
+++ b/nuxt4/app/pages/cata/sesion.vue
@@ -170,6 +170,7 @@
           <template #default="{ item }">
             <CataResumenMuestra
               :muestra="item.muestra"
+              :tab-activa="tabActiva"
             />
           </template>