react-version #1
@ -86,11 +86,11 @@ public class ProductController : ControllerBase {
|
|||||||
[EnableCors("_myAllowSpecificOrigins"), HttpPatch()]
|
[EnableCors("_myAllowSpecificOrigins"), HttpPatch()]
|
||||||
public async Task<ActionResult<ProductModel>> Patch([FromForm] ProductModel prod) {
|
public async Task<ActionResult<ProductModel>> Patch([FromForm] ProductModel prod) {
|
||||||
string? oldImage = "";
|
string? oldImage = "";
|
||||||
|
if (prod.Price <= prod.PromoPrice)
|
||||||
|
prod.PromoPrice = prod.Price - 0.01M;
|
||||||
try {
|
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);
|
prod.ImageName = await SaveImage(prod.ImageFile);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -157,11 +157,15 @@ public class ProductController : ControllerBase {
|
|||||||
}
|
}
|
||||||
|
|
||||||
private void DeleteImages(string imageName) {
|
private void DeleteImages(string imageName) {
|
||||||
|
|
||||||
|
if (imageName == "default.jpg" || imageName == "default_thumbnail.jpg")
|
||||||
|
return;
|
||||||
|
|
||||||
var files = System.IO.Directory.GetFiles(_hostEnvironment.ContentRootPath + "/Images")
|
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)
|
foreach (var file in files)
|
||||||
System.IO.File.Delete(_hostEnvironment.ContentRootPath + "/Images/" + file);
|
System.IO.File.Delete(file);
|
||||||
}
|
}
|
||||||
|
|
||||||
#endregion
|
#endregion
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
import { useState } from "react"
|
import { useState, useEffect } from "react"
|
||||||
import { Dropdown } from "react-bootstrap";
|
import { Dropdown } from "react-bootstrap";
|
||||||
import {Button} from "react-bootstrap";
|
import { Button } from "react-bootstrap";
|
||||||
|
|
||||||
function renderStatus(statusCode) {
|
function renderStatus(statusCode) {
|
||||||
if (statusCode !== undefined) {
|
if (statusCode !== undefined) {
|
||||||
@ -32,21 +32,57 @@ const Modify = ({ morceau, onModify }) => {
|
|||||||
const [description, setDescription] = useState(morceau.description);
|
const [description, setDescription] = useState(morceau.description);
|
||||||
const [category, setCategory] = useState(morceau.category);
|
const [category, setCategory] = useState(morceau.category);
|
||||||
const [price, setPrice] = useState(morceau.price);
|
const [price, setPrice] = useState(morceau.price);
|
||||||
const [promoPrice, setPromoPrice] = useState("");
|
const [promoPrice, setPromoPrice] = useState(morceau.promoPrice);
|
||||||
const [quantity, setQuantity] = useState(morceau.quantity);
|
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 id = morceau.id;
|
||||||
|
|
||||||
const handleSubmit = (e) => {
|
const handleSubmit = (e) => {
|
||||||
e.preventDefault(); // Empêcher de reloader la page au submit.
|
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 (
|
return (
|
||||||
<div className="inventaire-form-container">
|
<div className="inventaire-form-container">
|
||||||
<form className="form-horizontal" onSubmit={handleSubmit}>
|
<form className="form-horizontal" onSubmit={handleSubmit}>
|
||||||
@ -94,11 +130,16 @@ const Modify = ({ morceau, onModify }) => {
|
|||||||
onChange={(e) => setQuantity(e.target.value)} />
|
onChange={(e) => setQuantity(e.target.value)} />
|
||||||
</div>
|
</div>
|
||||||
<div className="form-group">
|
<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>
|
||||||
<div className="form-group">
|
<div className="form-group">
|
||||||
<label>Status: </label>
|
<label>Status: </label>
|
||||||
|
@ -73,14 +73,22 @@ const Inventaire = () => {
|
|||||||
|
|
||||||
|
|
||||||
const handleModifyItem = async (morceau) => {
|
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`, {
|
const response = await fetch(`https://localhost:7292/api/Product`, {
|
||||||
method: 'PATCH',
|
method: 'PATCH',
|
||||||
credentials: 'include',
|
credentials: 'include',
|
||||||
|
mode: 'cors',
|
||||||
headers: {
|
headers: {
|
||||||
'Accept': 'application/json',
|
'accept': 'application/json',
|
||||||
'Content-Type': 'application/json'
|
|
||||||
},
|
},
|
||||||
body: JSON.stringify(morceau)
|
body: formData
|
||||||
})
|
})
|
||||||
|
|
||||||
const modifiedMorceau = await response.json();
|
const modifiedMorceau = await response.json();
|
||||||
|
Loading…
Reference in New Issue
Block a user