josedario87
1eff0772ab
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 1m8s
- Cambiar botón expandir a estilo texto (solo icono) - Agregar colores específicos por categoría a iconos de intensidades - Agregar sección de características organolépticas con notas - Agregar sección de notas adicionales - Cambiar badges de puntajes a solo outline (sin relleno) - Respetar preferencias de color del usuario en badges excepto SCAA - Corregir tipo de longPressTimer (ReturnType<typeof setTimeout>)
395 lines
11 KiB
Vue
395 lines
11 KiB
Vue
<template>
|
|
<div class="resumen-muestra w-full">
|
|
<!-- Primera línea: Número, nombre y puntaje -->
|
|
<div class="flex items-center gap-2 mb-1">
|
|
<!-- Número de muestra -->
|
|
<div class="muestra-numero cata-text font-bold flex-shrink-0">
|
|
#{{ muestra.muestraId }}
|
|
</div>
|
|
|
|
<!-- Nombre de muestra -->
|
|
<div class="flex-1 min-w-0">
|
|
<div class="muestra-nombre cata-text font-semibold truncate">
|
|
{{ muestra.nombre }}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Puntajes - alineados a la derecha -->
|
|
<div class="puntajes-container flex items-center gap-1 flex-shrink-0 ml-auto">
|
|
<!-- Sumatoria Afectiva -->
|
|
<div class="puntaje-badge puntaje-sumatoria px-2 py-0.5 rounded">
|
|
<span class="puntaje-label">Σ</span>
|
|
<span class="font-bold">{{ sumatoriaAfectiva }}</span>
|
|
</div>
|
|
|
|
<!-- SCAA Score -->
|
|
<div class="puntaje-badge puntaje-scaa px-2 py-0.5 rounded" :class="scaaClass">
|
|
<span class="puntaje-label">SCAA</span>
|
|
<span class="font-bold">{{ scaaScore.toFixed(2) }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Segunda línea: Chips informativos -->
|
|
<div class="chips-container flex flex-wrap gap-0.5">
|
|
<!-- 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>
|
|
|
|
<!-- 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" class="chip">
|
|
<span class="chip-label">Sen:</span>
|
|
<span class="chip-value">{{ muestra.sensacionEnBoca }}</span>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Chips Intensidades (solo Afectiva con icono) -->
|
|
<template v-if="mostrarChipsIntensidades">
|
|
<div v-if="muestra.intensidades.fragancia.afectiva !== null" class="chip chip-intensidad">
|
|
<UIcon :name="getCategoryIcon('fragancia')" class="chip-icon" />
|
|
<span class="chip-value">{{ muestra.intensidades.fragancia.afectiva }}</span>
|
|
</div>
|
|
|
|
<div v-if="muestra.intensidades.aroma.afectiva !== null" class="chip chip-intensidad">
|
|
<UIcon :name="getCategoryIcon('aroma')" class="chip-icon" />
|
|
<span class="chip-value">{{ muestra.intensidades.aroma.afectiva }}</span>
|
|
</div>
|
|
|
|
<div v-if="muestra.intensidades.sabor.afectiva !== null" class="chip chip-intensidad">
|
|
<UIcon :name="getCategoryIcon('sabor')" class="chip-icon" />
|
|
<span class="chip-value">{{ muestra.intensidades.sabor.afectiva }}</span>
|
|
</div>
|
|
|
|
<div v-if="muestra.intensidades.saborResidual.afectiva !== null" class="chip chip-intensidad">
|
|
<UIcon :name="getCategoryIcon('saborResidual')" class="chip-icon" />
|
|
<span class="chip-value">{{ muestra.intensidades.saborResidual.afectiva }}</span>
|
|
</div>
|
|
|
|
<div v-if="muestra.intensidades.acidez.afectiva !== null" class="chip chip-intensidad">
|
|
<UIcon :name="getCategoryIcon('acidez')" class="chip-icon" />
|
|
<span class="chip-value">{{ muestra.intensidades.acidez.afectiva }}</span>
|
|
</div>
|
|
|
|
<div v-if="muestra.intensidades.dulzor.afectiva !== null" class="chip chip-intensidad">
|
|
<UIcon :name="getCategoryIcon('dulzor')" class="chip-icon" />
|
|
<span class="chip-value">{{ muestra.intensidades.dulzor.afectiva }}</span>
|
|
</div>
|
|
|
|
<div v-if="muestra.intensidades.sensacionBoca.afectiva !== null" class="chip chip-intensidad">
|
|
<UIcon :name="getCategoryIcon('sensacionBoca')" class="chip-icon" />
|
|
<span class="chip-value">{{ muestra.intensidades.sensacionBoca.afectiva }}</span>
|
|
</div>
|
|
|
|
<div v-if="muestra.intensidades.impresionGlobal.afectiva !== null" class="chip chip-intensidad">
|
|
<UIcon :name="getCategoryIcon('impresionGlobal')" class="chip-icon" />
|
|
<span class="chip-value">{{ muestra.intensidades.impresionGlobal.afectiva }}</span>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- 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>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { Muestra } from '~/types/catacion'
|
|
import type { TabCatacion } from '~/composables/useCatacion'
|
|
import { calcularSumatoriaAfectiva, calcularSCAA } from '~/types/catacion'
|
|
|
|
interface ResumenMuestraProps {
|
|
/** Muestra a mostrar */
|
|
muestra: Muestra
|
|
/** Tab activa para filtrar chips */
|
|
tabActiva?: TabCatacion
|
|
}
|
|
|
|
const props = withDefaults(defineProps<ResumenMuestraProps>(), {
|
|
tabActiva: 'impresion-global',
|
|
})
|
|
|
|
// Cálculos de puntajes
|
|
const sumatoriaAfectiva = computed(() => calcularSumatoriaAfectiva(props.muestra))
|
|
const scaaScore = computed(() => calcularSCAA(props.muestra))
|
|
|
|
// Formatear categorías de fragancia/aroma
|
|
const categoriasFragancia = computed(() => {
|
|
return props.muestra.fraganciaAromaNotas.categorias.slice(0, 2).join(', ')
|
|
})
|
|
|
|
// Formatear categorías de sabor
|
|
const categoriasSabor = computed(() => {
|
|
return props.muestra.saborNotas.categorias.slice(0, 2).join(', ')
|
|
})
|
|
|
|
// Clase CSS para el SCAA Score basado en el valor
|
|
const scaaClass = computed(() => {
|
|
const scaa = scaaScore.value
|
|
if (scaa >= 90) return 'scaa-excelente'
|
|
if (scaa >= 85) return 'scaa-muy-bueno'
|
|
if (scaa >= 80) return 'scaa-bueno'
|
|
if (scaa >= 70) return 'scaa-regular'
|
|
return 'scaa-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'
|
|
})
|
|
|
|
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>
|
|
.resumen-muestra {
|
|
min-height: 36px;
|
|
}
|
|
|
|
.muestra-numero {
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.muestra-nombre {
|
|
font-size: 0.8125rem;
|
|
}
|
|
|
|
/* Puntajes */
|
|
.puntajes-container {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.puntaje-badge {
|
|
border: 1px solid;
|
|
min-width: 2rem;
|
|
text-align: center;
|
|
font-size: 0.625rem;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
justify-content: center;
|
|
}
|
|
|
|
.puntaje-label {
|
|
font-size: 0.5625rem;
|
|
opacity: 0.75;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Sumatoria Afectiva - color neutro */
|
|
.puntaje-sumatoria {
|
|
background-color: transparent;
|
|
border-color: color-mix(in srgb, var(--cata-primary) 40%, transparent);
|
|
color: var(--cata-text);
|
|
}
|
|
|
|
/* SCAA Score - colores según valor */
|
|
.scaa-excelente {
|
|
background-color: transparent;
|
|
border-color: #10b981;
|
|
color: #10b981;
|
|
}
|
|
|
|
.scaa-muy-bueno {
|
|
background-color: transparent;
|
|
border-color: #3b82f6;
|
|
color: #3b82f6;
|
|
}
|
|
|
|
.scaa-bueno {
|
|
background-color: transparent;
|
|
border-color: #f59e0b;
|
|
color: #f59e0b;
|
|
}
|
|
|
|
.scaa-regular {
|
|
background-color: transparent;
|
|
border-color: #ef4444;
|
|
color: #ef4444;
|
|
}
|
|
|
|
.scaa-bajo {
|
|
background-color: transparent;
|
|
border-color: #6b7280;
|
|
color: #6b7280;
|
|
}
|
|
|
|
/* Chips */
|
|
.chips-container {
|
|
font-size: 0.625rem;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.15rem;
|
|
padding: 0.15rem 0.35rem;
|
|
border-radius: 0.2rem;
|
|
background-color: color-mix(in srgb, var(--cata-primary) 10%, transparent);
|
|
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;
|
|
color: var(--cata-text);
|
|
}
|
|
|
|
.chip-value {
|
|
color: var(--cata-text);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.chip-warning {
|
|
background-color: color-mix(in srgb, #f59e0b 15%, transparent);
|
|
border-color: #f59e0b;
|
|
}
|
|
|
|
.chip-warning .chip-label,
|
|
.chip-warning .chip-value {
|
|
color: #f59e0b;
|
|
}
|
|
|
|
.chip-error {
|
|
background-color: color-mix(in srgb, #ef4444 15%, transparent);
|
|
border-color: #ef4444;
|
|
}
|
|
|
|
.chip-error .chip-label,
|
|
.chip-error .chip-value {
|
|
color: #ef4444;
|
|
}
|
|
|
|
/* Modo oscuro */
|
|
.dark .puntaje-sumatoria {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.dark .scaa-excelente {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.dark .scaa-muy-bueno {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.dark .scaa-bueno {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.dark .scaa-regular {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.dark .scaa-bajo {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.dark .chip {
|
|
background-color: color-mix(in srgb, var(--cata-primary) 15%, transparent);
|
|
}
|
|
|
|
.dark .chip-warning {
|
|
background-color: color-mix(in srgb, #f59e0b 20%, transparent);
|
|
}
|
|
|
|
.dark .chip-error {
|
|
background-color: color-mix(in srgb, #ef4444 20%, transparent);
|
|
}
|
|
|
|
/* Responsive */
|
|
@media (max-width: 640px) {
|
|
.muestra-numero {
|
|
font-size: 0.8125rem;
|
|
}
|
|
|
|
.muestra-nombre {
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.puntajes-container {
|
|
gap: 0.125rem;
|
|
}
|
|
|
|
.puntaje-badge {
|
|
font-size: 0.5625rem;
|
|
min-width: 1.5rem;
|
|
gap: 0.125rem;
|
|
padding: 0.125rem 0.25rem;
|
|
}
|
|
|
|
.puntaje-label {
|
|
font-size: 0.5rem;
|
|
}
|
|
|
|
.chips-container {
|
|
font-size: 0.5625rem;
|
|
}
|
|
|
|
.chip {
|
|
padding: 0.125rem 0.3rem;
|
|
gap: 0.125rem;
|
|
}
|
|
}
|
|
</style>
|