Modifyayayayayay

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

@@ -0,0 +1,145 @@
+import { render } from "@testing-library/react";
+import { useState } from "react"
+import { Dropdown } from "react-bootstrap";
+
+function renderStatus(statusCode) {
+    if (statusCode !== undefined) {
+
+        switch (statusCode) {
+            case 0:
+                return ("Disponible");
+            case 1:
+                return ("En commande");
+            case 2:
+                return ("Indisponible");
+            case 3:
+                return ("Liquidation");
+            case 4:
+                return ("Promotion");
+            case 5:
+                return ("Discontinué");
+            default:
+                return (<></>);
+        }
+    }
+
+}
+
+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 [quantity, setQuantity] = useState(morceau.quantity);
+    const [imageName, setImageName] = useState(morceau.imageName);
+    const [statusValue, setStatusValue] = useState(morceau.status)
+
+    const handleSubmit = (e) => {
+        e.preventDefault(); // Empêcher de reloader la page au submit.
+
+        // Appeler le comportement onCreation
+        onModify({ title, description, category, price, quantity, imageName, statusValue })
+    }
+
+
+    return (
+        <div className="inventaire-form-container">
+            <form className="form-horizontal" onSubmit={handleSubmit}>
+                <h4 className="text-center">Modifier un morceau</h4>
+                <div className="form-group">
+                    <label>Morceau: </label>
+                    <input className="form-control form-input" type='text'
+                        placeholder={morceau.title}
+                        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}
+                        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={morceau.category}
+                        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}
+                        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={morceau.quantity}
+                        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}
+                        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="Modifier Morceau"></input>
+            </form>
+        </div>
+    )
+}
+
+export default Modify

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

@@ -1,5 +1,8 @@
 import { FaTimes } from 'react-icons/fa'
 import { FaTools } from 'react-icons/fa'
+import { useState } from 'react';
+
+import Modify from './Modify';
 
 function renderStatus(statusCode) {
     if (statusCode !== undefined) {
@@ -25,19 +28,26 @@ function renderStatus(statusCode) {
 }
 
 const SimpleItem = ({ item, onDelete, onModify }) => {
+
+    const [isFormvisible, setFormVisibility] = useState(false);
+
     return (
         <div className="inventaire-item">
             <h3>
                 {item.title}
                 <div>
                     <FaTools style={{ color: "gray", cursor: 'pointer' }}
-                        onClick={() => onModify(item.id)} />
+                        onClick={() => setFormVisibility(!isFormvisible)} />
                     <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}, Disponibilité: {renderStatus(item.status)}</p>
-            <p> Description: {item.description}</p>
+            {isFormvisible && <Modify morceau={item} onModify={onModify}></Modify>}
+            {!isFormvisible && <div>
+                <p> Categoie: {item.category}, Prix: {item.price}, Promo: {item.promoPrice}, Quantité: {item.quantity}, Disponibilité: {renderStatus(item.status)}</p>
+                <p> Description: {item.description}</p>
+            </div>
+            }
         </div>
     )
 }