beautification des menues de filtres
This commit is contained in:
Victor Turgeon
parent
deee825a48
commit
47b22e4334
@ -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>
|
||||
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
|
||||
@ -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 {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user