diff --git a/nuxt4/app/components/cata/FormularioMuestra.vue b/nuxt4/app/components/cata/FormularioMuestra.vue index e065ae2..168b42a 100644 --- a/nuxt4/app/components/cata/FormularioMuestra.vue +++ b/nuxt4/app/components/cata/FormularioMuestra.vue @@ -72,7 +72,7 @@
-
+
Fragancia @@ -86,14 +86,16 @@
-
+
-
+
Aroma @@ -118,14 +120,16 @@
-
+
-
+
Sabor @@ -150,14 +154,16 @@
-
+
-
+
Sabor Residual @@ -182,14 +188,16 @@
-
+
-
+
Acidez @@ -214,14 +222,16 @@
-
+
-
+
Dulzor @@ -246,14 +256,16 @@
-
+
-
+
Sensación en la Boca @@ -278,14 +290,16 @@
-
+
-
+
Impresión Global @@ -310,14 +324,16 @@
-
+
-
+
Fragancia @@ -422,7 +438,7 @@
-
+
-
+
Aroma @@ -454,7 +470,7 @@
-
+
-
+
Sabor @@ -486,7 +502,7 @@
-
+
-
+
Sabor Residual @@ -518,7 +534,7 @@
-
+
-
+
Acidez @@ -550,7 +566,7 @@
-
+
-
+
Dulzor @@ -582,7 +598,7 @@
-
+
-
+
Sensación en la Boca @@ -614,7 +630,7 @@
-
+
-
+
Impresión Global @@ -646,7 +662,7 @@
-
+
{ return subcategorias.some(sub => props.subcategoriasActivas?.includes(sub)) } +// Nueva función para filtrado restrictivo de sliders por tipo y categoría +const deberMostrarSlider = (tipo: 'descriptiva' | 'afectiva', categoria: Subcategoria): boolean => { + // Si no hay filtros activos, mostrar todo + if (!props.subcategoriasActivas || props.subcategoriasActivas.length === 0) return true + + // Separar filtros en tipos y categorías + const filtrosTipo = props.subcategoriasActivas.filter(s => s === 'descriptiva' || s === 'afectiva') + const filtrosCategoria = props.subcategoriasActivas.filter(s => + s !== 'descriptiva' && s !== 'afectiva' && s !== null + ) + + // Si hay filtros de tipo Y filtros de categoría: verificar ambos + if (filtrosTipo.length > 0 && filtrosCategoria.length > 0) { + return filtrosTipo.includes(tipo) && filtrosCategoria.includes(categoria) + } + + // Si solo hay filtros de tipo: verificar que el tipo coincida + if (filtrosTipo.length > 0 && filtrosCategoria.length === 0) { + return filtrosTipo.includes(tipo) + } + + // Si solo hay filtros de categoría: verificar que la categoría coincida + if (filtrosCategoria.length > 0 && filtrosTipo.length === 0) { + return filtrosCategoria.includes(categoria) + } + + // Si no hay filtros relevantes, mostrar + return true +} + // Para Organoléptica const mostrarFraganciaAroma = computed(() => deberMostrarSeccion(['fragancia-aroma'])) const mostrarSaborOrganoleptica = computed(() => deberMostrarSeccion(['sabor'])) const mostrarSensacionBocaOrganoleptica = computed(() => deberMostrarSeccion(['sensacion-boca'])) const mostrarGustosPredominantes = computed(() => deberMostrarSeccion(['gustos-predominantes'])) -// Para Descriptiva/Afectiva -const mostrarFraganciaSlider = computed(() => deberMostrarSeccion(['descriptiva', 'afectiva', 'fragancia'])) -const mostrarAromaSlider = computed(() => deberMostrarSeccion(['descriptiva', 'afectiva', 'aroma'])) -const mostrarSaborSlider = computed(() => deberMostrarSeccion(['descriptiva', 'afectiva', 'sabor'])) -const mostrarSaborResidualSlider = computed(() => deberMostrarSeccion(['descriptiva', 'afectiva', 'sabor-residual'])) -const mostrarAcidezSlider = computed(() => deberMostrarSeccion(['descriptiva', 'afectiva', 'acidez'])) -const mostrarDulzorSlider = computed(() => deberMostrarSeccion(['descriptiva', 'afectiva', 'dulzor'])) -const mostrarSensacionBocaSlider = computed(() => deberMostrarSeccion(['descriptiva', 'afectiva', 'sensacion-boca'])) -const mostrarImpresionGlobalSlider = computed(() => deberMostrarSeccion(['descriptiva', 'afectiva', 'impresion-global'])) +// Para Descriptiva/Afectiva - por categoría (mostrar sección si al menos un slider debe mostrarse) +const mostrarFraganciaSlider = computed(() => + deberMostrarSlider('descriptiva', 'fragancia') || deberMostrarSlider('afectiva', 'fragancia') +) +const mostrarAromaSlider = computed(() => + deberMostrarSlider('descriptiva', 'aroma') || deberMostrarSlider('afectiva', 'aroma') +) +const mostrarSaborSlider = computed(() => + deberMostrarSlider('descriptiva', 'sabor') || deberMostrarSlider('afectiva', 'sabor') +) +const mostrarSaborResidualSlider = computed(() => + deberMostrarSlider('descriptiva', 'sabor-residual') || deberMostrarSlider('afectiva', 'sabor-residual') +) +const mostrarAcidezSlider = computed(() => + deberMostrarSlider('descriptiva', 'acidez') || deberMostrarSlider('afectiva', 'acidez') +) +const mostrarDulzorSlider = computed(() => + deberMostrarSlider('descriptiva', 'dulzor') || deberMostrarSlider('afectiva', 'dulzor') +) +const mostrarSensacionBocaSlider = computed(() => + deberMostrarSlider('descriptiva', 'sensacion-boca') || deberMostrarSlider('afectiva', 'sensacion-boca') +) +const mostrarImpresionGlobalSlider = computed(() => + deberMostrarSlider('descriptiva', 'impresion-global') || deberMostrarSlider('afectiva', 'impresion-global') +) + +// Para cada slider individual +const mostrarFraganciaDescriptiva = computed(() => deberMostrarSlider('descriptiva', 'fragancia')) +const mostrarFraganciaAfectiva = computed(() => deberMostrarSlider('afectiva', 'fragancia')) +const mostrarAromaDescriptiva = computed(() => deberMostrarSlider('descriptiva', 'aroma')) +const mostrarAromaAfectiva = computed(() => deberMostrarSlider('afectiva', 'aroma')) +const mostrarSaborDescriptiva = computed(() => deberMostrarSlider('descriptiva', 'sabor')) +const mostrarSaborAfectiva = computed(() => deberMostrarSlider('afectiva', 'sabor')) +const mostrarSaborResidualDescriptiva = computed(() => deberMostrarSlider('descriptiva', 'sabor-residual')) +const mostrarSaborResidualAfectiva = computed(() => deberMostrarSlider('afectiva', 'sabor-residual')) +const mostrarAcidezDescriptiva = computed(() => deberMostrarSlider('descriptiva', 'acidez')) +const mostrarAcidezAfectiva = computed(() => deberMostrarSlider('afectiva', 'acidez')) +const mostrarDulzorDescriptiva = computed(() => deberMostrarSlider('descriptiva', 'dulzor')) +const mostrarDulzorAfectiva = computed(() => deberMostrarSlider('afectiva', 'dulzor')) +const mostrarSensacionBocaDescriptiva = computed(() => deberMostrarSlider('descriptiva', 'sensacion-boca')) +const mostrarSensacionBocaAfectiva = computed(() => deberMostrarSlider('afectiva', 'sensacion-boca')) +const mostrarImpresionGlobalDescriptiva = computed(() => deberMostrarSlider('descriptiva', 'impresion-global')) +const mostrarImpresionGlobalAfectiva = computed(() => deberMostrarSlider('afectiva', 'impresion-global')) // Estado local para otras notas const otrasNotasLocal = ref(props.muestra.otrasNotas) diff --git a/nuxt4/app/components/cata/SelectorIntensidad.vue b/nuxt4/app/components/cata/SelectorIntensidad.vue index 06accf7..03425a0 100644 --- a/nuxt4/app/components/cata/SelectorIntensidad.vue +++ b/nuxt4/app/components/cata/SelectorIntensidad.vue @@ -123,16 +123,16 @@ const customColorStyle = computed(() => { .iconos-container { display: flex; - gap: 0.25rem; + gap: 0.15rem; justify-content: center; flex-wrap: wrap; - padding: 0.5rem 0; + padding: 0.25rem 0; } .icono-item { background: transparent; border: none; - padding: 0.25rem; + padding: 0.15rem; cursor: pointer; transition: all 0.2s ease; border-radius: 0.25rem; @@ -156,8 +156,8 @@ const customColorStyle = computed(() => { /* Iconos */ .icono { - width: 1.5rem; - height: 1.5rem; + width: 1rem; + height: 1rem; transition: all 0.2s ease; } @@ -241,12 +241,12 @@ const customColorStyle = computed(() => { /* Responsive */ @media (max-width: 640px) { .icono { - width: 1.25rem; - height: 1.25rem; + width: 0.875rem; + height: 0.875rem; } .iconos-container { - gap: 0.15rem; + gap: 0.125rem; } }