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>
|
<template>
|
||||||
<div class="resumen-muestra cata-accordion-header">
|
<div class="resumen-muestra flex items-center justify-between gap-4 w-full">
|
||||||
<!-- Header con nombre y puntaje -->
|
<!-- Información básica -->
|
||||||
<div class="resumen-header">
|
<div class="flex items-center gap-3 flex-1 min-w-0">
|
||||||
<div class="resumen-title">
|
<div class="muestra-numero cata-text font-bold text-lg">
|
||||||
<h3 class="muestra-nombre cata-text">{{ muestra.nombre }}</h3>
|
#{{ muestra.muestraId }}
|
||||||
<span class="muestra-id cata-text opacity-60">#{{ muestra.muestraId }}</span>
|
</div>
|
||||||
|
<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 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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Barra de progreso de completitud -->
|
<!-- Indicadores de completitud -->
|
||||||
<div class="resumen-progress mt-2">
|
<div class="muestra-indicadores flex items-center gap-2 text-xs">
|
||||||
<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">
|
|
||||||
<!-- Fragancia/Aroma -->
|
<!-- Fragancia/Aroma -->
|
||||||
<div v-if="muestra.fraganciaAromaNotas.categoria" class="indicador">
|
<div
|
||||||
<UIcon name="i-lucide-flower-2" class="indicador-icon" />
|
:class="[
|
||||||
<span class="indicador-text cata-text">
|
'indicador-badge px-2 py-1 rounded',
|
||||||
{{ muestra.fraganciaAromaNotas.notaEspecifica || muestra.fraganciaAromaNotas.categoria }}
|
tieneFraganciaAroma ? 'bg-success/20 text-success' : 'bg-muted/20 text-muted',
|
||||||
</span>
|
]"
|
||||||
|
title="Fragancia/Aroma"
|
||||||
|
>
|
||||||
|
<span class="hidden sm:inline">F:</span>
|
||||||
|
{{ intensidadesFormatted.fragancia }}/{{ intensidadesFormatted.aroma }}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Sabor -->
|
<!-- Sabor -->
|
||||||
<div v-if="muestra.saborNotas.categoria" class="indicador">
|
<div
|
||||||
<UIcon name="i-lucide-coffee" class="indicador-icon" />
|
:class="[
|
||||||
<span class="indicador-text cata-text">
|
'indicador-badge px-2 py-1 rounded',
|
||||||
{{ muestra.saborNotas.notaEspecifica || muestra.saborNotas.categoria }}
|
tieneSabor ? 'bg-success/20 text-success' : 'bg-muted/20 text-muted',
|
||||||
</span>
|
]"
|
||||||
|
title="Sabor"
|
||||||
|
>
|
||||||
|
<span class="hidden sm:inline">S:</span>
|
||||||
|
{{ intensidadesFormatted.sabor }}/{{ intensidadesFormatted.saborResidual }}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Defectos -->
|
<!-- Acidez -->
|
||||||
<div v-if="muestra.defecto || muestra.tazasDefectuosas.length > 0" class="indicador defecto">
|
<div
|
||||||
<UIcon name="i-lucide-alert-triangle" class="indicador-icon" />
|
:class="[
|
||||||
<span class="indicador-text cata-text">
|
'indicador-badge px-2 py-1 rounded',
|
||||||
{{ muestra.defecto || `${muestra.tazasDefectuosas.length} defectuosa(s)` }}
|
tieneAcidez ? 'bg-success/20 text-success' : 'bg-muted/20 text-muted',
|
||||||
</span>
|
]"
|
||||||
</div>
|
title="Acidez"
|
||||||
|
>
|
||||||
<!-- Gustos predominantes -->
|
<span class="hidden sm:inline">Ac:</span>
|
||||||
<div v-if="muestra.gustosPredominantes.length > 0" class="indicador">
|
{{ intensidadesFormatted.acidez }}/{{ intensidadesFormatted.dulzor }}
|
||||||
<UIcon name="i-lucide-sparkles" class="indicador-icon" />
|
|
||||||
<span class="indicador-text cata-text">
|
|
||||||
{{ muestra.gustosPredominantes.join(', ') }}
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Valores clave de intensidad (versión compacta) -->
|
<!-- Barra de progreso -->
|
||||||
<div v-if="mostrarIntensidades" class="resumen-intensidades mt-3">
|
<div class="progreso-container hidden md:block w-24">
|
||||||
<div class="intensidad-compact">
|
<div class="progreso-bg h-2 rounded-full bg-muted/20 overflow-hidden">
|
||||||
<span class="intensidad-label cata-text">F:</span>
|
<div
|
||||||
<span class="intensidad-value cata-text">
|
class="progreso-fill h-full bg-primary transition-all"
|
||||||
{{ formatearIntensidad(muestra.intensidades.fragancia) }}
|
:style="{ width: `${porcentajeCompletitud}%` }"
|
||||||
</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>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import type { Muestra, IntensidadValor } from '~/types/catacion'
|
import type { Muestra } from '~/types/catacion'
|
||||||
|
|
||||||
interface ResumenMuestraProps {
|
interface ResumenMuestraProps {
|
||||||
/** Muestra a mostrar */
|
/** Muestra a mostrar */
|
||||||
muestra: Muestra
|
muestra: Muestra
|
||||||
/** Porcentaje de completitud */
|
/** Porcentaje de completitud */
|
||||||
porcentajeCompletitud: number
|
porcentajeCompletitud: number
|
||||||
/** Mostrar intensidades en el resumen */
|
|
||||||
mostrarIntensidades?: boolean
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const props = withDefaults(defineProps<ResumenMuestraProps>(), {
|
const props = defineProps<ResumenMuestraProps>()
|
||||||
mostrarIntensidades: true,
|
|
||||||
})
|
|
||||||
|
|
||||||
/**
|
// Formatear intensidades para mostrar
|
||||||
* Formatea una intensidad para mostrar de forma compacta
|
const intensidadesFormatted = computed(() => ({
|
||||||
* Formato: D/A (Descriptiva/Afectiva)
|
fragancia: props.muestra.intensidades.fragancia.afectiva ?? '-',
|
||||||
*/
|
aroma: props.muestra.intensidades.aroma.afectiva ?? '-',
|
||||||
const formatearIntensidad = (intensidad: IntensidadValor): string => {
|
sabor: props.muestra.intensidades.sabor.afectiva ?? '-',
|
||||||
const desc = intensidad.descriptiva ?? '-'
|
saborResidual: props.muestra.intensidades.saborResidual.afectiva ?? '-',
|
||||||
const afec = intensidad.afectiva ?? '-'
|
acidez: props.muestra.intensidades.acidez.afectiva ?? '-',
|
||||||
return `${desc}/${afec}`
|
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>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.resumen-muestra {
|
.resumen-muestra {
|
||||||
width: 100%;
|
min-height: 60px;
|
||||||
cursor: pointer;
|
|
||||||
user-select: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.resumen-header {
|
.muestra-numero {
|
||||||
display: flex;
|
font-size: 1.25rem;
|
||||||
align-items: flex-start;
|
flex-shrink: 0;
|
||||||
justify-content: space-between;
|
|
||||||
gap: 0.75rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.resumen-title {
|
.indicador-badge {
|
||||||
display: flex;
|
|
||||||
align-items: baseline;
|
|
||||||
gap: 0.5rem;
|
|
||||||
flex: 1 1 0%;
|
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.muestra-nombre {
|
|
||||||
font-size: 1rem;
|
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
|
||||||
|
|
||||||
.muestra-id {
|
|
||||||
font-size: 0.75rem;
|
|
||||||
flex-shrink: 0;
|
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) {
|
@media (max-width: 640px) {
|
||||||
.muestra-nombre {
|
.muestra-indicadores {
|
||||||
font-size: 0.875rem;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.score-value {
|
.indicador-badge {
|
||||||
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;
|
|
||||||
font-size: 0.625rem;
|
font-size: 0.625rem;
|
||||||
}
|
padding: 0.25rem 0.5rem;
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 641px) {
|
|
||||||
.muestra-nombre {
|
|
||||||
font-size: 1.125rem;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user