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

basic commandes et mesCommandes

Browse Source
This commit is contained in:
Victor Turgeon
2022-11-08 00:42:15 -05:00
parent 28fff14d96
commit a5a1be67a3
4 changed files with 180 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
GrossesMitaines/grosses-mitaines-ui/src/components/App.js
View File

@@ -15,6 +15,7 @@ import MyInvoices from "../pages/MyInvoices";
import { useState, useEffect } from "react";
import React from 'react';
import { useCookies } from 'react-cookie';
import Invoices from "../pages/Invoices";
const App = () => {
const [cookies, setCookie] = useCookies(['name']);
@@ -49,6 +50,7 @@ const App = () => {
<Route path="register" element={<Register/>}/>
<Route path="formulaire" element={<Formulaire/>}/>
<Route path="myinvoices" element={<MyInvoices/>}/>
<Route path="invoices" element={<Invoices/>}/>
</Route>
</Routes>
</BrowserRouter>

91
GrossesMitaines/grosses-mitaines-ui/src/components/InvoiceItem.js
View File

@@ -1,16 +1,82 @@
const InvoiceItem = ({ invoice }) => {
const productTotal = (p) => {
return (p.quantity * (p.product.status == 3 || p.product.status == 4 ? p.product.promoPrice : p.product.price)).toFixed(2)
return (p.quantity * (p.product.status == 3 || p.product.status == 4 ? p.product.promoPrice : p.product.price))
}
const totals = () => {
var price = 0;
var tax = 0;
const getPriceHTML = () => {
invoice.products.map((p)=>{
price += productTotal(p)
})
const tpsRate = 5;
const tvqRate = 9.975;
var price = 0;
var tps = 0;
var tvq = 0;
invoice.products.map((p) => {
price += productTotal(p);
});
tps = price * (tpsRate / 100);
tvq = price * (tvqRate / 100);
return (
<div className="invoice-item-price">
Sous-total = {price.toFixed(2)} $ CA<br />
+ TPS ({tpsRate}%) = {tps.toFixed(2)} $ CA<br />
+ TVQ ({tvqRate}%) = {tvq.toFixed(2)} $ CA<br />
<b>Total = {(price + tps + tvq).toFixed(2)} $ CA</b>
</div>
);
}
const getStatus = (statusCode) => {
switch (statusCode) {
case 0:
return (
<>
Confirmé
</>
)
case 1:
return (
<>
Cancellé
</>
)
case 2:
return (
<>
En préparation
</>
)
case 3:
return (
<>
En expédition
</>
)
case 4:
return (
<>
Expédié
</>
)
case 5:
return (
<>
Retourné
</>
)
default:
return (
<>
Status Invalide
</>
)
}
}
@@ -19,7 +85,7 @@ const InvoiceItem = ({ invoice }) => {
<div className="invoice-item-container">
<div className="invoice-item-info">
<div>
#{invoice.id}
#{invoice.id} ({getStatus(invoice.status)})
</div>
<div className="invoice-item-expedition">
<b>Adresse d'expédition:</b><br />
@@ -30,14 +96,15 @@ const InvoiceItem = ({ invoice }) => {
</div>
</div>
<div className="invoice-item-products">
<h4>Produits</h4>
<ul className="invoice-item-product-list">
{invoice.products.map((p) => (
<li>{p.quantity} x {p.product.title} -{'>'} {productTotal(p)}</li>
<li key={p.id}>{p.quantity} x {p.product.title} <br/> <b>{productTotal(p).toFixed(2)} $ CA</b></li>
))}
</ul>
<div>
{totals()}
</div>
<>
{getPriceHTML()}
</>
</div>
</div>
);

35
GrossesMitaines/grosses-mitaines-ui/src/pages/Invoices.js Normal file
View File

@@ -0,0 +1,35 @@
import { useEffect } from "react";
import { useState } from "react";
import InvoiceList from "../components/InvoiceList";
const Invoices = () => {
const [invoices, setInvoices] = useState([]);
useEffect(() => {
fetch(`https://localhost:7292/api/Invoice?all=true`, {
method: 'GET',
mode: 'cors',
credentials: 'include'
}).then(async (response) => {
if (response.ok) {
var json = await response.json();
console.log(json);
setInvoices(json);
}
else{
console.log("Erreur lors de la requête des invoices");
}
});
}, []);
return (
<>
<InvoiceList
invoices={invoices}
/>
</>
);
}
export default Invoices

83
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;
}
@@ -726,20 +724,67 @@ a {
}
.invoice-list-container{
border: beige 2px double;
.invoice-list-container {
display: block;
}
.invoice-item-container{
border: black 1px solid;
.invoice-item-container {
margin: 0px 20px 10px 20px;
background-color: purple;
border-radius: 5px;
padding: 10px;
box-shadow: rgba(0, 0, 0, 0.5) 5px 5px;
display: flex;
}
.invoice-item-info {
background-color: beige;
border-radius: 5px;
padding: 10px;
width: 50%;
margin: auto;
margin-top: 10px;
}
.invoice-item-products {
color: white;
width: 40%;
margin: auto;
}
.invoice-item-products li {
padding: 5px;
/* border: white 1px solid; */
background-color: black;
border-radius: 3px;
margin-bottom: 2px;
}
.invoice-item-expedition {}
.invoice-item-product-list {}
.invoice-item-price {}
/* -------------------------------------------------------- */
/* specification pour les moyennes écrans
/* -------------------------------------------------------- */
@media(max-width:900px) {
.invoice-item-container {
display: block;
}
.invoice-item-info {
width: 90%;
}
.invoice-item-products {
margin-top:10px;
margin-bottom: 10px;
width: 90%;
}
.btn-ajouter-morceau {
display: block;
margin: auto;