Fix: Mejorar UX de inputs en asignación rápida
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 1m5s

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
This commit is contained in:
2025-10-19 02:46:18 -06:00
parent e36d7dac6b
commit 4e6c5f7b5d

View File

@@ -31,12 +31,12 @@
<input <input
v-model.number="puntajeDeseado" v-model.number="puntajeDeseado"
type="number" type="number"
:min="9" :min="8"
:max="90" :max="72"
step="1" step="1"
placeholder="9-90" placeholder="8-72"
class="cata-input w-full px-3 py-2 rounded-md text-center text-lg" class="cata-input w-full px-3 py-2 rounded-md text-center text-lg"
@input="onSumatoriaChange" @blur="onSumatoriaChange"
/> />
</div> </div>
@@ -51,9 +51,9 @@
:min="scaaMin" :min="scaaMin"
:max="scaaMax" :max="scaaMax"
step="0.25" 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" class="cata-input w-full px-3 py-2 rounded-md text-center text-lg"
@input="onScaaChange" @blur="onScaaChange"
/> />
</div> </div>
</div> </div>
@@ -180,56 +180,68 @@ const isOpen = computed({
// Estado del formulario // Estado del formulario
const paso = ref(1) const paso = ref(1)
const puntajeDeseado = ref<number>(45) const puntajeDeseado = ref<number>(40)
const scaaDeseado = ref<number>(sumatoriaAfectivaASCAA(45)) const scaaDeseado = ref<number>(sumatoriaAfectivaASCAA(40))
const categoriasSeleccionadas = ref<string[]>([]) const categoriasSeleccionadas = ref<string[]>([])
// Flag para evitar loops infinitos en la sincronización // Flag para evitar loops infinitos en la sincronización
const actualizandoInput = ref(false) const actualizandoInput = ref(false)
// Límites de SCAA Score (basados en sumatoria afectiva 9-90) // Límites de SCAA Score (basados en sumatoria afectiva 8-72)
const scaaMin = sumatoriaAfectivaASCAA(9) // 8 categorías × 1 punto mínimo = 8
const scaaMax = sumatoriaAfectivaASCAA(90) // 8 categorías × 9 puntos máximo = 72
const scaaMin = sumatoriaAfectivaASCAA(8)
const scaaMax = sumatoriaAfectivaASCAA(72)
// Resetear estado cuando el modal se abre // Resetear estado cuando el modal se abre
watch(isOpen, (newValue) => { watch(isOpen, (newValue) => {
if (newValue) { if (newValue) {
paso.value = 1 paso.value = 1
puntajeDeseado.value = 45 puntajeDeseado.value = 40
scaaDeseado.value = sumatoriaAfectivaASCAA(45) scaaDeseado.value = sumatoriaAfectivaASCAA(40)
categoriasSeleccionadas.value = [] categoriasSeleccionadas.value = []
} }
}) })
// Handler para cuando se modifica Sumatoria Afectiva // Handler para cuando se modifica Sumatoria Afectiva (solo en blur)
const onSumatoriaChange = () => { const onSumatoriaChange = () => {
if (actualizandoInput.value) return if (actualizandoInput.value) return
actualizandoInput.value = true actualizandoInput.value = true
// Validar rango // Si el valor es inválido (NaN, null, undefined), resetear a default
if (puntajeDeseado.value < 9) puntajeDeseado.value = 9 if (!puntajeDeseado.value || isNaN(puntajeDeseado.value)) {
if (puntajeDeseado.value > 90) puntajeDeseado.value = 90 puntajeDeseado.value = 40
}
// Redondear a entero // Redondear a entero
puntajeDeseado.value = Math.round(puntajeDeseado.value) 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 // Actualizar SCAA Score
scaaDeseado.value = sumatoriaAfectivaASCAA(puntajeDeseado.value) scaaDeseado.value = sumatoriaAfectivaASCAA(puntajeDeseado.value)
actualizandoInput.value = false actualizandoInput.value = false
} }
// Handler para cuando se modifica SCAA Score // Handler para cuando se modifica SCAA Score (solo en blur)
const onScaaChange = () => { const onScaaChange = () => {
if (actualizandoInput.value) return if (actualizandoInput.value) return
actualizandoInput.value = true 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 // Redondear al múltiplo de 0.25 más cercano
scaaDeseado.value = redondearA025(scaaDeseado.value) scaaDeseado.value = redondearA025(scaaDeseado.value)
// Validar rango // Validar rango (solo después de redondear)
if (scaaDeseado.value < scaaMin) scaaDeseado.value = scaaMin if (scaaDeseado.value < scaaMin) scaaDeseado.value = scaaMin
if (scaaDeseado.value > scaaMax) scaaDeseado.value = scaaMax if (scaaDeseado.value > scaaMax) scaaDeseado.value = scaaMax
@@ -240,7 +252,7 @@ const onScaaChange = () => {
const sumatoriaRedondeada = Math.round(sumatoriaCalculada) const sumatoriaRedondeada = Math.round(sumatoriaCalculada)
// Asegurar rango válido // 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) // Recalcular SCAA Score con el valor redondeado (ya aplicará redondeo a 0.25)
scaaDeseado.value = sumatoriaAfectivaASCAA(puntajeDeseado.value) scaaDeseado.value = sumatoriaAfectivaASCAA(puntajeDeseado.value)
@@ -250,7 +262,7 @@ const onScaaChange = () => {
// Cálculos // Cálculos
const puntajeValido = computed(() => { const puntajeValido = computed(() => {
return puntajeDeseado.value >= 9 && puntajeDeseado.value <= 90 return puntajeDeseado.value >= 8 && puntajeDeseado.value <= 72
}) })
const multiploMasCercano = computed(() => { const multiploMasCercano = computed(() => {