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

Some stuff

Browse Source
This commit is contained in:
Victor Turgeon
2022-11-06 16:17:53 -05:00
parent ed04dc8293
commit 03b6b25177
5 changed files with 130 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -133,15 +133,15 @@ const Ajouter = ({ onCreation }) => {
}}>
Disponible {/*Le nom de l'option*/}
</Dropdown.Item>
<Dropdown.Item key="1" onClick={() => {
<Dropdown.Item key="2" onClick={() => {
setStatus("Indisponible");
setStatusValue(1);
setStatusValue(2);
}}>
Indisponible
</Dropdown.Item>
<Dropdown.Item key="2" onClick={() => {
<Dropdown.Item key="1" onClick={() => {
setStatus("En Commande");
setStatusValue(2);
setStatusValue(1);
}}>
En Commande
</Dropdown.Item>

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

@@ -157,15 +157,15 @@ const Modify = ({ morceau, onModify }) => {
}}>
Disponible {/*Le nom de l'option*/}
</Dropdown.Item>
<Dropdown.Item key="1" onClick={() => {
<Dropdown.Item key="2" onClick={() => {
setStatus("Indisponible");
setStatusValue(1);
setStatusValue(2);
}}>
Indisponible
</Dropdown.Item>
<Dropdown.Item key="2" onClick={() => {
<Dropdown.Item key="1" onClick={() => {
setStatus("En Commande");
setStatusValue(2);
setStatusValue(1);
}}>
En Commande
</Dropdown.Item>

16
GrossesMitaines/grosses-mitaines-ui/src/components/QtySelect.js Normal file
View File

@@ -0,0 +1,16 @@
import { Form } from "react-bootstrap";
const QtySelect = ({ qty }) => {
return (
<Form.Select className="qty-select">
{Array.from(Array(qty), (e, i) => {
return (
<option value={i+1} key={i+1}>{i+1}</option>
)
})}
</Form.Select>
);
}
export default QtySelect;

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

@@ -1,6 +1,8 @@
import { useEffect } from "react";
import { useParams } from "react-router-dom";
import { useState } from "react";
import { Button } from "react-bootstrap";
import QtySelect from "../components/QtySelect";
const MorceauDetail = () => {
@@ -8,6 +10,25 @@ const MorceauDetail = () => {
const [item, setItem] = useState({});
const [isLoading, setIsLoading] = useState(false);
const [imageSrc, setImageSrc] = useState(null);
const [itemQty, setItemQty] = useState(0);
const updateQty = () => {
window.setTimeout(() => {
fetch(`https://localhost:7292/api/Product/Quantity?id=${id}`)
.then(async (response) => {
if (response.ok) {
const qty = await response.json();
setItemQty(qty);
}
else {
console.log("Un erreur est survenu lors de l'appelle de: "
+ `https://localhost:7292/api/Product/Quantity?id=${id}`);
}
updateQty();
})
}, 10000);
}
useEffect(() => {
document.title = 'Morceaux';
@@ -16,6 +37,7 @@ const MorceauDetail = () => {
const response = await fetch(`https://localhost:7292/api/Product?id=${id}`);
const json = await response.json();
setItem(json);
setItemQty(json.quantity);
}
@@ -48,12 +70,12 @@ const MorceauDetail = () => {
else {
return (
<>
<h3 className="detail-old-price">
{price.toFixed(2).toString().replace(".", ",")} $ CA
</h3>
<h3 className="detail-new-price">
{newPrice.toFixed(2).toString().replace(".", ",")} $ CA
</h3>
<h5 className="detail-old-price">
{price.toFixed(2).toString().replace(".", ",")} $ CA
</h5>
</>
);
}
@@ -112,23 +134,34 @@ const MorceauDetail = () => {
return (
<>
<div className="detail-container">
<div className="detail-container-left">
<div className="detail-container-image">
<div className={!imageSrc ? "cat-load" : "d-none cat-load"} />
<img className="detail-image" alt="" src={imageSrc} />
<p className="detail-description">{item.description}</p>
</div>
<div className="detail-container-right">
<div className="detail-container-info">
<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>
<h3 className="detail-category">({item.category})</h3>
<div className="detail-status-container">
{renderStatus(item.status)}
</div>
<div className="detail-price-container">
{renderPrice(item.price, item.promoPrice, item.status)}
</div>
<h5>
Quantité: {item.quantity}
Qté. restante: {item.status == 1 || item.status == 2 || item.status == 5 ? "Aucun" : itemQty}
</h5>
<p className="detail-description">{item.description}</p>
</div>
<div className="detail-container-controls">
<QtySelect
qty={itemQty}
/>
<Button className="add-to-cart">
Ajouter au panier
</Button>
</div>
</div>
</>

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

@@ -592,34 +592,86 @@ a {
height: 200px;
}
.detail-status-container {
margin-top: 25px;
}
.detail-status-available {
}
.detail-status-backorder {}
.detail-status-unavailable {}
.detail-status-clearence {}
.detail-status-promotion {}
.detail-status-discontinued {}
.detail-container {
display: flex;
background-color: plum;
background-color: white;
padding: 16px;
}
.detail-container-left {
margin: auto;
width: 48%;
.detail-container-image {
margin:auto;
margin-top:25px;
width: 35%;
height: 100%;
}
.detail-container-right {
margin: auto;
width: 48%;
.detail-container-info {
margin:auto;
width: 35%;
height: 100%;
}
.detail-container-controls {
margin:auto;
display:inline-flex;
width:20%;
height:100%;
}
.qty-select {
width: fit-content;
height:fit-content;
margin:auto;
}
.add-to-cart{
width:auto;
margin-left: 10px;
}
.detail-image {
width: 100%;
height: auto;
}
.detail-price{
font-weight: bold;
}
.detail-new-price {
font-weight: bold;
}
.detail-old-price {
font-weight: lighter;
text-decoration: line-through;
}
.btn-fermer {
background-color: red !important;
color: white !important;
@@ -662,7 +714,7 @@ a {
}
#cart-count {
color:green;
color: green;
}
@@ -689,11 +741,11 @@ a {
display: inline-block;
}
.detail-container-left {
.detail-container-image {
width: 95%;
}
.detail-container-right {
.detail-container-info {
width: 95%;
}