Manque juste Modifier...

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

@@ -0,0 +1,81 @@
+import { useState } from "react"
+
+const Ajouter = ({ onCreation }) => {
+
+    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 handleSubmit = (e) => {
+        e.preventDefault(); // Empêcher de reloader la page au submit.
+
+        // Appeler le comportement onCreation
+        onCreation({ title, description, category, price, quantity, imageName })
+
+        // 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>
+
+                <input className="btn-primary ajouter" type="submit" value="Ajouter Morceau"></input>
+            </form>
+        </div>
+    )
+}
+
+export default Ajouter