Ajout des filtres et image de chargement.

GrossesMitaines/grosses-mitaines-ui/src/components/ItemList.js

@@ -6,6 +6,7 @@ const ItemList = ({ items }) => {
     return (
         <>
             <div className='item-list'>
+                {items.length <= 0 && <p>Aucun morceaux à montrer...</p>}
                 {items.map((item) =>
                     <Link key={item.id} className='item-link' to={`/morceaux/${item.id}`}>
                         <Item  imageUrl={item.imageName}

GrossesMitaines/grosses-mitaines-ui/src/components/Sorting.js

@@ -0,0 +1,64 @@
+import Dropdown from 'react-bootstrap/Dropdown'
+import { useState } from 'react';
+
+const Sorting = ({onChange}) => {
+
+    const [currentSort, setSort] = useState("...");
+
+    return (
+        <>
+            <Dropdown className='sorting-dropdown'>
+                <Dropdown.Toggle id="dropdown-sort">
+                    {currentSort}
+                </Dropdown.Toggle>
+
+                <Dropdown.Menu className='sorting-menu'>
+                    <Dropdown.Item key="0" onClick={() => {
+                        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*/}
+                    </Dropdown.Item>
+                    <Dropdown.Item  key="1" onClick={() => {
+                        setSort(" Prix déscendants");
+                        onChange("PriceDesc");
+                    }}>
+                        Prix déscendants
+                    </Dropdown.Item>
+                    <Dropdown.Item  key="2" onClick={() => {
+                        setSort("Titre a -> z");
+                        onChange("Title");
+                    }}>
+                        Titre a -{'>'} z
+                    </Dropdown.Item>
+                    <Dropdown.Item key="3" onClick={() => {
+                        setSort("Titre z -> a");
+                        onChange("TitleDesc");
+                    }}>
+                        Titre z -{'>'} a
+                    </Dropdown.Item>
+                    <Dropdown.Item key="4" onClick={() => {
+                        setSort("Catégorie a -> z");
+                        onChange("Category");
+                    }}>
+                        Catégorie a -{'>'} z
+                    </Dropdown.Item>
+                    <Dropdown.Item key="5" onClick={() => {
+                        setSort("Catégorie z -> a");
+                        onChange("CategoryDesc");
+                    }}>
+                        Catégorie z -{'>'} a
+                    </Dropdown.Item>
+                    <Dropdown.Item key="6" onClick={() => {
+                        setSort("...");
+                        onChange("");
+                    }}>
+                        ...
+                    </Dropdown.Item>
+                </Dropdown.Menu>
+            </Dropdown>
+        </>
+    );
+}
+
+export default Sorting;

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 (
-        <>
+        <div>
+            <div className="sorting-container">
+                <Sorting onChange={handleOrder} />
+            </div>
             <div className="morceaux-container">
                 <ItemList items={products} />
             </div>
-            {/* faire un spinner qui tourne quand ça load */}
+            <div className={isLoading ? "cat-load" : "d-none cat-load"} />
+            <script type="text/javascript" async src="https://tenor.com/embed.js"></script>
             <div>
                 <Button onClick={handleNextItems} className='btn-load-more'>
                     ...
                 </Button>
             </div>
-        </>
+        </div>
     );
 }
 

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