98 lines
3.2 KiB
JavaScript
98 lines
3.2 KiB
JavaScript
import { useEffect, useState } from "react";
|
|
import { Button } from 'react-bootstrap';
|
|
import SimpleItemList from "../components/SimpleItemList";
|
|
import Ajouter from "../components/Ajouter";
|
|
|
|
const Inventaire = () => {
|
|
|
|
const [morceaux, setMorceaux] = useState([]);
|
|
const [isFormvisible, setFormVisibility] = useState(false);
|
|
|
|
useEffect(() => {
|
|
async function fetchData() {
|
|
const response = await fetch(`https://localhost:7292/api/Inventory?all=true`);
|
|
const json = await response.json();
|
|
if (json.length > 0)
|
|
setMorceaux([...json]);
|
|
}
|
|
fetchData();
|
|
document.title = 'Inventaire';
|
|
}, []);
|
|
|
|
const handleAddItem = async (morceau) => {
|
|
const response = await fetch(`https://localhost:7292/api/Product`, {
|
|
method: 'POST',
|
|
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, { ...newMorceau }]);
|
|
console.log("Ajout de l'item avec succès: \r\n" + newMorceau);
|
|
}
|
|
else
|
|
console.log("Erreur de creation " + morceau);
|
|
};
|
|
|
|
const handleDeleteItem = async (id) => {
|
|
|
|
const response = await fetch(`https://localhost:7292/api/Product?id=${id}`, { method: 'DELETE', mode: 'cors' });
|
|
|
|
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) => {
|
|
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 (
|
|
<div className="inventaire">
|
|
<header className='header'>
|
|
<h1>Inventaire</h1>
|
|
<Button
|
|
className={isFormvisible ? 'btn-fermer' : 'btn-ajouter'}
|
|
onClick={() => setFormVisibility(!isFormvisible)}>
|
|
{isFormvisible ? 'Fermer' : 'Ajouter'}
|
|
</Button>
|
|
|
|
</header>
|
|
{isFormvisible && <Ajouter onCreation={handleAddItem}></Ajouter>}
|
|
{morceaux.length > 0 ?
|
|
(<SimpleItemList simpleItems={morceaux}
|
|
onDelete={handleDeleteItem}
|
|
onModify={handleModifyItem}
|
|
></SimpleItemList>) :
|
|
('Il n\'y a pas de morceaux!')}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Inventaire |