From 816a3e860a0a1ad66a69a891b189f9393b72cb99 Mon Sep 17 00:00:00 2001 From: josedario87 Date: Sat, 18 Oct 2025 16:55:37 -0600 Subject: [PATCH] Fix: Refactorizar sensaciones en boca y hacer checkboxes ultra compactos MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit CAMBIOS EN SENSACIONES EN BOCA: - Reducir opciones a solo 5: Áspero, Aceitoso, Metálico, Deja seca la boca, Suave - Cambiar de selección múltiple a selección única - Actualizar tipo de sensacionEnBoca: SensacionBoca[] → SensacionBoca | null CAMBIOS EN CHECKBOXES (sensaciones y gustos): - Hacer checkboxes tan compactos como subcategorías de SelectorFamilia - Usar flex-wrap en todos los breakpoints (eliminar grid en desktop) - Dimensiones ultra compactas: * Desktop: min-height 32px, padding 0.375rem 0.5rem, font-size 0.75rem * Mobile: min-height 28px, padding 0.25rem 0.375rem, font-size 0.6875rem * Touch: min-height 36px para dispositivos táctiles ARCHIVOS MODIFICADOS: - app/types/catacion.ts: Actualizar SensacionBoca y SENSACIONES_BOCA - app/composables/useCatacion.ts: Cambiar actualizarSensacionBoca a selección única - app/components/cata/FormularioMuestra.vue: UI compacta y selección única - app/components/cata/ResumenMuestra.vue: Adaptar a sensacionEnBoca única --- .../app/components/cata/FormularioMuestra.vue | 48 ++++--------------- nuxt4/app/components/cata/ResumenMuestra.vue | 4 +- nuxt4/app/composables/useCatacion.ts | 6 +-- nuxt4/app/types/catacion.ts | 24 ++-------- 4 files changed, 18 insertions(+), 64 deletions(-) diff --git a/nuxt4/app/components/cata/FormularioMuestra.vue b/nuxt4/app/components/cata/FormularioMuestra.vue index b511254..e065ae2 100644 --- a/nuxt4/app/components/cata/FormularioMuestra.vue +++ b/nuxt4/app/components/cata/FormularioMuestra.vue @@ -22,10 +22,10 @@ /> - +
@@ -859,19 +859,10 @@ const actualizarDefecto = async (defecto: TipoDefecto) => { await actualizarDefectoCatacion(props.muestra.muestraId, defecto) } -// Toggle sensación en boca +// Seleccionar sensación en boca (selección única) const { actualizarSensacionBoca } = useCatacion() -const toggleSensacionBoca = async (sensacion: SensacionBoca) => { - const sensaciones = [...props.muestra.sensacionEnBoca] - const index = sensaciones.indexOf(sensacion) - - if (index > -1) { - sensaciones.splice(index, 1) - } else { - sensaciones.push(sensacion) - } - - await actualizarSensacionBoca(props.muestra.muestraId, sensaciones) +const seleccionarSensacionBoca = async (sensacion: SensacionBoca) => { + await actualizarSensacionBoca(props.muestra.muestraId, sensacion) } // Toggle gusto predominante @@ -951,7 +942,7 @@ watch(() => props.muestra.otrasNotas, (newVal) => { text-align: center; } -/* Grid de sensaciones */ +/* Grid de sensaciones y gustos - estilo compacto como subcategorías */ .sensaciones-grid { display: flex; flex-wrap: wrap; @@ -980,7 +971,6 @@ watch(() => props.muestra.otrasNotas, (newVal) => { font-size: 0.75rem; } -/* Grid de gustos */ .gustos-grid { display: flex; flex-wrap: wrap; @@ -1046,28 +1036,6 @@ watch(() => props.muestra.otrasNotas, (newVal) => { } } -@media (min-width: 768px) { - .sensaciones-grid { - display: grid; - grid-template-columns: repeat(3, minmax(0, 1fr)); - gap: 0.5rem; - } - - .sensacion-item { - min-height: 36px; - } - - .gustos-grid { - display: grid; - grid-template-columns: repeat(5, minmax(0, 1fr)); - gap: 0.5rem; - } - - .gusto-item { - min-height: 36px; - } -} - /* Touch-friendly */ @media (hover: none) and (pointer: coarse) { .sensacion-item { diff --git a/nuxt4/app/components/cata/ResumenMuestra.vue b/nuxt4/app/components/cata/ResumenMuestra.vue index 352d0db..3ca2c6f 100644 --- a/nuxt4/app/components/cata/ResumenMuestra.vue +++ b/nuxt4/app/components/cata/ResumenMuestra.vue @@ -43,9 +43,9 @@
-
+
Sen: - {{ muestra.sensacionEnBoca.join(', ') }} + {{ muestra.sensacionEnBoca }}
diff --git a/nuxt4/app/composables/useCatacion.ts b/nuxt4/app/composables/useCatacion.ts index 4286f4b..21e272e 100644 --- a/nuxt4/app/composables/useCatacion.ts +++ b/nuxt4/app/composables/useCatacion.ts @@ -211,10 +211,10 @@ export const useCatacion = () => { } /** - * Actualiza sensaciones en boca + * Actualiza sensación en boca (selección única) */ - const actualizarSensacionBoca = async (muestraId: number, sensaciones: string[]) => { - await actualizarMuestra(muestraId, { sensacionEnBoca: sensaciones as any }) + const actualizarSensacionBoca = async (muestraId: number, sensacion: string | null) => { + await actualizarMuestra(muestraId, { sensacionEnBoca: sensacion as any }) } /** diff --git a/nuxt4/app/types/catacion.ts b/nuxt4/app/types/catacion.ts index 60903cb..f48d8ed 100644 --- a/nuxt4/app/types/catacion.ts +++ b/nuxt4/app/types/catacion.ts @@ -89,17 +89,10 @@ export type TipoDefecto = 'Mohoso' | 'Fenólico' | 'Papa' | null export type SensacionBoca = | 'Áspero' - | 'Arenoso' - | 'Rugoso' - | 'Rasposo' - | 'Suave' - | 'Aterciopelado' - | 'Sedoso' - | 'Almibarado' | 'Aceitoso' | 'Metálico' | 'Deja seca la boca' - | 'Astringente' + | 'Suave' export type GustoPredominante = 'Salado' | 'Amargo' | 'Ácido' | 'Dulce' | 'Umami' @@ -124,8 +117,8 @@ export interface Muestra { tazasDefectuosas: number[] /** Tipo de defecto encontrado */ defecto: TipoDefecto - /** Sensaciones en la boca (múltiples selecciones) */ - sensacionEnBoca: SensacionBoca[] + /** Sensación en la boca (selección única) */ + sensacionEnBoca: SensacionBoca | null /** Gustos predominantes (máximo 2, mínimo 1) */ gustosPredominantes: GustoPredominante[] /** Notas adicionales en texto libre */ @@ -189,7 +182,7 @@ export function crearMuestraVacia(id: number): Muestra { tazasNoUniformes: [], tazasDefectuosas: [], defecto: null, - sensacionEnBoca: [], + sensacionEnBoca: null, gustosPredominantes: [], otrasNotas: '', puntajeFinal: 0, @@ -285,17 +278,10 @@ export const FAMILIAS_NOTAS_ESTRUCTURA: FamiliasNotas = { */ export const SENSACIONES_BOCA: SensacionBoca[] = [ 'Áspero', - 'Arenoso', - 'Rugoso', - 'Rasposo', - 'Suave', - 'Aterciopelado', - 'Sedoso', - 'Almibarado', 'Aceitoso', 'Metálico', 'Deja seca la boca', - 'Astringente', + 'Suave', ] /**