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 (
+                <Card.Text className="item-status item-status-available">
+                    Disponible
+                </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 (
-        <div className="row item">
-            <div className="col-md-2">
-                <img src={imageUrl} alt={name} height="150" />
-            </div>
-            <div className="col-md-8 item-detail">
-                <h4>{name}</h4>
-                <div dangerouslySetInnerHTML={{ __html: status }}></div>
-            </div>
-            <div className="col-md-2 item-price">
-                {price}
-            </div>
-        </div>
+
+        <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="item-status-container">
+                    {renderStatus(status)}
+                </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>