From 47b22e4334a6d97d9994ad4313656be1a9c7751f Mon Sep 17 00:00:00 2001
From: Victor Turgeon <76506447+Medenos@users.noreply.github.com>
Date: Sat, 29 Oct 2022 12:41:30 -0700
Subject: [PATCH] beautification des menues de filtres

---
 .../src/components/Filters.js                 | 256 +++++++++++-------
 .../grosses-mitaines-ui/src/pages/Morceaux.js |   3 +-
 .../src/stylesheets/site.css                  |  46 +++-
 3 files changed, 200 insertions(+), 105 deletions(-)

diff --git a/GrossesMitaines/grosses-mitaines-ui/src/components/Filters.js b/GrossesMitaines/grosses-mitaines-ui/src/components/Filters.js
index e6765a6..cbf9f4c 100644
--- a/GrossesMitaines/grosses-mitaines-ui/src/components/Filters.js
+++ b/GrossesMitaines/grosses-mitaines-ui/src/components/Filters.js
@@ -1,120 +1,184 @@
 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>
-                <div className="filters-price-container">
-                    <Form.Group>
-                        <div key="price-filter-radio" onChange={e => handlePriceChange(e.target.value)}>
-                            <Form.Check
-                                defaultChecked
-                                label="Aucun"
-                                name="priceFilter"
-                                type='radio'
-                                id="price-none"
-                                value=""
-                            />
-                            <Form.Check
-                                label="Sous 20$"
-                                name="priceFilter"
-                                type='radio'
-                                id="price-u-20"
-                                value="PriceUnder20"
-                            />
-                            <Form.Check
-                                label="De 20$ à 49$"
-                                name="priceFilter"
-                                type='radio'
-                                id="price-ft-20-49"
-                                value="Price20to49"
-                            />
-                            <Form.Check
-                                label="De 50$ à 99$"
-                                name="priceFilter"
-                                type='radio'
-                                id="price-ft-50-99"
-                                value="Price50to99"
-                            />
-                            <Form.Check
-                                label="Au-déssus de 100$"
-                                name="priceFilter"
-                                type='radio'
-                                id="price-o-100"
-                                value="PriceOver100"
-                            />
+        <>
+            <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)}>
+                                    <Form.Check
+                                        defaultChecked
+                                        label="Aucun"
+                                        name="priceFilter"
+                                        type='radio'
+                                        id="price-none"
+                                        value=""
+                                    />
+                                    <Form.Check
+                                        label="Sous 20$"
+                                        name="priceFilter"
+                                        type='radio'
+                                        id="price-u-20"
+                                        value="PriceUnder20"
+                                    />
+                                    <Form.Check
+                                        label="De 20$ à 49$"
+                                        name="priceFilter"
+                                        type='radio'
+                                        id="price-ft-20-49"
+                                        value="Price20to49"
+                                    />
+                                    <Form.Check
+                                        label="De 50$ à 99$"
+                                        name="priceFilter"
+                                        type='radio'
+                                        id="price-ft-50-99"
+                                        value="Price50to99"
+                                    />
+                                    <Form.Check
+                                        label="Au-déssus de 100$"
+                                        name="priceFilter"
+                                        type='radio'
+                                        id="price-o-100"
+                                        value="PriceOver100"
+                                    />
+                                </div>
+                            </Form.Group>
                         </div>
-                    </Form.Group>
-                </div>
-                <div className="filters-state-container">
-                    <Form.Group>
-                        <div key="state-filter-radio" onChange={e => handleStateChange(e.target.value)}>
-                            <Form.Check
-                                defaultChecked
-                                label="Aucun"
-                                name="stateFilter"
-                                type='radio'
-                                id="state-none"
-                                value=""
-                            />
-                            <Form.Check
-                                label="Disponible"
-                                name="stateFilter"
-                                type='radio'
-                                id="state-available"
-                                value="isAvailable"
-                            />
-                            <Form.Check
-                                label="Indisponible"
-                                name="stateFilter"
-                                type='radio'
-                                id="state-unavailable"
-                                value="isUnavailable"
-                            />
-                            <Form.Check
-                                label="En commande"
-                                name="stateFilter"
-                                type='radio'
-                                id="state-backorder"
-                                value="isBackOrder"
-                            />
-                            <Form.Check
-                                label="Liquidation"
-                                name="stateFilter"
-                                type='radio'
-                                id="state-cleareance"
-                                value="isClearance"
-                            />
-                            <Form.Check
-                                label="Discontinué"
-                                name="stateFilter"
-                                type='radio'
-                                id="state-discontinued"
-                                value="isDiscontinued"
-                            />
+                        <div className="filters-state-container">
+                            <Form.Group>
+                                <div key="state-filter-radio" onChange={e => handleStateChange(e.target.value)}>
+                                    <Form.Check
+                                        defaultChecked
+                                        label="Aucun"
+                                        name="stateFilter"
+                                        type='radio'
+                                        id="state-none"
+                                        value=""
+                                    />
+                                    <Form.Check
+                                        label="Disponible"
+                                        name="stateFilter"
+                                        type='radio'
+                                        id="state-available"
+                                        value="isAvailable"
+                                    />
+                                    <Form.Check
+                                        label="Indisponible"
+                                        name="stateFilter"
+                                        type='radio'
+                                        id="state-unavailable"
+                                        value="isUnavailable"
+                                    />
+                                    <Form.Check
+                                        label="En commande"
+                                        name="stateFilter"
+                                        type='radio'
+                                        id="state-backorder"
+                                        value="isBackOrder"
+                                    />
+                                    <Form.Check
+                                        label="Liquidation"
+                                        name="stateFilter"
+                                        type='radio'
+                                        id="state-cleareance"
+                                        value="isClearance"
+                                    />
+                                    <Form.Check
+                                        label="Discontinué"
+                                        name="stateFilter"
+                                        type='radio'
+                                        id="state-discontinued"
+                                        value="isDiscontinued"
+                                    />
+                                </div>
+                            </Form.Group>
                         </div>
-                    </Form.Group>
+                    </Form>
+                    <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>
-            </Form>
-            <Button onClick={() => { onChange(priceFilter, stateFilter) }} className='btn-filter'>
-                Filtrer
-            </Button>
-        </div>
+                <div>
+                    Disponibilité: {stateFilterName}
+                </div>
+            </div>
+
+        </>
     )
 }
 
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/pages/Morceaux.js b/GrossesMitaines/grosses-mitaines-ui/src/pages/Morceaux.js
index 586c4bc..33de673 100644
--- a/GrossesMitaines/grosses-mitaines-ui/src/pages/Morceaux.js
+++ b/GrossesMitaines/grosses-mitaines-ui/src/pages/Morceaux.js
@@ -66,8 +66,7 @@ const Morceaux = (startingProducts) => {
         setIsLoading(true);
         const response = await fetch(url);
         const json = await response.json();
-        if (json.length > 0)
-            setProducts([...json]);
+        setProducts([...json]);
         setIsLoading(false);
     }
 
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css b/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css
index b720bfe..43fa9fc 100644
--- a/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css
+++ b/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-menu{
+.filters-btn-container{
+    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%;
-    /* border: green 2px dotted; */
-    margin: 0px;
+    width: fit-content;
+    margin-left: 25px;
+}
+
+.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 {