descampsv/2024-DEV-BUT3
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix jsp pein de truc en vrais

Browse Source
This commit is contained in:
Victor 2024-05-13 00:13:34 +02:00
parent 18b7052259
commit 2868efcda4
5 changed files with 1158 additions and 981 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1642
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

9
src/components/form/formCreateItem.jsx
View File

@ -1,11 +1,12 @@
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import { Form, Input, InputNumber, Button, Select } from "antd"; import { Form, Input, InputNumber, Button, Select, DatePicker } from "antd";
import axios from "axios"; import axios from "axios";
const { TextArea } = Input; const { TextArea } = Input;
const { Option } = Select; const { Option } = Select;
const dateFormat = "YYYY-MM-DD";
export const FormCreateItem = () => { export const FormCreateItem = ({ onClose }) => {
const [form] = Form.useForm(); const [form] = Form.useForm();
const [rooms, setRooms] = useState([]); const [rooms, setRooms] = useState([]);
@ -31,6 +32,8 @@ export const FormCreateItem = () => {
values, values,
); );
console.log(response.data); console.log(response.data);
// Fermer la fenêtre modale après soumission réussie
onClose();
} catch (error) { } catch (error) {
console.error(error); console.error(error);
} }
@ -58,7 +61,7 @@ export const FormCreateItem = () => {
<InputNumber /> <InputNumber />
</Form.Item> </Form.Item>
<Form.Item label="Purchase Date" name="purchaseDate"> <Form.Item label="Purchase Date" name="purchaseDate">
<Input /> <DatePicker format={dateFormat} />
</Form.Item> </Form.Item>
<Form.Item label="Description" name="description"> <Form.Item label="Description" name="description">
<TextArea rows={4} /> <TextArea rows={4} />

42
src/components/form/formUpdateItem.jsx
View File

@ -3,14 +3,27 @@ import { Form, Input, InputNumber, Button, Select, DatePicker } from "antd";
import axios from "axios"; import axios from "axios";
import { getRooms } from "../../api/room"; import { getRooms } from "../../api/room";
import { getItem } from "../../api/item"; import { getItem } from "../../api/item";
import moment from 'moment'; import moment from "moment";
const { Option } = Select; const { Option } = Select;
function formatItem(itemObj) { function formatItem(itemObj) {
const {_id,brand,model,room,price,purchaseDate,description,categories,createdAt,updatedAt,__v,link} = itemObj const {
const formattedPurchaseDate = typeof purchaseDate === 'string' ? new Date(purchaseDate) : purchaseDate; _id,
brand,
model,
room,
price,
purchaseDate,
description,
categories,
createdAt,
updatedAt,
__v,
link,
} = itemObj;
const formattedPurchaseDate =
typeof purchaseDate === "string" ? new Date(purchaseDate) : purchaseDate;
return { return {
_id, _id,
@ -24,14 +37,14 @@ function formatItem(itemObj) {
createdAt, createdAt,
updatedAt, updatedAt,
__v, __v,
link link,
}; };
} }
export const FormUpdateItem = ({ itemId }) => { export const FormUpdateItem = ({ itemId, onClose }) => {
const [form] = Form.useForm(); const [form] = Form.useForm();
const [rooms, setRooms] = useState([]); const [rooms, setRooms] = useState([]);
const [item, setItem] = useState(null) const [item, setItem] = useState(null);
useEffect(() => { useEffect(() => {
const fetchData = async () => { const fetchData = async () => {
@ -39,7 +52,7 @@ export const FormUpdateItem = ({ itemId }) => {
setRooms(roomsResponse); setRooms(roomsResponse);
const itemResponse = await getItem(itemId); const itemResponse = await getItem(itemId);
console.log(itemResponse) console.log(itemResponse);
setItem(formatItem(itemResponse)); setItem(formatItem(itemResponse));
}; };
@ -62,17 +75,19 @@ export const FormUpdateItem = ({ itemId }) => {
values, values,
); );
console.log(response.data); console.log(response.data);
// Fermer la fenêtre modale après soumission réussie
onClose();
} catch (error) { } catch (error) {
console.error(error); console.error(error);
} }
}; };
const dateFormat = 'YYYY-MM-DD'; const dateFormat = "YYYY-MM-DD";
return ( return (
<Form <Form
form={form} form={form}
onFinish={onFinish} onFinish={onFinish}
initialValues={item} // Initialise le formulaire avec les valeurs de l'élément initialValues={item} // Initialise le formulaire avec les valeurs de l'élément
> >
<h1>Update Item</h1> <h1>Update Item</h1>
<Form.Item label="Brand" name="brand"> <Form.Item label="Brand" name="brand">
@ -84,8 +99,7 @@ export const FormUpdateItem = ({ itemId }) => {
<Form.Item label="Room" name="room"> <Form.Item label="Room" name="room">
<Select placeholder="Select a room"> <Select placeholder="Select a room">
{console.log(rooms)} {console.log(rooms)}
{ {rooms.map((room) => (
rooms.map((room) => (
<Option key={room._id} value={room._id}> <Option key={room._id} value={room._id}>
{room.name} {room.name}
</Option> </Option>
@ -96,9 +110,7 @@ export const FormUpdateItem = ({ itemId }) => {
<InputNumber /> <InputNumber />
</Form.Item> </Form.Item>
<Form.Item label="Purchase Date" name="purchaseDate"> <Form.Item label="Purchase Date" name="purchaseDate">
<DatePicker <DatePicker dateFormat={dateFormat} />
dateFormat={dateFormat}
/>
</Form.Item> </Form.Item>
<Form.Item label="Description" name="description"> <Form.Item label="Description" name="description">
<Input.TextArea rows={4} /> <Input.TextArea rows={4} />

35
src/components/item/ItemBox.jsx
View File

@ -1,10 +1,8 @@
import React, { useEffect, useState } from 'react'; import React, { useState } from "react";
import '../../assets/styles/modal.css' import "../../assets/styles/modal.css";
import '../../assets/styles/itembox.css' import "../../assets/styles/itembox.css";
import FormUpdateItem from '../form/formUpdateItem'; import FormUpdateItem from "../form/formUpdateItem";
import {Image } from '../parts/image' import { Image } from "../parts/image";
// Composant Description // Composant Description
const Description = ({ title, children }) => { const Description = ({ title, children }) => {
@ -18,7 +16,6 @@ const Description = ({ title, children }) => {
// Composant Caractéristique // Composant Caractéristique
const Characteristic = ({ label, value }) => { const Characteristic = ({ label, value }) => {
return ( return (
<div className="characteristic"> <div className="characteristic">
<strong>{label}:</strong> {value} <strong>{label}:</strong> {value}
@ -26,11 +23,8 @@ const Characteristic = ({ label, value }) => {
); );
}; };
// Composant Détails du Produit // Composant Détails du Produit
export const ItemBox = ({ model, brand, purchaseDate, price, _id }) => { 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 // Fonction pour ouvrir la fenêtre modale
@ -43,18 +37,15 @@ export const ItemBox = ({ model, brand, purchaseDate, price, _id }) => {
setIsModalOpen(false); setIsModalOpen(false);
}; };
let productname = brand + " " + model; let productname = brand + " " + model;
let formatedPrice = price + "€"; let formatedPrice = price + "€";
let formatedDate = new Date(purchaseDate).toLocaleDateString('fr-FR'); let formatedDate = new Date(purchaseDate).toLocaleDateString("fr-FR");
let request = brand + " " + model let request = brand + " " + model;
return ( return (
<div className="product-details" > <div className="product-details">
<Description title={productname} > <Description title={productname}>
<Image request={request} _id={_id} alt="Product" /> <Image request={request} _id={_id} alt="Product" />
<Characteristic label="Model" value={model} /> <Characteristic label="Model" value={model} />
<Characteristic label="Brand" value={brand} /> <Characteristic label="Brand" value={brand} />
@ -63,12 +54,14 @@ export const ItemBox = ({ model, brand, purchaseDate, price, _id }) => {
{/* Bouton d'édition pour ouvrir la fenêtre modale */} {/* Bouton d'édition pour ouvrir la fenêtre modale */}
<button onClick={openModal}>Edit</button> <button onClick={openModal}>Edit</button>
</Description> </Description>
{/* Fenêtre modale */} {/* Fenêtre modale pour la mise à jour */}
{isModalOpen && ( {isModalOpen && (
<div className="modal"> <div className="modal">
<div className="modal-content"> <div className="modal-content">
<span className="close" onClick={closeModal}>&times;</span> <span className="close" onClick={closeModal}>
<FormUpdateItem itemId={_id}>{console.log("item ID :" + _id)}</FormUpdateItem> &times;
</span>
<FormUpdateItem itemId={_id} onClose={closeModal} />
</div> </div>
</div> </div>
)} )}

151
src/components/item/ItemPage.jsx
View File

@ -1,18 +1,16 @@
import React, { useState, useEffect } from "react"; 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 { ItemBox } from "./ItemBox";
import { Space, DatePicker, Row, Col, Select, Input, InputNumber } from 'antd'; import { DatePicker, Row, Col, Select, Input, InputNumber } from "antd";
import '../../assets/styles/item-page.css' import "../../assets/styles/item-page.css";
import FormCreateItem from "../form/formCreateItem";
const { RangePicker } = DatePicker; const { RangePicker } = DatePicker;
const { Option } = Select; const { Option } = Select;
const itemsPerPage = 8; // Nombre total d'items par page const itemsPerPage = 8;
const itemsPerRow = 4; // Nombre d'items par rangée const itemsPerRow = 4;
// 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) {
@ -21,18 +19,17 @@ 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([]); // State pour les items filtrés const [filteredItems, setFilteredItems] = useState([]);
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 [selectedRoom, setSelectedRoom] = useState("all");
const [rooms, setRooms] = useState([]);
const [rooms, setRooms] = useState([]); // State pour stocker les chambres const [isCreateItemModalOpen, setIsCreateItemModalOpen] = useState(false);
useEffect(() => { useEffect(() => {
const fetchItems = async () => { const fetchItems = async () => {
@ -40,20 +37,8 @@ export const ItemPage = () => {
const response = await axios.get( const response = await axios.get(
`${import.meta.env.VITE_API_URL}/item`, `${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); setItems(response.data);
} } catch (error) {
catch (error) {
console.error(error); console.error(error);
} }
}; };
@ -74,77 +59,82 @@ export const ItemPage = () => {
}, []); }, []);
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 => { const matchesRoom = selectedRoom === "all" || item.room === selectedRoom;
// Filtrer par chambre si une chambre est sélectionnée const matchesName =
const matchesRoom = selectedRoom === 'all' || item.room === selectedRoom; item.brand.toLowerCase().includes(filterName.toLowerCase()) ||
// Filtrer par nom (brand ou model)
const matchesName = item.brand.toLowerCase().includes(filterName.toLowerCase()) ||
item.model.toLowerCase().includes(filterName.toLowerCase()); item.model.toLowerCase().includes(filterName.toLowerCase());
// 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));
// Filtrer par date const matchesDate =
const matchesDate = filterDateRange.length === 0 || ( 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 matchesRoom && matchesName && matchesPrice && matchesDate; return matchesRoom && matchesName && matchesPrice && matchesDate;
}); });
setFilteredItems(filtered); setFilteredItems(filtered);
}, [items, selectedRoom, filterName, filterPriceMin, filterPriceMax, filterDateRange]); }, [
items,
selectedRoom,
filterName,
filterPriceMin,
filterPriceMax,
filterDateRange,
]);
const handleNextPage = () => { const handleNextPage = () => {
setCurrentPage(prevPage => prevPage + 1); setCurrentPage((prevPage) => prevPage + 1);
}; };
const handlePrevPage = () => { const handlePrevPage = () => {
setCurrentPage(prevPage => prevPage - 1); setCurrentPage((prevPage) => prevPage - 1);
}; };
const handleRoomChange = (value) => { const handleRoomChange = (value) => {
setSelectedRoom(value); setSelectedRoom(value);
}; };
const handleCloseModal = () => {
setIsCreateItemModalOpen(false);
};
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;
const rowsToDisplay = chunkedItems.slice(startIndex, endIndex); const rowsToDisplay = chunkedItems.slice(startIndex, endIndex);
return ( return (
<div className="item-container"> <div className="item-container">
<div className="filters"> <div className="filters">{/* Filters here */}</div>
<div className="filter-group">
<label htmlFor="roomSelect">Chambre :</label> {/* Button to open create item modal */}
<Select id="roomSelect" defaultValue="all" style={{ width: 120 }} onChange={handleRoomChange}> <button onClick={() => setIsCreateItemModalOpen(true)}>
<Option value="all">Toutes</Option> Create Item
{rooms.map(room => ( </button>
<Option key={room._id} value={room._id}>{room.name}</Option>
))} {/* Create item form modal */}
</Select> {isCreateItemModalOpen && (
</div> <div className="modal">
<div className="filter-group"> <div className="modal-content">
<label htmlFor="nameInput">Recherche par nom :</label> <span className="close" onClick={handleCloseModal}>
<Input id="nameInput" placeholder="Recherche par nom" value={filterName} onChange={e => setFilterName(e.target.value)} /> &times;
</div> </span>
<div className="filter-group"> <FormCreateItem onClose={handleCloseModal} />
<label>Prix :</label>
<InputNumber placeholder="Prix min" value={filterPriceMin} onChange={value => setFilterPriceMin(value)} />
<span> - </span>
<InputNumber placeholder="Prix max" value={filterPriceMax} onChange={value => setFilterPriceMax(value)} />
</div>
<div className="filter-group">
<label>Date d'achat :</label>
<RangePicker format="YYYY-MM-DD" onChange={dates => setFilterDateRange(dates)} value={filterDateRange} />
</div> </div>
</div> </div>
)}
<div className="item-list"> <div className="item-list">
<Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}> <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>
{rowsToDisplay.map((row, rowIndex) => ( {rowsToDisplay.map((row, rowIndex) => (
<React.Fragment key={rowIndex}> <React.Fragment key={rowIndex}>
{row.map(item => ( {row.map((item) => (
<Col className="gutter-row" span={24 / itemsPerRow} key={item._id}> <Col
className="gutter-row"
span={24 / itemsPerRow}
key={item._id}
>
<ItemBox {...item} /> <ItemBox {...item} />
</Col> </Col>
))} ))}
@ -152,14 +142,19 @@ export const ItemPage = () => {
))} ))}
</Row> </Row>
</div> </div>
<div className="pagination"> <div className="pagination">
<button onClick={handlePrevPage} disabled={currentPage === 1}>Précédente</button> <button onClick={handlePrevPage} disabled={currentPage === 1}>
Previous
</button>
<span>Page {currentPage}</span> <span>Page {currentPage}</span>
<button onClick={handleNextPage} disabled={endIndex >= chunkedItems.length}>Suivante</button> <button
onClick={handleNextPage}
disabled={endIndex >= chunkedItems.length}
>
Next
</button>
</div> </div>
</div> </div>
); );
}; };