josedario87
dd57ee1fb3
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 1m7s
Implementación completa de vista detallada para muestras: Componentes nuevos: - ResumenMuestraExpandido: Vista no compacta con valores claramente visibles - ModalResumenExpandido: Modal reutilizable para mostrar vista expandida Integraciones: - Calculadora SCAA: Usa vista expandida en paso 3 - Página de sesión: * Long press en móvil (500ms) en header del accordion * Botón expandir en desktop cerca del título * Vibración háptica en móvil al activar Características: - Grid responsivo de intensidades afectivas - Puntajes destacados (Σ y SCAA) con colores según valor - Visualización clara de penalizaciones - Diseño adaptativo móvil/desktop
438 lines
11 KiB
Vue
438 lines
11 KiB
Vue
<template>
|
|
<div class="resumen-expandido cata-text">
|
|
<!-- Header con título y puntajes principales -->
|
|
<div class="header-section">
|
|
<div class="muestra-info">
|
|
<div class="muestra-numero">#{{ muestra.muestraId }}</div>
|
|
<h3 class="muestra-nombre">{{ muestra.nombre }}</h3>
|
|
</div>
|
|
|
|
<!-- Puntajes destacados -->
|
|
<div class="puntajes-principales">
|
|
<div class="puntaje-grande puntaje-sumatoria">
|
|
<div class="puntaje-label">Sumatoria Afectiva</div>
|
|
<div class="puntaje-valor">{{ sumatoriaAfectiva }}</div>
|
|
</div>
|
|
|
|
<div class="puntaje-grande puntaje-scaa" :class="scaaClass">
|
|
<div class="puntaje-label">SCAA Score</div>
|
|
<div class="puntaje-valor">{{ scaaScore.toFixed(2) }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Intensidades Afectivas -->
|
|
<div class="seccion">
|
|
<h4 class="seccion-titulo">Valores Afectivos</h4>
|
|
<div class="intensidades-grid">
|
|
<div v-if="muestra.intensidades.fragancia.afectiva !== null" class="intensidad-item">
|
|
<UIcon :name="getCategoryIcon('fragancia')" class="intensidad-icon" />
|
|
<div class="intensidad-info">
|
|
<div class="intensidad-nombre">Fragancia</div>
|
|
<div class="intensidad-valor">{{ muestra.intensidades.fragancia.afectiva }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="muestra.intensidades.aroma.afectiva !== null" class="intensidad-item">
|
|
<UIcon :name="getCategoryIcon('aroma')" class="intensidad-icon" />
|
|
<div class="intensidad-info">
|
|
<div class="intensidad-nombre">Aroma</div>
|
|
<div class="intensidad-valor">{{ muestra.intensidades.aroma.afectiva }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="muestra.intensidades.sabor.afectiva !== null" class="intensidad-item">
|
|
<UIcon :name="getCategoryIcon('sabor')" class="intensidad-icon" />
|
|
<div class="intensidad-info">
|
|
<div class="intensidad-nombre">Sabor</div>
|
|
<div class="intensidad-valor">{{ muestra.intensidades.sabor.afectiva }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="muestra.intensidades.saborResidual.afectiva !== null" class="intensidad-item">
|
|
<UIcon :name="getCategoryIcon('saborResidual')" class="intensidad-icon" />
|
|
<div class="intensidad-info">
|
|
<div class="intensidad-nombre">Sabor Residual</div>
|
|
<div class="intensidad-valor">{{ muestra.intensidades.saborResidual.afectiva }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="muestra.intensidades.acidez.afectiva !== null" class="intensidad-item">
|
|
<UIcon :name="getCategoryIcon('acidez')" class="intensidad-icon" />
|
|
<div class="intensidad-info">
|
|
<div class="intensidad-nombre">Acidez</div>
|
|
<div class="intensidad-valor">{{ muestra.intensidades.acidez.afectiva }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="muestra.intensidades.dulzor.afectiva !== null" class="intensidad-item">
|
|
<UIcon :name="getCategoryIcon('dulzor')" class="intensidad-icon" />
|
|
<div class="intensidad-info">
|
|
<div class="intensidad-nombre">Dulzor</div>
|
|
<div class="intensidad-valor">{{ muestra.intensidades.dulzor.afectiva }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="muestra.intensidades.sensacionBoca.afectiva !== null" class="intensidad-item">
|
|
<UIcon :name="getCategoryIcon('sensacionBoca')" class="intensidad-icon" />
|
|
<div class="intensidad-info">
|
|
<div class="intensidad-nombre">Sensación en Boca</div>
|
|
<div class="intensidad-valor">{{ muestra.intensidades.sensacionBoca.afectiva }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="muestra.intensidades.impresionGlobal.afectiva !== null" class="intensidad-item">
|
|
<UIcon :name="getCategoryIcon('impresionGlobal')" class="intensidad-icon" />
|
|
<div class="intensidad-info">
|
|
<div class="intensidad-nombre">Impresión Global</div>
|
|
<div class="intensidad-valor">{{ muestra.intensidades.impresionGlobal.afectiva }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Defectos (si existen) -->
|
|
<div v-if="muestra.tazasNoUniformes.length > 0 || muestra.tazasDefectuosas.length > 0" class="seccion">
|
|
<h4 class="seccion-titulo">Penalizaciones</h4>
|
|
<div class="defectos-info">
|
|
<div v-if="muestra.tazasNoUniformes.length > 0" class="defecto-item defecto-warning">
|
|
<UIcon name="i-lucide-alert-circle" class="defecto-icon" />
|
|
<div>
|
|
<div class="defecto-label">Tazas No Uniformes</div>
|
|
<div class="defecto-detalle">{{ muestra.tazasNoUniformes.length }} taza(s) - {{ muestra.tazasNoUniformes.join(', ') }}</div>
|
|
<div class="defecto-penalizacion">-{{ muestra.tazasNoUniformes.length * 2 }} puntos</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="muestra.tazasDefectuosas.length > 0" class="defecto-item defecto-error">
|
|
<UIcon name="i-lucide-x-circle" class="defecto-icon" />
|
|
<div>
|
|
<div class="defecto-label">Tazas Defectuosas</div>
|
|
<div class="defecto-detalle">{{ muestra.tazasDefectuosas.length }} taza(s) - {{ muestra.tazasDefectuosas.join(', ') }}</div>
|
|
<div v-if="muestra.defecto" class="defecto-tipo">Tipo: {{ muestra.defecto }}</div>
|
|
<div class="defecto-penalizacion">-{{ muestra.tazasDefectuosas.length * 4 }} puntos</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { Muestra } from '~/types/catacion'
|
|
import { calcularSumatoriaAfectiva, calcularSCAA } from '~/types/catacion'
|
|
|
|
interface Props {
|
|
muestra: Muestra
|
|
}
|
|
|
|
const props = defineProps<Props>()
|
|
|
|
// Cálculos de puntajes
|
|
const sumatoriaAfectiva = computed(() => calcularSumatoriaAfectiva(props.muestra))
|
|
const scaaScore = computed(() => calcularSCAA(props.muestra))
|
|
|
|
// 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'
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.resumen-expandido {
|
|
padding: 1.5rem;
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* Header Section */
|
|
.header-section {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.muestra-info {
|
|
text-align: center;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.muestra-numero {
|
|
font-size: 1.25rem;
|
|
font-weight: bold;
|
|
opacity: 0.6;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.muestra-nombre {
|
|
font-size: 1.75rem;
|
|
font-weight: bold;
|
|
margin: 0;
|
|
}
|
|
|
|
/* Puntajes Principales */
|
|
.puntajes-principales {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.puntaje-grande {
|
|
padding: 1.5rem;
|
|
border-radius: 0.75rem;
|
|
border: 2px solid;
|
|
text-align: center;
|
|
}
|
|
|
|
.puntaje-label {
|
|
font-size: 0.875rem;
|
|
opacity: 0.75;
|
|
margin-bottom: 0.5rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.puntaje-valor {
|
|
font-size: 2.5rem;
|
|
font-weight: bold;
|
|
line-height: 1;
|
|
}
|
|
|
|
.puntaje-sumatoria {
|
|
background-color: color-mix(in srgb, var(--cata-primary) 15%, transparent);
|
|
border-color: color-mix(in srgb, var(--cata-primary) 40%, transparent);
|
|
color: var(--cata-text);
|
|
}
|
|
|
|
/* SCAA Score Colors */
|
|
.scaa-excelente {
|
|
background-color: color-mix(in srgb, #10b981 20%, transparent);
|
|
border-color: #10b981;
|
|
color: #10b981;
|
|
}
|
|
|
|
.scaa-muy-bueno {
|
|
background-color: color-mix(in srgb, #3b82f6 20%, transparent);
|
|
border-color: #3b82f6;
|
|
color: #3b82f6;
|
|
}
|
|
|
|
.scaa-bueno {
|
|
background-color: color-mix(in srgb, #f59e0b 20%, transparent);
|
|
border-color: #f59e0b;
|
|
color: #f59e0b;
|
|
}
|
|
|
|
.scaa-regular {
|
|
background-color: color-mix(in srgb, #ef4444 20%, transparent);
|
|
border-color: #ef4444;
|
|
color: #ef4444;
|
|
}
|
|
|
|
.scaa-bajo {
|
|
background-color: color-mix(in srgb, #6b7280 20%, transparent);
|
|
border-color: #6b7280;
|
|
color: #6b7280;
|
|
}
|
|
|
|
/* Secciones */
|
|
.seccion {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.seccion-titulo {
|
|
font-size: 1.125rem;
|
|
font-weight: 600;
|
|
margin-bottom: 1rem;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
/* Intensidades Grid */
|
|
.intensidades-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.intensidad-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
padding: 1rem;
|
|
border-radius: 0.5rem;
|
|
background-color: color-mix(in srgb, var(--cata-primary) 10%, transparent);
|
|
border: 1px solid color-mix(in srgb, var(--cata-primary) 30%, transparent);
|
|
}
|
|
|
|
.intensidad-icon {
|
|
width: 2rem;
|
|
height: 2rem;
|
|
color: var(--cata-primary);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.intensidad-info {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.intensidad-nombre {
|
|
font-size: 0.75rem;
|
|
opacity: 0.75;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.intensidad-valor {
|
|
font-size: 1.5rem;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* Defectos */
|
|
.defectos-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.defecto-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 1rem;
|
|
padding: 1rem;
|
|
border-radius: 0.5rem;
|
|
border: 1px solid;
|
|
}
|
|
|
|
.defecto-icon {
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
flex-shrink: 0;
|
|
margin-top: 0.125rem;
|
|
}
|
|
|
|
.defecto-label {
|
|
font-weight: 600;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.defecto-detalle {
|
|
font-size: 0.875rem;
|
|
opacity: 0.8;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.defecto-tipo {
|
|
font-size: 0.875rem;
|
|
opacity: 0.8;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.defecto-penalizacion {
|
|
font-weight: 600;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.defecto-warning {
|
|
background-color: color-mix(in srgb, #f59e0b 15%, transparent);
|
|
border-color: #f59e0b;
|
|
color: #f59e0b;
|
|
}
|
|
|
|
.defecto-error {
|
|
background-color: color-mix(in srgb, #ef4444 15%, transparent);
|
|
border-color: #ef4444;
|
|
color: #ef4444;
|
|
}
|
|
|
|
/* Modo oscuro */
|
|
.dark .puntaje-sumatoria {
|
|
background-color: color-mix(in srgb, var(--cata-primary) 20%, transparent);
|
|
}
|
|
|
|
.dark .scaa-excelente {
|
|
background-color: color-mix(in srgb, #10b981 30%, transparent);
|
|
}
|
|
|
|
.dark .scaa-muy-bueno {
|
|
background-color: color-mix(in srgb, #3b82f6 30%, transparent);
|
|
}
|
|
|
|
.dark .scaa-bueno {
|
|
background-color: color-mix(in srgb, #f59e0b 30%, transparent);
|
|
}
|
|
|
|
.dark .scaa-regular {
|
|
background-color: color-mix(in srgb, #ef4444 30%, transparent);
|
|
}
|
|
|
|
.dark .scaa-bajo {
|
|
background-color: color-mix(in srgb, #6b7280 30%, transparent);
|
|
}
|
|
|
|
.dark .intensidad-item {
|
|
background-color: color-mix(in srgb, var(--cata-primary) 15%, transparent);
|
|
}
|
|
|
|
.dark .defecto-warning {
|
|
background-color: color-mix(in srgb, #f59e0b 20%, transparent);
|
|
}
|
|
|
|
.dark .defecto-error {
|
|
background-color: color-mix(in srgb, #ef4444 20%, transparent);
|
|
}
|
|
|
|
/* Responsive */
|
|
@media (max-width: 640px) {
|
|
.resumen-expandido {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.muestra-nombre {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.puntajes-principales {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.puntaje-valor {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.intensidades-grid {
|
|
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.intensidad-item {
|
|
padding: 0.75rem;
|
|
}
|
|
|
|
.intensidad-icon {
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
}
|
|
|
|
.intensidad-valor {
|
|
font-size: 1.25rem;
|
|
}
|
|
}
|
|
</style>
|