Fix de modification et delete d'image

GrossesMitaines/GrossesMitainesAPI/Controllers/ProductController.cs

@@ -86,11 +86,11 @@ public class ProductController : ControllerBase {
     [EnableCors("_myAllowSpecificOrigins"), HttpPatch()]
     public async Task<ActionResult<ProductModel>> Patch([FromForm] ProductModel prod) {
         string? oldImage = "";
+        if (prod.Price <= prod.PromoPrice)
+            prod.PromoPrice = prod.Price - 0.01M;
         try {
-            if (prod.ImageFile is not null) { 
+            if (prod.ImageFile is not null) {
-                oldImage = _context.Products.FirstOrDefault(x => x.Id == prod.Id).ImageName;
+                oldImage = prod.ImageName;
-                if (oldImage == prod.ImageName)
-                    oldImage = "";
                 prod.ImageName = await SaveImage(prod.ImageFile);
             }
 
@@ -157,11 +157,15 @@ public class ProductController : ControllerBase {
     }
 
     private void DeleteImages(string imageName) {
+
+        if (imageName == "default.jpg" || imageName == "default_thumbnail.jpg")
+            return;
+
         var files = System.IO.Directory.GetFiles(_hostEnvironment.ContentRootPath + "/Images")
-                                       .Where(x => x.Contains(imageName)).ToArray();
+                                       .Where(x => x.Contains(Path.GetFileNameWithoutExtension(imageName))).ToArray();
 
         foreach (var file in files) 
-            System.IO.File.Delete(_hostEnvironment.ContentRootPath + "/Images/" + file);
+            System.IO.File.Delete(file);
     }
 
     #endregion

GrossesMitaines/grosses-mitaines-ui/src/components/Modify.js

@@ -1,6 +1,6 @@
-import { useState } from "react"
+import { useState, useEffect } from "react"
 import { Dropdown } from "react-bootstrap";
-import {Button} from "react-bootstrap";
+import { Button } from "react-bootstrap";
 
 function renderStatus(statusCode) {
     if (statusCode !== undefined) {
@@ -32,21 +32,57 @@ const Modify = ({ morceau, onModify }) => {
     const [description, setDescription] = useState(morceau.description);
     const [category, setCategory] = useState(morceau.category);
     const [price, setPrice] = useState(morceau.price);
-    const [promoPrice, setPromoPrice] = useState("");
+    const [promoPrice, setPromoPrice] = useState(morceau.promoPrice);
     const [quantity, setQuantity] = useState(morceau.quantity);
-    const [imageName, setImageName] = useState(morceau.imageName);
+    const [status, setStatusValue] = useState(morceau.status);
-    const [status, setStatusValue] = useState(morceau.status)
+
+    const [imageFile, setImage] = useState(null);
+    const [imageUrl, setImageUrl] = useState(null);
+
+
+    useEffect(() => {
+
+        if (imageFile)
+            setImageUrl(URL.createObjectURL(imageFile));
+        else {
+            fetch(`https://localhost:7292/api/Image?id=${morceau.id}`)
+                .then(response => response.blob())
+                .then(blob => {
+                    setImageUrl(URL.createObjectURL(blob));
+                })
+        }
+
+    }, [imageFile]);
+
 
     const id = morceau.id;
 
     const handleSubmit = (e) => {
         e.preventDefault(); // Empêcher de reloader la page au submit.
 
-        // Appeler le comportement onCreation
+        // Appeler le comportement
-        onModify({ id, title, description, category, price, promoPrice, quantity, imageName, status })
+        onModify({
+            id: morceau.id,
+            title: title,
+            description: description,
+            category: category,
+            price: price,
+            promoPrice: promoPrice,
+            quantity: quantity,
+            imageFile: imageFile,
+            imageName: morceau.imageName,
+            status: status,
+        });
     }
 
 
+    const handleImageChange = (e) => {
+        if (e.target.files && e.target.files[0])
+            setImage(e.target.files[0]);
+        else
+            setImage(null);
+    }
+
     return (
         <div className="inventaire-form-container">
             <form className="form-horizontal" onSubmit={handleSubmit}>
@@ -94,11 +130,16 @@ const Modify = ({ morceau, onModify }) => {
                         onChange={(e) => setQuantity(e.target.value)} />
                 </div>
                 <div className="form-group">
-                    <label>Nom Image: </label>
+                    <label>Image: </label>
-                    <input type='text' className="form-control form-input"
+                    <input
-                        placeholder="Nom de l'image..."
+                        className="form-control form-input"
-                        value={imageName}
+                        type='file'
-                        onChange={(e) => setImageName(e.target.value)} />
+                        accept="image/*"
+                        onChange={(e) => handleImageChange(e)} />
+                    {imageUrl && <div className="img-preview-container">
+                        <img className="img-preview" src={imageUrl} />
+                    </div>}
+
                 </div>
                 <div className="form-group">
                     <label>Status: </label>

GrossesMitaines/grosses-mitaines-ui/src/pages/Inventaire.js

@@ -73,14 +73,22 @@ const Inventaire = () => {
 
 
     const handleModifyItem = async (morceau) => {
+        console.log(morceau);
+
+        let formData = new FormData();
+        Object.keys(morceau).map((k) => {
+            formData.set(k,morceau[k]);
+        });
+
+
         const response = await fetch(`https://localhost:7292/api/Product`, {
             method: 'PATCH',
             credentials: 'include',
+            mode: 'cors',
             headers: {
-                'Accept': 'application/json',
+                'accept': 'application/json',
-                'Content-Type': 'application/json'
             },
-            body: JSON.stringify(morceau)
+            body: formData
         })
 
         const modifiedMorceau = await response.json();