diff --git a/app/src/app/admin/products/[id]/page.tsx b/app/src/app/admin/products/[id]/page.tsx index e7377ce..5c26f7d 100644 --- a/app/src/app/admin/products/[id]/page.tsx +++ b/app/src/app/admin/products/[id]/page.tsx @@ -16,6 +16,12 @@ interface Category { name: string } +interface MediaAsset { + id: string + url: string + altText: string | null +} + interface ProductForm { typeId: string title: string @@ -49,12 +55,14 @@ export default function AdminProductEditPage() { const [productTypes, setProductTypes] = useState([]) const [categories, setCategories] = useState([]) + const [images, setImages] = useState([]) + const [imageError, setImageError] = useState('') + const [uploading, setUploading] = useState(false) const [loading, setLoading] = useState(false) const [error, setError] = useState('') const [success, setSuccess] = useState('') useEffect(() => { - // Load types and categories Promise.all([ fetch('/api/admin/product-types').then((r) => r.json()), fetch('/api/admin/categories').then((r) => r.json()), @@ -81,11 +89,43 @@ export default function AdminProductEditPage() { stock: p.stock != null ? String(p.stock) : '', categoryIds: p.categories.map((c: { categoryId: string }) => c.categoryId), }) + setImages(p.images || []) } }) } }, [isNew, params.id]) + async function handleImageUpload(e: React.ChangeEvent) { + const files = Array.from(e.target.files || []) + if (!files.length) return + setImageError('') + setUploading(true) + for (const file of files) { + if (file.size > 5 * 1024 * 1024) { + setImageError(`${file.name} supera il limite di 5MB`) + continue + } + const fd = new FormData() + fd.append('file', file) + const res = await fetch(`/api/admin/products/${params.id}/images`, { method: 'POST', body: fd }) + const data = await res.json() + if (!res.ok) { + setImageError(data.error || 'Upload fallito') + } else { + setImages((prev) => [...prev, data.image]) + } + } + setUploading(false) + e.target.value = '' + } + + async function handleImageDelete(imageId: string) { + const res = await fetch(`/api/admin/products/${params.id}/images?imageId=${imageId}`, { method: 'DELETE' }) + if (res.ok) { + setImages((prev) => prev.filter((img) => img.id !== imageId)) + } + } + function generateSlug(title: string) { return title .toLowerCase() @@ -292,6 +332,50 @@ export default function AdminProductEditPage() { /> + {!isNew && ( +
+

Images

+ + {images.length > 0 && ( +
+ {images.map((img) => ( +
+ {img.altText + +
+ ))} +
+ )} + + {imageError &&

{imageError}

} + +
+ + +

JPEG, PNG, WebP — max 5MB per file

+
+
+ )} +