Modifyayayayayay

This commit is contained in:
David Belisle 2022-10-18 13:02:40 -04:00
parent 98a29cfb33
commit a2c82752e0
5 changed files with 186 additions and 10 deletions

View File

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

View File

@ -1,5 +1,8 @@
import { FaTimes } from 'react-icons/fa' import { FaTimes } from 'react-icons/fa'
import { FaTools } from 'react-icons/fa' import { FaTools } from 'react-icons/fa'
import { useState } from 'react';
import Modify from './Modify';
function renderStatus(statusCode) { function renderStatus(statusCode) {
if (statusCode !== undefined) { if (statusCode !== undefined) {
@ -25,20 +28,27 @@ function renderStatus(statusCode) {
} }
const SimpleItem = ({ item, onDelete, onModify }) => { const SimpleItem = ({ item, onDelete, onModify }) => {
const [isFormvisible, setFormVisibility] = useState(false);
return ( return (
<div className="inventaire-item"> <div className="inventaire-item">
<h3> <h3>
{item.title} {item.title}
<div> <div>
<FaTools style={{ color: "gray", cursor: 'pointer' }} <FaTools style={{ color: "gray", cursor: 'pointer' }}
onClick={() => onModify(item.id)} /> onClick={() => setFormVisibility(!isFormvisible)} />
<FaTimes style={{ color: "red", cursor: 'pointer' }} <FaTimes style={{ color: "red", cursor: 'pointer' }}
onClick={() => onDelete(item.id)} /> onClick={() => onDelete(item.id)} />
</div> </div>
</h3> </h3>
{isFormvisible && <Modify morceau={item} onModify={onModify}></Modify>}
{!isFormvisible && <div>
<p> Categoie: {item.category}, Prix: {item.price}, Promo: {item.promoPrice}, Quantité: {item.quantity}, Disponibilité: {renderStatus(item.status)}</p> <p> Categoie: {item.category}, Prix: {item.price}, Promo: {item.promoPrice}, Quantité: {item.quantity}, Disponibilité: {renderStatus(item.status)}</p>
<p> Description: {item.description}</p> <p> Description: {item.description}</p>
</div> </div>
}
</div>
) )
} }

View File

@ -9,9 +9,9 @@ const ContactUs = () => {
}); });
return ( return (
<> <div className="contactUs">
<ContactForm/> <ContactForm/>
</> </div >
); );
} }

View File

@ -53,8 +53,25 @@ const Inventaire = () => {
console.log("Erreur leur du DELETE de " + id); 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 newMorceau = await response.json();
console.log(newMorceau);
if (response.ok) {
setMorceaux(morceaux.filter((morceau) => morceau.id !== newMorceau.id));
setMorceaux([...morceaux, { ...newMorceau }]);
}
else
console.log("Erreur de creation " + morceau);
}; };
return ( return (

View File

@ -15,6 +15,10 @@ html {
height: 100%; height: 100%;
} }
.contactUs {
height: 100vh;
}
.home-text { .home-text {
/* border: black 1px solid; */ /* border: black 1px solid; */
text-align: center; text-align: center;
@ -398,7 +402,7 @@ html {
} }
.privacy { .privacy {
height: 100%; height: 100vh;
} }
.morceaux { .morceaux {