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

Feat: Agregar iconos a categorías de intensidad y simplificar chips de resumen
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 1m5s
Details

Browse Source 
- Agregar función getCategoryIcon() en FormularioMuestra y ResumenMuestra
- Iconos Lucide para cada categoría:
  * fragancia: flower-2, aroma: wind, sabor: candy
  * saborResidual: timer, acidez: citrus, dulzor: cookie
  * sensacionBoca: droplets, impresionGlobal: star
- Actualizar todos los títulos de sección con iconos
- Modificar chips de ResumenMuestra para mostrar solo icono + valor descriptivo
- Eliminar valores afectivos y emojis de chips
- Agregar estilos CSS para .chip-icon
This commit is contained in:
josedario87
2025-10-18 16:14:11 -06:00
parent 3eb9e987c7
commit b1aa431549
2 changed files with 127 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
nuxt4/app/components/cata/FormularioMuestra.vue
View File

@@ -79,7 +79,10 @@
<!-- Sliders de Fragancia -->
<div v-if="mostrarFraganciaSlider" class="form-section">
<div class="flex items-center justify-between mb-3">
<h5 class="form-section-title cata-text" :style="{ color: getCategoryColor('fragancia') }">Fragancia</h5>
<h5 class="form-section-title cata-text flex items-center gap-2" :style="{ color: getCategoryColor('fragancia') }">
<UIcon :name="getCategoryIcon('fragancia')" class="w-5 h-5" />
Fragancia
</h5>
<div class="flex gap-2">
<UBadge :style="{ backgroundColor: getCategoryColor('fragancia'), opacity: 0.4 }" class="text-xs">
📊 {{ muestra.intensidades.fragancia.descriptiva ?? '-' }}
@@ -108,7 +111,10 @@
<!-- Sliders de Aroma -->
<div v-if="mostrarAromaSlider" class="form-section">
<div class="flex items-center justify-between mb-3">
<h5 class="form-section-title cata-text" :style="{ color: getCategoryColor('aroma') }">Aroma</h5>
<h5 class="form-section-title cata-text flex items-center gap-2" :style="{ color: getCategoryColor('aroma') }">
<UIcon :name="getCategoryIcon('aroma')" class="w-5 h-5" />
Aroma
</h5>
<div class="flex gap-2">
<UBadge :style="{ backgroundColor: getCategoryColor('aroma'), opacity: 0.4 }" class="text-xs">
📊 {{ muestra.intensidades.aroma.descriptiva ?? '-' }}
@@ -137,7 +143,10 @@
<!-- Sliders de Sabor -->
<div v-if="mostrarSaborSlider" class="form-section">
<div class="flex items-center justify-between mb-3">
<h5 class="form-section-title cata-text" :style="{ color: getCategoryColor('sabor') }">Sabor</h5>
<h5 class="form-section-title cata-text flex items-center gap-2" :style="{ color: getCategoryColor('sabor') }">
<UIcon :name="getCategoryIcon('sabor')" class="w-5 h-5" />
Sabor
</h5>
<div class="flex gap-2">
<UBadge :style="{ backgroundColor: getCategoryColor('sabor'), opacity: 0.4 }" class="text-xs">
📊 {{ muestra.intensidades.sabor.descriptiva ?? '-' }}
@@ -166,7 +175,10 @@
<!-- Sliders de Sabor Residual -->
<div v-if="mostrarSaborResidualSlider" class="form-section">
<div class="flex items-center justify-between mb-3">
<h5 class="form-section-title cata-text" :style="{ color: getCategoryColor('saborResidual') }">Sabor Residual</h5>
<h5 class="form-section-title cata-text flex items-center gap-2" :style="{ color: getCategoryColor('saborResidual') }">
<UIcon :name="getCategoryIcon('saborResidual')" class="w-5 h-5" />
Sabor Residual
</h5>
<div class="flex gap-2">
<UBadge :style="{ backgroundColor: getCategoryColor('saborResidual'), opacity: 0.4 }" class="text-xs">
📊 {{ muestra.intensidades.saborResidual.descriptiva ?? '-' }}
@@ -195,7 +207,10 @@
<!-- Sliders de Acidez -->
<div v-if="mostrarAcidezSlider" class="form-section">
<div class="flex items-center justify-between mb-3">
<h5 class="form-section-title cata-text" :style="{ color: getCategoryColor('acidez') }">Acidez</h5>
<h5 class="form-section-title cata-text flex items-center gap-2" :style="{ color: getCategoryColor('acidez') }">
<UIcon :name="getCategoryIcon('acidez')" class="w-5 h-5" />
Acidez
</h5>
<div class="flex gap-2">
<UBadge :style="{ backgroundColor: getCategoryColor('acidez'), opacity: 0.4 }" class="text-xs">
📊 {{ muestra.intensidades.acidez.descriptiva ?? '-' }}
@@ -224,7 +239,10 @@
<!-- Sliders de Dulzor -->
<div v-if="mostrarDulzorSlider" class="form-section">
<div class="flex items-center justify-between mb-3">
<h5 class="form-section-title cata-text" :style="{ color: getCategoryColor('dulzor') }">Dulzor</h5>
<h5 class="form-section-title cata-text flex items-center gap-2" :style="{ color: getCategoryColor('dulzor') }">
<UIcon :name="getCategoryIcon('dulzor')" class="w-5 h-5" />
Dulzor
</h5>
<div class="flex gap-2">
<UBadge :style="{ backgroundColor: getCategoryColor('dulzor'), opacity: 0.4 }" class="text-xs">
📊 {{ muestra.intensidades.dulzor.descriptiva ?? '-' }}
@@ -253,7 +271,10 @@
<!-- Sliders de Sensación en Boca -->
<div v-if="mostrarSensacionBocaSlider" class="form-section">
<div class="flex items-center justify-between mb-3">
<h5 class="form-section-title cata-text" :style="{ color: getCategoryColor('sensacionBoca') }">Sensación en la Boca</h5>
<h5 class="form-section-title cata-text flex items-center gap-2" :style="{ color: getCategoryColor('sensacionBoca') }">
<UIcon :name="getCategoryIcon('sensacionBoca')" class="w-5 h-5" />
Sensación en la Boca
</h5>
<div class="flex gap-2">
<UBadge :style="{ backgroundColor: getCategoryColor('sensacionBoca'), opacity: 0.4 }" class="text-xs">
📊 {{ muestra.intensidades.sensacionBoca.descriptiva ?? '-' }}
@@ -282,7 +303,10 @@
<!-- Sliders de Impresión Global -->
<div v-if="mostrarImpresionGlobalSlider" class="form-section">
<div class="flex items-center justify-between mb-3">
<h5 class="form-section-title cata-text" :style="{ color: getCategoryColor('impresionGlobal') }">Impresión Global</h5>
<h5 class="form-section-title cata-text flex items-center gap-2" :style="{ color: getCategoryColor('impresionGlobal') }">
<UIcon :name="getCategoryIcon('impresionGlobal')" class="w-5 h-5" />
Impresión Global
</h5>
<div class="flex gap-2">
<UBadge :style="{ backgroundColor: getCategoryColor('impresionGlobal'), opacity: 0.4 }" class="text-xs">
📊 {{ muestra.intensidades.impresionGlobal.descriptiva ?? '-' }}
@@ -395,7 +419,10 @@
<!-- Fragancia -->
<div class="form-section mb-4">
<div class="flex items-center justify-between mb-3">
<h6 class="form-subsection-title cata-text" :style="{ color: getCategoryColor('fragancia') }">Fragancia</h6>
<h6 class="form-subsection-title cata-text flex items-center gap-2" :style="{ color: getCategoryColor('fragancia') }">
<UIcon :name="getCategoryIcon('fragancia')" class="w-5 h-5" />
Fragancia
</h6>
<div class="flex gap-2">
<UBadge :style="{ backgroundColor: getCategoryColor('fragancia'), opacity: 0.4 }" class="text-xs">
📊 {{ muestra.intensidades.fragancia.descriptiva ?? '-' }}
@@ -424,7 +451,10 @@
<!-- Aroma -->
<div class="form-section mb-4">
<div class="flex items-center justify-between mb-3">
<h6 class="form-subsection-title cata-text" :style="{ color: getCategoryColor('aroma') }">Aroma</h6>
<h6 class="form-subsection-title cata-text flex items-center gap-2" :style="{ color: getCategoryColor('aroma') }">
<UIcon :name="getCategoryIcon('aroma')" class="w-5 h-5" />
Aroma
</h6>
<div class="flex gap-2">
<UBadge :style="{ backgroundColor: getCategoryColor('aroma'), opacity: 0.4 }" class="text-xs">
📊 {{ muestra.intensidades.aroma.descriptiva ?? '-' }}
@@ -453,7 +483,10 @@
<!-- Sabor -->
<div class="form-section mb-4">
<div class="flex items-center justify-between mb-3">
<h6 class="form-subsection-title cata-text" :style="{ color: getCategoryColor('sabor') }">Sabor</h6>
<h6 class="form-subsection-title cata-text flex items-center gap-2" :style="{ color: getCategoryColor('sabor') }">
<UIcon :name="getCategoryIcon('sabor')" class="w-5 h-5" />
Sabor
</h6>
<div class="flex gap-2">
<UBadge :style="{ backgroundColor: getCategoryColor('sabor'), opacity: 0.4 }" class="text-xs">
📊 {{ muestra.intensidades.sabor.descriptiva ?? '-' }}
@@ -482,7 +515,10 @@
<!-- Sabor Residual -->
<div class="form-section mb-4">
<div class="flex items-center justify-between mb-3">
<h6 class="form-subsection-title cata-text" :style="{ color: getCategoryColor('saborResidual') }">Sabor Residual</h6>
<h6 class="form-subsection-title cata-text flex items-center gap-2" :style="{ color: getCategoryColor('saborResidual') }">
<UIcon :name="getCategoryIcon('saborResidual')" class="w-5 h-5" />
Sabor Residual
</h6>
<div class="flex gap-2">
<UBadge :style="{ backgroundColor: getCategoryColor('saborResidual'), opacity: 0.4 }" class="text-xs">
📊 {{ muestra.intensidades.saborResidual.descriptiva ?? '-' }}
@@ -511,7 +547,10 @@
<!-- Acidez -->
<div class="form-section mb-4">
<div class="flex items-center justify-between mb-3">
<h6 class="form-subsection-title cata-text" :style="{ color: getCategoryColor('acidez') }">Acidez</h6>
<h6 class="form-subsection-title cata-text flex items-center gap-2" :style="{ color: getCategoryColor('acidez') }">
<UIcon :name="getCategoryIcon('acidez')" class="w-5 h-5" />
Acidez
</h6>
<div class="flex gap-2">
<UBadge :style="{ backgroundColor: getCategoryColor('acidez'), opacity: 0.4 }" class="text-xs">
📊 {{ muestra.intensidades.acidez.descriptiva ?? '-' }}
@@ -540,7 +579,10 @@
<!-- Dulzor -->
<div class="form-section mb-4">
<div class="flex items-center justify-between mb-3">
<h6 class="form-subsection-title cata-text" :style="{ color: getCategoryColor('dulzor') }">Dulzor</h6>
<h6 class="form-subsection-title cata-text flex items-center gap-2" :style="{ color: getCategoryColor('dulzor') }">
<UIcon :name="getCategoryIcon('dulzor')" class="w-5 h-5" />
Dulzor
</h6>
<div class="flex gap-2">
<UBadge :style="{ backgroundColor: getCategoryColor('dulzor'), opacity: 0.4 }" class="text-xs">
📊 {{ muestra.intensidades.dulzor.descriptiva ?? '-' }}
@@ -569,7 +611,10 @@
<!-- Sensación en Boca -->
<div class="form-section mb-4">
<div class="flex items-center justify-between mb-3">
<h6 class="form-subsection-title cata-text" :style="{ color: getCategoryColor('sensacionBoca') }">Sensación en la Boca</h6>
<h6 class="form-subsection-title cata-text flex items-center gap-2" :style="{ color: getCategoryColor('sensacionBoca') }">
<UIcon :name="getCategoryIcon('sensacionBoca')" class="w-5 h-5" />
Sensación en la Boca
</h6>
<div class="flex gap-2">
<UBadge :style="{ backgroundColor: getCategoryColor('sensacionBoca'), opacity: 0.4 }" class="text-xs">
📊 {{ muestra.intensidades.sensacionBoca.descriptiva ?? '-' }}
@@ -598,7 +643,10 @@
<!-- Impresión Global -->
<div class="form-section">
<div class="flex items-center justify-between mb-3">
<h6 class="form-subsection-title cata-text" :style="{ color: getCategoryColor('impresionGlobal') }">Impresión Global</h6>
<h6 class="form-subsection-title cata-text flex items-center gap-2" :style="{ color: getCategoryColor('impresionGlobal') }">
<UIcon :name="getCategoryIcon('impresionGlobal')" class="w-5 h-5" />
Impresión Global
</h6>
<div class="flex gap-2">
<UBadge :style="{ backgroundColor: getCategoryColor('impresionGlobal'), opacity: 0.4 }" class="text-xs">
📊 {{ muestra.intensidades.impresionGlobal.descriptiva ?? '-' }}
@@ -726,6 +774,21 @@ const props = withDefaults(defineProps<FormularioMuestraProps>(), {
const { actualizarIntensidad: actualizarIntensidadCatacion } = useCatacion()
const { getCategoryColor } = useCategoryColors()
// Función para obtener el icono de cada categoría
const getCategoryIcon = (category: string): string => {
const icons: Record<string, string> = {
fragancia: 'i-lucide-flower-2',
aroma: 'i-lucide-wind',
sabor: 'i-lucide-candy',
saborResidual: 'i-lucide-timer',
acidez: 'i-lucide-citrus',
dulzor: 'i-lucide-cookie',
sensacionBoca: 'i-lucide-droplets',
impresionGlobal: 'i-lucide-star',
}
return icons[category] || 'i-lucide-circle'
}
// Listas para los selectores
const sensacionesBoca = SENSACIONES_BOCA
const gustosPredominantes = GUSTOS_PREDOMINANTES

81
nuxt4/app/components/cata/ResumenMuestra.vue
View File

@@ -49,54 +49,46 @@
</div>
</template>
<!-- Chips Intensidades (Descriptiva/Afectiva) -->
<!-- Chips Intensidades (solo Descriptiva con icono) -->
<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 v-if="muestra.intensidades.fragancia.descriptiva !== null" class="chip chip-intensidad">
<UIcon :name="getCategoryIcon('fragancia')" class="chip-icon" />
<span 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 v-if="muestra.intensidades.aroma.descriptiva !== null" class="chip chip-intensidad">
<UIcon :name="getCategoryIcon('aroma')" class="chip-icon" />
<span 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 v-if="muestra.intensidades.sabor.descriptiva !== null" class="chip chip-intensidad">
<UIcon :name="getCategoryIcon('sabor')" class="chip-icon" />
<span 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 v-if="muestra.intensidades.saborResidual.descriptiva !== null" class="chip chip-intensidad">
<UIcon :name="getCategoryIcon('saborResidual')" class="chip-icon" />
<span 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 v-if="muestra.intensidades.acidez.descriptiva !== null" class="chip chip-intensidad">
<UIcon :name="getCategoryIcon('acidez')" class="chip-icon" />
<span 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 v-if="muestra.intensidades.dulzor.descriptiva !== null" class="chip chip-intensidad">
<UIcon :name="getCategoryIcon('dulzor')" class="chip-icon" />
<span 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 v-if="muestra.intensidades.sensacionBoca.descriptiva !== null" class="chip chip-intensidad">
<UIcon :name="getCategoryIcon('sensacionBoca')" class="chip-icon" />
<span 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 v-if="muestra.intensidades.impresionGlobal.descriptiva !== null" class="chip chip-intensidad">
<UIcon :name="getCategoryIcon('impresionGlobal')" class="chip-icon" />
<span class="chip-value">{{ muestra.intensidades.impresionGlobal.descriptiva }}</span>
</div>
</template>
@@ -154,6 +146,21 @@ const puntajeClass = computed(() => {
return 'puntaje-bajo'
})
// Función para obtener el icono de cada categoría
const getCategoryIcon = (category: string): string => {
const icons: Record<string, string> = {
fragancia: 'i-lucide-flower-2',
aroma: 'i-lucide-wind',
sabor: 'i-lucide-candy',
saborResidual: 'i-lucide-timer',
acidez: 'i-lucide-citrus',
dulzor: 'i-lucide-cookie',
sensacionBoca: 'i-lucide-droplets',
impresionGlobal: 'i-lucide-star',
}
return icons[category] || 'i-lucide-circle'
}
// Determinar qué chips mostrar según la tab activa
const mostrarChipsOrganolepticos = computed(() => {
return props.tabActiva === 'organoleptica' || props.tabActiva === 'impresion-global'
@@ -235,6 +242,14 @@ const mostrarChipsDefectos = computed(() => {
border: 1px solid color-mix(in srgb, var(--cata-primary) 30%, transparent);
}
.chip-icon {
width: 0.75rem;
height: 0.75rem;
flex-shrink: 0;
color: var(--cata-primary);
opacity: 0.9;
}
.chip-label {
font-weight: 600;
opacity: 0.75;