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

GrossesMitaines/grosses-mitaines-ui/src/pages/ContactUs.js

@@ -9,9 +9,9 @@ const ContactUs = () => {
     });
 
     return (
-        <>
+        <div className="contactUs">
           <ContactForm/>
-        </>
+        </div >
     );
 }
 

GrossesMitaines/grosses-mitaines-ui/src/pages/Inventaire.js

@@ -29,7 +29,7 @@ const Inventaire = () => {
             },
             body: JSON.stringify(morceau)
         })
-        
+
         const newMorceau = await response.json();
         console.log(newMorceau);
 
@@ -45,16 +45,33 @@ const Inventaire = () => {
 
         const deletedId = await response.json();
 
-        if (response.ok){
+        if (response.ok) {
             setMorceaux(morceaux.filter((morceau) => morceau.id !== deletedId));
-            console.log("DELETE de: "+deletedId +" avec succès!");
+            console.log("DELETE de: " + deletedId + " avec succès!");
         }
         else
             console.log("Erreur leur du DELETE de " + id);
     };
 
-    const handleModifyItem = async (id) => {
+    const handleModifyItem = async (morceau) => {
+        const response = await fetch(`https://localhost:7292/api/Product`, {
+            method: 'PATCH',
+            headers: {
+                'Accept': 'application/json',
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(morceau)
+        })
 
+        const newMorceau = await response.json();
+        console.log(newMorceau);
+
+        if (response.ok) {
+            setMorceaux(morceaux.filter((morceau) => morceau.id !== newMorceau.id));
+            setMorceaux([...morceaux, { ...newMorceau }]);
+        }
+        else
+            console.log("Erreur de creation " + morceau);
     };
 
     return (

GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css

@@ -15,6 +15,10 @@ html {
     height: 100%;
 }
 
+.contactUs {
+    height: 100vh;
+}
+
 .home-text {
     /* border: black 1px solid; */
     text-align: center;
@@ -398,7 +402,7 @@ html {
 }
 
 .privacy {
-    height: 100%;
+    height: 100vh;
 }
 
 .morceaux {