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", "@testing-library/user-event": "^13.5.0",
"axios": "^1.1.3", "axios": "^1.1.3",
"bootstrap": "^5.2.1", "bootstrap": "^5.2.1",
"fa": "^1.0.1",
"font-awesome": "^4.7.0", "font-awesome": "^4.7.0",
"react": "^18.2.0", "react": "^18.2.0",
"react-bootstrap": "^2.5.0", "react-bootstrap": "^2.5.0",
@ -8427,6 +8428,14 @@
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
"integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==" "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": { "node_modules/fast-deep-equal": {
"version": "3.1.3", "version": "3.1.3",
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", "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": { "fast-deep-equal": {
"version": "3.1.3", "version": "3.1.3",
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", "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", "@testing-library/user-event": "^13.5.0",
"axios": "^1.1.3", "axios": "^1.1.3",
"bootstrap": "^5.2.1", "bootstrap": "^5.2.1",
"fa": "^1.0.1",
"font-awesome": "^4.7.0", "font-awesome": "^4.7.0",
"react": "^18.2.0", "react": "^18.2.0",
"react-bootstrap": "^2.5.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 // Discontinued
// } // }
function renderStatus(statusCode) { function renderStatus(statusCode) {
switch (statusCode) { if (statusCode !== undefined) {
case 0:
return (
<Card.Text className="item-status item-status-available">
Disponible
</Card.Text>
);
case 1: switch (statusCode) {
return ( case 0:
<Card.Text className="item-status item-status-backorder"> return (
En commande <Card.Text className="item-status item-status-available">
</Card.Text> Disponible
); </Card.Text>
case 2: );
return (
<Card.Text className="item-status item-status-unavailable"> case 1:
Indisponible return (
</Card.Text> <Card.Text className="item-status item-status-backorder">
); En commande
case 3: </Card.Text>
return ( );
<Card.Text className="item-status item-status-clearence"> case 2:
Liquidation return (
</Card.Text> <Card.Text className="item-status item-status-unavailable">
); Indisponible
case 4: </Card.Text>
return ( );
<Card.Text className="item-status item-status-promotion"> case 3:
Promotion return (
</Card.Text> <Card.Text className="item-status item-status-clearence">
); Liquidation
case 5: </Card.Text>
return ( );
<Card.Text className="item-status item-status-discontinued"> case 4:
Discontinué return (
</Card.Text> <Card.Text className="item-status item-status-promotion">
); Promotion
default: </Card.Text>
return ( );
<></> case 5:
); return (
<Card.Text className="item-status item-status-discontinued">
Discontinué
</Card.Text>
);
default:
return (
<></>
);
}
} }
} }
function renderPrice(price, newPrice, status) { function renderPrice(price, newPrice, status) {
if (price !== undefined) {
if (status != 3 && status != 4) {
return ( if (status != 3 && status != 4) {
<Card.Text className="item-price-container"> return (
<span className="item-price"> <Card.Text className="item-price-container">
{price.toFixed(2).toString().replace(".", ",")} $ CA <span className="item-price">
</span> {price.toFixed(2).toString().replace(".", ",")} $ CA
</Card.Text> </span>
); </Card.Text>
} );
else { }
return ( else {
<Card.Text className="item-price-container"> return (
<span className="item-old-price"> <Card.Text className="item-price-container">
{price.toFixed(2).toString().replace(".", ",")} $ CA <span className="item-old-price">
</span> {price.toFixed(2).toString().replace(".", ",")} $ CA
<span className="item-new-price"> </span>
{newPrice.toFixed(2).toString().replace(".", ",")} $ CA <span className="item-new-price">
</span> {newPrice.toFixed(2).toString().replace(".", ",")} $ CA
</Card.Text> </span>
); </Card.Text>
);
}
} }
} }
const Item = ({ imageUrl, name, price, newPrice, status }) => { const Item = ({ imageUrl, name, price, newPrice, status }) => {
return ( if (name !== undefined) {
return (
<Card className="item"> <Card className="item">
<Card.Img className="item-img" variant="top" src={`/images/${imageUrl}_thumbnail.jpg`} /> <Card.Img className="item-img" variant="top" src={`/images/${imageUrl}_thumbnail.jpg`} />
<Card.Body className="item-info"> <Card.Body className="item-info">
<div className="item-name-container"> <div className="item-name-container">
<Card.Title className="item-name"> <Card.Title className="item-name">
{name} {name}
</Card.Title> </Card.Title>
</div> </div>
<div className="item-status-container"> <div className="item-status-container">
{renderStatus(status)} {renderStatus(status)}
</div> </div>
<div> <div>
{renderPrice(price, newPrice, status)} {renderPrice(price, newPrice, status)}
</div> </div>
</Card.Body> </Card.Body>
</Card> </Card>
); );
}
else {
return (<></>);
}
} }
export default Item; export default Item;

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

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

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

@ -6,11 +6,6 @@ import Sorting from "../components/Sorting"
const Morceaux = (startingProducts) => { const Morceaux = (startingProducts) => {
useEffect(() => {
document.title = 'Morceaux';
});
const [products, setProducts] = useState([]); const [products, setProducts] = useState([]);
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
@ -18,6 +13,19 @@ const Morceaux = (startingProducts) => {
var filterPrice = ""; var filterPrice = "";
var filterState = ""; 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 () => { const handleNextItems = async () => {
var url; var url;
@ -29,9 +37,9 @@ const Morceaux = (startingProducts) => {
setIsLoading(true); setIsLoading(true);
const response = await fetch(url); const response = await fetch(url);
const json = await response.json(); const json = await response.json();
//TODO: regler bug qui permet d'avoir des duplicats (trouver une façon de skipper les duplicats) //TODO: regler bug qui permet d'avoir des duplicats (trouver une façon de skipper les duplicats)
if (json.length > 0) if (json.length > 0)
setProducts([...products, ...json]); setProducts([...products, ...json]);
setIsLoading(false); setIsLoading(false);
@ -57,7 +65,7 @@ const Morceaux = (startingProducts) => {
} }
return ( return (
<div className="morceaux"div> <div className="morceaux">
<div className="sorting-container"> <div className="sorting-container">
<Sorting onChange={handleOrder} /> <Sorting onChange={handleOrder} />
</div> </div>

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

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