un peu mieux
This commit is contained in:
parent
d33e9b29ba
commit
66cc9c6801
@ -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 }}>
|
||||||
|
{rowsToDisplay.map((row, rowIndex) => (
|
||||||
|
<React.Fragment key={rowIndex}>
|
||||||
{row.map(item => (
|
{row.map(item => (
|
||||||
<ItemBox key={item._id} {...item} />
|
<Col className="gutter-row" span={24 / itemsPerRow} key={item._id}>
|
||||||
|
<ItemBox {...item} />
|
||||||
|
</Col>
|
||||||
))}
|
))}
|
||||||
</div>
|
</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>
|
||||||
);
|
);
|
||||||
|
Loading…
Reference in New Issue
Block a user