Compare commits

..

2 Commits

Author SHA1 Message Date
Victor
e321927283 Merge branch 'main' of https://grond.iut-fbleau.fr/descampsv/2024-DEV-BUT3 2024-04-04 10:33:20 +02:00
Victor
cf0226ea29 filtres moches 2024-04-04 10:31:42 +02:00
2 changed files with 46 additions and 35 deletions

View File

@ -1,26 +0,0 @@
import React from 'react';
import { Col, Row } from 'antd';
import { ItemBox } from './ItemBox';
const GridCell = () => (
<ItemBox
imageUrl="https://www.shutterstock.com/image-vector/default-ui-image-placeholder-wireframes-600nw-1037719192.jpg"
brandName="GlubGlub GabGalab"
price={666}
modelName="Satanus"
purchaseDate="-6 avant Marcel PAGNOL"
/>
);
export const ItemGrid = () => (
<>
<Row gutter={16}>
<Col span={6}><GridCell /></Col>
<Col span={6}><GridCell /></Col>
<Col span={6}><GridCell /></Col>
<Col span={6}><GridCell /></Col>
</Row>
</>
);
export default ItemGrid;

View File

@ -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 (
<div>
<input type="text" placeholder="Filter by name" value={filterName} onChange={e => setFilterName(e.target.value)} />
<Space direction="vertical" size={12}>
<div>
<input type="number" placeholder="Min Price" value={filterPriceMin} onChange={e => setFilterPriceMin(e.target.value)} />
<span> - </span>
<input type="number" placeholder="Max Price" value={filterPriceMax} onChange={e => setFilterPriceMax(e.target.value)} />
</div>
<RangePicker
format="YYYY-MM-DD"
onChange={dates => setFilterDateRange(dates)}
value={filterDateRange}
/>
</Space>
{rowsToDisplay.map((row, index) => (
<div key={index} className="item-row">
{row.map(item => (