finitions pour components item

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

@@ -1,17 +1,105 @@
-const Item = ({ imageUrl, name, price, status }) => {
+import { Card } from "react-bootstrap";
+
+// public enum States { 
+//     Available,
+//     BackOrder,
+//     Unavailable,
+//     Clearance,
+//     Promotion,
+//     Discontinued
+// }
+function renderStatus(statusCode) {
+    switch (statusCode) {
+        case 0:
             return (
-        <div className="row item">
+                <Card.Text className="item-status item-status-available">
-            <div className="col-md-2">
+                    Disponible
-                <img src={imageUrl} alt={name} height="150" />
+                </Card.Text>
+            );
+
+        case 1:
+            return (
+                <Card.Text className="item-status item-status-backorder">
+                    En commande
+                </Card.Text>
+            );
+        case 2:
+            return (
+                <Card.Text className="item-status item-status-unavailable">
+                    Indisponible
+                </Card.Text>
+            );
+        case 3:
+            return (
+                <Card.Text className="item-status item-status-clearence">
+                    Liquidation
+                </Card.Text>
+            );
+        case 4:
+            return (
+                <Card.Text className="item-status item-status-promotion">
+                    Promotion
+                </Card.Text>
+            );
+        case 5:
+            return (
+                <Card.Text className="item-status item-status-discontinued">
+                    Discontinué
+                </Card.Text>
+            );
+        default:
+            return (
+                <></>
+            );
+    }
+}
+
+function renderPrice(price, newPrice) {
+
+    if (newPrice < 0) {
+        return (
+            <Card.Text className="item-price-container">
+                <span className="item-price">
+                    {price.toFixed(2).toString().replace(".", ",")} $ CA
+                </span>
+            </Card.Text>
+        );
+    }
+    else {
+        return (
+            <Card.Text className="item-price-container">
+                <span className="item-old-price">
+                    {price.toFixed(2).toString().replace(".", ",")} $ CA
+                </span>
+                <span className="item-new-price">
+                    {newPrice.toFixed(2).toString().replace(".", ",")} $ CA
+                </span>
+            </Card.Text>
+        );
+    }
+
+}
+
+const Item = ({ imageUrl, name, price, newPrice, status }) => {
+    return (
+
+        <Card className="item">
+            <Card.Img className="item-img" variant="top" src={imageUrl} />
+            <Card.Body className="item-info">
+                <div className="item-name-container">
+                    <Card.Title className="item-name">
+                        {name}
+                    </Card.Title>
                 </div>
-            <div className="col-md-8 item-detail">
+                <div className="item-status-container">
-                <h4>{name}</h4>
+                    {renderStatus(status)}
-                <div dangerouslySetInnerHTML={{ __html: status }}></div>
-            </div>
-            <div className="col-md-2 item-price">
-                {price}
                 </div>
+                <div>
+                    {renderPrice(price, newPrice)}
                 </div>
+
+            </Card.Body>
+        </Card>
     );
 }
 

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

@@ -3,12 +3,13 @@ import Item from './Item';
 const ItemList = ({ items }) => {
 
     return (
-        <div>
+        <div className='item-list'>
             {items.map((item) => 
                 <Item   imageUrl={item.imageUrl} 
                         name={item.name} 
                         price={item.price}
                         status={item.status}
+                        newPrice={item.newPrice}
                 />
             )}
         </div>

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

@@ -3,24 +3,65 @@ import ItemList from "../components/ItemList";
 
 const Morceaux = () => {
 
+
+    // public enum States { 
+    //     Available,
+    //     BackOrder,
+    //     Unavailable,
+    //     Clearance,
+    //     Promotion,
+    //     Discontinued
+    // }
+
     const products = [
         {
             "name": "Ceinture flèchée",
-            "status": "Disponible!",
+            "status": 0,
-            "price": "85,86",
+            "price": 85.86,
+            "newPrice": -1,
             "imageUrl": "/images/ceintureflechee.jpg"
         },
+        {
+            "name": "Chandail de nowel",
+            "status": 2,
+            "price": 69.50,
+            "newPrice": -1,
+            "imageUrl": "/images/chandailquetaine.jpg"
+        },
         {
             "name": "Pantoufles du Canadien en Phentex",
-            "status": "Non disponible...",
+            "status": 5,
-            "price": "15,64",
+            "price": 15.64,
+            "newPrice": -1,
             "imageUrl": "/images/pantouflesCH.jpg"
         },
         {
             "name": "Jean-Luc Mongrain",
-            "status": "Disponible!",
+            "status": 1,
-            "price": "1453,12",
+            "price": 1453.12,
+            "newPrice": -1,
             "imageUrl": "/images/jeanlucmongrain.jpg"
+        },
+        {
+            "name": "Mitaines de laine",
+            "status": 4,
+            "price": 24.99,
+            "newPrice": 19.99,
+            "imageUrl": "/images/mitaines.jpg"
+        },
+        {
+            "name": "Sous-vêtements coquins",
+            "status": 3,
+            "price": 19.99,
+            "newPrice": 14.99,
+            "imageUrl": "/images/kokin.jpg"
+        },
+        {
+            "name": "Doudou douce et grise",
+            "status": 3,
+            "price": 99.99,
+            "newPrice": 89.99,
+            "imageUrl": "/images/doudou.jpg"
         }
     ];
 
@@ -30,7 +71,6 @@ const Morceaux = () => {
 
     return (
         <div className="morceaux-container">
-            <h3>QWERTY</h3>
             <ItemList items={products} />
         </div>
     );

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

@@ -200,20 +200,159 @@ html {
 
 }
 
-.item {
+
-    border: 5px purple double;
+/* items */
-    border-radius: 5px;
+.item-list {
-    padding: 1rem 0;
+    text-align: center;
-    margin: 1rem 0;
 }
 
-.item-detail {
+.item:hover{
-    padding: 0 2rem;
+    box-shadow: 10px 10px;
+    top:-5px;
+    left:-5px;
+    background-color: beige;
+}
+
+.item {
+
+    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;
+    width: 30%;
+}
+
+.item-img {
+    padding-top: 2%;
+    box-shadow: 5px 5px;
+    border-radius: 2px;
+    display:block;
+    margin-right: auto;
+    margin-left: auto;
+    height:50%;
+    width:auto;
+}
+
+.item-info{
+    height:50%;
+    padding-top: 10px;
+    padding-bottom: 10px;
+}
+
+.item-name-container{
+    height:45%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    vertical-align: middle;
+}
+
+.item-name {
+    margin:auto;
+    height: auto;
+}
+
+.item-status-container{
+    height:40px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    vertical-align: middle;
+}
+
+.item-status {
+    font-weight: normal;
+    font-family: 'Courier New', Courier, monospace;
+    width: fit-content;
+    height:fit-content;
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: 5px;
+    padding-right: 5px;
+    padding-top: 5px;
+    padding-bottom: 2px;
+    display: block;
+    border-radius: 10px;
+    font-size: small;
+}
+
+.item-status-available{
+    color:green;
+}
+
+.item-status-backorder{
+    color:yellow;
+    background-color: black;
+}
+
+.item-status-unavailable{
+    color:red;
+    background-color: black;
+}
+
+.item-status-clearence{
+    color:blue;
+    background-color: aliceblue;
+    font-size: large;
+    border: yellow 2px groove;
+}
+
+.item-status-promotion{
+    color:purple;
+    font-size: medium;
+    background-color: aliceblue;
+    border: yellow 2px groove;
+}
+
+.item-status-discontinued{
+    color:white;
+    background-color: black;
+}
+
+.item-price-container{
+    height: fit-content;
+    width: auto;
+    margin: auto;
 }
 
 .item-price{
+    color:green;
     font-weight: bold;
-    font-size: 140%;
+    font-size: large;
+    height:auto;
+    margin:auto;
+}
+
+.item-old-price{
+    position:relative;
+    color:black;
+    text-decoration: line-through;
+    font-weight: normal;
+    font-size: small;
+    height:auto;
+    width: fit-content;
+}
+
+.item-new-price{
+    font-size: large;
+    margin-left: 10px;
+    font-weight: bolder;
+    background-color: aliceblue;
+    color: purple;
+
+}
+
+
+/* -------------------------------------------------------- */
+/* specification pour les moyennes écrans
+/* -------------------------------------------------------- */
+@media(max-width:900px){
+    .item{
+        width:45%;
+    }
 }
 
 
@@ -222,6 +361,11 @@ html {
 /* -------------------------------------------------------- */
 
 @media (max-width:450px) {
+
+    .item{
+        width:85%;
+    }
+
     .featured-img {
         border: 5px purple double;
         width: 100%;