basic page de détail

GrossesMitaines/grosses-mitaines-ui/src/components/Item.js

@@ -54,9 +54,9 @@ function renderStatus(statusCode) {
     }
 }
 
-function renderPrice(price, newPrice) {
+function renderPrice(price, newPrice, status) {
 
-    if (newPrice < 0) {
+    if (status != 3 && status != 4) {
         return (
             <Card.Text className="item-price-container">
                 <span className="item-price">
@@ -95,7 +95,7 @@ const Item = ({ imageUrl, name, price, newPrice, status }) => {
                     {renderStatus(status)}
                 </div>
                 <div>
-                    {renderPrice(price, newPrice)}
+                    {renderPrice(price, newPrice, status)}
                 </div>
 
             </Card.Body>

GrossesMitaines/grosses-mitaines-ui/src/pages/MorceauDetail.js

@@ -1,17 +1,121 @@
 import { useEffect } from "react";
-import {useParams} from "react-router-dom";
+import { json, useParams } from "react-router-dom";
+import { useState } from "react";
 
 const MorceauDetail = () => {
 
     const { id } = useParams();
+    const [item, setItem] = useState({});
+    const [isLoading, setIsLoading] = useState(false);
 
     useEffect(() => {
         document.title = 'Morceaux';
+        setIsLoading(true);
+        async function fetchData() {
+            const response = await fetch(`https://localhost:7292/api/Product?id=${id}`);
+            const json = await response.json();
+            setItem(json);
+        }
+        fetchData();
+        setIsLoading(false);
     });
 
+    function renderPrice(price, newPrice, status) {
+        if (price !== undefined) {
+            if (status != 3 && status != 4) {
+                return (
+                    <h3 className="detail-price">
+                        {price.toFixed(2).toString().replace(".", ",")} $ CA
+                    </h3>
+                );
+            }
+            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>
+                    </>
+                );
+            }
+        }
+    }
+
+    function renderStatus(statusCode) {
+        if (statusCode !== undefined) {
+
+            switch (statusCode) {
+                case 0:
+                    return (
+                        <h4 className="detail-status detail-status-available">
+                            Disponible
+                        </h4>
+                    );
+
+                case 1:
+                    return (
+                        <h4 className="detail-status detail-status-backorder">
+                            En commande
+                        </h4>
+                    );
+                case 2:
+                    return (
+                        <h4 className="detail-status detail-status-unavailable">
+                            Indisponible
+                        </h4>
+                    );
+                case 3:
+                    return (
+                        <h4 className="detail-status detail-status-clearence">
+                            Liquidation
+                        </h4>
+                    );
+                case 4:
+                    return (
+                        <h4 className="detail-status detail-status-promotion">
+                            Promotion
+                        </h4>
+                    );
+                case 5:
+                    return (
+                        <h4 className="detail-status detail-status-discontinued">
+                            Discontinué
+                        </h4>
+                    );
+                default:
+                    return (
+                        <></>
+                    );
+            }
+        }
+    }
+
     return (
         <>
-        <p>{id}</p>
+            <div className={isLoading ? "cat-load" : "d-none cat-load"} />
+
+            <div className="detail-container">
+                <div className="detail-container-left">
+                    <img className="detail-image" src={`/images/${item.imageName}.jpg`} />
+                    <p className="detail-description">{item.description}</p>
+                </div>
+                <div className="detail-container-right">
+                    <h1 className="detail-title">{item.title} (#{item.id})</h1>
+                    <h2 className="detail-category">{item.category}</h2>
+                    <div className="detail-price-container">
+                        {renderPrice(item.price, item.promoPrice, item.status)}
+                    </div>
+                    <div className="detail-status-container">
+                        {renderStatus(item.status)}
+                    </div>
+                    <h5>
+                        {item.quantity}
+                    </h5>
+                </div>
+            </div>
         </>
     );
 }

GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css

@@ -345,7 +345,8 @@ html {
 
 }
 
-.item-link, .item-link:hover{
+.item-link,
+.item-link:hover {
     color: black;
     text-decoration: none;
 }
@@ -399,10 +400,49 @@ html {
     mix-blend-mode: multiply;
     height: 200px;
 }
+
+.detail-container {
+    display: flex;
+    background-color: plum;
+    padding:16px;
+}
+
+.detail-container-left {
+    margin:auto;
+    width: 48%;
+    height: 100%;
+}
+
+.detail-container-right {
+    margin:auto;
+    width: 48%;
+    height: 100%;
+}
+
+.detail-image {
+    width: 100%;
+    height: auto;
+}
+
+
+
 /* -------------------------------------------------------- */
 /* specification pour les moyennes écrans
 /* -------------------------------------------------------- */
 @media(max-width:900px) {
+
+    .detail-container{
+        display:inline-block;
+    }
+
+    .detail-container-left {
+        width: 95%;
+    }
+    
+    .detail-container-right {
+        width: 95%;
+    }
+
     .item {
         width: 45%;
     }
@@ -446,7 +486,6 @@ html {
 /* -------------------------------------------------------- */
 
 @media (max-width:450px) {
-
     .item {
         width: 85%;
     }