126 lines
3.7 KiB
JavaScript
126 lines
3.7 KiB
JavaScript
import { Card } from "react-bootstrap";
|
|
import { useState, useEffect } from "react";
|
|
|
|
|
|
function renderStatus(statusCode) {
|
|
if (statusCode !== undefined) {
|
|
|
|
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, status) {
|
|
if (price !== undefined) {
|
|
|
|
|
|
if (status !== 3 && status !== 4) {
|
|
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 = ({ productId, name, price, newPrice, status }) => {
|
|
|
|
const [imageSrc, setImageSrc] = useState(null);
|
|
|
|
useEffect(() => {
|
|
fetch(`https://localhost:7292/api/Image?id=${productId}&thumbnail=true`)
|
|
.then(response => response.blob())
|
|
.then(blob => {
|
|
const imageUrl = URL.createObjectURL(blob);
|
|
setImageSrc(imageUrl);
|
|
})
|
|
}, []);
|
|
|
|
|
|
if (name !== undefined) {
|
|
return (
|
|
|
|
<Card className="item">
|
|
<div className={!imageSrc ? "cat-load" : "d-none cat-load"} />
|
|
<Card.Img className="item-img" variant="top" src={imageSrc} />
|
|
<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, status)}
|
|
</div>
|
|
|
|
</Card.Body>
|
|
</Card>
|
|
);
|
|
}
|
|
else {
|
|
return (<></>);
|
|
}
|
|
}
|
|
|
|
export default Item; |