Feat: Mostrar SCAA Score en header de acordeones
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 1m6s

CAMBIOS EN ResumenMuestra.vue:

1. Header de acordeón ahora muestra DOS puntajes:
   - Sumatoria Afectiva (Σ): suma de valores afectivos (1-9)
   - SCAA Score: score calculado con fórmula completa

2. Layout:
   - Ambos badges alineados a la derecha
   - Centrados verticalmente en el header
   - Sumatoria con color neutro (primary)
   - SCAA con colores según valor (excelente/muy-bueno/bueno/regular/bajo)

3. Badges compactos:
   - Label abreviado: "Σ" para Sumatoria, "SCAA" para SCAA Score
   - Valores con 2 decimales para SCAA
   - Responsive: se ajustan en mobile

4. Colores según SCAA Score:
   - ≥90: Verde (excelente)
   - ≥85: Azul (muy bueno)
   - ≥80: Naranja (bueno)
   - ≥70: Rojo (regular)
   - <70: Gris (bajo)
This commit is contained in:
2025-10-19 02:31:44 -06:00
parent 58751467cf
commit b1f008ab26

View File

@@ -14,9 +14,19 @@
</div> </div>
</div> </div>
<!-- Puntaje final - alineado a la derecha --> <!-- Puntajes - alineados a la derecha -->
<div class="puntaje-final flex-shrink-0 px-2 py-0.5 rounded ml-auto" :class="puntajeClass"> <div class="puntajes-container flex items-center gap-1 flex-shrink-0 ml-auto">
<span class="font-bold">{{ muestra.puntajeFinal }}</span> <!-- 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>
</div> </div>
@@ -114,6 +124,7 @@
<script setup lang="ts"> <script setup lang="ts">
import type { Muestra } from '~/types/catacion' import type { Muestra } from '~/types/catacion'
import type { TabCatacion } from '~/composables/useCatacion' import type { TabCatacion } from '~/composables/useCatacion'
import { calcularSumatoriaAfectiva, calcularSCAA } from '~/types/catacion'
interface ResumenMuestraProps { interface ResumenMuestraProps {
/** Muestra a mostrar */ /** Muestra a mostrar */
@@ -126,6 +137,10 @@ const props = withDefaults(defineProps<ResumenMuestraProps>(), {
tabActiva: 'impresion-global', 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 // Formatear categorías de fragancia/aroma
const categoriasFragancia = computed(() => { const categoriasFragancia = computed(() => {
return props.muestra.fraganciaAromaNotas.categorias.slice(0, 2).join(', ') return props.muestra.fraganciaAromaNotas.categorias.slice(0, 2).join(', ')
@@ -136,14 +151,14 @@ const categoriasSabor = computed(() => {
return props.muestra.saborNotas.categorias.slice(0, 2).join(', ') return props.muestra.saborNotas.categorias.slice(0, 2).join(', ')
}) })
// Clase CSS para el puntaje final basado en el valor // Clase CSS para el SCAA Score basado en el valor
const puntajeClass = computed(() => { const scaaClass = computed(() => {
const puntaje = props.muestra.puntajeFinal const scaa = scaaScore.value
if (puntaje >= 90) return 'puntaje-excelente' if (scaa >= 90) return 'scaa-excelente'
if (puntaje >= 85) return 'puntaje-muy-bueno' if (scaa >= 85) return 'scaa-muy-bueno'
if (puntaje >= 80) return 'puntaje-bueno' if (scaa >= 80) return 'scaa-bueno'
if (puntaje >= 70) return 'puntaje-regular' if (scaa >= 70) return 'scaa-regular'
return 'puntaje-bajo' return 'scaa-bajo'
}) })
// Función para obtener el icono de cada categoría // Función para obtener el icono de cada categoría
@@ -188,39 +203,63 @@ const mostrarChipsDefectos = computed(() => {
font-size: 0.8125rem; font-size: 0.8125rem;
} }
/* Puntaje final */ /* Puntajes */
.puntaje-final { .puntajes-container {
display: flex;
align-items: center;
gap: 0.25rem;
}
.puntaje-badge {
border: 1px solid; border: 1px solid;
min-width: 2rem; min-width: 2rem;
text-align: center; text-align: center;
font-size: 0.6875rem; font-size: 0.625rem;
display: inline-flex;
align-items: center;
gap: 0.25rem;
justify-content: center;
} }
.puntaje-excelente { .puntaje-label {
font-size: 0.5625rem;
opacity: 0.75;
font-weight: 600;
}
/* Sumatoria Afectiva - color neutro */
.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 - colores según valor */
.scaa-excelente {
background-color: color-mix(in srgb, #10b981 20%, transparent); background-color: color-mix(in srgb, #10b981 20%, transparent);
border-color: #10b981; border-color: #10b981;
color: #10b981; color: #10b981;
} }
.puntaje-muy-bueno { .scaa-muy-bueno {
background-color: color-mix(in srgb, #3b82f6 20%, transparent); background-color: color-mix(in srgb, #3b82f6 20%, transparent);
border-color: #3b82f6; border-color: #3b82f6;
color: #3b82f6; color: #3b82f6;
} }
.puntaje-bueno { .scaa-bueno {
background-color: color-mix(in srgb, #f59e0b 20%, transparent); background-color: color-mix(in srgb, #f59e0b 20%, transparent);
border-color: #f59e0b; border-color: #f59e0b;
color: #f59e0b; color: #f59e0b;
} }
.puntaje-regular { .scaa-regular {
background-color: color-mix(in srgb, #ef4444 20%, transparent); background-color: color-mix(in srgb, #ef4444 20%, transparent);
border-color: #ef4444; border-color: #ef4444;
color: #ef4444; color: #ef4444;
} }
.puntaje-bajo { .scaa-bajo {
background-color: color-mix(in srgb, #6b7280 20%, transparent); background-color: color-mix(in srgb, #6b7280 20%, transparent);
border-color: #6b7280; border-color: #6b7280;
color: #6b7280; color: #6b7280;
@@ -282,23 +321,27 @@ const mostrarChipsDefectos = computed(() => {
} }
/* Modo oscuro */ /* Modo oscuro */
.dark .puntaje-excelente { .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); background-color: color-mix(in srgb, #10b981 30%, transparent);
} }
.dark .puntaje-muy-bueno { .dark .scaa-muy-bueno {
background-color: color-mix(in srgb, #3b82f6 30%, transparent); background-color: color-mix(in srgb, #3b82f6 30%, transparent);
} }
.dark .puntaje-bueno { .dark .scaa-bueno {
background-color: color-mix(in srgb, #f59e0b 30%, transparent); background-color: color-mix(in srgb, #f59e0b 30%, transparent);
} }
.dark .puntaje-regular { .dark .scaa-regular {
background-color: color-mix(in srgb, #ef4444 30%, transparent); background-color: color-mix(in srgb, #ef4444 30%, transparent);
} }
.dark .puntaje-bajo { .dark .scaa-bajo {
background-color: color-mix(in srgb, #6b7280 30%, transparent); background-color: color-mix(in srgb, #6b7280 30%, transparent);
} }
@@ -324,9 +367,19 @@ const mostrarChipsDefectos = computed(() => {
font-size: 0.75rem; font-size: 0.75rem;
} }
.puntaje-final { .puntajes-container {
font-size: 0.625rem; gap: 0.125rem;
min-width: 1.75rem; }
.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 { .chips-container {