Merge branch 'react-version' of https://github.com/MarcEricMartel/420-5DW-HY-TP into react-version

GrossesMitaines/GrossesMitainesAPI/Controllers/ProductController.cs

@@ -58,8 +58,8 @@ public class ProductController : ControllerBase {
     }
 
     [EnableCors("_myAllowSpecificOrigins")]
-    [HttpPut(Name = "Product")]
+    [HttpPatch(Name = "Product")]
-    public ActionResult<Product> Put(Product prod) {
+    public ActionResult<Product> Patch(Product prod) {
         try {
             _context.Products.Update(prod);
             _context.SaveChanges();

GrossesMitaines/grosses-mitaines-ui/package-lock.json

@@ -8,6 +8,9 @@
       "name": "grosses-mitaines-ui",
       "version": "0.1.0",
       "dependencies": {
+        "@fortawesome/fontawesome-svg-core": "^6.2.0",
+        "@fortawesome/free-solid-svg-icons": "^6.2.0",
+        "@fortawesome/react-fontawesome": "^0.2.0",
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
@@ -15,10 +18,13 @@
         "bootstrap": "^5.2.1",
         "fa": "^1.0.1",
         "font-awesome": "^4.7.0",
+        "fontawesome": "^5.6.3",
+        "fortawesome": "^0.0.1-security",
         "react": "^18.2.0",
         "react-bootstrap": "^2.5.0",
         "react-devtools": "^4.26.0",
         "react-dom": "^18.2.0",
+        "react-fontawesome": "^1.7.1",
         "react-icons": "^4.6.0",
         "react-router-dom": "^6.4.1",
         "react-scripts": "^5.0.1",
@@ -2260,6 +2266,51 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.2.0.tgz",
+      "integrity": "sha512-rBevIsj2nclStJ7AxTdfsa3ovHb1H+qApwrxcTVo+NNdeJiB9V75hsKfrkG5AwNcRUNxrPPiScGYCNmLMoh8pg==",
+      "hasInstallScript": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-svg-core": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.2.0.tgz",
+      "integrity": "sha512-Cf2mAAeMWFMzpLC7Y9H1I4o3wEU+XovVJhTiNG8ZNgSQj53yl7OCJaS80K4YjrABWZzbAHVaoHE1dVJ27AAYXw==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.2.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-solid-svg-icons": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.2.0.tgz",
+      "integrity": "sha512-UjCILHIQ4I8cN46EiQn0CZL/h8AwCGgR//1c4R96Q5viSRwuKVo0NdQEc4bm+69ZwC0dUvjbDqAHF1RR5FA3XA==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.2.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/react-fontawesome": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz",
+      "integrity": "sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==",
+      "dependencies": {
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "@fortawesome/fontawesome-svg-core": "~1 || ~6",
+        "react": ">=16.3"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.10.7",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.10.7.tgz",
@@ -8715,6 +8766,11 @@
         "node": ">=0.10.3"
       }
     },
+    "node_modules/fontawesome": {
+      "version": "5.6.3",
+      "resolved": "https://registry.npmjs.org/fontawesome/-/fontawesome-5.6.3.tgz",
+      "integrity": "sha512-FCc+CawwsJWWprVEg9X14yI7zI+l9YVAyhzgu70qwGeDn0tLLDH/dVfqgij72g4BBGgLGfK2qnvFGAmYUkhaWg=="
+    },
     "node_modules/fork-ts-checker-webpack-plugin": {
       "version": "6.5.2",
       "resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-6.5.2.tgz",
@@ -8903,6 +8959,11 @@
         "node": ">= 6"
       }
     },
+    "node_modules/fortawesome": {
+      "version": "0.0.1-security",
+      "resolved": "https://registry.npmjs.org/fortawesome/-/fortawesome-0.0.1-security.tgz",
+      "integrity": "sha512-o/pwn9ZSnveFLYP0d5IejSwz0rpGMDQsBaYVvR8WXSvnxILIwh7IUJK0P90QMF4cnIyouVF2BGrz0LEVSyzimA=="
+    },
     "node_modules/forwarded": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -15269,6 +15330,20 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "node_modules/react-fontawesome": {
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/react-fontawesome/-/react-fontawesome-1.7.1.tgz",
+      "integrity": "sha512-kottReWW1I9Uupub6A5YX4VK7qfpFnEjAcm5zB4Aepst7iofONT27GJYdTcRsj7q5uQu9PXBL7GsxAFKANNUVg==",
+      "dependencies": {
+        "prop-types": "^15.5.6"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      },
+      "peerDependencies": {
+        "react": ">=0.12.0"
+      }
+    },
     "node_modules/react-icons": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.6.0.tgz",
@@ -20023,6 +20098,35 @@
         }
       }
     },
+    "@fortawesome/fontawesome-common-types": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.2.0.tgz",
+      "integrity": "sha512-rBevIsj2nclStJ7AxTdfsa3ovHb1H+qApwrxcTVo+NNdeJiB9V75hsKfrkG5AwNcRUNxrPPiScGYCNmLMoh8pg=="
+    },
+    "@fortawesome/fontawesome-svg-core": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.2.0.tgz",
+      "integrity": "sha512-Cf2mAAeMWFMzpLC7Y9H1I4o3wEU+XovVJhTiNG8ZNgSQj53yl7OCJaS80K4YjrABWZzbAHVaoHE1dVJ27AAYXw==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "6.2.0"
+      }
+    },
+    "@fortawesome/free-solid-svg-icons": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.2.0.tgz",
+      "integrity": "sha512-UjCILHIQ4I8cN46EiQn0CZL/h8AwCGgR//1c4R96Q5viSRwuKVo0NdQEc4bm+69ZwC0dUvjbDqAHF1RR5FA3XA==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "6.2.0"
+      }
+    },
+    "@fortawesome/react-fontawesome": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz",
+      "integrity": "sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==",
+      "requires": {
+        "prop-types": "^15.8.1"
+      }
+    },
     "@humanwhocodes/config-array": {
       "version": "0.10.7",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.10.7.tgz",
@@ -24780,6 +24884,11 @@
       "resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz",
       "integrity": "sha512-U6kGnykA/6bFmg1M/oT9EkFeIYv7JlX3bozwQJWiiLz6L0w3F5vBVPxHlwyX/vtNq1ckcpRKOB9f2Qal/VtFpg=="
     },
+    "fontawesome": {
+      "version": "5.6.3",
+      "resolved": "https://registry.npmjs.org/fontawesome/-/fontawesome-5.6.3.tgz",
+      "integrity": "sha512-FCc+CawwsJWWprVEg9X14yI7zI+l9YVAyhzgu70qwGeDn0tLLDH/dVfqgij72g4BBGgLGfK2qnvFGAmYUkhaWg=="
+    },
     "fork-ts-checker-webpack-plugin": {
       "version": "6.5.2",
       "resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-6.5.2.tgz",
@@ -24907,6 +25016,11 @@
         "mime-types": "^2.1.12"
       }
     },
+    "fortawesome": {
+      "version": "0.0.1-security",
+      "resolved": "https://registry.npmjs.org/fortawesome/-/fortawesome-0.0.1-security.tgz",
+      "integrity": "sha512-o/pwn9ZSnveFLYP0d5IejSwz0rpGMDQsBaYVvR8WXSvnxILIwh7IUJK0P90QMF4cnIyouVF2BGrz0LEVSyzimA=="
+    },
     "forwarded": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -29349,6 +29463,14 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "react-fontawesome": {
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/react-fontawesome/-/react-fontawesome-1.7.1.tgz",
+      "integrity": "sha512-kottReWW1I9Uupub6A5YX4VK7qfpFnEjAcm5zB4Aepst7iofONT27GJYdTcRsj7q5uQu9PXBL7GsxAFKANNUVg==",
+      "requires": {
+        "prop-types": "^15.5.6"
+      }
+    },
     "react-icons": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.6.0.tgz",

GrossesMitaines/grosses-mitaines-ui/package.json

@@ -3,6 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.2.0",
+    "@fortawesome/free-solid-svg-icons": "^6.2.0",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -10,10 +13,13 @@
     "bootstrap": "^5.2.1",
     "fa": "^1.0.1",
     "font-awesome": "^4.7.0",
+    "fontawesome": "^5.6.3",
+    "fortawesome": "^0.0.1-security",
     "react": "^18.2.0",
     "react-bootstrap": "^2.5.0",
     "react-devtools": "^4.26.0",
     "react-dom": "^18.2.0",
+    "react-fontawesome": "^1.7.1",
     "react-icons": "^4.6.0",
     "react-router-dom": "^6.4.1",
     "react-scripts": "^5.0.1",

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

@@ -1,5 +1,6 @@
-import { useState } from "react"
+import { useState } from "react";
 import { Dropdown } from "react-bootstrap";
+import { Button } from "react-bootstrap";
 
 const Ajouter = ({ onCreation }) => {
 
@@ -11,13 +12,13 @@ const Ajouter = ({ onCreation }) => {
     const [price, setPrice] = useState("");
     const [quantity, setQuantity] = useState("");
     const [imageName, setImageName] = useState("sqdc.jpg");
-    const [statusValue, setStatusValue] = useState(0)
+    const [status, 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, statusValue })
+        onCreation({ title, description, category, price, quantity, imageName, status })
 
         // Reset les états du formulaire.
         setTitle("")
@@ -75,52 +76,57 @@ const Ajouter = ({ onCreation }) => {
                         value={imageName}
                         onChange={(e) => setImageName(e.target.value)} />
                 </div>
-                <Dropdown className='status-dropdown'>
+                <div className="form-group">
-                    <Dropdown.Toggle id="dropdown-status">
+                    <label>Status: </label>
-                        {currentStatus}
+                    <Dropdown className='status-dropdown'>
-                    </Dropdown.Toggle>
+                        <Dropdown.Toggle id="dropdown-status-add">
+                            {currentStatus}
+                        </Dropdown.Toggle>
 
-                    <Dropdown.Menu className='sorting-menu'>
+                        <Dropdown.Menu className='sorting-menu'>
-                        <Dropdown.Item key="0" onClick={() => {
+                            <Dropdown.Item key="0" onClick={() => {
-                            setStatus("Disponible"); // Mets le nom afficher quand le dropdown est fermé
+                                setStatus("Disponible"); // Mets le nom afficher quand le dropdown est fermé
-                            setStatusValue(0);
+                                setStatusValue(0);
-                        }}>
+                            }}>
-                            Disponible {/*Le nom de l'option*/}
+                                Disponible {/*Le nom de l'option*/}
-                        </Dropdown.Item>
+                            </Dropdown.Item>
-                        <Dropdown.Item key="1" onClick={() => {
+                            <Dropdown.Item key="1" onClick={() => {
-                            setStatus("Indisponible");
+                                setStatus("Indisponible");
-                            setStatusValue(1);
+                                setStatusValue(1);
-                        }}>
+                            }}>
-                            Indisponible
+                                Indisponible
-                        </Dropdown.Item>
+                            </Dropdown.Item>
-                        <Dropdown.Item key="2" onClick={() => {
+                            <Dropdown.Item key="2" onClick={() => {
-                            setStatus("En Commande");
+                                setStatus("En Commande");
-                            setStatusValue(2);
+                                setStatusValue(2);
-                        }}>
+                            }}>
-                            En Commande
+                                En Commande
-                        </Dropdown.Item>
+                            </Dropdown.Item>
-                        <Dropdown.Item key="3" onClick={() => {
+                            <Dropdown.Item key="3" onClick={() => {
-                            setStatus("Liquidation");
+                                setStatus("Liquidation");
-                            setStatusValue(3);
+                                setStatusValue(3);
-                        }}>
+                            }}>
-                            Liquidation
+                                Liquidation
-                        </Dropdown.Item>
+                            </Dropdown.Item>
-                        <Dropdown.Item key="4" onClick={() => {
+                            <Dropdown.Item key="4" onClick={() => {
-                            setStatus("Promotion");
+                                setStatus("Promotion");
-                            setStatusValue(4);
+                                setStatusValue(4);
-                        }}>
+                            }}>
-                            Promotion
+                                Promotion
-                        </Dropdown.Item>
+                            </Dropdown.Item>
-                        <Dropdown.Item key="5" onClick={() => {
+                            <Dropdown.Item key="5" onClick={() => {
-                            setStatus("Discontinué");
+                                setStatus("Discontinué");
-                            setStatusValue(5);
+                                setStatusValue(5);
-                        }}>
+                            }}>
-                            Discontinué
+                                Discontinué
-                        </Dropdown.Item>
+                            </Dropdown.Item>
-                    </Dropdown.Menu>
+                        </Dropdown.Menu>
-                </Dropdown>
+                    </Dropdown>
+                </div>
 
-                <input className="btn-primary ajouter" type="submit" value="Ajouter Morceau"></input>
+
+
+                <Button className="btn-primary btn-ajouter-morceau" type="submit" >Ajouter Morceau</Button>
             </form>
         </div>
     )

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

@@ -1,9 +0,0 @@
-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/Modify.js

@@ -0,0 +1,150 @@
+import { useState } from "react"
+import { Dropdown } from "react-bootstrap";
+import {Button} 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 [status, setStatusValue] = useState(morceau.status)
+
+    const id = morceau.id;
+
+    const handleSubmit = (e) => {
+        e.preventDefault(); // Empêcher de reloader la page au submit.
+
+        // Appeler le comportement onCreation
+        onModify({ id, title, description, category, price, quantity, imageName, status })
+    }
+
+
+    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>
+                <div className="form-group">
+                    <label>Status: </label>
+                    <Dropdown className='status-dropdown'>
+                        <Dropdown.Toggle id="dropdown-status-add">
+                            {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>
+                </div>
+
+                <Button className="btn-primary btn-ajouter-morceau" type="submit" >Modifier Morceau</Button>
+            </form>
+        </div>
+    )
+}
+
+export default Modify

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

@@ -1,5 +1,8 @@
-import { FaTimes } from 'react-icons/fa'
+import { useState } from 'react';
-import { FaTools } from 'react-icons/fa'
+import { faTools, faTimes } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import Modify from './Modify';
 
 function renderStatus(statusCode) {
     if (statusCode !== undefined) {
@@ -25,19 +28,29 @@ function renderStatus(statusCode) {
 }
 
 const SimpleItem = ({ item, onDelete, onModify }) => {
+
+    const [isFormvisible, setFormVisibility] = useState(false);
+
     return (
         <div className="inventaire-item">
-            <h3>
+            <div className='simple-item-top-container'>
-                {item.title}
+                <h3 className='simple-item-title' >
-                <div>
+                    {item.title}
-                    <FaTools style={{ color: "gray", cursor: 'pointer' }}
+
-                        onClick={() => onModify(item.id)} />
+                </h3>
-                    <FaTimes style={{ color: "red", cursor: 'pointer' }}
+                <h1 className='simple-item-buttons'>
+                    <FontAwesomeIcon  transform="left-10" icon={faTools} className='.btn-modifier-morceau' style={{ color: "gray", cursor: 'pointer' }}
+                        onClick={() => setFormVisibility(!isFormvisible)} />
+                    <FontAwesomeIcon icon={faTimes} className='.btn-effacer-morceau' style={{ color: "red", cursor: 'pointer' }}
                         onClick={() => onDelete(item.id)} />
-                </div>
+                </h1>
-            </h3>
+            </div>
-            <p> Categoie: {item.category}, Prix: {item.price}, Promo: {item.promoPrice}, Quantité: {item.quantity}, Disponibilité: {renderStatus(item.status)}</p>
+            {isFormvisible && <Modify morceau={item} onModify={onModify}></Modify>}
-            <p> Description: {item.description}</p>
+            {!isFormvisible && <div>
+                <p> Catégorie: {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

@@ -1,6 +1,5 @@
 import { useEffect, useState } from "react";
-
+import { Button } from 'react-bootstrap';
-import Button from '../components/Button'
 import SimpleItemList from "../components/SimpleItemList";
 import Ajouter from "../components/Ajouter";
 
@@ -31,6 +30,7 @@ const Inventaire = () => {
         })
 
         const newMorceau = await response.json();
+        console.log(newMorceau);
 
         if (response.ok) {
             setMorceaux([...morceaux, { ...newMorceau }]);
@@ -54,8 +54,23 @@ const Inventaire = () => {
             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 modifiedMorceau = await response.json();
+
+        if (response.ok)
+            setMorceaux([...(morceaux.filter((morceau) => morceau.id !== modifiedMorceau.id)), { ...modifiedMorceau }].sort((a, b) => a.id - b.id));
+        else
+            console.log("Erreur de creation " + morceau);
     };
 
     return (
@@ -63,10 +78,11 @@ const Inventaire = () => {
             <header className='header'>
                 <h1>Inventaire</h1>
                 <Button
-                    text={isFormvisible ? 'Fermer' : 'Ajouter'}
+                    className={isFormvisible ? 'btn-fermer' : 'btn-ajouter'}
-                    color={isFormvisible ? 'red' : 'purple'}
+                    onClick={() => setFormVisibility(!isFormvisible)}>
-                    onClick={() => setFormVisibility(!isFormvisible)}
+                    {isFormvisible ? 'Fermer' : 'Ajouter'}
-                />
+                </Button>
+
             </header>
             {isFormvisible && <Ajouter onCreation={handleAddItem}></Ajouter>}
             {morceaux.length > 0 ?

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;
@@ -355,20 +359,6 @@ html {
     text-decoration: none;
 }
 
-.btn {
-    display: inline-block;
-    background: #000;
-    color: #fff;
-    border: none;
-    padding: 10px 20px;
-    margin: 5px;
-    border-radius: 5px;
-    cursor: pointer;
-    text-decoration: none;
-    font-size: 15px;
-    font-family: inherit;
-}
-
 .btn-primary {
     background-color: purple;
     color: white;
@@ -397,8 +387,14 @@ html {
     width: 85%;
 }
 
+.status-dropdown {
+    width: fit-content;
+    margin-bottom: 20px;
+    width: 85%;
+}
+
 .privacy {
-    height: 100%;
+    height: 100vh;
 }
 
 .morceaux {
@@ -415,9 +411,10 @@ html {
     align-items: center;
     margin: 1.25%;
     padding: 1.25%;
-    color:purple;
+    color: purple;
     background-color: beige;
-    border: purple solid 3px;;
+    border: purple solid 3px;
+    ;
 }
 
 .inventaire-form-container {
@@ -448,17 +445,17 @@ html {
 
 .dropdown-gestion,
 .dropdown-gestion:hover {
-    margin:0px;
+    margin: 0px;
-    padding:auto;
+    padding: auto;
     color: grey;
     background-color: transparent !important;
     border-color: transparent !important;
-    padding-left:10%;
+    padding-left: 10%;
 }
 
-.dropdown-gestion-container button:hover{
+.dropdown-gestion-container button:hover {
-    color:rgb(102, 102, 102) !important;
+    color: rgb(102, 102, 102) !important;
-   
+
 }
 
 .dropdown-gestion-menu {
@@ -475,16 +472,16 @@ html {
     margin-bottom: 15px;
 }
 
-.sorting-dropdown{
+.sorting-dropdown {
-    width:fit-content;
+    width: fit-content;
-    margin:auto;
+    margin: auto;
-    float:right;
+    float: right;
 }
 
-.cat-load{
+.cat-load {
-    display:block;
+    display: block;
-    margin:auto;
+    margin: auto;
-    width:auto;
+    width: auto;
     background-image: url("/public/images/cat-yarn.gif");
     background-repeat: no-repeat;
     background-color: white;
@@ -497,17 +494,17 @@ html {
 .detail-container {
     display: flex;
     background-color: plum;
-    padding:16px;
+    padding: 16px;
 }
 
 .detail-container-left {
-    margin:auto;
+    margin: auto;
     width: 48%;
     height: 100%;
 }
 
 .detail-container-right {
-    margin:auto;
+    margin: auto;
     width: 48%;
     height: 100%;
 }
@@ -517,30 +514,68 @@ html {
     height: auto;
 }
 
-.detail-old-price{
+.detail-old-price {
     text-decoration: line-through;
 }
 
 
+.btn-fermer {
+    background-color: red !important;
+    color: white !important;
+}
+
+.btn-ajouter-morceau {
+    background-color: purple !important;
+    color: white !important;
+}
+
+.form-group {
+    margin-bottom: 10px;
+}
+
+.simple-item-top-container{
+    display:flex;
+}
+
+.simple-item-title{
+    text-align: left;
+    margin: auto;
+    margin-left: 0px;
+    max-width: 80%;
+}
+
+.simple-item-buttons{
+    width:fit-content;
+    margin-right: 5px;
+}
 
 /* -------------------------------------------------------- */
 /* specification pour les moyennes écrans
 /* -------------------------------------------------------- */
 @media(max-width:900px) {
 
-    .dropdown-gestion,
+    .btn-ajouter-morceau {
-    .dropdown-gestion:hover {
+        display: block;
-        padding-left:0;
+        margin: auto;
+        margin-top: 20px;
+        height: 50px !important;
+        width: 90% !important;
+        font-size: larger;
     }
 
-    .detail-container{
+    .dropdown-gestion,
-        display:inline-block;
+    .dropdown-gestion:hover {
+        padding-left: 0;
+    }
+
+    .detail-container {
+        display: inline-block;
     }
 
     .detail-container-left {
         width: 95%;
     }
-    
+
     .detail-container-right {
         width: 95%;
     }
@@ -553,6 +588,18 @@ html {
         width: 45%;
     }
 
+
+    .status-dropdown {
+        float: none;
+        width: 100%;
+    }
+
+    .status-dropdown button {
+        height: 60px !important;
+        width: 100% !important;
+        font-size: larger;
+    }
+
     .sorting-dropdown {
 
         width: 100%;