From a5a1be67a37202fd5aaf4346ac484a698ce7802d Mon Sep 17 00:00:00 2001 From: Victor Turgeon <76506447+Medenos@users.noreply.github.com> Date: Tue, 8 Nov 2022 00:42:15 -0500 Subject: [PATCH] basic commandes et mesCommandes --- .../grosses-mitaines-ui/src/components/App.js | 2 + .../src/components/InvoiceItem.js | 91 ++++++++++++++++--- .../grosses-mitaines-ui/src/pages/Invoices.js | 35 +++++++ .../src/stylesheets/site.css | 83 +++++++++++++---- 4 files changed, 180 insertions(+), 31 deletions(-) create mode 100644 GrossesMitaines/grosses-mitaines-ui/src/pages/Invoices.js diff --git a/GrossesMitaines/grosses-mitaines-ui/src/components/App.js b/GrossesMitaines/grosses-mitaines-ui/src/components/App.js index be50418..582b520 100644 --- a/GrossesMitaines/grosses-mitaines-ui/src/components/App.js +++ b/GrossesMitaines/grosses-mitaines-ui/src/components/App.js @@ -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 = () => { }/> }/> }/> + }/> diff --git a/GrossesMitaines/grosses-mitaines-ui/src/components/InvoiceItem.js b/GrossesMitaines/grosses-mitaines-ui/src/components/InvoiceItem.js index fed4e44..429006c 100644 --- a/GrossesMitaines/grosses-mitaines-ui/src/components/InvoiceItem.js +++ b/GrossesMitaines/grosses-mitaines-ui/src/components/InvoiceItem.js @@ -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 ( +
+ Sous-total = {price.toFixed(2)} $ CA
+ + TPS ({tpsRate}%) = {tps.toFixed(2)} $ CA
+ + TVQ ({tvqRate}%) = {tvq.toFixed(2)} $ CA
+ Total = {(price + tps + tvq).toFixed(2)} $ CA +
+ ); + } + + 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 }) => {
- #{invoice.id} + #{invoice.id} ({getStatus(invoice.status)})
Adresse d'expédition:
@@ -30,14 +96,15 @@ const InvoiceItem = ({ invoice }) => {
+

Produits

    {invoice.products.map((p) => ( -
  • {p.quantity} x {p.product.title} -{'>'} {productTotal(p)}
    • +
  • {p.quantity} x {p.product.title}
    {productTotal(p).toFixed(2)} $ CA
    • ))}
-
- {totals()} -
+ <> + {getPriceHTML()} +
); diff --git a/GrossesMitaines/grosses-mitaines-ui/src/pages/Invoices.js b/GrossesMitaines/grosses-mitaines-ui/src/pages/Invoices.js new file mode 100644 index 0000000..be03c7e --- /dev/null +++ b/GrossesMitaines/grosses-mitaines-ui/src/pages/Invoices.js @@ -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 ( + <> + + + ); +} + +export default Invoices \ No newline at end of file diff --git a/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css b/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css index 0e96b11..4833e23 100644 --- a/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css +++ b/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css @@ -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;