From cf0226ea296ad19bdfaca75fe2b3e9db6d14e8fc Mon Sep 17 00:00:00 2001 From: Victor Date: Thu, 4 Apr 2024 10:31:42 +0200 Subject: [PATCH] filtres moches --- src/components/item/ItemGrid.jsx | 26 --------------- src/components/item/ItemPage.jsx | 55 ++++++++++++++++++++++++++------ 2 files changed, 46 insertions(+), 35 deletions(-) delete mode 100644 src/components/item/ItemGrid.jsx 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 (
+ setFilterName(e.target.value)} /> + +
+ setFilterPriceMin(e.target.value)} /> + - + setFilterPriceMax(e.target.value)} /> +
+ setFilterDateRange(dates)} + value={filterDateRange} + /> +
+ {rowsToDisplay.map((row, index) => (
{row.map(item => (