129 lines
5.4 KiB
JavaScript
129 lines
5.4 KiB
JavaScript
import { useState } from "react"
|
|
import { Dropdown } from "react-bootstrap";
|
|
|
|
const Ajouter = ({ onCreation }) => {
|
|
|
|
const [currentStatus, setStatus] = useState("Disponible");
|
|
|
|
const [title, setTitle] = useState("");
|
|
const [description, setDescription] = useState("");
|
|
const [category, setCategory] = useState("");
|
|
const [price, setPrice] = useState("");
|
|
const [quantity, setQuantity] = useState("");
|
|
const [imageName, setImageName] = useState("sqdc.jpg");
|
|
const [statusValue, setStatusValue] = useState(0)
|
|
|
|
const handleSubmit = (e) => {
|
|
e.preventDefault(); // Empêcher de reloader la page au submit.
|
|
|
|
// Appeler le comportement onCreation
|
|
onCreation({ title, description, category, price, quantity, imageName, statusValue })
|
|
|
|
// Reset les états du formulaire.
|
|
setTitle("")
|
|
setDescription("")
|
|
setCategory("")
|
|
setPrice("")
|
|
setQuantity("")
|
|
setImageName("sqdc.jpg")
|
|
}
|
|
|
|
|
|
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="Ajouter 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"
|
|
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="categorie"
|
|
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>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 image"
|
|
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="Ajouter Morceau"></input>
|
|
</form>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Ajouter |