Ajout de promoPrice dans le gestionnaire de produit

GrossesMitaines/grosses-mitaines-ui/src/components/Ajouter.js

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

GrossesMitaines/grosses-mitaines-ui/src/components/Modify.js

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

GrossesMitaines/grosses-mitaines-ui/src/components/SimpleItem.js

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