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>
     );
-};
+};