tests & image-request on google & inspirobot & front

src/components/item/ItemBox.jsx

@@ -1,5 +1,8 @@
 import React, { useEffect, useState } from 'react';
 import { searchAndResizeImage } from '../../api/image-request'
+import '../../assets/styles/modal.css'
+import '../../assets/styles/itembox.css'
+import FormUpdateItem from '../form/formUpdateItem';
 
 
 // Composant Image
@@ -35,12 +38,9 @@ const Image = ({ src, alt, request, _id }) => {
 
 // Composant Description
 const Description = ({ title, children }) => {
-    if (title.length >= 30) {
-        title = title.slice(0, 22 - 3) + '...'; 
-    }
   return (
     <div className="description">
-      <h2>{title}</h2>
+          <h2 className="text-ellipsis">{title}</h2>
       {children}
     </div>
   );
@@ -56,15 +56,32 @@ const Characteristic = ({ label, value }) => {
   );
 };
 
+
+
 // Composant Détails du Produit
-export const ItemBox = ({ model, brand, purchaseDate, price, onEdit, _id }) => {
+export const ItemBox = ({ model, brand, purchaseDate, price, _id }) => {
+
+    const [isModalOpen, setIsModalOpen] = useState(false);
+
+    // Fonction pour ouvrir la fenêtre modale
+    const openModal = () => {
+        setIsModalOpen(true);
+    };
+
+    // 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
 
-
     return (
         <div className="product-details" > 
             <Description title={productname} >
@@ -73,8 +90,18 @@ export const ItemBox = ({ model, brand, purchaseDate, price, onEdit, _id }) => {
                 <Characteristic label="Brand" value={brand} />
                 <Characteristic label="Purchase Date" value={formatedDate} />
                 <Characteristic label="Price" value={formatedPrice} />
+                {/* Bouton d'édition pour ouvrir la fenêtre modale */}
+                <button onClick={openModal}>Edit</button>
             </Description>
-            <button onClick={onEdit}>Edit</button>
+            {/* Fenêtre modale */}
+            {isModalOpen && (
+                <div className="modal">
+                    <div className="modal-content">
+                        <span className="close" onClick={closeModal}>&times;</span>
+                        <FormUpdateItem itemId={_id}></FormUpdateItem>
+                    </div>
+                </div>
+            )}
         </div>
     );
-};
+};

src/components/item/ItemPage.jsx

@@ -2,6 +2,8 @@ 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'
+
 
 
 const { RangePicker } = DatePicker;
@@ -111,50 +113,51 @@ export const ItemPage = () => {
   const rowsToDisplay = chunkedItems.slice(startIndex, endIndex);
 
   return (
-    <div>
-      {/* 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}>
-        <div>
-          <InputNumber placeholder="Prix min" value={filterPriceMin} onChange={value => setFilterPriceMin(value)} />
-          <span> - </span>
-          <InputNumber placeholder="Prix max" value={filterPriceMax} onChange={value => setFilterPriceMax(value)} />
-        </div>
-        <RangePicker
-          format="YYYY-MM-DD"
-          onChange={dates => setFilterDateRange(dates)}
-          value={filterDateRange}
-        />
-      </Space>
-      
-      {/* Utiliser Row et Col pour afficher les éléments */}
-      <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>
-        {rowsToDisplay.map((row, rowIndex) => (
-          <React.Fragment key={rowIndex}>
-            {row.map(item => (
-              <Col className="gutter-row" span={24 / itemsPerRow} key={item._id}>
-                <ItemBox {...item} />
-              </Col>
-            ))}
-          </React.Fragment>
-        ))}
-      </Row>
-      <div className="pagination">
-        <button onClick={handlePrevPage} disabled={currentPage === 1}>Précédente</button>
-        <span>Page {currentPage}</span>
-        <button onClick={handleNextPage} disabled={endIndex >= chunkedItems.length}>Suivante</button>
+      <div className="item-container">
+          <div className="filters">
+              <div className="filter-group">
+                  <label htmlFor="roomSelect">Chambre :</label>
+                  <Select id="roomSelect" 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>
+              </div>
+              <div className="filter-group">
+                  <label htmlFor="nameInput">Recherche par nom :</label>
+                  <Input id="nameInput" placeholder="Recherche par nom" value={filterName} onChange={e => setFilterName(e.target.value)} />
+              </div>
+              <div className="filter-group">
+                  <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 className="item-list">
+              <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>
+                  {rowsToDisplay.map((row, rowIndex) => (
+                      <React.Fragment key={rowIndex}>
+                          {row.map(item => (
+                              <Col className="gutter-row" span={24 / itemsPerRow} key={item._id}>
+                                  <ItemBox {...item} />
+                              </Col>
+                          ))}
+                      </React.Fragment>
+                  ))}
+              </Row>
+          </div>
+          <div className="pagination">
+              <button onClick={handlePrevPage} disabled={currentPage === 1}>Précédente</button>
+              <span>Page {currentPage}</span>
+              <button onClick={handleNextPage} disabled={endIndex >= chunkedItems.length}>Suivante</button>
+          </div>
       </div>
-    </div>
   );
 };