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

stuff

Browse Source
This commit is contained in:
Victor Turgeon 2022-10-25 11:15:37 -04:00
parent a145505fdb
commit 750653ff72
3 changed files with 117 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,16 +1,115 @@
import { Form } from "react-bootstrap"; import { Form } from "react-bootstrap";
import { useState } from "react";
const Filters = ({ onChange }) => { const Filters = ({ onChange }) => {
const [priceFilter, setPriceFilter] = useState("");
const [stateFilter, setStateFilter] = useState("");
const handlePriceChange = (value) =>{
setPriceFilter(value);
}
const handleStateChange = (value) =>{
setStateFilter(value);
}
return ( return (
<div className="filters-menu"> <div className="filters-menu">
<div className="filters-price-container"> <Form>
<Form> <div className="filters-price-container">
<Form.Check type="radio" aria-label="radio 1" /> <Form.Group>
<div key="price-filter-radio" onChange={e => handlePriceChange(e.target.value)}>
</Form> <Form.Check
</div> defaultChecked
<div className="filters-state-container"> label="Aucun"
</div> 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>
<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="Displonible"
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>
</div> </div>
) )
} }

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

@ -64,11 +64,10 @@ const Morceaux = (startingProducts) => {
return ( return (
<div className="morceaux"> <div className="morceaux">
<div > <div className="morceaux-options-container">
{/* className="morceaux-options-container" */} <div className='filters-container'>
{/* <div className='filters-container'>
<Filters onChange={handleFilters}/> <Filters onChange={handleFilters}/>
</div> */} </div>
<div className="sorting-container"> <div className="sorting-container">
<Sorting onChange={handleOrder} /> <Sorting onChange={handleOrder} />
</div> </div>

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

@ -466,13 +466,18 @@ html {
display: flex; display: flex;
width: 100%; width: 100%;
height: fit-content; height: fit-content;
border: black 2px solid; /* border: black 2px solid; */
margin-bottom: 16px; margin-bottom: 16px;
} }
.filters-menu{
display:flex;
}
.filters-container { .filters-container {
width: 75%; width: 75%;
border: green 2px dotted; /* border: green 2px dotted; */
margin: 0px; margin: 0px;
} }