basic commandes et mesCommandes

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 = () => {
             <Route path="register" element={<Register/>}/>
             <Route path="formulaire" element={<Formulaire/>}/>
             <Route path="myinvoices" element={<MyInvoices/>}/>
+            <Route path="invoices" element={<Invoices/>}/>
           </Route>
         </Routes>
       </BrowserRouter>

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 = () => {
+    const getPriceHTML = () => {
-        var price = 0;
-        var tax = 0;
 
-        invoice.products.map((p)=>{
+        const tpsRate = 5;
-            price += productTotal(p)
+        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()}
+                    {getPriceHTML()}
-                </div>
+                </>
             </div>
         </div>
     );

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 (
+        <>
+            <InvoiceList
+                invoices={invoices}
+            />
+        </>
+    );
+}
+
+export default Invoices

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: auto;
-    margin-top:25px;
+    margin-top: 25px;
     width: 35%;
     height: 100%;
 }
 
 
 .detail-container-info {
-    margin:auto;
+    margin: auto;
     width: 35%;
     height: 100%;
 }
 
 .detail-container-controls {
-    margin:auto;
+    margin: auto;
-    display:inline-flex;
+    display: inline-flex;
-    width:20%;
+    width: 20%;
-    height:100%;
+    height: 100%;
 }
 
 .qty-select {
     width: fit-content;
-    height:fit-content;
+    height: fit-content;
-    margin:auto;
+    margin: auto;
 }
 
-.add-to-cart{
+.add-to-cart {
-    width:auto;
+    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{
+.invoice-list-container {
-    border: beige 2px double;
+    display: block;
 }
 
-.invoice-item-container{
+.invoice-item-container {
-    border: black 1px solid;
+    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;