memartel_loc/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
Show Stats 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 { Form } from "react-bootstrap";
import { useState } from "react"; import { useState } from "react";
import {Button} from "react-bootstrap"; import { Button } from "react-bootstrap";
import { Dropdown } from "react-bootstrap";
const Filters = ({ onChange }) => { const Filters = ({ onChange }) => {
const [priceFilter, setPriceFilter] = useState(""); const [priceFilter, setPriceFilter] = useState("");
const [stateFilter, setStateFilter] = useState(""); const [stateFilter, setStateFilter] = useState("");
const [priceFilterName, setPriceFilterName] = useState("Aucun");
const [stateFilterName, setStateFilterName] = useState("Aucun");
const handlePriceChange = (value) => { const handlePriceChange = (value) => {
setPriceFilter(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) => { const handleStateChange = (value) => {
setStateFilter(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 ( return (
<div className="filters-menu"> <>
<Form> <Dropdown className="filters-dropdown">
<div className="filters-price-container"> <Dropdown.Toggle>
<Form.Group> Filtres
<div key="price-filter-radio" onChange={e => handlePriceChange(e.target.value)}> </Dropdown.Toggle>
<Form.Check
defaultChecked <Dropdown.Menu>
label="Aucun" <Form className="filters-menu">
name="priceFilter" <div className="filters-price-container">
type='radio' <Form.Group>
id="price-none" <div key="price-filter-radio" onChange={e => handlePriceChange(e.target.value)}>
value="" <Form.Check
/> defaultChecked
<Form.Check label="Aucun"
label="Sous 20$" name="priceFilter"
name="priceFilter" type='radio'
type='radio' id="price-none"
id="price-u-20" value=""
value="PriceUnder20" />
/> <Form.Check
<Form.Check label="Sous 20$"
label="De 20$ à 49$" name="priceFilter"
name="priceFilter" type='radio'
type='radio' id="price-u-20"
id="price-ft-20-49" value="PriceUnder20"
value="Price20to49" />
/> <Form.Check
<Form.Check label="De 20$ à 49$"
label="De 50$ à 99$" name="priceFilter"
name="priceFilter" type='radio'
type='radio' id="price-ft-20-49"
id="price-ft-50-99" value="Price20to49"
value="Price50to99" />
/> <Form.Check
<Form.Check label="De 50$ à 99$"
label="Au-déssus de 100$" name="priceFilter"
name="priceFilter" type='radio'
type='radio' id="price-ft-50-99"
id="price-o-100" value="Price50to99"
value="PriceOver100" />
/> <Form.Check
label="Au-déssus de 100$"
name="priceFilter"
type='radio'
id="price-o-100"
value="PriceOver100"
/>
</div>
</Form.Group>
</div> </div>
</Form.Group> <div className="filters-state-container">
</div> <Form.Group>
<div className="filters-state-container"> <div key="state-filter-radio" onChange={e => handleStateChange(e.target.value)}>
<Form.Group> <Form.Check
<div key="state-filter-radio" onChange={e => handleStateChange(e.target.value)}> defaultChecked
<Form.Check label="Aucun"
defaultChecked name="stateFilter"
label="Aucun" type='radio'
name="stateFilter" id="state-none"
type='radio' value=""
id="state-none" />
value="" <Form.Check
/> label="Disponible"
<Form.Check name="stateFilter"
label="Disponible" type='radio'
name="stateFilter" id="state-available"
type='radio' value="isAvailable"
id="state-available" />
value="isAvailable" <Form.Check
/> label="Indisponible"
<Form.Check name="stateFilter"
label="Indisponible" type='radio'
name="stateFilter" id="state-unavailable"
type='radio' value="isUnavailable"
id="state-unavailable" />
value="isUnavailable" <Form.Check
/> label="En commande"
<Form.Check name="stateFilter"
label="En commande" type='radio'
name="stateFilter" id="state-backorder"
type='radio' value="isBackOrder"
id="state-backorder" />
value="isBackOrder" <Form.Check
/> label="Liquidation"
<Form.Check name="stateFilter"
label="Liquidation" type='radio'
name="stateFilter" id="state-cleareance"
type='radio' value="isClearance"
id="state-cleareance" />
value="isClearance" <Form.Check
/> label="Discontinué"
<Form.Check name="stateFilter"
label="Discontinué" type='radio'
name="stateFilter" id="state-discontinued"
type='radio' value="isDiscontinued"
id="state-discontinued" />
value="isDiscontinued" </div>
/> </Form.Group>
</div> </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> </div>
</Form> <div>
<Button onClick={() => { onChange(priceFilter, stateFilter) }} className='btn-filter'> Disponibilité: {stateFilterName}
Filtrer </div>
</Button> </div>
</div>
</>
) )
} }

3
GrossesMitaines/grosses-mitaines-ui/src/pages/Morceaux.js
View File

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

46
GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css
View File

@ -466,19 +466,51 @@ html {
display: flex; display: flex;
width: 100%; width: 100%;
height: fit-content; height: fit-content;
/* border: black 2px solid; */
margin-bottom: 16px; margin-bottom: 16px;
} }
.filters-btn-container{
.filters-menu{ width:100%;
display:flex; 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 { .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%; width: 20%;
height: fit-content; height: fit-content;
margin:auto; margin:auto;
margin-right: 2%; margin-right: 25px;
} }
.sorting-dropdown { .sorting-dropdown {