diff --git a/GrossesMitaines/grosses-mitaines-ui/package-lock.json b/GrossesMitaines/grosses-mitaines-ui/package-lock.json index d23ef8d..3cce8b9 100644 --- a/GrossesMitaines/grosses-mitaines-ui/package-lock.json +++ b/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", diff --git a/GrossesMitaines/grosses-mitaines-ui/package.json b/GrossesMitaines/grosses-mitaines-ui/package.json index e4c095d..5ee9f1e 100644 --- a/GrossesMitaines/grosses-mitaines-ui/package.json +++ b/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": { diff --git a/GrossesMitaines/grosses-mitaines-ui/src/components/Modify.js b/GrossesMitaines/grosses-mitaines-ui/src/components/Modify.js index b5f3ca4..95e173e 100644 --- a/GrossesMitaines/grosses-mitaines-ui/src/components/Modify.js +++ b/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 (
-

Ajouter un morceau

+

Modifier morceau: {morceau.title}

{

- {item.title} + #{item.id}: {item.title}

setFormVisibility(!isFormvisible)} /> onDelete(item.id)} /> + onClick={() => onDelete(item.id, item.title)} />

{isFormvisible && } diff --git a/GrossesMitaines/grosses-mitaines-ui/src/pages/Inventaire.js b/GrossesMitaines/grosses-mitaines-ui/src/pages/Inventaire.js index 5f271ea..6c5ba62 100644 --- a/GrossesMitaines/grosses-mitaines-ui/src/pages/Inventaire.js +++ b/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}`, { - method: 'DELETE', - mode: 'cors', - credentials: 'include' - }); + mySwal.fire({ + title: `Effacer ${name}?`, + text: 'Êtes-vous certain de vouloir effacer ce morceau (cette action est irréversible)?', + 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(); - - if (response.ok) { - setMorceaux(morceaux.filter((morceau) => morceau.id !== deletedId)); - console.log("DELETE de: " + deletedId + " avec succès!"); - } - else - console.log("Erreur leur du DELETE de " + id); - }; - - - 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 + onShowAlert('Suppression de:', `${name} avec succès!`); + } + else { + console.log("test"); + mySwal.fire({ + title: `Erreur lors de la suppression de ${name}`, + text: `L'erreur: ${response}`, + icon: 'error', + }); + } + }); + } }) - 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 (
+ + {alertTitle} {alertMessage} +

Inventaire

-

{item.title} (#{item.id})

-

{item.category}

+

{item.title}

+

Catégorie: {item.category}

{renderPrice(item.price, item.promoPrice, item.status)}
@@ -127,7 +127,7 @@ const MorceauDetail = () => { {renderStatus(item.status)}
- {item.quantity} + Quantité: {item.quantity}