Fix: Simplificar componente ResumenMuestra para funcionar correctamente como header del accordion
Some checks failed
build-and-deploy / build-and-deploy (push) Has been cancelled
Some checks failed
build-and-deploy / build-and-deploy (push) Has been cancelled
- Rediseñar layout para ser más compacto y horizontal - Usar badges de indicadores para mostrar valores afectivos de intensidades - Mostrar progreso con barra visual en desktop - Eliminar información redundante y simplificar estructura - Mejorar responsive design para mobile
This commit is contained in:
@@ -1,309 +1,136 @@
|
||||
<template>
|
||||
<div class="resumen-muestra cata-accordion-header">
|
||||
<!-- Header con nombre y puntaje -->
|
||||
<div class="resumen-header">
|
||||
<div class="resumen-title">
|
||||
<h3 class="muestra-nombre cata-text">{{ muestra.nombre }}</h3>
|
||||
<span class="muestra-id cata-text opacity-60">#{{ muestra.muestraId }}</span>
|
||||
<div class="resumen-muestra flex items-center justify-between gap-4 w-full">
|
||||
<!-- Información básica -->
|
||||
<div class="flex items-center gap-3 flex-1 min-w-0">
|
||||
<div class="muestra-numero cata-text font-bold text-lg">
|
||||
#{{ muestra.muestraId }}
|
||||
</div>
|
||||
<div class="resumen-score">
|
||||
<span class="score-label cata-text text-xs opacity-60">Puntaje</span>
|
||||
<span class="score-value cata-text font-bold text-lg">{{ muestra.puntajeFinal }}</span>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="muestra-nombre cata-text font-semibold truncate">
|
||||
{{ muestra.nombre }}
|
||||
</div>
|
||||
<div class="muestra-stats text-xs cata-text opacity-60 flex items-center gap-2">
|
||||
<span>Puntaje {{ muestra.puntajeFinal }}</span>
|
||||
<span class="opacity-40">•</span>
|
||||
<span>{{ porcentajeCompletitud }}% completado</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Barra de progreso de completitud -->
|
||||
<div class="resumen-progress mt-2">
|
||||
<div class="progress-bar">
|
||||
<div
|
||||
class="progress-fill"
|
||||
:style="{ width: `${porcentajeCompletitud}%` }"
|
||||
/>
|
||||
</div>
|
||||
<span class="progress-text cata-text text-xs opacity-75">
|
||||
{{ porcentajeCompletitud }}% completado
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Indicadores rápidos -->
|
||||
<div class="resumen-indicadores mt-3">
|
||||
<!-- Indicadores de completitud -->
|
||||
<div class="muestra-indicadores flex items-center gap-2 text-xs">
|
||||
<!-- Fragancia/Aroma -->
|
||||
<div v-if="muestra.fraganciaAromaNotas.categoria" class="indicador">
|
||||
<UIcon name="i-lucide-flower-2" class="indicador-icon" />
|
||||
<span class="indicador-text cata-text">
|
||||
{{ muestra.fraganciaAromaNotas.notaEspecifica || muestra.fraganciaAromaNotas.categoria }}
|
||||
</span>
|
||||
<div
|
||||
:class="[
|
||||
'indicador-badge px-2 py-1 rounded',
|
||||
tieneFraganciaAroma ? 'bg-success/20 text-success' : 'bg-muted/20 text-muted',
|
||||
]"
|
||||
title="Fragancia/Aroma"
|
||||
>
|
||||
<span class="hidden sm:inline">F:</span>
|
||||
{{ intensidadesFormatted.fragancia }}/{{ intensidadesFormatted.aroma }}
|
||||
</div>
|
||||
|
||||
<!-- Sabor -->
|
||||
<div v-if="muestra.saborNotas.categoria" class="indicador">
|
||||
<UIcon name="i-lucide-coffee" class="indicador-icon" />
|
||||
<span class="indicador-text cata-text">
|
||||
{{ muestra.saborNotas.notaEspecifica || muestra.saborNotas.categoria }}
|
||||
</span>
|
||||
<div
|
||||
:class="[
|
||||
'indicador-badge px-2 py-1 rounded',
|
||||
tieneSabor ? 'bg-success/20 text-success' : 'bg-muted/20 text-muted',
|
||||
]"
|
||||
title="Sabor"
|
||||
>
|
||||
<span class="hidden sm:inline">S:</span>
|
||||
{{ intensidadesFormatted.sabor }}/{{ intensidadesFormatted.saborResidual }}
|
||||
</div>
|
||||
|
||||
<!-- Defectos -->
|
||||
<div v-if="muestra.defecto || muestra.tazasDefectuosas.length > 0" class="indicador defecto">
|
||||
<UIcon name="i-lucide-alert-triangle" class="indicador-icon" />
|
||||
<span class="indicador-text cata-text">
|
||||
{{ muestra.defecto || `${muestra.tazasDefectuosas.length} defectuosa(s)` }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Gustos predominantes -->
|
||||
<div v-if="muestra.gustosPredominantes.length > 0" class="indicador">
|
||||
<UIcon name="i-lucide-sparkles" class="indicador-icon" />
|
||||
<span class="indicador-text cata-text">
|
||||
{{ muestra.gustosPredominantes.join(', ') }}
|
||||
</span>
|
||||
<!-- Acidez -->
|
||||
<div
|
||||
:class="[
|
||||
'indicador-badge px-2 py-1 rounded',
|
||||
tieneAcidez ? 'bg-success/20 text-success' : 'bg-muted/20 text-muted',
|
||||
]"
|
||||
title="Acidez"
|
||||
>
|
||||
<span class="hidden sm:inline">Ac:</span>
|
||||
{{ intensidadesFormatted.acidez }}/{{ intensidadesFormatted.dulzor }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Valores clave de intensidad (versión compacta) -->
|
||||
<div v-if="mostrarIntensidades" class="resumen-intensidades mt-3">
|
||||
<div class="intensidad-compact">
|
||||
<span class="intensidad-label cata-text">F:</span>
|
||||
<span class="intensidad-value cata-text">
|
||||
{{ formatearIntensidad(muestra.intensidades.fragancia) }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="intensidad-compact">
|
||||
<span class="intensidad-label cata-text">A:</span>
|
||||
<span class="intensidad-value cata-text">
|
||||
{{ formatearIntensidad(muestra.intensidades.aroma) }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="intensidad-compact">
|
||||
<span class="intensidad-label cata-text">S:</span>
|
||||
<span class="intensidad-value cata-text">
|
||||
{{ formatearIntensidad(muestra.intensidades.sabor) }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="intensidad-compact">
|
||||
<span class="intensidad-label cata-text">Ac:</span>
|
||||
<span class="intensidad-value cata-text">
|
||||
{{ formatearIntensidad(muestra.intensidades.acidez) }}
|
||||
</span>
|
||||
<!-- Barra de progreso -->
|
||||
<div class="progreso-container hidden md:block w-24">
|
||||
<div class="progreso-bg h-2 rounded-full bg-muted/20 overflow-hidden">
|
||||
<div
|
||||
class="progreso-fill h-full bg-primary transition-all"
|
||||
:style="{ width: `${porcentajeCompletitud}%` }"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { Muestra, IntensidadValor } from '~/types/catacion'
|
||||
import type { Muestra } from '~/types/catacion'
|
||||
|
||||
interface ResumenMuestraProps {
|
||||
/** Muestra a mostrar */
|
||||
muestra: Muestra
|
||||
/** Porcentaje de completitud */
|
||||
porcentajeCompletitud: number
|
||||
/** Mostrar intensidades en el resumen */
|
||||
mostrarIntensidades?: boolean
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<ResumenMuestraProps>(), {
|
||||
mostrarIntensidades: true,
|
||||
})
|
||||
const props = defineProps<ResumenMuestraProps>()
|
||||
|
||||
/**
|
||||
* Formatea una intensidad para mostrar de forma compacta
|
||||
* Formato: D/A (Descriptiva/Afectiva)
|
||||
*/
|
||||
const formatearIntensidad = (intensidad: IntensidadValor): string => {
|
||||
const desc = intensidad.descriptiva ?? '-'
|
||||
const afec = intensidad.afectiva ?? '-'
|
||||
return `${desc}/${afec}`
|
||||
}
|
||||
// Formatear intensidades para mostrar
|
||||
const intensidadesFormatted = computed(() => ({
|
||||
fragancia: props.muestra.intensidades.fragancia.afectiva ?? '-',
|
||||
aroma: props.muestra.intensidades.aroma.afectiva ?? '-',
|
||||
sabor: props.muestra.intensidades.sabor.afectiva ?? '-',
|
||||
saborResidual: props.muestra.intensidades.saborResidual.afectiva ?? '-',
|
||||
acidez: props.muestra.intensidades.acidez.afectiva ?? '-',
|
||||
dulzor: props.muestra.intensidades.dulzor.afectiva ?? '-',
|
||||
}))
|
||||
|
||||
// Verificar si las secciones están completas
|
||||
const tieneFraganciaAroma = computed(() =>
|
||||
props.muestra.intensidades.fragancia.afectiva !== null &&
|
||||
props.muestra.intensidades.aroma.afectiva !== null
|
||||
)
|
||||
|
||||
const tieneSabor = computed(() =>
|
||||
props.muestra.intensidades.sabor.afectiva !== null &&
|
||||
props.muestra.intensidades.saborResidual.afectiva !== null
|
||||
)
|
||||
|
||||
const tieneAcidez = computed(() =>
|
||||
props.muestra.intensidades.acidez.afectiva !== null &&
|
||||
props.muestra.intensidades.dulzor.afectiva !== null
|
||||
)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.resumen-muestra {
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
min-height: 60px;
|
||||
}
|
||||
|
||||
.resumen-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 0.75rem;
|
||||
.muestra-numero {
|
||||
font-size: 1.25rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.resumen-title {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 0.5rem;
|
||||
flex: 1 1 0%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.muestra-nombre {
|
||||
font-size: 1rem;
|
||||
.indicador-badge {
|
||||
font-weight: 600;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.muestra-id {
|
||||
font-size: 0.75rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.resumen-score {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.score-label {
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.score-value {
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
/* Barra de progreso */
|
||||
.resumen-progress {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
flex: 1 1 0%;
|
||||
height: 0.375rem;
|
||||
border-radius: 9999px;
|
||||
background-color: transparent;
|
||||
border: var(--cata-border-width) solid;
|
||||
border-color: color-mix(in srgb, var(--cata-primary) 30%, transparent);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
border-radius: 9999px;
|
||||
transition-property: all;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 300ms;
|
||||
background-color: var(--cata-primary);
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.dark .progress-fill {
|
||||
opacity: 0.8;
|
||||
box-shadow: 0 0 4px var(--cata-primary);
|
||||
}
|
||||
|
||||
.progress-text {
|
||||
flex-shrink: 0;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
/* Indicadores */
|
||||
.resumen-indicadores {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.indicador {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
padding-top: 0.25rem;
|
||||
padding-bottom: 0.25rem;
|
||||
border-radius: 0.25rem;
|
||||
font-size: 0.75rem;
|
||||
background-color: color-mix(in srgb, var(--cata-primary) 5%, transparent);
|
||||
}
|
||||
|
||||
.indicador.defecto {
|
||||
background-color: color-mix(in srgb, #ef4444 10%, transparent);
|
||||
}
|
||||
|
||||
.indicador-icon {
|
||||
width: 0.875rem;
|
||||
height: 0.875rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.indicador-text {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
max-width: 120px;
|
||||
}
|
||||
|
||||
/* Intensidades compactas */
|
||||
.resumen-intensidades {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.75rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.intensidad-compact {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.intensidad-label {
|
||||
font-weight: 600;
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.intensidad-value {
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 640px) {
|
||||
.muestra-nombre {
|
||||
font-size: 0.875rem;
|
||||
.muestra-indicadores {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.score-value {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.resumen-indicadores {
|
||||
gap: 0.375rem;
|
||||
}
|
||||
|
||||
.indicador {
|
||||
padding-left: 0.375rem;
|
||||
padding-right: 0.375rem;
|
||||
padding-top: 0.125rem;
|
||||
padding-bottom: 0.125rem;
|
||||
}
|
||||
|
||||
.indicador-icon {
|
||||
width: 0.75rem;
|
||||
height: 0.75rem;
|
||||
}
|
||||
|
||||
.indicador-text {
|
||||
max-width: 100px;
|
||||
}
|
||||
|
||||
.resumen-intensidades {
|
||||
gap: 0.5rem;
|
||||
.indicador-badge {
|
||||
font-size: 0.625rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 641px) {
|
||||
.muestra-nombre {
|
||||
font-size: 1.125rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user