un peu mieux

This commit is contained in:
Victor 2024-04-04 11:38:29 +02:00
parent d33e9b29ba
commit 66cc9c6801

View File

@ -1,13 +1,15 @@
import React, { useState, useEffect } from "react"; 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 { ItemBox } from './ItemBox';
import { Space, DatePicker } from 'antd'; import { Space, DatePicker, Row, Col, Select, Input, InputNumber } from 'antd';
const { RangePicker } = DatePicker; const { RangePicker } = DatePicker;
const { Option } = Select;
const itemsPerPage = 4; const itemsPerPage = 8; // Nombre total d'items par page
const itemsPerRow = 2; const itemsPerRow = 4; // Nombre d'items par rangée
// Fonction pour diviser le tableau d'items en rangées
const chunkArray = (arr, size) => { const chunkArray = (arr, size) => {
const chunkedArr = []; const chunkedArr = [];
for (let i = 0; i < arr.length; i += size) { for (let i = 0; i < arr.length; i += size) {
@ -16,15 +18,18 @@ const chunkArray = (arr, size) => {
return chunkedArr; return chunkedArr;
}; };
// Composant d'affichage de la page
export const ItemPage = () => { export const ItemPage = () => {
const [items, setItems] = useState([]); const [items, setItems] = useState([]);
const [filteredItems, setFilteredItems] = useState([]); const [filteredItems, setFilteredItems] = useState([]); // State pour les items filtrés
const [currentPage, setCurrentPage] = useState(1); const [currentPage, setCurrentPage] = useState(1);
const [filterName, setFilterName] = useState(''); const [filterName, setFilterName] = useState('');
const [filterPriceMin, setFilterPriceMin] = useState(''); const [filterPriceMin, setFilterPriceMin] = useState('');
const [filterPriceMax, setFilterPriceMax] = useState(''); const [filterPriceMax, setFilterPriceMax] = useState('');
const [filterDateRange, setFilterDateRange] = 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(() => { useEffect(() => {
const fetchItems = async () => { const fetchItems = async () => {
@ -38,27 +43,42 @@ export const ItemPage = () => {
} }
}; };
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(); fetchItems();
fetchRooms();
}, []); }, []);
useEffect(() => { useEffect(() => {
// Filtrer les éléments chaque fois que les filtres ou la chambre sélectionnée changent
const filtered = items.filter(item => { 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()) || const matchesName = item.brand.toLowerCase().includes(filterName.toLowerCase()) ||
item.model.toLowerCase().includes(filterName.toLowerCase()); item.model.toLowerCase().includes(filterName.toLowerCase());
// Filtre prix // Filtrer par prix
const matchesPrice = const matchesPrice =
(filterPriceMin === '' || item.price >= parseFloat(filterPriceMin)) && (filterPriceMin === '' || item.price >= parseFloat(filterPriceMin)) &&
(filterPriceMax === '' || item.price <= parseFloat(filterPriceMax)); (filterPriceMax === '' || item.price <= parseFloat(filterPriceMax));
// Filtre date // Filtrer par date
const matchesDate = filterDateRange.length === 0 || ( const matchesDate = filterDateRange.length === 0 || (
new Date(item.purchaseDate) >= filterDateRange[0] && new Date(item.purchaseDate) >= filterDateRange[0] &&
new Date(item.purchaseDate) <= filterDateRange[1] new Date(item.purchaseDate) <= filterDateRange[1]
); );
return matchesName && matchesPrice && matchesDate; return matchesRoom && matchesName && matchesPrice && matchesDate;
}); });
setFilteredItems(filtered); setFilteredItems(filtered);
}, [items, filterName, filterPriceMin, filterPriceMax, filterDateRange]); }, [items, selectedRoom, filterName, filterPriceMin, filterPriceMax, filterDateRange]);
const handleNextPage = () => { const handleNextPage = () => {
setCurrentPage(prevPage => prevPage + 1); setCurrentPage(prevPage => prevPage + 1);
@ -68,6 +88,10 @@ export const ItemPage = () => {
setCurrentPage(prevPage => prevPage - 1); setCurrentPage(prevPage => prevPage - 1);
}; };
const handleRoomChange = (value) => {
setSelectedRoom(value);
};
const chunkedItems = chunkArray(filteredItems, itemsPerRow); const chunkedItems = chunkArray(filteredItems, itemsPerRow);
const startIndex = (currentPage - 1) * (itemsPerPage / itemsPerRow); const startIndex = (currentPage - 1) * (itemsPerPage / itemsPerRow);
const endIndex = startIndex + (itemsPerPage / itemsPerRow); const endIndex = startIndex + (itemsPerPage / itemsPerRow);
@ -75,12 +99,23 @@ export const ItemPage = () => {
return ( return (
<div> <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}> <Space direction="vertical" size={12}>
<div> <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> <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> </div>
<RangePicker <RangePicker
format="YYYY-MM-DD" format="YYYY-MM-DD"
@ -89,17 +124,22 @@ export const ItemPage = () => {
/> />
</Space> </Space>
{rowsToDisplay.map((row, index) => ( {/* Utiliser Row et Col pour afficher les éléments */}
<div key={index} className="item-row"> <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>
{row.map(item => ( {rowsToDisplay.map((row, rowIndex) => (
<ItemBox key={item._id} {...item} /> <React.Fragment key={rowIndex}>
))} {row.map(item => (
</div> <Col className="gutter-row" span={24 / itemsPerRow} key={item._id}>
))} <ItemBox {...item} />
</Col>
))}
</React.Fragment>
))}
</Row>
<div className="pagination"> <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> <span>Page {currentPage}</span>
<button onClick={handleNextPage} disabled={endIndex >= chunkedItems.length}>Next</button> <button onClick={handleNextPage} disabled={endIndex >= chunkedItems.length}>Suivante</button>
</div> </div>
</div> </div>
); );