F-133 — Custom weight inline en el mismo desplegable

Diagnóstico

En /admin/products/:id y /admin/products/new, el campo "Peso unitario (Gr)" usa un <select> con presets + opción "Personalizado…". Al elegir "Personalizado…", aparece un <input> separado debajo del select (mt-2). Esto rompe el grid de 4 columnas donde está el campo, descuadrando la fila y haciendo que los demás campos se muevan.

Reproducción:

Abrir /admin/products/new
Scroll a "Peso unitario (Gr)"
Click en el desplegable → elegir "Personalizado…"
Aparece un input adicional debajo → el grid se descuadra, los inputs vecinos cambian de posición

Diseño

Reemplazar <select> + <input> condicional por un único control: <input type="number" list="…"> con <datalist> asociado. Este patrón es el "combo box" nativo de HTML:

El input muestra un campo numérico editable
El navegador muestra un desplegable con sugerencias (los presets) cuando el usuario hace click
Acepta cualquier valor (incluidos los custom)
Es un único elemento visual — no rompe el grid

<input
  type="number"
  list="weight-presets-list"
  min={1}
  max={100000}
  value={unitWeightGr}
  onChange={...}
  ...
/>
<datalist id="weight-presets-list">
  {WEIGHT_PRESETS_GR.map(g => <option key={g} value={g} label={`${g} g`} />)}
</datalist>

Cambios

apps/admin/src/features/products/components/sections/PriceStockSection.tsx:

Eliminado: <select> con presets + opción "Personalizado…"
Eliminado: <input> condicional que aparecía cuando se elegía "Personalizado…"
Eliminado: weightIsCustom, weightPresetValue, onWeightPresetChange (helpers ya no necesarios)
Añadido: <input type="number" list="weight-presets-list"> + <datalist> con presets

customWeightGr se mantiene como estado (legacy) pero ya no se usa para renderizar — solo el setter queda como setCustomWeightGr para mantener compatibilidad con handlers que aún lo invocan.

Compatibilidad

El estado interno (unitWeightGr) sigue siendo el mismo string en gramos.
El handler saveProductMeta sigue convirtiendo gr → kg antes de llamar al API.
La persistencia backend no se ve afectada.
Si un producto tenía unitWeightKg = 0.74 (es decir, 740g), al cargar, setUnitWeightGr('740') y el campo se muestra como 740 — el usuario puede editarlo a otro valor.

Plan

Editar PriceStockSection.tsx — reemplazar select + input por input + datalist.
cd apps/admin && npx tsc --noEmit.
cd apps/admin && npm run build.
Cerrar gates.

2.5 KiB Raw Blame History