memartel_loc/GGMM
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

react-version #1

Merged
memartel_loc merged 290 commits from react-version into main 2023-11-04 09:48:15 -04:00
Conversation 0 Commits 290 Files Changed 270 +147 -49
6 changed files with 147 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit e43aecaf7a - Show all commits

32
GrossesMitaines/grosses-mitaines-ui/package-lock.json generated
View File

@ -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",

2
GrossesMitaines/grosses-mitaines-ui/package.json
View File

@ -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": {

6
GrossesMitaines/grosses-mitaines-ui/src/components/Modify.js
View File

@ -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'

4
GrossesMitaines/grosses-mitaines-ui/src/components/SimpleItem.js
View File

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

146
GrossesMitaines/grosses-mitaines-ui/src/pages/Inventaire.js
View File

@ -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 (
<div className="inventaire">
<Alert variant="success" show={showAlert}>
<b>{alertTitle}</b> {alertMessage}
</Alert>
<header className='header'>
<h1>Inventaire</h1>
<Button

6
GrossesMitaines/grosses-mitaines-ui/src/pages/MorceauDetail.js
View File

@ -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>
<h2 className="detail-category">{item.category}</h2>
<h1 className="detail-title">{item.title}</h1>
<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>