memartel_loc/GGMM
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

loading first item when open morceaux. Pi j'ai enlevé le height du root parce que ça fait que le foot est par dessus du stock

Browse Source
This commit is contained in:
Victor Turgeon 2022-10-18 00:34:43 -07:00
parent cf3647fe73
commit b9787c7aff
6 changed files with 124 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
GrossesMitaines/grosses-mitaines-ui/package-lock.json generated
View File

@ -13,6 +13,7 @@
"@testing-library/user-event": "^13.5.0",
"axios": "^1.1.3",
"bootstrap": "^5.2.1",
"fa": "^1.0.1",
"font-awesome": "^4.7.0",
"react": "^18.2.0",
"react-bootstrap": "^2.5.0",
@ -8427,6 +8428,14 @@
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
"integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
},
"node_modules/fa": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/fa/-/fa-1.0.1.tgz",
"integrity": "sha512-9uU7yoeKcoXvONbZuoRAEzIz/v80RlS6QfN4sWWyrpy5rScGrDPxpeZ3AV6y+jssjFJUEQoZiR5lgXBLrtAHKQ==",
"engines": {
"node": "*"
}
},
"node_modules/fast-deep-equal": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@ -24554,6 +24563,11 @@
}
}
},
"fa": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/fa/-/fa-1.0.1.tgz",
"integrity": "sha512-9uU7yoeKcoXvONbZuoRAEzIz/v80RlS6QfN4sWWyrpy5rScGrDPxpeZ3AV6y+jssjFJUEQoZiR5lgXBLrtAHKQ=="
},
"fast-deep-equal": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",

1
GrossesMitaines/grosses-mitaines-ui/package.json
View File

@ -8,6 +8,7 @@
"@testing-library/user-event": "^13.5.0",
"axios": "^1.1.3",
"bootstrap": "^5.2.1",
"fa": "^1.0.1",
"font-awesome": "^4.7.0",
"react": "^18.2.0",
"react-bootstrap": "^2.5.0",

170
GrossesMitaines/grosses-mitaines-ui/src/components/Item.js
View File

@ -9,98 +9,110 @@ import { Card } from "react-bootstrap";
// Discontinued
// }
function renderStatus(statusCode) {
switch (statusCode) {
case 0:
return (
<Card.Text className="item-status item-status-available">
Disponible
</Card.Text>
);
if (statusCode !== undefined) {
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 (
<></>
);
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>
);
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 = ({ imageUrl, name, price, newPrice, status }) => {
return (
if (name !== undefined) {
return (
<Card className="item">
<Card.Img className="item-img" variant="top" src={`/images/${imageUrl}_thumbnail.jpg`} />
<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 className="item">
<Card.Img className="item-img" variant="top" src={`/images/${imageUrl}_thumbnail.jpg`} />
<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>
);
</Card.Body>
</Card>
);
}
else {
return (<></>);
}
}
export default Item;

2
GrossesMitaines/grosses-mitaines-ui/src/pages/MorceauDetail.js
View File

@ -18,7 +18,7 @@ const MorceauDetail = () => {
}
fetchData();
setIsLoading(false);
});
},[]);
function renderPrice(price, newPrice, status) {
if (price !== undefined) {

20
GrossesMitaines/grosses-mitaines-ui/src/pages/Morceaux.js
View File

@ -6,11 +6,6 @@ import Sorting from "../components/Sorting"
const Morceaux = (startingProducts) => {
useEffect(() => {
document.title = 'Morceaux';
});
const [products, setProducts] = useState([]);
const [isLoading, setIsLoading] = useState(false);
@ -18,6 +13,19 @@ const Morceaux = (startingProducts) => {
var filterPrice = "";
var filterState = "";
useEffect(() => {
document.title = 'Morceaux';
setIsLoading(true);
async function fetchData() {
const response = await fetch(`https://localhost:7292/api/Inventory`);
const json = await response.json();
if (json.length > 0)
setProducts([...json]);
}
fetchData();
setIsLoading(false);
},[]);
const handleNextItems = async () => {
var url;
@ -57,7 +65,7 @@ const Morceaux = (startingProducts) => {
}
return (
<div className="morceaux"div>
<div className="morceaux">
<div className="sorting-container">
<Sorting onChange={handleOrder} />
</div>

2
GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css
View File

@ -1,5 +1,5 @@
#root {
height: 100vh;
min-height: 100vh;
}
body {