beautification des menues de filtres

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

@@ -1,24 +1,73 @@
 import { Form } from "react-bootstrap";
 import { useState } from "react";
-import {Button} from "react-bootstrap";
+import { Button } from "react-bootstrap";
+import { Dropdown } from "react-bootstrap";
 
 const Filters = ({ onChange }) => {
 
     const [priceFilter, setPriceFilter] = useState("");
     const [stateFilter, setStateFilter] = useState("");
 
+    const [priceFilterName, setPriceFilterName] = useState("Aucun");
+    const [stateFilterName, setStateFilterName] = useState("Aucun");
+
     const handlePriceChange = (value) => {
         setPriceFilter(value);
+
+        switch (value) {
+            case "PriceUnder20":
+                setPriceFilterName("Sous 20$")
+                break;
+            case "Price20to49":
+                setPriceFilterName("De 20$ à 49$");
+                break;
+            case "Price50to99":
+                setPriceFilterName("De 50$ à 99$");
+                break;
+            case "PriceOver100":
+                setPriceFilterName("Au-déssus de 100$");
+                break;
+            default:
+                setPriceFilterName("Aucun");
+                break;
+        }
     }
 
     const handleStateChange = (value) => {
         setStateFilter(value);
+
+        switch (value) {
+            case "isAvailable":
+                setStateFilterName("Disponible");
+                break;
+            case "isUnavailable":
+                setStateFilterName("Indisponible");
+                break;
+            case "isBackOrder":
+                setStateFilterName("En commande");
+                break;
+            case "isClearance":
+                setStateFilterName("Liquidation");
+                break;
+            case "isDiscontinued":
+                setStateFilterName("Discontinué");
+                break;
+            default:
+                setStateFilterName("Aucun");
+                break;
+        }
     }
 
 
     return (
-        <div className="filters-menu">
+        <>
-            <Form>
+            <Dropdown className="filters-dropdown">
+                <Dropdown.Toggle>
+                    Filtres
+                </Dropdown.Toggle>
+
+                <Dropdown.Menu>
+                    <Form className="filters-menu">
                         <div className="filters-price-container">
                             <Form.Group>
                                 <div key="price-filter-radio" onChange={e => handlePriceChange(e.target.value)}>
@@ -111,10 +160,25 @@ const Filters = ({ onChange }) => {
                             </Form.Group>
                         </div>
                     </Form>
-            <Button onClick={() => { onChange(priceFilter, stateFilter) }} className='btn-filter'>
+                    <div className="filters-btn-container">
+                        <Button
+                            className="filters-btn"
+                            onClick={() => { onChange(priceFilter, stateFilter) }}>
                             Filtrer
                         </Button>
                     </div>
+                </Dropdown.Menu>
+            </Dropdown>
+            <div className="filters-info">
+                <div>
+                    Prix: {priceFilterName}
+                </div>
+                <div>
+                    Disponibilité: {stateFilterName}
+                </div>
+            </div>
+
+        </>
     )
 }
 

GrossesMitaines/grosses-mitaines-ui/src/pages/Morceaux.js

@@ -66,7 +66,6 @@ const Morceaux = (startingProducts) => {
         setIsLoading(true);
         const response = await fetch(url);
         const json = await response.json();
-        if (json.length > 0)
         setProducts([...json]);
         setIsLoading(false);
     }

GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css

@@ -466,19 +466,51 @@ html {
     display: flex;
     width: 100%;
     height: fit-content;
-    /* border: black 2px solid; */
     margin-bottom: 16px;
 }
 
-
+.filters-btn-container{
-.filters-menu{
+    width:100%;
     display:flex;
 }
 
+.filters-btn{
+    margin:auto;
+    width:90% !important;
+}
+
+.filters-dropdown button{
+    width: 100%;
+}
+
+.filters-menu{
+    width:fit-content;
+    display:flex;
+    margin:5px 15px 10px 15px;
+}
+
 .filters-container {
-    width: 75%;
+    width: fit-content;
-    /* border: green 2px dotted; */
+    margin-left: 25px;
-    margin: 0px;
+}
+
+.filters-price-container{
+    white-space: nowrap;
+    padding:0px 10px 0px 10px;
+}
+
+.filters-state-container{
+    white-space: nowrap;
+    padding:0px 10px 0px 10px;
+}
+
+.filters-info{
+    width:fit-content;
+    height:fit-content;
+    background-color: beige;
+    margin-top: 5px;
+    padding: 5px 10px 5px 10px;
+    border-radius: 5px;
 }
 
 
@@ -486,7 +518,7 @@ html {
     width: 20%;
     height: fit-content;
     margin:auto;
-    margin-right: 2%;
+    margin-right: 25px;
 }
 
 .sorting-dropdown {