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

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

@@ -6,6 +6,7 @@ import Privacy from "../pages/Privacy";
 import ContactUs from "../pages/ContactUs";
 import Morceaux from "../pages/Morceaux";
 import MorceauDetail from "../pages/MorceauDetail";
+import Inventaire from "../pages/Inventaire";
 
 const App = () => {
 
@@ -19,6 +20,7 @@ const App = () => {
           <Route path="contactUs" element={<ContactUs/>}/>
           <Route path="privacy" element={<Privacy/>}/>
           <Route path="morceaux/:id" element={<MorceauDetail/>}/>
+          <Route path="inventaire" element={<Inventaire/>}/>
         </Route>
       </Routes>
     </BrowserRouter>

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

@@ -0,0 +1,9 @@
+const Button = ({text, color, onClick}) => {
+    return (
+        <button className="btn" style={{backgroundColor : color}} onClick={onClick}>
+            {text}
+        </button>
+    )
+};
+
+export default Button;

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

@@ -7,28 +7,28 @@ const ContactForm = () =>{
                 <div className="form-group">
                     <div className="col-md-12">
                         <label >Nom*</label>
-                        <input className="form-control contact-form-input"  />
+                        <input className="form-control form-input"  />
                         {/* <span asp-validation-for="Name" className="text-danger"></span> */}
                     </div>
                 </div>
                 <div className="form-group">
                     <div className="col-md-12">
                         <label >Email*</label>
-                        <input className="form-control contact-form-input" />
+                        <input className="form-control form-input" />
                         {/* <span asp-validation-for="Email" className="text-danger"></span> */}
                     </div> 
                 </div>
                 <div className="form-group">
                     <div className="col-md-12">
                         <label >Téléphone*</label>
-                        <input className="form-control contact-form-input" />
+                        <input className="form-control form-input" />
                         {/* <span asp-validation-for="Phone" className="text-danger"></span> */}
                     </div>
                 </div>
                 <div className="form-group">
                     <div className="col-md-12">
                         <label >Message</label>
-                        <textarea className="form-control contact-form-input" rows="3"/>
+                        <textarea className="form-control form-input" rows="3"/>
                         {/* <span asp-validation-for="Message" className="text-danger"></span> */}
                     </div>
                 </div>

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

@@ -0,0 +1,22 @@
+import { FaTimes } from 'react-icons/fa'
+import { FaTools } from 'react-icons/fa'
+
+const SimpleItem = ({ item, onDelete, onModify }) => {
+    return (
+        <div className="inventaire-item">
+            <h3>
+                {item.title}
+                <div>
+                    <FaTools style={{ color: "gray", cursor: 'pointer' }}
+                        onClick={() => onModify(item.id)} />
+                    <FaTimes style={{ color: "red", cursor: 'pointer' }}
+                        onClick={() => onDelete(item.id)} />
+                </div>
+            </h3>
+            <p> Categoie: {item.category}, Prix: {item.price}, Promo: {item.promoPrice}, Quantité: {item.quantity}</p>
+            <p> Description: {item.description}</p>
+        </div>
+    )
+}
+
+export default SimpleItem

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

@@ -0,0 +1,18 @@
+import SimpleItem from "./SimpleItem";
+
+const SimpleItemList = ({simpleItems, onDelete, onModify}) => {
+    return(
+        <>
+            {simpleItems.map((simpleItem) => (
+                simpleItem &&
+                <SimpleItem key={simpleItem.id}
+                            item={simpleItem}
+                            onDelete={onDelete}
+                            onModify={onModify}
+                />
+            ))}
+        </>
+    )
+}
+
+export default SimpleItemList

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

@@ -3,6 +3,7 @@ import Container from 'react-bootstrap/Container';
 import Nav from 'react-bootstrap/Nav';
 import Navbar from 'react-bootstrap/Navbar';
 import { Link } from "react-router-dom";
+import Dropdown from "react-bootstrap/Dropdown";
 
 
 const Topbar = () => {
@@ -10,7 +11,7 @@ const Topbar = () => {
         <Navbar expand="sm" className="topbar-container">
             <Container>
                 <Link className="navbar-brand" to="/">
-                    <img src="/images/LesGrossesMitaines.png" alt="" height="45"/>
+                    <img src="/images/LesGrossesMitaines.png" alt="" height="45" />
                 </Link>
                 <Navbar.Toggle aria-controls="basic-navbar-nav" />
                 <Navbar.Collapse id="basic-navbar-nav">
@@ -30,6 +31,19 @@ const Topbar = () => {
                         <Link className="nav-link" to="/privacy" >
                             Vie privée
                         </Link>
+                        <Dropdown>
+                            <Dropdown.Toggle className="dropdown-gestion">
+                                Gestion
+                            </Dropdown.Toggle>
+
+                            <Dropdown.Menu className="dropdown-gestion-menu">
+                                <Dropdown.Item>
+                                    <Link className="nav-link" to="/inventaire" >
+                                        Inventaire
+                                    </Link>
+                                </Dropdown.Item>
+                            </Dropdown.Menu>
+                        </Dropdown>
                     </Nav>
                 </Navbar.Collapse>
             </Container>