From 281fc2311855baa91d262adb6779df1a1e9bd336 Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Sun, 19 Oct 2025 02:53:51 -0600
Subject: [PATCH] =?UTF-8?q?Feat:=20Usar=20UInputNumber=20con=20botones=20+?=
 =?UTF-8?q?/-=20y=20sincronizaci=C3=B3n=20autom=C3=A1tica?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

CAMBIOS PRINCIPALES:

1. Reemplazar inputs normales por UInputNumber:
   - Ahora tienen botones +/- integrados
   - Mejor UX con controles visuales
   - Validación automática de min/max/step

2. Configuración de cada input:
   - Sumatoria Afectiva: step="1" (8-72)
   - SCAA Score: step="0.25" (58.00-100.00)
   - SCAA con format-options para 2 decimales

3. Doble sistema de handlers:

   a) Para botones +/- (@update:model-value):
      - onSumatoriaChangeFromButtons()
      - onScaaChangeFromButtons()
      - Sincronización AUTOMÁTICA e INMEDIATA
      - No espera blur, actualiza al instante

   b) Para escritura manual (@blur):
      - onSumatoriaBlur()
      - onScaaBlur()
      - Validación solo al perder foco
      - Permite edición libre

4. Sincronización bidireccional:
   - Modificar Sumatoria → actualiza SCAA
   - Modificar SCAA → actualiza Sumatoria
   - Funciona con botones +/- Y con escritura manual

BENEFICIOS:
✅ Botones +/- funcionan de 1 en 1 y 0.25 en 0.25
✅ Sincronización automática al usar botones
✅ Edición manual sigue funcionando (solo valida en blur)
✅ Mejor UX con controles visuales
✅ SCAA Score muestra siempre 2 decimales
---
 .../components/cata/ModalAsignacionRapida.vue | 74 +++++++++++++++----
 1 file changed, 58 insertions(+), 16 deletions(-)

diff --git a/nuxt4/app/components/cata/ModalAsignacionRapida.vue b/nuxt4/app/components/cata/ModalAsignacionRapida.vue
index caa5dc5..f9e4196 100644
--- a/nuxt4/app/components/cata/ModalAsignacionRapida.vue
+++ b/nuxt4/app/components/cata/ModalAsignacionRapida.vue
@@ -28,15 +28,15 @@
             <label class="block text-xs cata-text opacity-75 mb-1 text-center">
               Sumatoria Afectiva
             </label>
-            <input
-              v-model.number="puntajeDeseado"
-              type="number"
+            <UInputNumber
+              v-model="puntajeDeseado"
               :min="8"
               :max="72"
-              step="1"
+              :step="1"
               placeholder="8-72"
-              class="cata-input w-full px-3 py-2 rounded-md text-center text-lg"
-              @blur="onSumatoriaChange"
+              class="w-full"
+              @update:model-value="onSumatoriaChangeFromButtons"
+              @blur="onSumatoriaBlur"
             />
           </div>
 
@@ -45,15 +45,16 @@
             <label class="block text-xs cata-text opacity-75 mb-1 text-center">
               SCAA Score
             </label>
-            <input
-              v-model.number="scaaDeseado"
-              type="number"
+            <UInputNumber
+              v-model="scaaDeseado"
               :min="scaaMin"
               :max="scaaMax"
-              step="0.25"
+              :step="0.25"
               placeholder="58.00-100.00"
-              class="cata-input w-full px-3 py-2 rounded-md text-center text-lg"
-              @blur="onScaaChange"
+              class="w-full"
+              :format-options="{ minimumFractionDigits: 2, maximumFractionDigits: 2 }"
+              @update:model-value="onScaaChangeFromButtons"
+              @blur="onScaaBlur"
             />
           </div>
         </div>
@@ -203,8 +204,24 @@ watch(isOpen, (newValue) => {
   }
 })
 
-// Handler para cuando se modifica Sumatoria Afectiva (solo en blur)
-const onSumatoriaChange = () => {
+// Handler para cuando se modifica Sumatoria Afectiva usando botones +/-
+const onSumatoriaChangeFromButtons = (newValue: number | null) => {
+  if (actualizandoInput.value) return
+  if (newValue === null || newValue === undefined) return
+
+  actualizandoInput.value = true
+
+  // El valor ya viene validado por UInputNumber (min/max/step)
+  puntajeDeseado.value = newValue
+
+  // Actualizar SCAA Score automáticamente
+  scaaDeseado.value = sumatoriaAfectivaASCAA(puntajeDeseado.value)
+
+  actualizandoInput.value = false
+}
+
+// Handler para cuando se pierde el foco en Sumatoria Afectiva (escritura manual)
+const onSumatoriaBlur = () => {
   if (actualizandoInput.value) return
 
   actualizandoInput.value = true
@@ -227,8 +244,33 @@ const onSumatoriaChange = () => {
   actualizandoInput.value = false
 }
 
-// Handler para cuando se modifica SCAA Score (solo en blur)
-const onScaaChange = () => {
+// Handler para cuando se modifica SCAA Score usando botones +/-
+const onScaaChangeFromButtons = (newValue: number | null) => {
+  if (actualizandoInput.value) return
+  if (newValue === null || newValue === undefined) return
+
+  actualizandoInput.value = true
+
+  // El valor ya viene validado por UInputNumber (min/max/step)
+  scaaDeseado.value = newValue
+
+  // Convertir a Sumatoria Afectiva
+  const sumatoriaCalculada = scaaASumatoriaAfectiva(scaaDeseado.value)
+
+  // Redondear al entero más cercano
+  const sumatoriaRedondeada = Math.round(sumatoriaCalculada)
+
+  // Asegurar rango válido
+  puntajeDeseado.value = Math.max(8, Math.min(72, sumatoriaRedondeada))
+
+  // Recalcular SCAA Score con el valor redondeado
+  scaaDeseado.value = sumatoriaAfectivaASCAA(puntajeDeseado.value)
+
+  actualizandoInput.value = false
+}
+
+// Handler para cuando se pierde el foco en SCAA Score (escritura manual)
+const onScaaBlur = () => {
   if (actualizandoInput.value) return
 
   actualizandoInput.value = true