diff --git a/src/components/item/ItemGrid.jsx b/src/components/item/ItemGrid.jsx
deleted file mode 100644
index d191770..0000000
--- a/src/components/item/ItemGrid.jsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react';
-import { Col, Row } from 'antd';
-import { ItemBox } from './ItemBox';
-
-const GridCell = () => (
-
-);
-
-export const ItemGrid = () => (
- <>
-
-
-
-
-
-
- >
-);
-
-export default ItemGrid;
diff --git a/src/components/item/ItemPage.jsx b/src/components/item/ItemPage.jsx
index 0c831fa..80a9823 100644
--- a/src/components/item/ItemPage.jsx
+++ b/src/components/item/ItemPage.jsx
@@ -1,11 +1,13 @@
import React, { useState, useEffect } from "react";
-import axios from 'axios'; // Assurez-vous que le chemin d'importation soit correct
+import axios from 'axios';
import { ItemBox } from './ItemBox';
+import { Space, DatePicker } from 'antd';
-const itemsPerPage = 4; // Nombre total d'items par page
-const itemsPerRow = 2; // Nombre d'items par rangée
+const { RangePicker } = DatePicker;
+
+const itemsPerPage = 4;
+const itemsPerRow = 2;
-// 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) {
@@ -14,10 +16,15 @@ const chunkArray = (arr, size) => {
return chunkedArr;
};
-// Composant d'affichage de la page
+
export const ItemPage = () => {
const [items, setItems] = useState([]);
+ const [filteredItems, setFilteredItems] = useState([]);
const [currentPage, setCurrentPage] = useState(1);
+ const [filterName, setFilterName] = useState('');
+ const [filterPriceMin, setFilterPriceMin] = useState('');
+ const [filterPriceMax, setFilterPriceMax] = useState('');
+ const [filterDateRange, setFilterDateRange] = useState([]);
useEffect(() => {
const fetchItems = async () => {
@@ -34,6 +41,25 @@ export const ItemPage = () => {
fetchItems();
}, []);
+ useEffect(() => {
+ const filtered = items.filter(item => {
+ // Filtrer nom (brand / model)
+ const matchesName = item.brand.toLowerCase().includes(filterName.toLowerCase()) ||
+ item.model.toLowerCase().includes(filterName.toLowerCase());
+ // Filtre prix
+ const matchesPrice =
+ (filterPriceMin === '' || item.price >= parseFloat(filterPriceMin)) &&
+ (filterPriceMax === '' || item.price <= parseFloat(filterPriceMax));
+ // Filtre date
+ const matchesDate = filterDateRange.length === 0 || (
+ new Date(item.purchaseDate) >= filterDateRange[0] &&
+ new Date(item.purchaseDate) <= filterDateRange[1]
+ );
+ return matchesName && matchesPrice && matchesDate;
+ });
+ setFilteredItems(filtered);
+ }, [items, filterName, filterPriceMin, filterPriceMax, filterDateRange]);
+
const handleNextPage = () => {
setCurrentPage(prevPage => prevPage + 1);
};
@@ -42,16 +68,27 @@ export const ItemPage = () => {
setCurrentPage(prevPage => prevPage - 1);
};
- // Divise les items en rangées
- const chunkedItems = chunkArray(items, itemsPerRow);
- // Calcule l'index de la première et de la dernière rangée à afficher sur la page courante
+ const chunkedItems = chunkArray(filteredItems, itemsPerRow);
const startIndex = (currentPage - 1) * (itemsPerPage / itemsPerRow);
const endIndex = startIndex + (itemsPerPage / itemsPerRow);
- // Sélectionne les rangées à afficher sur la page courante
const rowsToDisplay = chunkedItems.slice(startIndex, endIndex);
return (