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

no cookies or api call...

Browse Source
This commit is contained in:
DavidBelisle 2022-11-08 00:34:01 -05:00
parent 28fff14d96
commit 809ce36a1e
5 changed files with 57 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
GrossesMitaines/grosses-mitaines-ui/src/components/Cart.js
View File

@ -1,8 +1,10 @@
import { createContext, useState } from "react";
import { useCookies } from "react-cookie";
export const CartContext = createContext({
items: [],
getProductQuantity: () => { },
getProductRemaining: () => { },
addOneToCart: () => { },
removeOneFromCart: () => { },
deleteFromCart: () => { },
@ -12,11 +14,12 @@ export const CartContext = createContext({
export function CartProvider({ children }) {
const [cookies, setCookie] = useCookies(['cart']);
const [cartProducts, setCartProducts] = useState([]);
function addToCart(product, qty) {
setCartProducts([...cartProducts, {...product, quantity: parseFloat(qty)}]);
setCartProducts([...cartProducts, { ...product, quantity: parseFloat(qty), remaining: parseFloat(product.quantity) }]);
}
function getProductQuantity(id) {
@ -28,10 +31,20 @@ export function CartProvider({ children }) {
return quantity;
};
function addOneToCart(id, qty) {
const currentQty = getProductQuantity(id);
function getProductRemaining(id) {
const remaining = cartProducts.find(product => product.id === id)?.remaining;
if (remaining === undefined) {
return 0;
}
if (qty > currentQty) {
return remaining;
};
function addOneToCart(id) {
const currentQty = getProductQuantity(id);
const remaining = getProductRemaining(id);
if (remaining > currentQty) {
setCartProducts(
cartProducts.map(
product => product.id === id
@ -46,7 +59,7 @@ export function CartProvider({ children }) {
const currentQty = getProductQuantity(id);
if (currentQty === 1)
deleteFromCart();
deleteFromCart(id);
else
setCartProducts(
cartProducts.map(
@ -68,7 +81,7 @@ export function CartProvider({ children }) {
function getTotalCost() {
let totalCost = 0;
cartProducts.map((cartItem) => {
totalCost += (cartItem.Price * cartItem.quantity);
totalCost += (parseFloat(cartItem.price) * parseFloat(cartItem.quantity));
});
return totalCost;
@ -77,6 +90,7 @@ export function CartProvider({ children }) {
const contextValue = {
items: cartProducts,
getProductQuantity,
getProductRemaining,
addOneToCart,
removeOneFromCart,
deleteFromCart,

5
GrossesMitaines/grosses-mitaines-ui/src/components/CartButton.js
View File

@ -28,8 +28,11 @@ const CartButton = () => {
<ModalBody>
{productsCount > 0 ?
<>
<p></p>
{cart.items.map((item) => <CartCard product={item}></CartCard>)}
<div className="payer">
<h className="total">Total: {cart.getTotalCost().toFixed(2)}$ CAD</h>
<Button className="payer">Payer</Button>
</div>
</>
:
<h1>C'est vide! Rempli le hi hi!</h1>

6
GrossesMitaines/grosses-mitaines-ui/src/components/CartCard.js
View File

@ -24,12 +24,12 @@ export function CartCard({ product }) {
<Card.Body>
<div className={!imageSrc ? "cat-load" : "d-none cat-load"} />
<Card.Img className="item-img" variant="top" src={imageSrc} />
<Card.Title>{product.Title}</Card.Title>
<Card.Text>{product.Price}$ CA</Card.Text>
<Card.Title>{product.title}</Card.Title>
<Card.Text>{product.price}$ CA</Card.Text>
<Form as={Row}>
<Form.Label column="true" sm="6">Dans l'carosse: {productQuantity}</Form.Label>
<Col sm="6">
<Button sm="6" className='mx-2' onClick={() => cart.addOneToCart(product.id, product.quantity)}>+</Button>
<Button sm="6" className='mx-2' onClick={() => cart.addOneToCart(product.id)}>+</Button>
<Button sm="6" className='mx-2' onClick={() => cart.removeOneFromCart(product.id)}>-</Button>
</Col>
</Form>

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

@ -149,7 +149,7 @@ const MorceauDetail = () => {
<Form as={Row}>
<Form.Label sm="6">Dans l'carosse: {inCartQuantity}</Form.Label>
<Button disabled={isNoStock()} className="add-to-cart"
onClick={() => cart.addOneToCart(item.id, item.quantity)}
onClick={() => cart.addOneToCart(item.id)}
sm="6">
+
</Button >

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

@ -599,9 +599,7 @@ a {
margin-top: 25px;
}
.detail-status-available {
}
.detail-status-available {}
.detail-status-backorder {}
@ -621,34 +619,34 @@ a {
}
.detail-container-image {
margin:auto;
margin-top:25px;
margin: auto;
margin-top: 25px;
width: 35%;
height: 100%;
}
.detail-container-info {
margin:auto;
margin: auto;
width: 35%;
height: 100%;
}
.detail-container-controls {
margin:auto;
display:inline-flex;
width:20%;
height:100%;
margin: auto;
display: inline-flex;
width: 20%;
height: 100%;
}
.qty-select {
width: fit-content;
height:fit-content;
margin:auto;
height: fit-content;
margin: auto;
}
.add-to-cart{
width:auto;
.add-to-cart {
width: auto;
margin-left: 10px;
}
@ -657,7 +655,7 @@ a {
height: auto;
}
.detail-price{
.detail-price {
font-weight: bold;
}
@ -670,8 +668,22 @@ a {
text-decoration: line-through;
}
.total {
margin: 5%;
color: green;
font-weight: bold;
}
.payer {
display: flex;
margin: 5%;
margin-left: auto;
}
.carosse {
border-color: purple;
border-width: 2%;
}
.btn-fermer {
background-color: red !important;
@ -726,11 +738,11 @@ a {
}
.invoice-list-container{
.invoice-list-container {
border: beige 2px double;
}
.invoice-item-container{
.invoice-item-container {
border: black 1px solid;
}