Ajout de confirmation pour les delete modify et add dans la gestion d'inventaire

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

@@ -31,6 +31,8 @@
         "react-router-dom": "^6.4.1",
         "react-scripts": "^5.0.1",
         "react-transition-group": "^4.4.5",
+        "sweetalert2": "^11.6.6",
+        "sweetalert2-react-content": "^5.0.7",
         "web-vitals": "^2.1.4"
       }
     },
@@ -16938,6 +16940,25 @@
         "boolbase": "~1.0.0"
       }
     },
+    "node_modules/sweetalert2": {
+      "version": "11.6.6",
+      "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-11.6.6.tgz",
+      "integrity": "sha512-HSHYnhvdNVa0nTS1hfhocZXd8u6qptyPtU2LIgrueS2SpHmPMA0Z3J2FLpjqKRYgznbPgSAQ7Z9SJTf1cV4PXg==",
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/sponsors/limonte"
+      }
+    },
+    "node_modules/sweetalert2-react-content": {
+      "version": "5.0.7",
+      "resolved": "https://registry.npmjs.org/sweetalert2-react-content/-/sweetalert2-react-content-5.0.7.tgz",
+      "integrity": "sha512-8Fk82Mpk45lFXpJWKIFF/lq8k/dJKDDQGFcuqVosaL/qRdViyAs5+u37LoTGfnOIvf+rfQB3PAXcp1XLLn+0ew==",
+      "peerDependencies": {
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0",
+        "sweetalert2": "^11.0.0"
+      }
+    },
     "node_modules/symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -30756,6 +30777,17 @@
         }
       }
     },
+    "sweetalert2": {
+      "version": "11.6.6",
+      "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-11.6.6.tgz",
+      "integrity": "sha512-HSHYnhvdNVa0nTS1hfhocZXd8u6qptyPtU2LIgrueS2SpHmPMA0Z3J2FLpjqKRYgznbPgSAQ7Z9SJTf1cV4PXg=="
+    },
+    "sweetalert2-react-content": {
+      "version": "5.0.7",
+      "resolved": "https://registry.npmjs.org/sweetalert2-react-content/-/sweetalert2-react-content-5.0.7.tgz",
+      "integrity": "sha512-8Fk82Mpk45lFXpJWKIFF/lq8k/dJKDDQGFcuqVosaL/qRdViyAs5+u37LoTGfnOIvf+rfQB3PAXcp1XLLn+0ew==",
+      "requires": {}
+    },
     "symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",

GrossesMitaines/grosses-mitaines-ui/package.json

@@ -26,6 +26,8 @@
     "react-router-dom": "^6.4.1",
     "react-scripts": "^5.0.1",
     "react-transition-group": "^4.4.5",
+    "sweetalert2": "^11.6.6",
+    "sweetalert2-react-content": "^5.0.7",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

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

@@ -72,7 +72,9 @@ const Modify = ({ morceau, onModify }) => {
             imageFile: imageFile,
             imageName: morceau.imageName,
             status: status,
-        });
+        },
+            morceau.title
+        );
     }
 
 
@@ -86,7 +88,7 @@ const Modify = ({ morceau, onModify }) => {
     return (
         <div className="inventaire-form-container">
             <form className="form-horizontal" onSubmit={handleSubmit}>
-                <h4 className="text-center">Ajouter un morceau</h4>
+                <h4 className="text-center">Modifier morceau: {morceau.title}</h4>
                 <div className="form-group">
                     <label>Morceau: </label>
                     <input className="form-control form-input" type='text'

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

@@ -35,14 +35,14 @@ const SimpleItem = ({ item, onDelete, onModify }) => {
         <div className="inventaire-item">
             <div className='simple-item-top-container'>
                 <h3 className='simple-item-title' >
-                    {item.title}
+                     #{item.id}: {item.title}
 
                 </h3>
                 <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)} />
+                        onClick={() => onDelete(item.id, item.title)} />
                 </h1>
             </div>
             {isFormvisible && <Modify morceau={item} onModify={onModify}></Modify>}

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

@@ -2,6 +2,9 @@ import { useEffect, useState } from "react";
 import { Button } from 'react-bootstrap';
 import SimpleItemList from "../components/SimpleItemList";
 import Ajouter from "../components/Ajouter";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+import { Alert } from "react-bootstrap";
 
 const Inventaire = () => {
 
@@ -9,6 +12,12 @@ const Inventaire = () => {
     const [isFormvisible, setFormVisibility] = useState(false);
     const [isLoading, setIsLoading] = useState(true);
 
+    const [alertTitle, setAlertTitle] = useState("");
+    const [alertMessage, setAlertMessage] = useState("");
+    const [showAlert, setShowAlert] = useState(false);
+
+    const mySwal = withReactContent(Swal);
+
     useEffect(() => {
         document.title = 'Inventaire';
         async function fetchData() {
@@ -27,7 +36,7 @@ const Inventaire = () => {
 
         let formData = new FormData();
         Object.keys(morceau).map((k) => {
-            formData.set(k,morceau[k]);
+            formData.set(k, morceau[k]);
         });
 
         console.log(formData);
@@ -47,60 +56,113 @@ const Inventaire = () => {
 
         if (response.ok) {
             setMorceaux([...morceaux, { ...newMorceau }]);
-            console.log("Ajout de l'item avec succès: \r\n" + newMorceau);
+
+            onShowAlert('Création de:', `${newMorceau.title} avec succès!`);
+            setFormVisibility(false);
         }
         else
             console.log("Erreur de creation " + morceau.title);
     };
 
-    const handleDeleteItem = async (id) => {
+    const handleDeleteItem = async (id, name) => {
 
-        const response = await fetch(`https://localhost:7292/api/Product?id=${id}`, { 
+        mySwal.fire({
-            method: 'DELETE', 
+            title: `Effacer ${name}?`,
-            mode: 'cors',
+            text: 'Êtes-vous certain de vouloir effacer ce morceau (cette action est irréversible)?',
-            credentials: 'include'
+            icon: 'warning',
-        });
+            showCancelButton: true,
+            confirmButtonText: 'Oui',
+            cancelButtonText: 'Non',
+        }).then(async (result) => {
+            if (result.isConfirmed) {
+                fetch(`https://localhost:7292/api/Product?id=${id}`, {
+                    method: 'DELETE',
+                    mode: 'cors',
+                    credentials: 'include'
+                }).then(async (response) => {
+                    console.log(response);
+                    if (response.ok) {
+                        const deletedId = await response.json();
+                        setMorceaux(morceaux.filter((morceau) => morceau.id !== deletedId));
 
-        const deletedId = await response.json();
+                        onShowAlert('Suppression de:', `${name} avec succès!`);
-
+                    }
-        if (response.ok) {
+                    else {
-            setMorceaux(morceaux.filter((morceau) => morceau.id !== deletedId));
+                        console.log("test");
-            console.log("DELETE de: " + deletedId + " avec succès!");
+                        mySwal.fire({
-        }
+                            title: `Erreur lors de la suppression de ${name}`,
-        else
+                            text: `L'erreur: ${response}`,
-            console.log("Erreur leur du DELETE de " + id);
+                            icon: 'error',
-    };
+                        });
-
+                    }
-
+                });
-    const handleModifyItem = async (morceau) => {
+            }
-        console.log(morceau);
-
-        let formData = new FormData();
-        Object.keys(morceau).map((k) => {
-            formData.set(k,morceau[k]);
-        });
-
-
-        const response = await fetch(`https://localhost:7292/api/Product`, {
-            method: 'PATCH',
-            credentials: 'include',
-            mode: 'cors',
-            headers: {
-                'accept': 'application/json',
-            },
-            body: formData
         })
 
-        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);
     };
 
+
+    const handleModifyItem = async (morceau, oldTitle) => {
+        console.log(morceau);
+
+
+        mySwal.fire({
+            title: `Modifier ${oldTitle}?`,
+            text: 'Êtes-vous certain de vouloir modifier ce morceau (cette action est irréversible)?',
+            icon: 'warning',
+            showCancelButton: true,
+            confirmButtonText: 'Oui',
+            cancelButtonText: 'Non',
+        }).then(async (result) => {
+            if (result.isConfirmed) {
+                let formData = new FormData();
+                Object.keys(morceau).map((k) => {
+                    formData.set(k, morceau[k]);
+                });
+
+                const response = await fetch(`https://localhost:7292/api/Product`, {
+                    method: 'PATCH',
+                    credentials: 'include',
+                    mode: 'cors',
+                    headers: {
+                        'accept': 'application/json',
+                    },
+                    body: formData
+                })
+        
+                const modifiedMorceau = await response.json();
+        
+                if (response.ok) {
+                    setMorceaux([...(morceaux.filter((morceau) => morceau.id !== modifiedMorceau.id)), { ...modifiedMorceau }].sort((a, b) => a.id - b.id));
+                    onShowAlert('Modification de:', `${modifiedMorceau.title} avec succès!`);
+                    mySwal.fire({
+                        title:`Modification de: ${modifiedMorceau.title} avec succès!`,
+                        timer: 2000,
+                        icon:"success"
+                    })
+                }
+                else
+                    console.log("Erreur de modification " + morceau);
+            }
+        });
+
+        
+    };
+
+    const onShowAlert = (title, message) => {
+
+        setAlertTitle(title);
+        setAlertMessage(message);
+        setShowAlert(true);
+
+        window.setTimeout(() => { setShowAlert(false); }, 2000);
+    }
+
     return (
         <div className="inventaire">
+            <Alert variant="success" show={showAlert}>
+                <b>{alertTitle}</b> {alertMessage}
+            </Alert>
             <header className='header'>
                 <h1>Inventaire</h1>
                 <Button

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

@@ -118,8 +118,8 @@ const MorceauDetail = () => {
                     <p className="detail-description">{item.description}</p>
                 </div>
                 <div className="detail-container-right">
-                    <h1 className="detail-title">{item.title} (#{item.id})</h1>
+                    <h1 className="detail-title">{item.title}</h1>
-                    <h2 className="detail-category">{item.category}</h2>
+                    <h2 className="detail-category">Catégorie: {item.category}</h2>
                     <div className="detail-price-container">
                         {renderPrice(item.price, item.promoPrice, item.status)}
                     </div>
@@ -127,7 +127,7 @@ const MorceauDetail = () => {
                         {renderStatus(item.status)}
                     </div>
                     <h5>
-                        {item.quantity}
+                        Quantité: {item.quantity}
                     </h5>
                 </div>
             </div>