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
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:
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user