josedario87
5e697dbc89
Some checks failed
build-and-deploy / build-and-deploy (push) Failing after 16s
- Crear componente CataResumenMuestra para mostrar resumen de cada muestra en el header del accordion - Crear componente CataFormularioMuestra para mostrar formulario de edición de intensidades por tab - Corregir uso de slots en UAccordion para mostrar correctamente el contenido - Usar slot #default para customizar el header con CataResumenMuestra - Usar slots personalizados por muestra para el body con CataFormularioMuestra - Agregar estilos mejorados para los items del accordion
133 lines
3.8 KiB
Vue
133 lines
3.8 KiB
Vue
<template>
|
|
<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="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>
|
|
|
|
<!-- Indicadores de completitud -->
|
|
<div class="muestra-indicadores flex items-center gap-2 text-xs">
|
|
<!-- Fragancia/Aroma -->
|
|
<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
|
|
: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>
|
|
|
|
<!-- 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>
|
|
|
|
<!-- 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 } from '~/types/catacion'
|
|
|
|
const props = defineProps<{
|
|
muestra: Muestra
|
|
porcentajeCompletitud: number
|
|
}>()
|
|
|
|
// 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 {
|
|
min-height: 60px;
|
|
}
|
|
|
|
.muestra-numero {
|
|
font-size: 1.25rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.indicador-badge {
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.muestra-indicadores {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.indicador-badge {
|
|
font-size: 0.625rem;
|
|
padding: 0.25rem 0.5rem;
|
|
}
|
|
}
|
|
</style>
|