Merge branch 'feature/createEvent' into 'dev'

Feature/createevent

See merge request sae-but2/2025-26/gestion-benevoles-association/Frontend!42

src/components/ToolBar/ToolBar.jsx

@@ -1,8 +1,8 @@
 import styles from "./ToolBar.module.css"
-import {Link} from "react-router";
 import Filter from "../Filter/Filter.jsx";
 import {useEffect, useState} from "react";
 import SearchBar from "../SearchBar/SearchBar.jsx";
+import CreateEventBtn from "../createEventBtn/CreateEventBtn.jsx";
 
 
 function ToolBar({setFilters, filters, showCreate = true}) {
@@ -37,11 +37,7 @@ function ToolBar({setFilters, filters, showCreate = true}) {
             ) : null}
             <div className={styles.eventsButtons}>
                 {showCreate ? (
-                    <Link
+                    <CreateEventBtn />
-                        to="/event/create"
-                        className={`${styles.createButton} glassCard`}>
-                        +
-                    </Link>
                 ) : null}
 
                 <button className={`${styles.searchButton} glassCard`} onClick={() => setIsSearchVisible(true)}>

src/components/ToolBar/ToolBar.module.css

@@ -38,11 +38,6 @@
     transition: all 0.5s ease;
 }
 
-.createButton {
-    font-size: 2rem;
-    color: black;
-}
-
 .createButton:hover, .searchButton:hover, .mobileFilter:hover {
     transform: translateY(-5px);
     cursor: pointer;

src/components/createEventBtn/CreateEventBtn.jsx

@@ -0,0 +1,42 @@
+import styles from "./createEventBtn.module.css"
+import { useState } from "react";
+import Modal from "../ui/modal/modal.jsx";
+import Button from "../ui/button/button.jsx";
+import TextInput from "../ui/input/input.jsx";
+import createEvent from "../../utils/event/createEvent.js"
+
+
+export default function CreateEventBtn() {
+
+    const [isOpen, setIsOpen] = useState(false);
+    const [name, setName] = useState("");
+    const [description, setDescription] = useState("");
+
+    const handleCreateEvent = async () => {
+
+        if(name !== "" || description !== "") await createEvent(name, description);
+        setIsOpen(false);
+    }
+
+    return <>
+        <Button className={`${styles.createButton} glassCard`} variant={"default"} onClick={() => setIsOpen(true)}> + </Button>
+
+        <Modal title={"Créer un événement"} open={isOpen} onClose={() => setIsOpen(false)}>
+
+            <section className={styles.section}>
+                <div className={styles.inputContainer}>
+                    <h2>Titre</h2>
+                    <TextInput placeholder={"Nom de l'événement"} value={name} onChange={e => setName(e.target.value)} />
+                </div>
+
+                <div className={styles.inputContainer}>
+                    <h2>Description</h2>
+                    <TextInput placeholder={"Description de l'événement"} value={description} onChange={e => setDescription(e.target.value)} />
+                </div>
+
+                <Button onClick={handleCreateEvent} className={styles.create}>Créer</Button>
+
+            </section>
+        </Modal>
+    </>
+}

src/components/createEventBtn/createEventBtn.module.css

@@ -0,0 +1,41 @@
+.createButton {
+    font-size: 1.5rem;
+    color: black;
+}
+
+.createButton {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    border-radius: 50% !important;
+    width: 55px !important;
+    height: 55px !important;
+    transition: all 0.5s ease;
+}
+
+.createButton:hover {
+    transform: translateY(-5px);
+    cursor: pointer;
+}
+
+.inputContainer {
+
+    h2 {
+        margin-bottom: 0.5rem;
+    }
+
+    margin: 1em;
+}
+
+.create {
+    align-self: center;
+}
+
+.section {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    margin-top: 15px;
+    margin-bottom: 15px;
+}

src/utils/event/createEvent.js

@@ -0,0 +1,36 @@
+import getXSRFToken from "../getXSRF.js";
+
+export default async function createEvent(name, description) {
+    const csrfToken = await getXSRFToken();
+
+    try {
+        const response = await fetch(`http://${import.meta.env.VITE_API_URL}/api/events/create`, {
+            method: 'POST',
+            credentials: 'include',
+            headers: {
+                'Content-Type': 'application/json',
+                'X-XSRF-TOKEN': csrfToken,
+                'Accept': 'application/json'
+            },
+            body: JSON.stringify({ name, description }),
+        });
+
+        const data = await response.json();
+
+        if (!response.ok) {
+            if (response.status === 422) {
+                return {
+                    status: 422,
+                    errors: data.errors
+                };
+            }
+
+            throw new Error(`Erreur HTTP ${response.status}`);
+        }
+
+        return { status: response.status, data };
+
+    } catch (error) {
+        return { status: "error", error };
+    }
+}