159 lines
6.6 KiB
JavaScript
159 lines
6.6 KiB
JavaScript
import { useState } from "react"
|
|
import { Dropdown } from "react-bootstrap";
|
|
import {Button} 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 [promoPrice, setPromoPrice] = useState("");
|
|
const [quantity, setQuantity] = useState(morceau.quantity);
|
|
const [imageName, setImageName] = useState(morceau.imageName);
|
|
const [status, setStatusValue] = useState(morceau.status)
|
|
|
|
const id = morceau.id;
|
|
|
|
const handleSubmit = (e) => {
|
|
e.preventDefault(); // Empêcher de reloader la page au submit.
|
|
|
|
// Appeler le comportement onCreation
|
|
onModify({ id, title, description, category, price, promoPrice, quantity, imageName, status })
|
|
}
|
|
|
|
|
|
return (
|
|
<div className="inventaire-form-container">
|
|
<form className="form-horizontal" onSubmit={handleSubmit}>
|
|
<h4 className="text-center">Ajouter un morceau</h4>
|
|
<div className="form-group">
|
|
<label>Morceau: </label>
|
|
<input className="form-control form-input" type='text'
|
|
placeholder="Nom du morceau..."
|
|
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="Description du morceau..."
|
|
value={description}
|
|
onChange={(e) => setDescription(e.target.value)} />
|
|
</div>
|
|
<div className="form-group">
|
|
<label>Catégorie: </label>
|
|
<input type='text' className="form-control form-input"
|
|
placeholder="Catégorie du morceau..."
|
|
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="Prix..."
|
|
value={price}
|
|
onChange={(e) => setPrice(e.target.value)} />
|
|
</div>
|
|
<div className="form-group">
|
|
<label>Prix promotionnel: </label>
|
|
<input type='text' className="form-control form-input"
|
|
placeholder="Prix promotionnel..."
|
|
value={promoPrice}
|
|
onChange={(e) => setPromoPrice(e.target.value)} />
|
|
</div>
|
|
<div className="form-group">
|
|
<label>Quantité: </label>
|
|
<input type='text' className="form-control form-input"
|
|
placeholder="Quantité..."
|
|
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="Nom de l'image..."
|
|
value={imageName}
|
|
onChange={(e) => setImageName(e.target.value)} />
|
|
</div>
|
|
<div className="form-group">
|
|
<label>Status: </label>
|
|
<Dropdown className='status-dropdown'>
|
|
<Dropdown.Toggle id="dropdown-status-add">
|
|
{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>
|
|
</div>
|
|
|
|
|
|
|
|
<Button className="btn-primary btn-ajouter-morceau" type="submit" >Sauvegarder</Button>
|
|
</form>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Modify |