{value}
@@ -26,52 +23,48 @@ const Characteristic = ({ label, value }) => {
);
};
-
-
// Composant Détails du Produit
export const ItemBox = ({ model, brand, purchaseDate, price, _id }) => {
+ const [isModalOpen, setIsModalOpen] = useState(false);
- const [isModalOpen, setIsModalOpen] = useState(false);
+ // Fonction pour ouvrir la fenêtre modale
+ const openModal = () => {
+ setIsModalOpen(true);
+ };
- // Fonction pour ouvrir la fenêtre modale
- const openModal = () => {
- setIsModalOpen(true);
- };
+ // Fonction pour fermer la fenêtre modale
+ const closeModal = () => {
+ setIsModalOpen(false);
+ };
- // Fonction pour fermer la fenêtre modale
- const closeModal = () => {
- setIsModalOpen(false);
- };
-
+ let productname = brand + " " + model;
+ let formatedPrice = price + "€";
+ let formatedDate = new Date(purchaseDate).toLocaleDateString("fr-FR");
+ let request = brand + " " + model;
-
- let productname = brand + " " + model;
- let formatedPrice = price + "€";
- let formatedDate = new Date(purchaseDate).toLocaleDateString('fr-FR');
-
- let request = brand + " " + model
-
- return (
-
-
-
-
-
-
-
- {/* Bouton d'édition pour ouvrir la fenêtre modale */}
-
-
- {/* Fenêtre modale */}
- {isModalOpen && (
-
-
- ×
- {console.log("item ID :" + _id)}
-
-
- )}
+ return (
+
+
+
+
+
+
+
+ {/* Bouton d'édition pour ouvrir la fenêtre modale */}
+
+
+ {/* Fenêtre modale pour la mise à jour */}
+ {isModalOpen && (
+
- );
-};
\ No newline at end of file
+ )}
+
+ );
+};
diff --git a/src/components/item/ItemPage.jsx b/src/components/item/ItemPage.jsx
index 70a1685..0104601 100644
--- a/src/components/item/ItemPage.jsx
+++ b/src/components/item/ItemPage.jsx
@@ -1,18 +1,16 @@
import React, { useState, useEffect } from "react";
-import axios from 'axios'; // Assurez-vous que le chemin d'importation soit correct
-import { ItemBox } from './ItemBox';
-import { Space, DatePicker, Row, Col, Select, Input, InputNumber } from 'antd';
-import '../../assets/styles/item-page.css'
-
-
+import axios from "axios";
+import { ItemBox } from "./ItemBox";
+import { DatePicker, Row, Col, Select, Input, InputNumber } from "antd";
+import "../../assets/styles/item-page.css";
+import FormCreateItem from "../form/formCreateItem";
const { RangePicker } = DatePicker;
const { Option } = Select;
-const itemsPerPage = 8; // Nombre total d'items par page
-const itemsPerRow = 4; // Nombre d'items par rangée
+const itemsPerPage = 8;
+const itemsPerRow = 4;
-// 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) {
@@ -21,39 +19,26 @@ const chunkArray = (arr, size) => {
return chunkedArr;
};
-// Composant d'affichage de la page
export const ItemPage = () => {
const [items, setItems] = useState([]);
- const [filteredItems, setFilteredItems] = useState([]); // State pour les items filtrés
+ const [filteredItems, setFilteredItems] = useState([]);
const [currentPage, setCurrentPage] = useState(1);
- const [filterName, setFilterName] = useState('');
- const [filterPriceMin, setFilterPriceMin] = useState('');
- const [filterPriceMax, setFilterPriceMax] = useState('');
+ const [filterName, setFilterName] = useState("");
+ const [filterPriceMin, setFilterPriceMin] = useState("");
+ const [filterPriceMax, setFilterPriceMax] = 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
+ const [selectedRoom, setSelectedRoom] = useState("all");
+ const [rooms, setRooms] = useState([]);
+ const [isCreateItemModalOpen, setIsCreateItemModalOpen] = useState(false);
useEffect(() => {
const fetchItems = async () => {
try {
const response = await axios.get(
`${import.meta.env.VITE_API_URL}/item`,
- );
-
- //await response.data.forEach(async (item) => {
- // let cacheUrl = localStorage.getItem(item._id);
- // if (cacheUrl == null || cacheUrl == "") {
- // let request = item.brand + " " + item.model
- // cacheUrl = await searchAndResizeImage(request)
- // await localStorage.setItem(item._id, cacheUrl)
- // console.log("mise en cache "+ item.imageUrl)
- // }
- // item.imageUrl = cacheUrl;
- //})
+ );
setItems(response.data);
- }
- catch (error) {
+ } catch (error) {
console.error(error);
}
};
@@ -68,98 +53,108 @@ export const ItemPage = () => {
console.error(error);
}
};
-
+
fetchItems();
fetchRooms();
}, []);
useEffect(() => {
- // Filtrer les éléments chaque fois que les filtres ou la chambre sélectionnée changent
- const filtered = items.filter(item => {
- // 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()) ||
- item.model.toLowerCase().includes(filterName.toLowerCase());
- // Filtrer par prix
- const matchesPrice =
- (filterPriceMin === '' || item.price >= parseFloat(filterPriceMin)) &&
- (filterPriceMax === '' || item.price <= parseFloat(filterPriceMax));
- // Filtrer par date
- const matchesDate = filterDateRange.length === 0 || (
- new Date(item.purchaseDate) >= filterDateRange[0] &&
- new Date(item.purchaseDate) <= filterDateRange[1]
- );
+ const filtered = items.filter((item) => {
+ const matchesRoom = selectedRoom === "all" || item.room === selectedRoom;
+ const matchesName =
+ item.brand.toLowerCase().includes(filterName.toLowerCase()) ||
+ item.model.toLowerCase().includes(filterName.toLowerCase());
+ const matchesPrice =
+ (filterPriceMin === "" || item.price >= parseFloat(filterPriceMin)) &&
+ (filterPriceMax === "" || item.price <= parseFloat(filterPriceMax));
+ const matchesDate =
+ filterDateRange.length === 0 ||
+ (new Date(item.purchaseDate) >= filterDateRange[0] &&
+ new Date(item.purchaseDate) <= filterDateRange[1]);
return matchesRoom && matchesName && matchesPrice && matchesDate;
});
setFilteredItems(filtered);
- }, [items, selectedRoom, filterName, filterPriceMin, filterPriceMax, filterDateRange]);
+ }, [
+ items,
+ selectedRoom,
+ filterName,
+ filterPriceMin,
+ filterPriceMax,
+ filterDateRange,
+ ]);
const handleNextPage = () => {
- setCurrentPage(prevPage => prevPage + 1);
+ setCurrentPage((prevPage) => prevPage + 1);
};
const handlePrevPage = () => {
- setCurrentPage(prevPage => prevPage - 1);
+ setCurrentPage((prevPage) => prevPage - 1);
};
const handleRoomChange = (value) => {
setSelectedRoom(value);
};
+ const handleCloseModal = () => {
+ setIsCreateItemModalOpen(false);
+ };
+
const chunkedItems = chunkArray(filteredItems, itemsPerRow);
const startIndex = (currentPage - 1) * (itemsPerPage / itemsPerRow);
- const endIndex = startIndex + (itemsPerPage / itemsPerRow);
+ const endIndex = startIndex + itemsPerPage / itemsPerRow;
const rowsToDisplay = chunkedItems.slice(startIndex, endIndex);
return (
-
-
-
-
-
-
-
-
- setFilterName(e.target.value)} />
-
-
-
- setFilterPriceMin(value)} />
- -
- setFilterPriceMax(value)} />
-
-
-
- setFilterDateRange(dates)} value={filterDateRange} />
-
-
-
-
- {rowsToDisplay.map((row, rowIndex) => (
-
- {row.map(item => (
-
-
-
- ))}
-
- ))}
-
-
-
-
-
Page {currentPage}
-
+
+
{/* Filters here */}
+
+ {/* Button to open create item modal */}
+
+
+ {/* Create item form modal */}
+ {isCreateItemModalOpen && (
+
+ )}
+
+
+
+ {rowsToDisplay.map((row, rowIndex) => (
+
+ {row.map((item) => (
+
+
+
+ ))}
+
+ ))}
+
+
+
+
+ Page {currentPage}
+
+
+
);
};
-
-
-