Merge branch 'react-version' of https://github.com/MarcEricMartel/420-5DW-HY-TP into react-version
This commit is contained in:
MarcEricMartel
commit
80375cda05
@ -10,26 +10,27 @@ const Ajouter = ({ onCreation }) => {
|
||||
const [description, setDescription] = useState("");
|
||||
const [category, setCategory] = useState("");
|
||||
const [price, setPrice] = useState("");
|
||||
const [promoPrice, setPromoPrice] = useState("");
|
||||
const [quantity, setQuantity] = useState("");
|
||||
const [imageName, setImageName] = useState("sqdc.jpg");
|
||||
const [status, setStatusValue] = useState(0)
|
||||
const [status, 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, status })
|
||||
onCreation({ title, description, category, price, promoPrice, quantity, imageName, status });
|
||||
|
||||
// Reset les états du formulaire.
|
||||
setTitle("")
|
||||
setDescription("")
|
||||
setCategory("")
|
||||
setPrice("")
|
||||
setQuantity("")
|
||||
setImageName("sqdc.jpg")
|
||||
setTitle("");
|
||||
setDescription("");
|
||||
setCategory("");
|
||||
setPrice("");
|
||||
setPromoPrice("");
|
||||
setQuantity("");
|
||||
setImageName("sqdc.jpg");
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<div className="inventaire-form-container">
|
||||
<form className="form-horizontal" onSubmit={handleSubmit}>
|
||||
@ -37,42 +38,49 @@ const Ajouter = ({ onCreation }) => {
|
||||
<div className="form-group">
|
||||
<label>Morceau: </label>
|
||||
<input className="form-control form-input" type='text'
|
||||
placeholder="Ajouter Morceau"
|
||||
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"
|
||||
placeholder="Description du morceau..."
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)} />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Categorie: </label>
|
||||
<label>Catégorie: </label>
|
||||
<input type='text' className="form-control form-input"
|
||||
placeholder="categorie"
|
||||
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"
|
||||
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é"
|
||||
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"
|
||||
placeholder="Nom de l'image..."
|
||||
value={imageName}
|
||||
onChange={(e) => setImageName(e.target.value)} />
|
||||
</div>
|
||||
|
||||
@ -28,11 +28,11 @@ function renderStatus(statusCode) {
|
||||
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)
|
||||
@ -43,53 +43,60 @@ const Modify = ({ morceau, onModify }) => {
|
||||
e.preventDefault(); // Empêcher de reloader la page au submit.
|
||||
|
||||
// Appeler le comportement onCreation
|
||||
onModify({ id, title, description, category, price, quantity, imageName, status })
|
||||
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">Modifier un morceau</h4>
|
||||
<h4 className="text-center">Ajouter un morceau</h4>
|
||||
<div className="form-group">
|
||||
<label>Morceau: </label>
|
||||
<input className="form-control form-input" type='text'
|
||||
placeholder={morceau.title}
|
||||
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={morceau.description}
|
||||
placeholder="Description du morceau..."
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)} />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Categorie: </label>
|
||||
<label>Catégorie: </label>
|
||||
<input type='text' className="form-control form-input"
|
||||
placeholder={morceau.category}
|
||||
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={morceau.price}
|
||||
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={morceau.quantity}
|
||||
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={morceau.imageName}
|
||||
placeholder="Nom de l'image..."
|
||||
value={imageName}
|
||||
onChange={(e) => setImageName(e.target.value)} />
|
||||
</div>
|
||||
@ -141,7 +148,9 @@ const Modify = ({ morceau, onModify }) => {
|
||||
</Dropdown>
|
||||
</div>
|
||||
|
||||
<Button className="btn-primary btn-ajouter-morceau" type="submit" >Modifier Morceau</Button>
|
||||
|
||||
|
||||
<Button className="btn-primary btn-ajouter-morceau" type="submit" >Sauvegarder</Button>
|
||||
</form>
|
||||
</div>
|
||||
)
|
||||
|
||||
@ -39,7 +39,7 @@ const SimpleItem = ({ item, onDelete, onModify }) => {
|
||||
|
||||
</h3>
|
||||
<h1 className='simple-item-buttons'>
|
||||
<FontAwesomeIcon transform="left-10" icon={faTools} className='.btn-modifier-morceau' style={{ color: "gray", cursor: 'pointer' }}
|
||||
<FontAwesomeIcon transform="left-10" icon={faTools} className='.btn-modifier-morceau' style={{ color: "gray", cursor: 'pointer' }}
|
||||
onClick={() => setFormVisibility(!isFormvisible)} />
|
||||
<FontAwesomeIcon icon={faTimes} className='.btn-effacer-morceau' style={{ color: "red", cursor: 'pointer' }}
|
||||
onClick={() => onDelete(item.id)} />
|
||||
@ -47,7 +47,7 @@ const SimpleItem = ({ item, onDelete, onModify }) => {
|
||||
</div>
|
||||
{isFormvisible && <Modify morceau={item} onModify={onModify}></Modify>}
|
||||
{!isFormvisible && <div>
|
||||
<p> Catégorie: {item.category}, Prix: {item.price}, Promo: {item.promoPrice}, Quantité: {item.quantity}, Disponibilité: {renderStatus(item.status)}</p>
|
||||
<p> Catégorie: {item.category}, Prix: {item.price.toFixed(2).toString().replace(".", ",")} $ CA, Promo: {item.promoPrice.toFixed(2).toString().replace(".", ",")} $ CA, Quantité: {item.quantity}, Disponibilité: {renderStatus(item.status)}</p>
|
||||
<p> Description: {item.description}</p>
|
||||
</div>
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user