Feat: Filtrar chips de ResumenMuestra según tab activa
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 1m6s
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 1m6s
- 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
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user