correction error messages

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

@@ -1,19 +1,23 @@
 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 })
+        onCreation({ title, description, category, price, quantity, imageName, statusValue })
 
         // Reset les états du formulaire.
         setTitle("")
@@ -71,6 +75,50 @@ const Ajouter = ({ onCreation }) => {
                         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>