filtres moches
This commit is contained in:
parent
e1897ca11a
commit
cf0226ea29
@ -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;
|
@ -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 => (
|
||||
|
Loading…
Reference in New Issue
Block a user