Fix: Mejorar UX de inputs en asignación rápida
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 1m5s
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:
@@ -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(() => {
|
||||||
|
|||||||
Reference in New Issue
Block a user