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

Couple of fixes and stuff

Browse Source
This commit is contained in:
Victor Turgeon
2022-10-18 16:02:55 -07:00
parent bd55393123
commit 93d4ab44be
8 changed files with 339 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
GrossesMitaines/grosses-mitaines-ui/src/components/Ajouter.js
View File

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

9
GrossesMitaines/grosses-mitaines-ui/src/components/Button.js
View File

@@ -1,9 +0,0 @@
const Button = ({text, color, onClick}) => {
return (
<button className="btn" style={{backgroundColor : color}} onClick={onClick}>
{text}
</button>
)
};
export default Button;

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

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

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

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

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

@@ -1,6 +1,5 @@
import { useEffect, useState } from "react";
import Button from '../components/Button'
import { Button } from 'react-bootstrap';
import SimpleItemList from "../components/SimpleItemList";
import Ajouter from "../components/Ajouter";
@@ -55,6 +54,7 @@ const Inventaire = () => {
console.log("Erreur leur du DELETE de " + id);
};
const handleModifyItem = async (morceau) => {
const response = await fetch(`https://localhost:7292/api/Product`, {
method: 'PATCH',
@@ -65,13 +65,10 @@ const Inventaire = () => {
body: JSON.stringify(morceau)
})
const newMorceau = await response.json();
console.log(newMorceau);
const modifiedMorceau = await response.json();
if (response.ok) {
setMorceaux(morceaux.filter((morceau) => morceau.id !== newMorceau.id));
setMorceaux([...morceaux, { ...newMorceau }]);
}
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);
};
@@ -81,10 +78,11 @@ const Inventaire = () => {
<header className='header'>
<h1>Inventaire</h1>
<Button
text={isFormvisible ? 'Fermer' : 'Ajouter'}
color={isFormvisible ? 'red' : 'purple'}
onClick={() => setFormVisibility(!isFormvisible)}
/>
className={isFormvisible ? 'btn-fermer' : 'btn-ajouter'}
onClick={() => setFormVisibility(!isFormvisible)}>
{isFormvisible ? 'Fermer' : 'Ajouter'}
</Button>
</header>
{isFormvisible && <Ajouter onCreation={handleAddItem}></Ajouter>}
{morceaux.length > 0 ?

123
GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css
View File

@@ -359,20 +359,6 @@ html {
text-decoration: none;
}
.btn {
display: inline-block;
background: #000;
color: #fff;
border: none;
padding: 10px 20px;
margin: 5px;
border-radius: 5px;
cursor: pointer;
text-decoration: none;
font-size: 15px;
font-family: inherit;
}
.btn-primary {
background-color: purple;
color: white;
@@ -401,6 +387,12 @@ html {
width: 85%;
}
.status-dropdown {
width: fit-content;
margin-bottom: 20px;
width: 85%;
}
.privacy {
height: 100vh;
}
@@ -419,9 +411,10 @@ html {
align-items: center;
margin: 1.25%;
padding: 1.25%;
color:purple;
color: purple;
background-color: beige;
border: purple solid 3px;;
border: purple solid 3px;
;
}
.inventaire-form-container {
@@ -452,17 +445,17 @@ html {
.dropdown-gestion,
.dropdown-gestion:hover {
margin:0px;
padding:auto;
margin: 0px;
padding: auto;
color: grey;
background-color: transparent !important;
border-color: transparent !important;
padding-left:10%;
padding-left: 10%;
}
.dropdown-gestion-container button:hover{
color:rgb(102, 102, 102) !important;
.dropdown-gestion-container button:hover {
color: rgb(102, 102, 102) !important;
}
.dropdown-gestion-menu {
@@ -479,16 +472,16 @@ html {
margin-bottom: 15px;
}
.sorting-dropdown{
width:fit-content;
margin:auto;
float:right;
.sorting-dropdown {
width: fit-content;
margin: auto;
float: right;
}
.cat-load{
display:block;
margin:auto;
width:auto;
.cat-load {
display: block;
margin: auto;
width: auto;
background-image: url("/public/images/cat-yarn.gif");
background-repeat: no-repeat;
background-color: white;
@@ -501,17 +494,17 @@ html {
.detail-container {
display: flex;
background-color: plum;
padding:16px;
padding: 16px;
}
.detail-container-left {
margin:auto;
margin: auto;
width: 48%;
height: 100%;
}
.detail-container-right {
margin:auto;
margin: auto;
width: 48%;
height: 100%;
}
@@ -521,30 +514,68 @@ html {
height: auto;
}
.detail-old-price{
.detail-old-price {
text-decoration: line-through;
}
.btn-fermer {
background-color: red !important;
color: white !important;
}
.btn-ajouter-morceau {
background-color: purple !important;
color: white !important;
}
.form-group {
margin-bottom: 10px;
}
.simple-item-top-container{
display:flex;
}
.simple-item-title{
text-align: left;
margin: auto;
margin-left: 0px;
max-width: 80%;
}
.simple-item-buttons{
width:fit-content;
margin-right: 5px;
}
/* -------------------------------------------------------- */
/* specification pour les moyennes écrans
/* -------------------------------------------------------- */
@media(max-width:900px) {
.dropdown-gestion,
.dropdown-gestion:hover {
padding-left:0;
.btn-ajouter-morceau {
display: block;
margin: auto;
margin-top: 20px;
height: 50px !important;
width: 90% !important;
font-size: larger;
}
.detail-container{
display:inline-block;
.dropdown-gestion,
.dropdown-gestion:hover {
padding-left: 0;
}
.detail-container {
display: inline-block;
}
.detail-container-left {
width: 95%;
}
.detail-container-right {
width: 95%;
}
@@ -557,6 +588,18 @@ html {
width: 45%;
}
.status-dropdown {
float: none;
width: 100%;
}
.status-dropdown button {
height: 60px !important;
width: 100% !important;
font-size: larger;
}
.sorting-dropdown {
width: 100%;