bing bong
This commit is contained in:
parent
80375cda05
commit
e1c126372b
@ -0,0 +1,18 @@
|
|||||||
|
import { Form } from "react-bootstrap";
|
||||||
|
|
||||||
|
const Filters = ({ onChange }) => {
|
||||||
|
return (
|
||||||
|
<div className="filters-menu">
|
||||||
|
<div className="filters-price-container">
|
||||||
|
<Form>
|
||||||
|
<Form.Check type="radio" aria-label="radio 1" />
|
||||||
|
|
||||||
|
</Form>
|
||||||
|
</div>
|
||||||
|
<div className="filters-state-container">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Filters;
|
@ -3,15 +3,16 @@ import { useEffect } from "react";
|
|||||||
import ItemList from "../components/ItemList";
|
import ItemList from "../components/ItemList";
|
||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
import Sorting from "../components/Sorting"
|
import Sorting from "../components/Sorting"
|
||||||
|
import Filters from '../components/Filters';
|
||||||
|
|
||||||
const Morceaux = (startingProducts) => {
|
const Morceaux = (startingProducts) => {
|
||||||
|
|
||||||
const [products, setProducts] = useState([]);
|
const [products, setProducts] = useState([]);
|
||||||
const [isLoading, setIsLoading] = useState(false);
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
|
const [order, setOrder] = useState("");
|
||||||
|
const [filterPrice, setFilterPrice] = useState("");
|
||||||
|
const [filterState, setFilterState] = useState("");
|
||||||
|
|
||||||
var order = "";
|
|
||||||
var filterPrice = "";
|
|
||||||
var filterState = "";
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
document.title = 'Morceaux';
|
document.title = 'Morceaux';
|
||||||
@ -48,8 +49,8 @@ const Morceaux = (startingProducts) => {
|
|||||||
|
|
||||||
const handleOrder = async (sortBy) => {
|
const handleOrder = async (sortBy) => {
|
||||||
|
|
||||||
order = sortBy;
|
setOrder(sortBy);
|
||||||
var url = `https://localhost:7292/api/Inventory?order=${order}&filterPrice=${filterPrice}&filterState=${filterState}`;
|
var url = `https://localhost:7292/api/Inventory?order=${sortBy}&filterPrice=${filterPrice}&filterState=${filterState}`;
|
||||||
setIsLoading(true);
|
setIsLoading(true);
|
||||||
const response = await fetch(url);
|
const response = await fetch(url);
|
||||||
const json = await response.json();
|
const json = await response.json();
|
||||||
@ -57,18 +58,21 @@ const Morceaux = (startingProducts) => {
|
|||||||
setProducts([...json]);
|
setProducts([...json]);
|
||||||
setIsLoading(false);
|
setIsLoading(false);
|
||||||
}
|
}
|
||||||
const handleFilterPrice = async () => {
|
const handleFilters = async () => {
|
||||||
|
|
||||||
}
|
|
||||||
const handleFilterState = async () => {
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="morceaux">
|
<div className="morceaux">
|
||||||
|
<div >
|
||||||
|
{/* className="morceaux-options-container" */}
|
||||||
|
{/* <div className='filters-container'>
|
||||||
|
<Filters onChange={handleFilters}/>
|
||||||
|
</div> */}
|
||||||
<div className="sorting-container">
|
<div className="sorting-container">
|
||||||
<Sorting onChange={handleOrder} />
|
<Sorting onChange={handleOrder} />
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<div className="morceaux-container">
|
<div className="morceaux-container">
|
||||||
<ItemList items={products} />
|
<ItemList items={products} />
|
||||||
</div>
|
</div>
|
||||||
|
@ -234,8 +234,7 @@ html {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.item-img {
|
.item-img {
|
||||||
padding-top: 2%;
|
box-shadow: 2px 5px rgba(0, 0, 0, 0.608);
|
||||||
box-shadow: 5px 5px;
|
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
display: block;
|
display: block;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
@ -463,19 +462,30 @@ html {
|
|||||||
background-color: beige;
|
background-color: beige;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sorting-container {
|
.morceaux-options-container {
|
||||||
|
display: flex;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
float: right;
|
height: fit-content;
|
||||||
margin-right: 5%;
|
border: black 2px solid;
|
||||||
margin-left: 5%;
|
margin-bottom: 16px;
|
||||||
margin-top: 15px;
|
}
|
||||||
margin-bottom: 15px;
|
|
||||||
|
.filters-container {
|
||||||
|
width: 75%;
|
||||||
|
border: green 2px dotted;
|
||||||
|
margin: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.sorting-container {
|
||||||
|
width: 20%;
|
||||||
|
height: fit-content;
|
||||||
|
margin:auto;
|
||||||
|
margin-right: 2%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sorting-dropdown {
|
.sorting-dropdown {
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
margin: auto;
|
|
||||||
float: right;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.cat-load {
|
.cat-load {
|
||||||
@ -533,22 +543,23 @@ html {
|
|||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.simple-item-top-container{
|
.simple-item-top-container {
|
||||||
display:flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
.simple-item-title{
|
.simple-item-title {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
margin-left: 0px;
|
margin-left: 0px;
|
||||||
max-width: 80%;
|
max-width: 80%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.simple-item-buttons{
|
.simple-item-buttons {
|
||||||
width:fit-content;
|
width: fit-content;
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* -------------------------------------------------------- */
|
/* -------------------------------------------------------- */
|
||||||
/* specification pour les moyennes écrans
|
/* specification pour les moyennes écrans
|
||||||
/* -------------------------------------------------------- */
|
/* -------------------------------------------------------- */
|
||||||
|
Loading…
Reference in New Issue
Block a user