add eventPicture

src/pages/EventDetail/EventDetailPage.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useContext } from "react";
+import {useEffect, useContext, useRef} from "react";
 import styles from "./EventDetailPage.module.css";
 import { useParams } from "react-router";
 import { formatDateLetter } from "../../utils/date/formatDateLetter";
@@ -8,6 +8,7 @@ import { EventDetailContext } from "../../contexts/EventDetail/EventDetailContex
 import CreateTaskBtn from "./components/CreateTaskBtn/CreateTaskBtn";
 import DeleteEventBtn from "./components/DeleteEventBtn/DeleteEventBtn";
 import EditEventBtn from "./components/EditEventBtn/EditEventBtn";
+import uploadEventPhoto from "../../utils/events/uploadEventPhoto";
 
 function EventDetailPage() {
     const params = useParams();
@@ -15,21 +16,46 @@ function EventDetailPage() {
 
     const { user } = useContext(AuthContext) as any;
     const { tasks, updateEventInfo, eventInfo } = useContext(EventDetailContext) as any;
+    const fileInputRef = useRef<HTMLInputElement | null>(null);
+    const imageUrl = eventInfo?.event_photo_path
+        ? `${import.meta.env.VITE_API_URL}/storage/${eventInfo.event_photo_path}`
+        : "/empty.png";
 
+    console.log(eventInfo);
     useEffect(() => {
         if (id) {
             updateEventInfo(id);
         }
     }, []);
+    const handleImageClick = () => {
+        if (user?.isAdmin && fileInputRef.current) {
+            fileInputRef.current?.click();
+        }
+    };
 
+    const handleFileChange = async (e: any) => {
+        const file = e.target.files[0];
+        if (!file) return;
+
+        await uploadEventPhoto(Number(id), file);
+        updateEventInfo(id);
+    };
     return (
         <div className={styles.allContent}>
             <div className={`glassCard`}>
                 <div className={styles.textImage}>
                     <img
-                        src="/icons/theme/dark.svg"
-                        alt="Illustration événement"
+                        src={imageUrl}
+                        alt="Photo événement"
                         className={styles.eventImage}
+                        onClick={handleImageClick}
+                        style={{ cursor: user?.isAdmin ? "pointer" : "default" }}
+                    />
+                    <input
+                        type="file"
+                        ref={fileInputRef}
+                        style={{ display: "none" }}
+                        onChange={handleFileChange}
                     />
 
                     <div className={styles.eventInfo}>

src/pages/Events/components/Event/Event.jsx

@@ -8,16 +8,20 @@ function Event({event}){
 
     const handleNavigate = () => navigate(`/events/` + event.id);
 
+    const imageUrl = event.event_photo_path
+        ? `${import.meta.env.VITE_API_URL}/storage/${event.event_photo_path}`
+        : "/empty.png";
+    console.log(imageUrl);
     return (
         <div className={`${styles.eventContainer} glassCard`} onClick={handleNavigate}>
             <div className={styles.eventContainerTop}>
                 <div className={styles.eventContent}>
-                    <div className={`${styles.eventImageDiv}`}>
-                        {event.image == null ? (
-                            <img src="/empty.png" className={styles.eventImage} alt="Pas de photo de l'événement" />
-                        ) : (
-                            <img src={event.image + `.png`} alt="Photo de l'événement" />
-                        )}
+                    <div className={styles.eventImageDiv}>
+                        <img
+                            src={imageUrl}
+                            className={styles.eventImage}
+                            alt="Photo de l'événement"
+                        />
                     </div>
                     <div className={styles.eventInfos}>
                         <p className={styles.eventTitle}>{event.name}</p>