Merge branch 'dev' of https://iutbg-gitlab.iutbourg.univ-lyon1.fr/sae-but2/2025-26/gestion-benevoles-association/frontend into dev

src/pages/Events/EventsPage.jsx

@@ -1,52 +1,21 @@
 import { useEffect, useState } from "react";
 import Event from "../../components/Event/Event.jsx";
-import { Link } from "react-router";
 import styles from "./EventsPage.module.css";
-import Filter from "../../components/Filter/Filter.jsx";
+import ToolBar from "../../components/ToolBar/ToolBar.jsx";
+import filter from "../../utils/filter.js";
 import getAllEvents from "../../utils/event/getAllEvents.js";
 
 
-
 function EventsPage(){
-    const [isFilterVisible, setIsFilterVisible] = useState(false);
-    const toggleFilters = () => {
-        setIsFilterVisible(prev => !prev);
-    };
-
     const [filters, setFilters] = useState({
         alphabetical: "asc",
         yearOrder: "asc",
     });
 
+
     const [events, setEvents] = useState([]);
 
-    /*
 
-            {
-            id: 1,
-            name: "Marathon de la Ville",
-            description: "Participez au marathon annuel et soutenez les associations locales.",
-            image: null,
-            tasks: [
-                {
-                    name: "Inscription des participants",
-                    start: "2018-09-24 22:21:20",
-                    end: "2018-09-24 22:21:20",
-                    place: "Centre sportif",
-                    description: "Accueillir et enregistrer tous les coureurs.",
-                    volunteers_count: 5
-                },
-                {
-                    name: "Distribution des dossards",
-                    start: "2018-09-24 22:21:20",
-                    end: "2018-09-24 22:21:20",
-                    place: "Salle principale",
-                    description: "Remettre les dossards et goodies aux participants.",
-                    volunteers_count: 3
-                },
-            ]
-        }
-     */
 
     useEffect(() => {
         (async () => {
@@ -55,71 +24,12 @@ function EventsPage(){
         }) ()
     }, []);
 
-    const compareDate = (dateA, dateB) => {
-        const dA = new Date(dateA);
-        const dB = new Date(dateB);
-
-        if (filters.yearOrder === "asc") {
-            return dB - dA;
-        } else {
-            return dA - dB;
-        }
-    };
-
-    /*
-
-    const sortedEvents = [...events].sort((a, b) => {
-        const sortedATasks = a.tasks.sort((taskA, taskB) =>
-            compareDate(taskA.start, taskB.start)
-        );
-        const sortedBTasks = b.tasks.sort((taskA, taskB) =>
-            compareDate(taskA.start, taskB.start)
-        );
-
-        const timeComparison = compareDate(
-            sortedATasks[0].start,
-            sortedBTasks[0].start
-        );
-
-        if (timeComparison !== 0) {
-            return timeComparison;
-        }
-
-        if (filters.alphabetical !== null) {
-            return filters.alphabetical === "asc"
-                ? a.name.localeCompare(b.name)
-                : b.name.localeCompare(a.name);
-        }
-
-        return 0;
-    });
-
-     */
-
-
-
 
     return (
         <div className={styles.eventsContainer}>
-            <div className={styles.eventsButtons}>
-                <Link
-                    to="/event/create"
-                    className={`${styles.createButton} glassCard`}>
-                    +
-                </Link>
-                <div className={`${styles.filterContainer} ${isFilterVisible ? "glassCard" : ""}`}>
-                    <button className={`${isFilterVisible ? "" : styles.mobileFilter} ${styles.sortButton} glassCard`} onClick={toggleFilters}>
-                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor">
-                            <path d="M440-160q-17 0-28.5-11.5T400-200v-240L168-736q-15-20-4.5-42t36.5-22h560q26 0 36.5 22t-4.5 42L560-440v240q0 17-11.5 28.5T520-160h-80Zm40-308 198-252H282l198 252Zm0 0Z"/>
-                        </svg>
-                    </button>
-                    <div className={styles.filterMenu}>
-                        <Filter isFilterVisible={isFilterVisible} filters={filters} setFilters={setFilters}/>
-                    </div>
-                </div>
-            </div>
+            <ToolBar setFilters={setFilters} filters={filters}/>
             <div className={styles.eventsList}>
-                {events.map((event, index) => (
+                {filter(events, filters).map((event, index) => (
                     <Event key={index} event={event} />
                 ))}
             </div>

src/pages/Events/EventsPage.module.css

@@ -1,5 +1,6 @@
 .eventsContainer {
     width: 100%;
+    position: relative;
 }
 
 
@@ -7,93 +8,4 @@
     display: flex;
     align-items: center;
     flex-direction: column;
-}
-
-.eventsButtons {
-    overflow: visible;
-    position: fixed;
-    top: 10rem;
-    right: 2rem;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-end;
-    width: fit-content;
-    height: fit-content;
-    gap: 1rem;
-}
-
-
-.filterContainer{
-    padding: 0;
-    border-radius: 30px;
-    overflow: visible;
-}
-
-.filterMenu{
-    padding: 5px 5px 5px 5px;
-}
-
-
-.createButton, .sortButton {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border: none;
-    border-radius: 50%;
-    width: 55px;
-    height: 55px;
-    transition: all 0.5s ease;
-}
-
-.createButton {
-    font-size: 2rem;
-    color: #019AFF;
-}
-
-.sortButton svg {
-    transform: scale(0.8);
-    fill: #019AFF;
-}
-
-.sortButton:hover {
-    cursor: pointer;
-}
-
-.createButton:hover, .mobileFilter:hover {
-    transform: translateY(-5px);
-}
-
-
-.sortButton:focus {
-    outline: none;
-}
-.sortButton:focus-visible {
-    outline: 2px solid black;
-}
-
-
-@media screen and (max-width: 768px) {
-    .eventsButtons {
-        flex-direction: row;
-        position: relative;
-        top: 0;
-        right: 0;
-        align-items: flex-start;
-        width: 100%;
-        margin-top: 16px;
-    }
-
-    .filterContainer{
-        display: flex;
-        width: fit-content;
-    }
-
-    .filterMenu{
-        width: fit-content;
-    }
-
-    .createButton:hover, .mobileFilter:hover {
-        transform: none !important;
-    }
-}
-
+}