memartel_loc/GGMM
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

react-version #1

Merged
memartel_loc merged 290 commits from react-version into main 2023-11-04 09:48:15 -04:00
Conversation 0 Commits 290 Files Changed 270 +46 -29
3 changed files with 46 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 80375cda05 - Show all commits

40
GrossesMitaines/grosses-mitaines-ui/src/components/Ajouter.js
View File

@ -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>

31
GrossesMitaines/grosses-mitaines-ui/src/components/Modify.js
View File

@ -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>
)

4
GrossesMitaines/grosses-mitaines-ui/src/components/SimpleItem.js
View File

@ -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>
}