diff --git a/GrossesMitaines/grosses-mitaines-ui/public/images/cat-yarn.gif b/GrossesMitaines/grosses-mitaines-ui/public/images/cat-yarn.gif
new file mode 100644
index 0000000..d167683
Binary files /dev/null and b/GrossesMitaines/grosses-mitaines-ui/public/images/cat-yarn.gif differ
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/components/ItemList.js b/GrossesMitaines/grosses-mitaines-ui/src/components/ItemList.js
index 44544e5..2417667 100644
--- a/GrossesMitaines/grosses-mitaines-ui/src/components/ItemList.js
+++ b/GrossesMitaines/grosses-mitaines-ui/src/components/ItemList.js
@@ -6,6 +6,7 @@ const ItemList = ({ items }) => {
return (
<>
+ {items.length <= 0 &&
Aucun morceaux à montrer...
}
{items.map((item) =>
- {
+
+ const [currentSort, setSort] = useState("...");
+
+ return (
+ <>
+
+
+ {currentSort}
+
+
+
+ {
+ setSort("Prix ascendants"); // Mets le nom afficher quand le dropdown est fermé
+ onChange("Price"); // Trigger le handler pour trier
+ }}>
+ Prix ascendants {/*Le nom de l'option*/}
+
+ {
+ setSort(" Prix déscendants");
+ onChange("PriceDesc");
+ }}>
+ Prix déscendants
+
+ {
+ setSort("Titre a -> z");
+ onChange("Title");
+ }}>
+ Titre a -{'>'} z
+
+ {
+ setSort("Titre z -> a");
+ onChange("TitleDesc");
+ }}>
+ Titre z -{'>'} a
+
+ {
+ setSort("Catégorie a -> z");
+ onChange("Category");
+ }}>
+ Catégorie a -{'>'} z
+
+ {
+ setSort("Catégorie z -> a");
+ onChange("CategoryDesc");
+ }}>
+ Catégorie z -{'>'} a
+
+ {
+ setSort("...");
+ onChange("");
+ }}>
+ ...
+
+
+
+ >
+ );
+}
+
+export default Sorting;
\ No newline at end of file
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/pages/Morceaux.js b/GrossesMitaines/grosses-mitaines-ui/src/pages/Morceaux.js
index 0352c3f..4efb083 100644
--- a/GrossesMitaines/grosses-mitaines-ui/src/pages/Morceaux.js
+++ b/GrossesMitaines/grosses-mitaines-ui/src/pages/Morceaux.js
@@ -2,113 +2,76 @@ import { Button } from 'react-bootstrap';
import { useEffect } from "react";
import ItemList from "../components/ItemList";
import { useState } from 'react';
+import Sorting from "../components/Sorting"
const Morceaux = (startingProducts) => {
- // public enum States {
- // Available,
- // BackOrder,
- // Unavailable,
- // Clearance,
- // Promotion,
- // Discontinued
- // }
-
- // const products = [
- // {
- // "id":0,
- // "name": "Ceinture flèchée",
- // "status": 0,
- // "price": 85.86,
- // "newPrice": -1,
- // "imageUrl": "/images/ceintureflechee.jpg"
- // },
- // {
- // "id":1,
- // "name": "Chandail de nowel",
- // "status": 2,
- // "price": 69.50,
- // "newPrice": -1,
- // "imageUrl": "/images/chandailquetaine.jpg"
- // },
- // {
- // "id":2,
- // "name": "Pantoufles du Canadien en Phentex",
- // "status": 5,
- // "price": 15.64,
- // "newPrice": -1,
- // "imageUrl": "/images/pantouflesCH.jpg"
- // },
- // {
- // "id":3,
- // "name": "Jean-Luc Mongrain",
- // "status": 1,
- // "price": 1453.12,
- // "newPrice": -1,
- // "imageUrl": "/images/jeanlucmongrain.jpg"
- // },
- // {
- // "id":4,
- // "name": "Mitaines de laine",
- // "status": 4,
- // "price": 24.99,
- // "newPrice": 19.99,
- // "imageUrl": "/images/mitaines.jpg"
- // },
- // {
- // "id":5,
- // "name": "Sous-vêtements coquins",
- // "status": 3,
- // "price": 19.99,
- // "newPrice": 14.99,
- // "imageUrl": "/images/kokin.jpg"
- // },
- // {
- // "id":6,
- // "name": "Doudou douce et grise",
- // "status": 3,
- // "price": 99.99,
- // "newPrice": 89.99,
- // "imageUrl": "/images/doudou.jpg"
- // }
- // ];
-
useEffect(() => {
document.title = 'Morceaux';
});
const [products, setProducts] = useState([]);
+ const [isLoading, setIsLoading] = useState(false);
-
+ var order = "";
+ var filterPrice = "";
+ var filterState = "";
const handleNextItems = async () => {
var url;
if (products.length > 0)
- url = `https://localhost:7292/api/Inventory?lastId=${products[products.length - 1].id}`;
+ url = `https://localhost:7292/api/Inventory?lastId=${products[products.length - 1].id}&order=${order}&filterPrice=${filterPrice}&filterState=${filterState}`;
else
- url = 'https://localhost:7292/api/Inventory'
+ url = `https://localhost:7292/api/Inventory?order=${order}&filterPrice=${filterPrice}&filterState=${filterState}`
+ setIsLoading(true);
+ const response = await fetch(url);
+ const json = await response.json();
+
+ //TODO: regler bug qui permet d'avoir des duplicats (trouver une façon de skipper les duplicats)
+ if (json.length > 0)
+ setProducts([...products, ...json]);
+
+ setIsLoading(false);
+
+ }
+
+ const handleOrder = async (sortBy) => {
+
+ order = sortBy;
+ var url = `https://localhost:7292/api/Inventory?order=${order}&filterPrice=${filterPrice}&filterState=${filterState}`;
+ setIsLoading(true);
const response = await fetch(url);
const json = await response.json();
if (json.length > 0)
- setProducts([...products, ...json]);
+ setProducts([...json]);
+ setIsLoading(false);
+ }
+ const handleFilterPrice = async () => {
+
+ }
+ const handleFilterState = async () => {
}
return (
- <>
+
+
+
+
- {/* faire un spinner qui tourne quand ça load */}
+
+
- >
+
);
}
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css b/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css
index 52acbdc..ca4ff54 100644
--- a/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css
+++ b/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css
@@ -353,7 +353,7 @@ html {
.btn-primary{
background-color: purple;
- color:beige;
+ color:white;
border-color: darkslateblue;
}
@@ -369,10 +369,36 @@ html {
margin-right: auto;
margin-top:10px;
margin-bottom: 10px;
- width:85%;
+ width:30%;
}
+.sorting-dropdown{
+ width:fit-content;
+ margin:auto;
+ float:right;
+}
+.sorting-container{
+ width:100%;
+ float:right;
+ margin-right:5%;
+ margin-left:5%;
+ margin-top:15px;
+ margin-bottom:15px;
+}
+
+.cat-load{
+ display:block;
+ margin:auto;
+ width:auto;
+ background-image: url("/public/images/cat-yarn.gif");
+ background-repeat: no-repeat;
+ background-color: white;
+ background-size: contain;
+ background-position: center;
+ mix-blend-mode: multiply;
+ height:200px;
+}
/* -------------------------------------------------------- */
/* specification pour les moyennes écrans
/* -------------------------------------------------------- */
@@ -380,6 +406,38 @@ html {
.item{
width:45%;
}
+
+ .btn-load-more{
+ width:45%;
+ }
+
+ .sorting-dropdown{
+
+ width:100%;
+ float:none;
+ }
+
+ .sorting-dropdown button{
+ height:60px !important;
+ width: 100% !important;
+ font-size: larger;
+ }
+
+ .sorting-container{
+ width: 90%;
+ float:none;
+ }
+
+ .sorting-menu{
+ width: 100%;
+ }
+
+ .sorting-menu a {
+ font-size: larger;
+ height: 50px;
+ background-color: beige;
+ border: 2px white solid;
+ }
}
@@ -393,6 +451,10 @@ html {
width:85%;
}
+ .btn-load-more{
+ width:85%;
+ }
+
.featured-img {
border: 5px purple double;
width: 100%;