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 { 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

@@ -206,22 +206,22 @@ html {
     text-align: center;
 }
 
-.item:hover{
+.item:hover {
     box-shadow: 10px 10px;
-    top:-5px;
+    top: -5px;
-    left:-5px;
+    left: -5px;
     background-color: beige;
 }
 
 .item {
 
-    border:purple double 3px;
+    border: purple double 3px;
     margin-left: 1.25%;
     margin-right: 1.25%;
     margin-bottom: 10px;
     background-color: rgba(245, 245, 220, 0.75);
     display: inline-block;
-    height:300px;
+    height: 300px;
     width: 30%;
 }
 
@@ -229,21 +229,21 @@ html {
     padding-top: 2%;
     box-shadow: 5px 5px;
     border-radius: 2px;
-    display:block;
+    display: block;
     margin-right: auto;
     margin-left: auto;
-    height:50%;
+    height: 50%;
-    width:auto;
+    width: auto;
 }
 
-.item-info{
+.item-info {
-    height:50%;
+    height: 50%;
     padding-top: 10px;
     padding-bottom: 10px;
 }
 
-.item-name-container{
+.item-name-container {
-    height:45%;
+    height: 45%;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -251,12 +251,12 @@ html {
 }
 
 .item-name {
-    margin:auto;
+    margin: auto;
     height: auto;
 }
 
-.item-status-container{
+.item-status-container {
-    height:40px;
+    height: 40px;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -267,7 +267,7 @@ html {
     font-weight: normal;
     font-family: 'Courier New', Courier, monospace;
     width: fit-content;
-    height:fit-content;
+    height: fit-content;
     margin-left: auto;
     margin-right: auto;
     padding-left: 5px;
@@ -279,64 +279,64 @@ html {
     font-size: small;
 }
 
-.item-status-available{
+.item-status-available {
-    color:green;
+    color: green;
 }
 
-.item-status-backorder{
+.item-status-backorder {
-    color:yellow;
+    color: yellow;
     background-color: black;
 }
 
-.item-status-unavailable{
+.item-status-unavailable {
-    color:red;
+    color: red;
     background-color: black;
 }
 
-.item-status-clearence{
+.item-status-clearence {
-    color:blue;
+    color: blue;
     background-color: aliceblue;
     font-size: large;
     border: yellow 2px groove;
 }
 
-.item-status-promotion{
+.item-status-promotion {
-    color:purple;
+    color: purple;
     font-size: medium;
     background-color: aliceblue;
     border: yellow 2px groove;
 }
 
-.item-status-discontinued{
+.item-status-discontinued {
-    color:white;
+    color: white;
     background-color: black;
 }
 
-.item-price-container{
+.item-price-container {
     height: fit-content;
     width: auto;
     margin: auto;
 }
 
-.item-price{
+.item-price {
-    color:green;
+    color: green;
     font-weight: bold;
     font-size: large;
-    height:auto;
+    height: auto;
-    margin:auto;
+    margin: auto;
 }
 
-.item-old-price{
+.item-old-price {
-    position:relative;
+    position: relative;
-    color:black;
+    color: black;
     text-decoration: line-through;
     font-weight: normal;
     font-size: small;
-    height:auto;
+    height: auto;
     width: fit-content;
 }
 
-.item-new-price{
+.item-new-price {
     font-size: large;
     margin-left: 10px;
     font-weight: bolder;
@@ -345,90 +345,130 @@ html {
 
 }
 
-.item-link, .item-link:hover{
+.item-link,
+.item-link:hover {
     color: black;
     text-decoration: none;
 }
 
 
-.btn-primary{
+.btn-primary {
     background-color: purple;
-    color:white;
+    color: white;
     border-color: darkslateblue;
 }
 
-.btn-primary:hover{
+.btn-primary:hover {
     background-color: plum !important;
     border-color: purple !important;
-    color:darkslateblue !important;
+    color: darkslateblue !important;
 }
 
-.btn-load-more{
+.btn-load-more {
     display: block;
-    margin-left:auto;
+    margin-left: auto;
     margin-right: auto;
-    margin-top:10px;
+    margin-top: 10px;
     margin-bottom: 10px;
-    width:30%;
+    width: 30%;
 }
 
-.sorting-dropdown{
+.sorting-dropdown {
-    width:fit-content;
+    width: fit-content;
-    margin:auto;
+    margin: auto;
-    float:right;
+    float: right;
 }
 
-.sorting-container{
+.sorting-container {
-    width:100%;
+    width: 100%;
-    float:right;
+    float: right;
-    margin-right:5%;
+    margin-right: 5%;
-    margin-left:5%;
+    margin-left: 5%;
-    margin-top:15px;
+    margin-top: 15px;
-    margin-bottom:15px;
+    margin-bottom: 15px;
 }
 
-.cat-load{
+.cat-load {
-    display:block;
+    display: block;
-    margin:auto;
+    margin: auto;
-    width:auto;
+    width: auto;
     background-image: url("/public/images/cat-yarn.gif");
     background-repeat: no-repeat;
     background-color: white;
     background-size: contain;
     background-position: center;
     mix-blend-mode: multiply;
-    height:200px;
+    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){
+@media(max-width:900px) {
-    .item{
+
-        width:45%;
+    .detail-container{
+        display:inline-block;
     }
 
-    .btn-load-more{
+    .detail-container-left {
-        width:45%;
+        width: 95%;
+    }
+    
+    .detail-container-right {
+        width: 95%;
     }
 
-    .sorting-dropdown{
+    .item {
-        
+        width: 45%;
-        width:100%;
-        float:none;
     }
 
-    .sorting-dropdown button{
+    .btn-load-more {
-        height:60px !important; 
+        width: 45%;
+    }
+
+    .sorting-dropdown {
+
+        width: 100%;
+        float: none;
+    }
+
+    .sorting-dropdown button {
+        height: 60px !important;
         width: 100% !important;
         font-size: larger;
     }
 
-    .sorting-container{
+    .sorting-container {
         width: 90%;
-        float:none;
+        float: none;
     }
 
-    .sorting-menu{
+    .sorting-menu {
         width: 100%;
     }
 
@@ -446,13 +486,12 @@ html {
 /* -------------------------------------------------------- */
 
 @media (max-width:450px) {
-
+    .item {
-    .item{
+        width: 85%;
-        width:85%;
     }
 
-    .btn-load-more{
+    .btn-load-more {
-        width:85%;
+        width: 85%;
     }
 
     .featured-img {