60 lines
2.5 KiB
Markdown
60 lines
2.5 KiB
Markdown
# 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:
|
|
1. Abrir `/admin/products/new`
|
|
2. Scroll a "Peso unitario (Gr)"
|
|
3. Click en el desplegable → elegir "Personalizado…"
|
|
4. 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
|
|
|
|
```tsx
|
|
<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
|
|
|
|
1. Editar `PriceStockSection.tsx` — reemplazar select + input por input + datalist.
|
|
2. `cd apps/admin && npx tsc --noEmit`.
|
|
3. `cd apps/admin && npm run build`.
|
|
4. Cerrar gates. |