77 lines
2.8 KiB
Markdown
77 lines
2.8 KiB
Markdown
# F-075 — Architect: Inline edit SKU/EAN/STOCK in inventory module; remove Actions column
|
|
|
|
## Current state
|
|
|
|
`inventory/page.tsx` has:
|
|
- SKU displayed as plain text (no edit capability)
|
|
- EAN displayed as plain text (no edit capability)
|
|
- Stock inline edit via ✏️ button in the Stock column
|
|
- Empty "Acción" column header (th with no corresponding td in tbody — vestigial)
|
|
|
|
The backend has `PATCH /products/:id/variants/:variantId` which accepts `sku` and `ean` fields. This endpoint is accessible via the admin proxy.
|
|
|
|
## Goal
|
|
|
|
1. Make **SKU**, **EAN**, and **Stock** editable inline by clicking on the cell
|
|
2. Remove the vestigial "Acción" column (th with no corresponding td)
|
|
3. Add `updateVariant` to `productsApi` in the admin API client
|
|
|
|
## Scope IN
|
|
|
|
- `project/apps/admin/src/lib/api-client.ts`:
|
|
- Add `updateVariant(productId, variantId, data)` to `productsApi`
|
|
|
|
- `project/apps/admin/src/app/(dashboard)/inventory/page.tsx`:
|
|
- Extend `VariantRow` interface with `editingSku`, `editSkuValue`, `editingEan`, `editEanValue` states
|
|
- Add `handleSaveSku` and `handleSaveEan` functions calling `productsApi.updateVariant`
|
|
- Make SKU cell: click on text → shows input → save on Enter/blur
|
|
- Make EAN cell: click on text → shows input → save on Enter/blur
|
|
- Stock: click on value (not just ✏️) to enter edit mode
|
|
- Remove the "Acción" column header (th) and its row in the table
|
|
|
|
## Scope OUT
|
|
|
|
- No backend changes (endpoint already exists)
|
|
- No changes to the product editor (PricingSection, InventorySection)
|
|
|
|
## Design
|
|
|
|
SKU cell (click-to-edit):
|
|
```tsx
|
|
{row.editingSku ? (
|
|
<input
|
|
autoFocus
|
|
value={row.editSkuValue}
|
|
onChange={e => setRows(prev => prev.map(r =>
|
|
r.variant.id === row.variant.id ? { ...r, editSkuValue: e.target.value } : r))}
|
|
onBlur={() => handleSaveSku(row.variant.id, row.productId, row.editSkuValue)}
|
|
onKeyDown={e => { if (e.key === 'Enter') handleSaveSku(...); if (e.key === 'Escape') ...; }}
|
|
className="w-full px-2 py-1 border border-[#2D6A4F] rounded text-xs focus:ring-1 focus:ring-[#2D6A4F]"
|
|
/>
|
|
) : (
|
|
<button onClick={() => setRows(prev => prev.map(r =>
|
|
r.variant.id === row.variant.id ? { ...r, editingSku: true, editSkuValue: row.variant.sku } : r))}
|
|
className="font-mono text-xs text-gray-600 hover:text-[#2D6A4F] cursor-text text-left w-full truncate"
|
|
title="Clic para editar"
|
|
>
|
|
{row.variant.sku}
|
|
</button>
|
|
)}
|
|
```
|
|
|
|
EAN cell: same pattern for EAN.
|
|
|
|
Stock cell: same pattern, but click on the value (not just ✏️).
|
|
|
|
## Risk
|
|
|
|
- **Low risk**: purely frontend changes, no backend or DB changes
|
|
- SKU uniqueness validation: backend returns error if duplicate SKU, caught and displayed
|
|
|
|
## Verification
|
|
|
|
- `npx tsc --noEmit` admin
|
|
- `npx eslint` on changed files
|
|
- `./scripts/verify.sh` green
|
|
- Manual: click on SKU → edit → save; same for EAN and Stock
|