GrossesMitaines/grosses-mitaines-ui/src/components/Filters.js

@@ -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;

GrossesMitaines/grosses-mitaines-ui/src/pages/Morceaux.js

@@ -3,15 +3,16 @@ import { useEffect } from "react";
 import ItemList from "../components/ItemList";
 import { useState } from 'react';
 import Sorting from "../components/Sorting"
+import Filters from '../components/Filters';
 
 const Morceaux = (startingProducts) => {
 
     const [products, setProducts] = useState([]);
     const [isLoading, setIsLoading] = useState(false);
+    const [order, setOrder] = useState("");
+    const [filterPrice, setFilterPrice] = useState("");
+    const [filterState, setFilterState] = useState("");
 
-    var order = "";
-    var filterPrice = "";
-    var filterState = "";
 
     useEffect(() => {
         document.title = 'Morceaux';
@@ -48,8 +49,8 @@ const Morceaux = (startingProducts) => {
 
     const handleOrder = async (sortBy) => {
 
-        order = sortBy;
-        var url = `https://localhost:7292/api/Inventory?order=${order}&filterPrice=${filterPrice}&filterState=${filterState}`;
+        setOrder(sortBy);
+        var url = `https://localhost:7292/api/Inventory?order=${sortBy}&filterPrice=${filterPrice}&filterState=${filterState}`;
         setIsLoading(true);
         const response = await fetch(url);
         const json = await response.json();
@@ -57,17 +58,20 @@ const Morceaux = (startingProducts) => {
             setProducts([...json]);
         setIsLoading(false);
     }
-    const handleFilterPrice = async () => {
-
-    }
-    const handleFilterState = async () => {
+    const handleFilters = async () => {
 
     }
 
     return (
         <div className="morceaux">
-            <div className="sorting-container">
-                <Sorting onChange={handleOrder} />
+            <div >
+                {/* className="morceaux-options-container" */}
+                {/* <div className='filters-container'>
+                    <Filters onChange={handleFilters}/>
+                </div> */}
+                <div className="sorting-container">
+                    <Sorting onChange={handleOrder} />
+                </div>
             </div>
             <div className="morceaux-container">
                 <ItemList items={products} />

GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css

@@ -234,8 +234,7 @@ html {
 }
 
 .item-img {
-    padding-top: 2%;
-    box-shadow: 5px 5px;
+    box-shadow: 2px 5px rgba(0, 0, 0, 0.608);
     border-radius: 2px;
     display: block;
     margin-right: auto;
@@ -463,19 +462,30 @@ html {
     background-color: beige;
 }
 
-.sorting-container {
+.morceaux-options-container {
+    display: flex;
     width: 100%;
-    float: right;
-    margin-right: 5%;
-    margin-left: 5%;
-    margin-top: 15px;
-    margin-bottom: 15px;
+    height: fit-content;
+    border: black 2px solid;
+    margin-bottom: 16px;
+}
+
+.filters-container {
+    width: 75%;
+    border: green 2px dotted;
+    margin: 0px;
+}
+
+
+.sorting-container {
+    width: 20%;
+    height: fit-content;
+    margin:auto;
+    margin-right: 2%;
 }
 
 .sorting-dropdown {
     width: fit-content;
-    margin: auto;
-    float: right;
 }
 
 .cat-load {
@@ -533,22 +543,23 @@ html {
     margin-bottom: 10px;
 }
 
-.simple-item-top-container{
-    display:flex;
+.simple-item-top-container {
+    display: flex;
 }
 
-.simple-item-title{
+.simple-item-title {
     text-align: left;
     margin: auto;
     margin-left: 0px;
     max-width: 80%;
 }
 
-.simple-item-buttons{
-    width:fit-content;
+.simple-item-buttons {
+    width: fit-content;
     margin-right: 5px;
 }
 
+
 /* -------------------------------------------------------- */
 /* specification pour les moyennes écrans
 /* -------------------------------------------------------- */