un peu mieux

src/components/item/ItemPage.jsx

@@ -1,13 +1,15 @@
 import React, { useState, useEffect } from "react";
-import axios from 'axios';
+import axios from 'axios'; // Assurez-vous que le chemin d'importation soit correct
 import { ItemBox } from './ItemBox';
-import { Space, DatePicker } from 'antd';
+import { Space, DatePicker, Row, Col, Select, Input, InputNumber } from 'antd';
 
 const { RangePicker } = DatePicker;
+const { Option } = Select;
 
-const itemsPerPage = 4;
-const itemsPerRow = 2;
+const itemsPerPage = 8; // Nombre total d'items par page
+const itemsPerRow = 4; // Nombre d'items par rangée
 
+// Fonction pour diviser le tableau d'items en rangées
 const chunkArray = (arr, size) => {
   const chunkedArr = [];
   for (let i = 0; i < arr.length; i += size) {
@@ -16,15 +18,18 @@ const chunkArray = (arr, size) => {
   return chunkedArr;
 };
 
-
+// Composant d'affichage de la page
 export const ItemPage = () => {
   const [items, setItems] = useState([]);
-  const [filteredItems, setFilteredItems] = useState([]);
+  const [filteredItems, setFilteredItems] = useState([]); // State pour les items filtrés
   const [currentPage, setCurrentPage] = useState(1);
   const [filterName, setFilterName] = useState('');
   const [filterPriceMin, setFilterPriceMin] = useState('');
   const [filterPriceMax, setFilterPriceMax] = useState('');
   const [filterDateRange, setFilterDateRange] = useState([]);
+  const [selectedRoom, setSelectedRoom] = useState('all'); // State pour la chambre sélectionnée
+
+  const [rooms, setRooms] = useState([]); // State pour stocker les chambres
 
   useEffect(() => {
     const fetchItems = async () => {
@@ -37,28 +42,43 @@ export const ItemPage = () => {
         console.error(error);
       }
     };
+
+    const fetchRooms = async () => {
+      try {
+        const response = await axios.get(
+          `${import.meta.env.VITE_API_URL}/room`,
+        );
+        setRooms(response.data);
+      } catch (error) {
+        console.error(error);
+      }
+    };
   
     fetchItems();
+    fetchRooms();
   }, []);
 
   useEffect(() => {
+    // Filtrer les éléments chaque fois que les filtres ou la chambre sélectionnée changent
     const filtered = items.filter(item => {
-      // Filtrer nom (brand / model)
+      // Filtrer par chambre si une chambre est sélectionnée
+      const matchesRoom = selectedRoom === 'all' || item.room === selectedRoom;
+      // Filtrer par nom (brand ou model)
       const matchesName = item.brand.toLowerCase().includes(filterName.toLowerCase()) ||
                          item.model.toLowerCase().includes(filterName.toLowerCase());
-      // Filtre prix
+      // Filtrer par prix
       const matchesPrice = 
         (filterPriceMin === '' || item.price >= parseFloat(filterPriceMin)) &&
         (filterPriceMax === '' || item.price <= parseFloat(filterPriceMax));
-      // Filtre date
+      // Filtrer par date
       const matchesDate = filterDateRange.length === 0 || (
         new Date(item.purchaseDate) >= filterDateRange[0] &&
         new Date(item.purchaseDate) <= filterDateRange[1]
       );
-      return matchesName && matchesPrice && matchesDate;
+      return matchesRoom && matchesName && matchesPrice && matchesDate;
     });
     setFilteredItems(filtered);
-  }, [items, filterName, filterPriceMin, filterPriceMax, filterDateRange]);
+  }, [items, selectedRoom, filterName, filterPriceMin, filterPriceMax, filterDateRange]);
 
   const handleNextPage = () => {
     setCurrentPage(prevPage => prevPage + 1);
@@ -68,6 +88,10 @@ export const ItemPage = () => {
     setCurrentPage(prevPage => prevPage - 1);
   };
 
+  const handleRoomChange = (value) => {
+    setSelectedRoom(value);
+  };
+
   const chunkedItems = chunkArray(filteredItems, itemsPerRow);
   const startIndex = (currentPage - 1) * (itemsPerPage / itemsPerRow);
   const endIndex = startIndex + (itemsPerPage / itemsPerRow);
@@ -75,12 +99,23 @@ export const ItemPage = () => {
 
   return (
     <div>
-      <input type="text" placeholder="Filter by name" value={filterName} onChange={e => setFilterName(e.target.value)} />
+      {/* Ajouter des éléments d'interface utilisateur pour les filtres */}
+      <Select defaultValue="all" style={{ width: 120 }} onChange={handleRoomChange}>
+        <Option value="all">Toutes</Option>
+        {rooms.map(room => (
+          <Option key={room._id} value={room._id}>{room.name}</Option>
+        ))}
+      </Select>
+      <Row>
+        <Col span={5}>
+          <Input placeholder="Recherche par nom" value={filterName} onChange={e => setFilterName(e.target.value)} />
+        </Col>
+      </Row>
       <Space direction="vertical" size={12}>
         <div>
-          <input type="number" placeholder="Min Price" value={filterPriceMin} onChange={e => setFilterPriceMin(e.target.value)} />
+          <InputNumber placeholder="Prix min" value={filterPriceMin} onChange={value => setFilterPriceMin(value)} />
           <span> - </span>
-          <input type="number" placeholder="Max Price" value={filterPriceMax} onChange={e => setFilterPriceMax(e.target.value)} />
+          <InputNumber placeholder="Prix max" value={filterPriceMax} onChange={value => setFilterPriceMax(value)} />
         </div>
         <RangePicker
           format="YYYY-MM-DD"
@@ -88,18 +123,23 @@ export const ItemPage = () => {
           value={filterDateRange}
         />
       </Space>
-
-      {rowsToDisplay.map((row, index) => (
-        <div key={index} className="item-row">
-          {row.map(item => (
-            <ItemBox key={item._id} {...item} />
-          ))}
-        </div>
-      ))}
+      
+      {/* Utiliser Row et Col pour afficher les éléments */}
+      <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>
+        {rowsToDisplay.map((row, rowIndex) => (
+          <React.Fragment key={rowIndex}>
+            {row.map(item => (
+              <Col className="gutter-row" span={24 / itemsPerRow} key={item._id}>
+                <ItemBox {...item} />
+              </Col>
+            ))}
+          </React.Fragment>
+        ))}
+      </Row>
       <div className="pagination">
-        <button onClick={handlePrevPage} disabled={currentPage === 1}>Previous</button>
+        <button onClick={handlePrevPage} disabled={currentPage === 1}>Précédente</button>
         <span>Page {currentPage}</span>
-        <button onClick={handleNextPage} disabled={endIndex >= chunkedItems.length}>Next</button>
+        <button onClick={handleNextPage} disabled={endIndex >= chunkedItems.length}>Suivante</button>
       </div>
     </div>
   );