Refactor: Simplificar modal de asignación rápida eliminando textos explicativos
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 1m7s

- Eliminar descripción del modal
- Simplificar paso 1: solo input sin textos explicativos
- Simplificar paso 2: subtítulo compacto con [icono] + "Sobresale"/"Palidece" + x/t
- Eliminar texto de contador duplicado
- Eliminar sección de resumen de distribución
- Interfaz más limpia y directa
This commit is contained in:
2025-10-19 01:12:43 -06:00
parent 0a8ad036c4
commit f7fea29437

View File

@@ -2,7 +2,6 @@
<UModal <UModal
v-model:open="isOpen" v-model:open="isOpen"
title="Asignación Rápida de Puntajes" title="Asignación Rápida de Puntajes"
description="Distribuye un puntaje total entre las 8 categorías descriptivas"
> >
<!-- Trigger (slot por defecto) --> <!-- Trigger (slot por defecto) -->
<slot /> <slot />
@@ -12,32 +11,28 @@
<div class="space-y-4"> <div class="space-y-4">
<!-- Paso 1: Ingresar puntaje total deseado --> <!-- Paso 1: Ingresar puntaje total deseado -->
<div v-if="paso === 1"> <div v-if="paso === 1">
<label class="cata-text text-sm font-medium mb-2 block">
Puntaje Total Deseado (8-80)
</label>
<input <input
v-model.number="puntajeDeseado" v-model.number="puntajeDeseado"
type="number" type="number"
:min="8" :min="8"
:max="80" :max="80"
placeholder="Ej: 45" placeholder="Puntaje Total (8-80)"
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"
/> />
<p class="text-xs cata-text opacity-60 mt-2">
Este puntaje se distribuirá entre las 8 categorías descriptivas
</p>
</div> </div>
<!-- Paso 2: Seleccionar categorías que sobresalen o palidecen --> <!-- Paso 2: Seleccionar categorías que sobresalen o palidecen -->
<div v-if="paso === 2"> <div v-if="paso === 2">
<p class="text-sm cata-text mb-3"> <!-- Subtítulo con icono y contador -->
<span v-if="multiploMasCercano < puntajeDeseado"> <div class="flex items-center gap-2 mb-3 cata-text font-medium">
Selecciona {{ diferencia }} categoría(s) que <strong>sobresalen</strong> en esta muestra: <UIcon
</span> :name="multiploMasCercano < puntajeDeseado ? 'i-heroicons-arrow-up-circle' : 'i-heroicons-arrow-down-circle'"
<span v-else> class="w-5 h-5"
Selecciona {{ diferencia }} categoría(s) que <strong>palidecen</strong> en esta muestra: :style="{ color: 'var(--cata-primary)' }"
</span> />
</p> <span>{{ multiploMasCercano < puntajeDeseado ? 'Sobresale' : 'Palidece' }}</span>
<span class="ml-auto opacity-60">{{ categoriasSeleccionadas.length }}/{{ diferencia }}</span>
</div>
<div class="space-y-2"> <div class="space-y-2">
<button <button
@@ -64,23 +59,6 @@
/> />
</button> </button>
</div> </div>
<p class="text-xs cata-text opacity-60 mt-3">
Seleccionadas: {{ categoriasSeleccionadas.length }} / {{ diferencia }}
</p>
</div>
<!-- Resumen -->
<div v-if="paso === 2" class="cata-outline-box rounded-md p-3 text-sm">
<p class="cata-text font-medium mb-1">Distribución:</p>
<p class="cata-text"> Puntaje base: {{ puntajeBase }} para todas las categorías</p>
<p v-if="multiploMasCercano < puntajeDeseado" class="cata-text">
+1 punto a las {{ diferencia }} categoría(s) que sobresalen
</p>
<p v-else class="cata-text">
-1 punto a las {{ diferencia }} categoría(s) que palidecen
</p>
<p class="cata-text font-semibold mt-2">Total: {{ puntajeDeseado }} puntos</p>
</div> </div>
</div> </div>
</template> </template>