From 4e6c5f7b5de75b35c4063ada5846ea815cb00089 Mon Sep 17 00:00:00 2001 From: josedario87 Date: Sun, 19 Oct 2025 02:46:18 -0600 Subject: [PATCH] =?UTF-8?q?Fix:=20Mejorar=20UX=20de=20inputs=20en=20asigna?= =?UTF-8?q?ci=C3=B3n=20r=C3=A1pida?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit PROBLEMAS RESUELTOS: 1. Inputs actualizaban en cada tecla (@input): - Impedía borrar números (ej: no se podía borrar el 9) - Hacía malabares para cambiar valores 2. Rango incorrecto de Sumatoria Afectiva: - Era 9-90 pero debería ser 8-72 - 8 categorías × 1 punto mínimo = 8 - 8 categorías × 9 puntos máximo = 72 SOLUCIONES: 1. Cambio de eventos: - @input → @blur en ambos inputs - Ahora solo actualiza al perder el foco - Permite editar libremente (borrar, reescribir) 2. Rangos corregidos: - Sumatoria Afectiva: 8-72 (antes 9-90) - SCAA Score: 58.00-100.00 (antes 58.75-112.00) - Valor por defecto: 40 (antes 45) 3. Validaciones mejoradas: - No valida mientras se escribe - Solo valida al perder foco (blur) - Maneja valores inválidos (NaN, null) reseteando a 40 - Permite borrar y reescribir sin restricciones BENEFICIOS: - Ahora se puede borrar el 9 sin problemas - Se puede escribir cualquier número sin interferencias - La sincronización ocurre solo al terminar de editar --- .../components/cata/ModalAsignacionRapida.vue | 54 +++++++++++-------- 1 file changed, 33 insertions(+), 21 deletions(-) diff --git a/nuxt4/app/components/cata/ModalAsignacionRapida.vue b/nuxt4/app/components/cata/ModalAsignacionRapida.vue index 0c14548..caa5dc5 100644 --- a/nuxt4/app/components/cata/ModalAsignacionRapida.vue +++ b/nuxt4/app/components/cata/ModalAsignacionRapida.vue @@ -31,12 +31,12 @@ @@ -51,9 +51,9 @@ :min="scaaMin" :max="scaaMax" step="0.25" - placeholder="58.75-112.00" + placeholder="58.00-100.00" class="cata-input w-full px-3 py-2 rounded-md text-center text-lg" - @input="onScaaChange" + @blur="onScaaChange" /> @@ -180,56 +180,68 @@ const isOpen = computed({ // Estado del formulario const paso = ref(1) -const puntajeDeseado = ref(45) -const scaaDeseado = ref(sumatoriaAfectivaASCAA(45)) +const puntajeDeseado = ref(40) +const scaaDeseado = ref(sumatoriaAfectivaASCAA(40)) const categoriasSeleccionadas = ref([]) // Flag para evitar loops infinitos en la sincronización const actualizandoInput = ref(false) -// Límites de SCAA Score (basados en sumatoria afectiva 9-90) -const scaaMin = sumatoriaAfectivaASCAA(9) -const scaaMax = sumatoriaAfectivaASCAA(90) +// Límites de SCAA Score (basados en sumatoria afectiva 8-72) +// 8 categorías × 1 punto mínimo = 8 +// 8 categorías × 9 puntos máximo = 72 +const scaaMin = sumatoriaAfectivaASCAA(8) +const scaaMax = sumatoriaAfectivaASCAA(72) // Resetear estado cuando el modal se abre watch(isOpen, (newValue) => { if (newValue) { paso.value = 1 - puntajeDeseado.value = 45 - scaaDeseado.value = sumatoriaAfectivaASCAA(45) + puntajeDeseado.value = 40 + scaaDeseado.value = sumatoriaAfectivaASCAA(40) categoriasSeleccionadas.value = [] } }) -// Handler para cuando se modifica Sumatoria Afectiva +// Handler para cuando se modifica Sumatoria Afectiva (solo en blur) const onSumatoriaChange = () => { if (actualizandoInput.value) return actualizandoInput.value = true - // Validar rango - if (puntajeDeseado.value < 9) puntajeDeseado.value = 9 - if (puntajeDeseado.value > 90) puntajeDeseado.value = 90 + // Si el valor es inválido (NaN, null, undefined), resetear a default + if (!puntajeDeseado.value || isNaN(puntajeDeseado.value)) { + puntajeDeseado.value = 40 + } // Redondear a entero puntajeDeseado.value = Math.round(puntajeDeseado.value) + // Validar rango (solo después de redondear) + if (puntajeDeseado.value < 8) puntajeDeseado.value = 8 + if (puntajeDeseado.value > 72) puntajeDeseado.value = 72 + // Actualizar SCAA Score scaaDeseado.value = sumatoriaAfectivaASCAA(puntajeDeseado.value) actualizandoInput.value = false } -// Handler para cuando se modifica SCAA Score +// Handler para cuando se modifica SCAA Score (solo en blur) const onScaaChange = () => { if (actualizandoInput.value) return actualizandoInput.value = true + // Si el valor es inválido (NaN, null, undefined), resetear a default + if (!scaaDeseado.value || isNaN(scaaDeseado.value)) { + scaaDeseado.value = sumatoriaAfectivaASCAA(40) + } + // Redondear al múltiplo de 0.25 más cercano scaaDeseado.value = redondearA025(scaaDeseado.value) - // Validar rango + // Validar rango (solo después de redondear) if (scaaDeseado.value < scaaMin) scaaDeseado.value = scaaMin if (scaaDeseado.value > scaaMax) scaaDeseado.value = scaaMax @@ -240,7 +252,7 @@ const onScaaChange = () => { const sumatoriaRedondeada = Math.round(sumatoriaCalculada) // Asegurar rango válido - puntajeDeseado.value = Math.max(9, Math.min(90, sumatoriaRedondeada)) + puntajeDeseado.value = Math.max(8, Math.min(72, sumatoriaRedondeada)) // Recalcular SCAA Score con el valor redondeado (ya aplicará redondeo a 0.25) scaaDeseado.value = sumatoriaAfectivaASCAA(puntajeDeseado.value) @@ -250,7 +262,7 @@ const onScaaChange = () => { // Cálculos const puntajeValido = computed(() => { - return puntajeDeseado.value >= 9 && puntajeDeseado.value <= 90 + return puntajeDeseado.value >= 8 && puntajeDeseado.value <= 72 }) const multiploMasCercano = computed(() => {