implement incomplet events

2026-01-12 15:40:22 +01:00
parent 5059e51e3f
commit 263e7fea46
3 changed files with 123 additions and 181 deletions
@@ -1,35 +1,87 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import styles from "./IncompleteEvent.module.css";
+import getAllEvents from "../../utils/event/getAllEvents";

 function IncompleteEvent() {
-  const incompleteEvents = [
-  { title: "Événement A", tasks: ["Communication sur les réseaux", "Enormément de comm", "Toujours + de comm,Communication sur les réseaux",
-     "Enormément de comm", "Toujours + de comm","Communication sur les réseaux", "Enormément de comm", "Toujours + de comm","Communication sur les réseaux", "Enormément de comm", "Toujours + de comm]"] },
-  { title: "Événement B", tasks: ["Réservation de la salle", "Vérification du matériel"] },
-  { title: "Événement C", tasks: ["Communication sur les réseaux", "Enormément de comm", "Toujours + de comm"] },
-  { title: "Événement D", tasks: ["Communication sur les réseaux", "Enormément de comm", "Toujours + de comm"] },
-  { title: "Événement E", tasks: ["Communication sur les réseaux", "Enormément de comm", "Toujours + de comm,Communication sur les réseaux",
-     "Enormément de comm", "Toujours + de comm","Communication sur les réseaux", "Enormément de comm", "Toujours + de comm","Communication sur les réseaux", "Enormément de comm", "Toujours + de comm]"] },
-  { title: "Événement F", tasks: ["Communication sur les réseaux", "Enormément de comm", "Toujours + de comm,Communication sur les réseaux",
-     "Enormément de comm", "Toujours + de comm","Communication sur les réseaux", "Enormément de comm", "Toujours + de comm","Communication sur les réseaux", "Enormément de comm", "Toujours + de comm]"] },
-  { title: "Événement G", tasks: ["Communication sur les réseaux", "Enormément de comm", "Toujours + de comm,Communication sur les réseaux",
-     "Enormément de comm", "Toujours + de comm","Communication sur les réseaux", "Enormément de comm", "Toujours + de comm","Communication sur les réseaux", "Enormément de comm", "Toujours + de comm]"] },
-];
+  const [events, setEvents] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    const fetchEvents = async () => {
+      try {
+        const data = await getAllEvents();
+        if (data) {
+          setEvents(data);
+        } else {
+          setError("Aucun événement trouvé.");
+        }
+      } catch (err) {
+        setError("Erreur lors de la récupération des événements.");
+        console.error(err);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchEvents();
+  }, []);
+
+  if (loading) {
+    return (
+      <div className={`${styles.rightBlock} glassCard`}>
+        <h2>Derniers événements</h2>
+        <div className={styles.eventsContainer}>
+          <div className={`${styles.emptyEvent} glassCard`}>
+            <p>Chargement des événements...</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className={`${styles.rightBlock} glassCard`}>
+        <h2>Derniers événements</h2>
+        <div className={styles.eventsContainer}>
+          <div className={`${styles.emptyEvent} glassCard`}>
+            <p>{error}</p>
+          </div>
+        </div>
+      </div>
+    );
+  }

  return (
    <div className={`${styles.rightBlock} glassCard`}>
-      <h2>Événements incomplets</h2>
+      <h2>Derniers événements</h2>
      <div className={styles.eventsContainer}>
-        {incompleteEvents.map((event, index) => (
-          <div key={index} className={`glassCard ${styles.eventCard}`}>
-            <h3>{event.title}</h3>
-            <ul className={styles.tasksList}>
-            {event.tasks.map((task, taskIndex) => (
-              <li key={taskIndex}>{task}</li>
-            ))}
-          </ul>
+        {events.length > 0 ? (
+          events.map((event, index) => (
+            <div key={event.id} className={`glassCard ${styles.eventCard}`}>
+              <h3>{event.name}</h3>
+              <p className={styles.eventDate}>
+                {new Date(event.start).toLocaleDateString("fr-FR")} - {new Date(event.end).toLocaleDateString("fr-FR")}
+              </p>
+              <p className={styles.eventDescription}>{event.description}</p>
+              <h4>Tâches associées :</h4>
+              <ul className={styles.tasksList}>
+                {event.tasks && event.tasks.length > 0 ? (
+                  event.tasks.map((task, taskIndex) => (
+                    <li key={taskIndex}>{task.name}</li>
+                  ))
+                ) : (
+                  <li>Aucune tâche associée.</li>
+                )}
+              </ul>
+            </div>
+          ))
+        ) : (
+          <div className={`${styles.emptyEvent} glassCard`}>
+            <p>Aucun événement disponible.</p>
          </div>
-        ))}
+        )}
      </div>
    </div>
  );
@@ -2,7 +2,7 @@
  width: 100%;
 }

-.rightBlock>h2 {
+.rightBlock > h2 {
  font-size: 29px;
 }

@@ -17,34 +17,6 @@
  scroll-behavior: smooth;
 }

-.eventCard ul {
-  align-items: center;
-  margin-left: 8%;
-}
-
-.eventCard ul li {
-  text-align: left;
-  list-style-type: circle;
-}
-
-/*.eventsContainer::-webkit-scrollbar {
-  height: 8px;
-}
-
-.eventsContainer::-webkit-scrollbar-track {
-  background: rgba(0, 0, 0, 0.1);
-  border-radius: 10px;
-}
-
-.eventsContainer::-webkit-scrollbar-thumb {
-  background: rgba(30, 96, 249, 0.5);
-  border-radius: 10px;
-}
-
-.eventsContainer::-webkit-scrollbar-thumb:hover {
-  background: rgba(30, 96, 249, 0.7);
-}*/
-
 .eventCard {
  min-width: calc((100% - 20px) / 3);
  max-width: calc((100% - 20px) / 3);
@@ -53,44 +25,49 @@
  overflow-y: auto;
  padding: 10px;
  text-align: center;
-  padding-bottom: 200px;
  box-sizing: border-box;
  opacity: 0;
  transform: translateX(20px);
  animation: slideInEvent 1s ease forwards;
+  flex-shrink: 0;
+}

-  flex-shrink: 1;
+.eventCard ul {
+  align-items: center;
+  margin-left: 8%;
+  padding-left: 15px;
+}
+
+.eventCard ul li {
+  text-align: left;
+  list-style-type: circle;
+}
+
+.eventCard > h3 {
+  font-size: 24px;
+}
+
+/* Animation des cartes avec délais */
+.eventCard:nth-child(1) { animation-delay: 0s; }
+.eventCard:nth-child(2) { animation-delay: 0.1s; }
+.eventCard:nth-child(3) { animation-delay: 0.2s; }
+.eventCard:nth-child(4) { animation-delay: 0.3s; }
+.eventCard:nth-child(5) { animation-delay: 0.4s; }
+.eventCard:nth-child(6) { animation-delay: 0.5s; }
+
+.emptyEvent {
+  min-width: calc((100% - 20px) / 3);
+  max-width: calc((100% - 20px) / 3);
+  min-height: 250px;
+  max-height: 250px;
  padding: 10px;
  text-align: center;
  box-sizing: border-box;
-}
-
-.eventCard:nth-child(1) {
-  animation-delay: 0s;
-}
-
-.eventCard:nth-child(2) {
-  animation-delay: 0.1s;
-}
-
-.eventCard:nth-child(3) {
-  animation-delay: 0.2s;
-}
-
-.eventCard:nth-child(4) {
-  animation-delay: 0.3s;
-}
-
-.eventCard:nth-child(5) {
-  animation-delay: 0.4s;
-}
-
-.eventCard:nth-child(6) {
-  animation-delay: 0.5s;
-}
-
-.eventCard>h3 {
-  font-size: 24px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  opacity: 1;
+  flex-shrink: 0;
 }

@keyframes slideInEvent {
@@ -98,19 +75,19 @@
    opacity: 0;
    transform: translateX(20px);
  }
-
  to {
    opacity: 1;
    transform: translateX(0);
  }
 }

+/* Adaptation pour mobile */
@media screen and (max-width: 760px) {
  .eventCard {
    min-width: 100%;
    min-height: 200px;
    max-height: fit-content;
-    padding-bottom: 0px;
+    padding-bottom: 0;
  }

  .eventCard h3 {
@@ -118,18 +95,21 @@
  }

  .eventsContainer {
-    display: flex;
    flex-direction: column;
-    gap: 10px;
    max-height: 300px;
    margin-top: 15px;
    height: fit-content;
    overflow-y: auto;
-    padding-bottom: 0px;
-    scroll-behavior: smooth;
+    padding-bottom: 0;
  }

-  .rightBlock>h2 {
+  .rightBlock > h2 {
    font-size: 18px;
  }
-}
+
+  .emptyEvent {
+    min-width: 100%;
+    min-height: 200px;
+    max-height: fit-content;
+  }
+}
@@ -1,93 +1,3 @@
-/*import React, { useState } from "react";
-import { Doughnut } from "react-chartjs-2";
-import { Chart, ArcElement } from "chart.js";
-import { MenuItem, Select, FormControl } from "@mui/material";
-import styles from "./ParticipationChart.module.css";
-
-Chart.register(ArcElement);
-
-function participationChart() {
-  const [selected, setSelected] = useState("3");
-  const [participationRate, setParticipationRate] = useState(78);
-
-  const chartData = {
-    labels: ["Progress", "Background"],
-    datasets: [
-      {
-        data: [participationRate, 100 - participationRate],
-        backgroundColor: ["#1e60f9ff", "#ffffffff"],
-        borderWidth: 0,
-        weight: 10,
-        cutout: "93%",
-        circumference: 360,
-        rotation: -90,
-      },
-    ],
-  };
-
-  const chartOptions = {
-    responsive: true,
-    plugins: {
-      legend: { display: false },
-      tooltip: { enabled: false },
-    },
-    animation: {
-      animateScale: true,
-      animateRotate: true,
-    },
-  };
-
-  return (
-    <div className={`${styles.leftBlock} glassCard`}>
-      <div className={styles.participationHeader}>
-        <div className={`${styles.partiText} glassCard`}>
-          <label htmlFor={styles.months}>Taux de participation depuis :</label>
-          <div className={styles.formControl}>
-            <FormControl className={styles.formDesign}>
-              <Select
-                value={selected}
-                onChange={(e) => setSelected(e.target.value)}
-                sx={{
-                  width: "100px",
-                  height: "35px",
-                  fontSize: "19px",
-                  paddingBottom: "-2px",
-                  "& .MuiOutlinedInput-notchedOutline": { border: "none" },
-                  "& .MuiSelect-select": { padding: "8px", paddingRight: "24px !important" },
-                  "& .MuiSvgIcon-root": { fontSize: "20px" },
-                }}
-                MenuProps={{
-                  PaperProps: {
-                    sx: {
-                      className: "glassCard",
-                      borderRadius: "7px",
-                      width: "100px",
-                      maxWidth: "100px",
-                    },
-                  },
-                }}
-                displayEmpty
-              >
-                <MenuItem value="1" sx={{ fontSize: "18px" }}>1 mois</MenuItem>
-                <MenuItem value="3" sx={{ fontSize: "18px" }}>3 mois</MenuItem>
-                <MenuItem value="6" sx={{ fontSize: "18px" }}>6 mois</MenuItem>
-                <MenuItem value="12" sx={{ fontSize: "18px" }}>12 mois</MenuItem>
-              </Select>
-            </FormControl>
-          </div>
-        </div>
-      </div>
-      <div className={styles.chartContainer}>
-        <div className={styles.chartWrapper}>
-          <Doughnut data={chartData} options={chartOptions} />
-          <div className={styles.chartPercentage}>{participationRate}%</div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default participationChart;*/
 import React, { useState } from "react";
 import { Doughnut } from "react-chartjs-2";
 import { Chart, ArcElement } from "chart.js";