beautification des menues de filtres

This commit is contained in:
Victor Turgeon 2022-10-29 12:41:30 -07:00
parent deee825a48
commit 47b22e4334
3 changed files with 200 additions and 105 deletions

View File

@ -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>
</>
)
}

View File

@ -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);
}

View File

@ -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 {