Couple of fixes and stuff
This commit is contained in:
Victor Turgeon
@@ -1,5 +1,6 @@
|
||||
import { useState } from "react"
|
||||
import { useState } from "react";
|
||||
import { Dropdown } from "react-bootstrap";
|
||||
import { Button } from "react-bootstrap";
|
||||
|
||||
const Ajouter = ({ onCreation }) => {
|
||||
|
||||
@@ -11,13 +12,13 @@ const Ajouter = ({ onCreation }) => {
|
||||
const [price, setPrice] = useState("");
|
||||
const [quantity, setQuantity] = useState("");
|
||||
const [imageName, setImageName] = useState("sqdc.jpg");
|
||||
const [statusValue, setStatusValue] = useState(0)
|
||||
const [status, setStatusValue] = useState(0)
|
||||
|
||||
const handleSubmit = (e) => {
|
||||
e.preventDefault(); // Empêcher de reloader la page au submit.
|
||||
|
||||
// Appeler le comportement onCreation
|
||||
onCreation({ title, description, category, price, quantity, imageName, statusValue })
|
||||
onCreation({ title, description, category, price, quantity, imageName, status })
|
||||
|
||||
// Reset les états du formulaire.
|
||||
setTitle("")
|
||||
@@ -75,52 +76,57 @@ const Ajouter = ({ onCreation }) => {
|
||||
value={imageName}
|
||||
onChange={(e) => setImageName(e.target.value)} />
|
||||
</div>
|
||||
<Dropdown className='status-dropdown'>
|
||||
<Dropdown.Toggle id="dropdown-status">
|
||||
{currentStatus}
|
||||
</Dropdown.Toggle>
|
||||
<div className="form-group">
|
||||
<label>Status: </label>
|
||||
<Dropdown className='status-dropdown'>
|
||||
<Dropdown.Toggle id="dropdown-status-add">
|
||||
{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>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<input className="btn-primary ajouter" type="submit" value="Ajouter Morceau"></input>
|
||||
|
||||
|
||||
<Button className="btn-primary btn-ajouter-morceau" type="submit" >Ajouter Morceau</Button>
|
||||
</form>
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -1,9 +0,0 @@
|
||||
const Button = ({text, color, onClick}) => {
|
||||
return (
|
||||
<button className="btn" style={{backgroundColor : color}} onClick={onClick}>
|
||||
{text}
|
||||
</button>
|
||||
)
|
||||
};
|
||||
|
||||
export default Button;
|
||||
@@ -1,6 +1,6 @@
|
||||
import { render } from "@testing-library/react";
|
||||
import { useState } from "react"
|
||||
import { Dropdown } from "react-bootstrap";
|
||||
import {Button} from "react-bootstrap";
|
||||
|
||||
function renderStatus(statusCode) {
|
||||
if (statusCode !== undefined) {
|
||||
@@ -35,13 +35,15 @@ const Modify = ({ morceau, onModify }) => {
|
||||
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 [status, setStatusValue] = useState(morceau.status)
|
||||
|
||||
const id = morceau.id;
|
||||
|
||||
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 })
|
||||
onModify({ id, title, description, category, price, quantity, imageName, status })
|
||||
}
|
||||
|
||||
|
||||
@@ -91,52 +93,55 @@ const Modify = ({ morceau, onModify }) => {
|
||||
value={imageName}
|
||||
onChange={(e) => setImageName(e.target.value)} />
|
||||
</div>
|
||||
<Dropdown className='status-dropdown'>
|
||||
<Dropdown.Toggle id="dropdown-status">
|
||||
{currentStatus}
|
||||
</Dropdown.Toggle>
|
||||
<div className="form-group">
|
||||
<label>Status: </label>
|
||||
<Dropdown className='status-dropdown'>
|
||||
<Dropdown.Toggle id="dropdown-status-add">
|
||||
{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>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<input className="btn-primary ajouter" type="submit" value="Modifier Morceau"></input>
|
||||
<Button className="btn-primary btn-ajouter-morceau" type="submit" >Modifier Morceau</Button>
|
||||
</form>
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { FaTimes } from 'react-icons/fa'
|
||||
import { FaTools } from 'react-icons/fa'
|
||||
import { useState } from 'react';
|
||||
import { faTools, faTimes } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
|
||||
import Modify from './Modify';
|
||||
|
||||
@@ -33,18 +33,21 @@ const SimpleItem = ({ item, onDelete, onModify }) => {
|
||||
|
||||
return (
|
||||
<div className="inventaire-item">
|
||||
<h3>
|
||||
{item.title}
|
||||
<div>
|
||||
<FaTools style={{ color: "gray", cursor: 'pointer' }}
|
||||
<div className='simple-item-top-container'>
|
||||
<h3 className='simple-item-title' >
|
||||
{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)} />
|
||||
<FaTimes style={{ color: "red", cursor: 'pointer' }}
|
||||
<FontAwesomeIcon icon={faTimes} className='.btn-effacer-morceau' style={{ color: "red", cursor: 'pointer' }}
|
||||
onClick={() => onDelete(item.id)} />
|
||||
</div>
|
||||
</h3>
|
||||
</h1>
|
||||
</div>
|
||||
{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> Catégorie: {item.category}, Prix: {item.price}, Promo: {item.promoPrice}, Quantité: {item.quantity}, Disponibilité: {renderStatus(item.status)}</p>
|
||||
<p> Description: {item.description}</p>
|
||||
</div>
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user