memartel/GGMM
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

beautification des menues de filtres

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

256
GrossesMitaines/grosses-mitaines-ui/src/components/Filters.js
View File

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