Modifyayayayayay
This commit is contained in:
David Belisle
parent
98a29cfb33
commit
a2c82752e0
145
GrossesMitaines/grosses-mitaines-ui/src/components/Modify.js
Normal file
145
GrossesMitaines/grosses-mitaines-ui/src/components/Modify.js
Normal file
@ -0,0 +1,145 @@
|
||||
import { render } from "@testing-library/react";
|
||||
import { useState } from "react"
|
||||
import { Dropdown } from "react-bootstrap";
|
||||
|
||||
function renderStatus(statusCode) {
|
||||
if (statusCode !== undefined) {
|
||||
|
||||
switch (statusCode) {
|
||||
case 0:
|
||||
return ("Disponible");
|
||||
case 1:
|
||||
return ("En commande");
|
||||
case 2:
|
||||
return ("Indisponible");
|
||||
case 3:
|
||||
return ("Liquidation");
|
||||
case 4:
|
||||
return ("Promotion");
|
||||
case 5:
|
||||
return ("Discontinué");
|
||||
default:
|
||||
return (<></>);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const Modify = ({ morceau, onModify }) => {
|
||||
|
||||
const [currentStatus, setStatus] = useState(renderStatus(morceau.status));
|
||||
|
||||
const [title, setTitle] = useState(morceau.title);
|
||||
const [description, setDescription] = useState(morceau.description);
|
||||
const [category, setCategory] = useState(morceau.category);
|
||||
const [price, setPrice] = useState(morceau.price);
|
||||
const [quantity, setQuantity] = useState(morceau.quantity);
|
||||
const [imageName, setImageName] = useState(morceau.imageName);
|
||||
const [statusValue, setStatusValue] = useState(morceau.status)
|
||||
|
||||
const handleSubmit = (e) => {
|
||||
e.preventDefault(); // Empêcher de reloader la page au submit.
|
||||
|
||||
// Appeler le comportement onCreation
|
||||
onModify({ title, description, category, price, quantity, imageName, statusValue })
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<div className="inventaire-form-container">
|
||||
<form className="form-horizontal" onSubmit={handleSubmit}>
|
||||
<h4 className="text-center">Modifier un morceau</h4>
|
||||
<div className="form-group">
|
||||
<label>Morceau: </label>
|
||||
<input className="form-control form-input" type='text'
|
||||
placeholder={morceau.title}
|
||||
value={title}
|
||||
onChange={(e) => setTitle(e.target.value)} />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Description: </label>
|
||||
<input type='text' className="form-control form-input"
|
||||
placeholder={morceau.description}
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)} />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Categorie: </label>
|
||||
<input type='text' className="form-control form-input"
|
||||
placeholder={morceau.category}
|
||||
value={category}
|
||||
onChange={(e) => setCategory(e.target.value)} />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Prix: </label>
|
||||
<input type='text' className="form-control form-input"
|
||||
placeholder={morceau.price}
|
||||
value={price}
|
||||
onChange={(e) => setPrice(e.target.value)} />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Quantité: </label>
|
||||
<input type='text' className="form-control form-input"
|
||||
placeholder={morceau.quantity}
|
||||
value={quantity}
|
||||
onChange={(e) => setQuantity(e.target.value)} />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Nom Image: </label>
|
||||
<input type='text' className="form-control form-input"
|
||||
placeholder={morceau.imageName}
|
||||
value={imageName}
|
||||
onChange={(e) => setImageName(e.target.value)} />
|
||||
</div>
|
||||
<Dropdown className='status-dropdown'>
|
||||
<Dropdown.Toggle id="dropdown-status">
|
||||
{currentStatus}
|
||||
</Dropdown.Toggle>
|
||||
|
||||
<Dropdown.Menu className='sorting-menu'>
|
||||
<Dropdown.Item key="0" onClick={() => {
|
||||
setStatus("Disponible"); // Mets le nom afficher quand le dropdown est fermé
|
||||
setStatusValue(0);
|
||||
}}>
|
||||
Disponible {/*Le nom de l'option*/}
|
||||
</Dropdown.Item>
|
||||
<Dropdown.Item key="1" onClick={() => {
|
||||
setStatus("Indisponible");
|
||||
setStatusValue(1);
|
||||
}}>
|
||||
Indisponible
|
||||
</Dropdown.Item>
|
||||
<Dropdown.Item key="2" onClick={() => {
|
||||
setStatus("En Commande");
|
||||
setStatusValue(2);
|
||||
}}>
|
||||
En Commande
|
||||
</Dropdown.Item>
|
||||
<Dropdown.Item key="3" onClick={() => {
|
||||
setStatus("Liquidation");
|
||||
setStatusValue(3);
|
||||
}}>
|
||||
Liquidation
|
||||
</Dropdown.Item>
|
||||
<Dropdown.Item key="4" onClick={() => {
|
||||
setStatus("Promotion");
|
||||
setStatusValue(4);
|
||||
}}>
|
||||
Promotion
|
||||
</Dropdown.Item>
|
||||
<Dropdown.Item key="5" onClick={() => {
|
||||
setStatus("Discontinué");
|
||||
setStatusValue(5);
|
||||
}}>
|
||||
Discontinué
|
||||
</Dropdown.Item>
|
||||
</Dropdown.Menu>
|
||||
</Dropdown>
|
||||
|
||||
<input className="btn-primary ajouter" type="submit" value="Modifier Morceau"></input>
|
||||
</form>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Modify
|
||||
@ -1,5 +1,8 @@
|
||||
import { FaTimes } from 'react-icons/fa'
|
||||
import { FaTools } from 'react-icons/fa'
|
||||
import { useState } from 'react';
|
||||
|
||||
import Modify from './Modify';
|
||||
|
||||
function renderStatus(statusCode) {
|
||||
if (statusCode !== undefined) {
|
||||
@ -25,20 +28,27 @@ function renderStatus(statusCode) {
|
||||
}
|
||||
|
||||
const SimpleItem = ({ item, onDelete, onModify }) => {
|
||||
|
||||
const [isFormvisible, setFormVisibility] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="inventaire-item">
|
||||
<h3>
|
||||
{item.title}
|
||||
<div>
|
||||
<FaTools style={{ color: "gray", cursor: 'pointer' }}
|
||||
onClick={() => onModify(item.id)} />
|
||||
onClick={() => setFormVisibility(!isFormvisible)} />
|
||||
<FaTimes style={{ color: "red", cursor: 'pointer' }}
|
||||
onClick={() => onDelete(item.id)} />
|
||||
</div>
|
||||
</h3>
|
||||
{isFormvisible && <Modify morceau={item} onModify={onModify}></Modify>}
|
||||
{!isFormvisible && <div>
|
||||
<p> Categoie: {item.category}, Prix: {item.price}, Promo: {item.promoPrice}, Quantité: {item.quantity}, Disponibilité: {renderStatus(item.status)}</p>
|
||||
<p> Description: {item.description}</p>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -9,9 +9,9 @@ const ContactUs = () => {
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="contactUs">
|
||||
<ContactForm/>
|
||||
</>
|
||||
</div >
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -53,8 +53,25 @@ const Inventaire = () => {
|
||||
console.log("Erreur leur du DELETE de " + id);
|
||||
};
|
||||
|
||||
const handleModifyItem = async (id) => {
|
||||
const handleModifyItem = async (morceau) => {
|
||||
const response = await fetch(`https://localhost:7292/api/Product`, {
|
||||
method: 'PATCH',
|
||||
headers: {
|
||||
'Accept': 'application/json',
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(morceau)
|
||||
})
|
||||
|
||||
const newMorceau = await response.json();
|
||||
console.log(newMorceau);
|
||||
|
||||
if (response.ok) {
|
||||
setMorceaux(morceaux.filter((morceau) => morceau.id !== newMorceau.id));
|
||||
setMorceaux([...morceaux, { ...newMorceau }]);
|
||||
}
|
||||
else
|
||||
console.log("Erreur de creation " + morceau);
|
||||
};
|
||||
|
||||
return (
|
||||
|
||||
@ -15,6 +15,10 @@ html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.contactUs {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.home-text {
|
||||
/* border: black 1px solid; */
|
||||
text-align: center;
|
||||
@ -398,7 +402,7 @@ html {
|
||||
}
|
||||
|
||||
.privacy {
|
||||
height: 100%;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.morceaux {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user