les filtres fonctionnent mais le ui est laid.
This commit is contained in:
parent
f3dcc0c4d8
commit
deee825a48
@ -1,16 +1,17 @@
|
|||||||
import { Form } from "react-bootstrap";
|
import { Form } from "react-bootstrap";
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
|
import {Button} 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 handlePriceChange = (value) =>{
|
const handlePriceChange = (value) => {
|
||||||
setPriceFilter(value);
|
setPriceFilter(value);
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleStateChange = (value) =>{
|
const handleStateChange = (value) => {
|
||||||
setStateFilter(value);
|
setStateFilter(value);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -61,7 +62,7 @@ const Filters = ({ onChange }) => {
|
|||||||
</Form.Group>
|
</Form.Group>
|
||||||
</div>
|
</div>
|
||||||
<div className="filters-state-container">
|
<div className="filters-state-container">
|
||||||
<Form.Group>
|
<Form.Group>
|
||||||
<div key="state-filter-radio" onChange={e => handleStateChange(e.target.value)}>
|
<div key="state-filter-radio" onChange={e => handleStateChange(e.target.value)}>
|
||||||
<Form.Check
|
<Form.Check
|
||||||
defaultChecked
|
defaultChecked
|
||||||
@ -72,7 +73,7 @@ const Filters = ({ onChange }) => {
|
|||||||
value=""
|
value=""
|
||||||
/>
|
/>
|
||||||
<Form.Check
|
<Form.Check
|
||||||
label="Displonible"
|
label="Disponible"
|
||||||
name="stateFilter"
|
name="stateFilter"
|
||||||
type='radio'
|
type='radio'
|
||||||
id="state-available"
|
id="state-available"
|
||||||
@ -110,6 +111,9 @@ const Filters = ({ onChange }) => {
|
|||||||
</Form.Group>
|
</Form.Group>
|
||||||
</div>
|
</div>
|
||||||
</Form>
|
</Form>
|
||||||
|
<Button onClick={() => { onChange(priceFilter, stateFilter) }} className='btn-filter'>
|
||||||
|
Filtrer
|
||||||
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -58,15 +58,24 @@ const Morceaux = (startingProducts) => {
|
|||||||
setProducts([...json]);
|
setProducts([...json]);
|
||||||
setIsLoading(false);
|
setIsLoading(false);
|
||||||
}
|
}
|
||||||
const handleFilters = async () => {
|
|
||||||
|
|
||||||
|
const handleFilters = async (price, state) => {
|
||||||
|
setFilterPrice(price);
|
||||||
|
setFilterState(state);
|
||||||
|
var url = `https://localhost:7292/api/Inventory?order=${order}&filterPrice=${price}&filterState=${state}`;
|
||||||
|
setIsLoading(true);
|
||||||
|
const response = await fetch(url);
|
||||||
|
const json = await response.json();
|
||||||
|
if (json.length > 0)
|
||||||
|
setProducts([...json]);
|
||||||
|
setIsLoading(false);
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="morceaux">
|
<div className="morceaux">
|
||||||
<div className="morceaux-options-container">
|
<div 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} />
|
||||||
|
Loading…
Reference in New Issue
Block a user