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%;