merge de dev dans fixcss
This commit is contained in:
@@ -1,8 +1,8 @@
|
||||
import styles from "./SearchBar.module.css";
|
||||
import { Link } from "react-router";
|
||||
import { useEffect, useState } from "react";
|
||||
import searchEvents from "../../utils/events/searchEvents.js";
|
||||
import searchUsers from "../../utils/users/searchUsers.js";
|
||||
import searchEvents from "../../utils/events/searchEvents";
|
||||
import searchUsers from "../../utils/users/searchUsers";
|
||||
import { useLocation } from "react-router";
|
||||
|
||||
function SearchBar(): any {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import getEventById from "../../utils/events/getEventById.js";
|
||||
import getEventById from "../../utils/events/getEventById";
|
||||
import styles from "./Task.module.css";
|
||||
import formatDate from "../../utils/date/formatDate";
|
||||
|
||||
|
||||
@@ -26,7 +26,7 @@ export default function CreateEventBtn() {
|
||||
setIsOpen(false);
|
||||
}
|
||||
|
||||
if(!user.isAdmin) return null;
|
||||
if(!user?.isAdmin) return null;
|
||||
|
||||
return <>
|
||||
<Button className={`${styles.createButton} glassCard`} variant={"default"} onClick={() => setIsOpen(true)}> + </Button>
|
||||
|
||||
@@ -11,14 +11,14 @@ interface TextInputProps extends InputHTMLAttributes<HTMLInputElement> {
|
||||
}
|
||||
|
||||
const TextInput = ({
|
||||
placeholder,
|
||||
onChange,
|
||||
value,
|
||||
borderStyle = "square",
|
||||
password,
|
||||
className = "",
|
||||
...props
|
||||
}: TextInputProps) => {
|
||||
placeholder = "",
|
||||
onChange,
|
||||
value = "",
|
||||
borderStyle = "square",
|
||||
password = false,
|
||||
className = "",
|
||||
...props
|
||||
}: TextInputProps) => {
|
||||
const [showPassword, setShowPassword] = useState<boolean>(false);
|
||||
|
||||
let inputBorderStyle = styles.square;
|
||||
@@ -28,15 +28,16 @@ const TextInput = ({
|
||||
setShowPassword((prev) => !prev);
|
||||
};
|
||||
|
||||
if (password)
|
||||
if (password) {
|
||||
return (
|
||||
<div className={styles.passwordContainer}>
|
||||
<TextInput
|
||||
<input
|
||||
type={showPassword ? "text" : "password"}
|
||||
value={value}
|
||||
placeholder={placeholder}
|
||||
onChange={onChange}
|
||||
className={styles.passwordInput}
|
||||
className={`${styles.input} ${styles.passwordInput} ${inputBorderStyle} ${className}`}
|
||||
{...props}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
@@ -47,6 +48,7 @@ const TextInput = ({
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<input
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
export const APP_CONFIG = {
|
||||
contactEmail: "contact@example.com",
|
||||
contactPhone: "+33 01 02 03 04 05"
|
||||
contactPhone: "+33 01 02 03 04 05",
|
||||
newCalendarURL: "https://calendar.google.com/calendar/u/0/r/settings/addbyurl?cid="
|
||||
}
|
||||
@@ -9,6 +9,7 @@ export interface Task {
|
||||
}
|
||||
|
||||
export interface User {
|
||||
id: number
|
||||
name: string;
|
||||
lastname: string;
|
||||
role: string;
|
||||
@@ -21,6 +22,7 @@ export interface User {
|
||||
|
||||
export interface AuthContextType {
|
||||
user: User | null;
|
||||
loading: boolean;
|
||||
update: () => void;
|
||||
login: (email: string, password: string) => Promise<{ status: number }>;
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import {useState} from 'react';
|
||||
import { EventDetailContext } from "./EventDetailContext.js"
|
||||
import getEventById from "../../utils/events/getEventById.js";
|
||||
import deleteTaskFunction from "../../utils/tasks/deleteTask.js";
|
||||
import getEventById from "../../utils/events/getEventById";
|
||||
import deleteTaskFunction from "../../utils/tasks/deleteTask";
|
||||
|
||||
export function EventDetailProvider({ children }) {
|
||||
|
||||
|
||||
@@ -1,8 +1,3 @@
|
||||
/*import { createContext } from "react";
|
||||
|
||||
export const EventContext = createContext(null);*/
|
||||
|
||||
|
||||
import { createContext } from "react";
|
||||
|
||||
export type Task = {
|
||||
|
||||
+4
-1
@@ -5,13 +5,16 @@ import Background from "./components/Background/Background.jsx";
|
||||
import { Navigate } from "react-router";
|
||||
import { useContext} from "react";
|
||||
import { AuthContext } from "./contexts/Auth/AuthContext.js";
|
||||
import Loading from "./components/ui/Loading/Loading.tsx";
|
||||
|
||||
|
||||
function Layout(){
|
||||
|
||||
const { user, loading } = useContext(AuthContext);
|
||||
|
||||
if (loading) return <p>Loading</p>;
|
||||
if (loading) return <Background>
|
||||
<Loading />
|
||||
</Background>;
|
||||
if (!user) return <Navigate to="/login" />;
|
||||
if(user && user.validate === 0) return <Navigate to="/error/validation" />;
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import { useContext } from "react";
|
||||
import styles from "./AdminPage.module.css";
|
||||
import IncompleteEvents from "./components/IncompleteEvent/IncompleteEvent.jsx";
|
||||
import PendingMembers from "./components/PendingMembers/PendingMembers.jsx";
|
||||
import { AuthContext } from "../../contexts/Auth/AuthContext.js";
|
||||
import IncompleteEvents from "./components/IncompleteEvent/IncompleteEvent";
|
||||
import PendingMembers from "./components/PendingMembers/PendingMembers";
|
||||
import { AuthContext } from "../../contexts/Auth/AuthContext";
|
||||
import { useNavigate } from "react-router";
|
||||
import RegisterMember from "./components/RegisterMember/RegisterMember";
|
||||
|
||||
|
||||
@@ -10,25 +10,28 @@ function IncompleteEvent() {
|
||||
<div className={`${styles.rightBlock} glassCard`}>
|
||||
<h2>Derniers événements</h2>
|
||||
<div className={styles.eventsContainer}>
|
||||
{events.map((event) => (
|
||||
<div key={event.id} className={`glassBorder ${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?.length ? (
|
||||
event.tasks.map((task, taskIndex) => (
|
||||
<li key={taskIndex}>{task.name}</li>
|
||||
))
|
||||
) : (
|
||||
<li>Aucune tâche associée.</li>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
{Array.isArray(events) && events.length > 0 ? (
|
||||
events.map((event) => (
|
||||
<div key={event.id} className={`glassBorder ${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?.length ? (
|
||||
event.tasks.map((task, taskIndex) => (
|
||||
<li key={taskIndex}>{task.name}</li>
|
||||
))
|
||||
) : (
|
||||
<li>Aucune tâche associée.</li>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
))) : (
|
||||
<p>Aucun événement n'existe pour le moment</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -7,8 +7,6 @@ import deleteOtherUser from "../../../../utils/users/deleteOtherUser.js";
|
||||
import { PendingMembersContext } from "../../../../contexts/PendingMembers/PendingMembersContext";
|
||||
|
||||
function PendingMembers() {
|
||||
|
||||
|
||||
const [open, setOpen] = useState(false);
|
||||
const [message, setMessage] = useState("");
|
||||
const [title, setTitle] = useState("");
|
||||
|
||||
@@ -1,55 +0,0 @@
|
||||
import {useEffect, useContext} from "react";
|
||||
import styles from "./EventDetailPage.module.css";
|
||||
import {useParams} from "react-router";
|
||||
import {formatDateLetter} from "../../utils/date/formatDateLetter.js";
|
||||
import EventTask from "./components/EventTask/EventTask.jsx";
|
||||
import {AuthContext} from "../../contexts/Auth/AuthContext.js";
|
||||
import {EventDetailContext} from "../../contexts/EventDetail/EventDetailContext.js";
|
||||
import CreateTaskBtn from "./components/CreateTaskBtn/CreateTaskBtn.jsx";
|
||||
import DeleteEventBtn from "./components/DeleteEventBtn/DeleteEventBtn.jsx";
|
||||
|
||||
|
||||
function EventDetailPage() {
|
||||
|
||||
const params = useParams();
|
||||
const id = params.id;
|
||||
const {user} = useContext(AuthContext)
|
||||
const {tasks, updateEventInfo, eventInfo} = useContext(EventDetailContext)
|
||||
|
||||
useEffect(() => {
|
||||
updateEventInfo(id);
|
||||
}, [])
|
||||
|
||||
|
||||
return (
|
||||
<div className={styles.allContent}>
|
||||
<div className={`glassCard`}>
|
||||
<div className={styles.textImage}>
|
||||
<img src="/icons/theme/dark.svg" alt="Illustration événement" className={styles.eventImage}/>
|
||||
<div className={styles.eventInfo}>
|
||||
<h2>{eventInfo?.name}</h2>
|
||||
<div className={styles.eventContent}>
|
||||
<div>
|
||||
<p>{eventInfo && formatDateLetter(eventInfo.start)}</p>
|
||||
<p>{eventInfo?.description}</p>
|
||||
</div>
|
||||
{user?.isAdmin && <div className={styles.manageEvent}>
|
||||
<DeleteEventBtn id={id}/>
|
||||
<CreateTaskBtn id={id}/>
|
||||
</div>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Tâches</h2>
|
||||
<div className={styles.tasks}>
|
||||
{tasks?.map((task, index) => (
|
||||
<EventTask task={task} key={index} eventId={id} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default EventDetailPage;
|
||||
@@ -0,0 +1,65 @@
|
||||
import { useEffect, useContext } from "react";
|
||||
import styles from "./EventDetailPage.module.css";
|
||||
import { useParams } from "react-router";
|
||||
import { formatDateLetter } from "../../utils/date/formatDateLetter";
|
||||
import EventTask from "./components/EventTask/EventTask";
|
||||
import { AuthContext } from "../../contexts/Auth/AuthContext";
|
||||
import { EventDetailContext } from "../../contexts/EventDetail/EventDetailContext";
|
||||
import CreateTaskBtn from "./components/CreateTaskBtn/CreateTaskBtn";
|
||||
import DeleteEventBtn from "./components/DeleteEventBtn/DeleteEventBtn";
|
||||
|
||||
function EventDetailPage() {
|
||||
const params = useParams();
|
||||
const id = params.id as string;
|
||||
|
||||
const { user } = useContext(AuthContext) as any;
|
||||
const { tasks, updateEventInfo, eventInfo } = useContext(EventDetailContext) as any;
|
||||
|
||||
useEffect(() => {
|
||||
if (id) {
|
||||
updateEventInfo(id);
|
||||
}
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className={styles.allContent}>
|
||||
<div className={`glassCard`}>
|
||||
<div className={styles.textImage}>
|
||||
<img
|
||||
src="/icons/theme/dark.svg"
|
||||
alt="Illustration événement"
|
||||
className={styles.eventImage}
|
||||
/>
|
||||
|
||||
<div className={styles.eventInfo}>
|
||||
<h2>{eventInfo?.name}</h2>
|
||||
|
||||
<div className={styles.eventContent}>
|
||||
<div>
|
||||
<p>{eventInfo && formatDateLetter(eventInfo.start)}</p>
|
||||
<p>{eventInfo?.description}</p>
|
||||
</div>
|
||||
|
||||
{user?.isAdmin && (
|
||||
<div className={styles.manageEvent}>
|
||||
<DeleteEventBtn id={id} />
|
||||
<CreateTaskBtn id={id} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Tâches</h2>
|
||||
|
||||
<div className={styles.tasks}>
|
||||
{tasks?.map((task: any, index: number) => (
|
||||
<EventTask task={task} key={index} eventId={id} index={index} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default EventDetailPage;
|
||||
@@ -0,0 +1,23 @@
|
||||
.usersList {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.userCard {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10px 14px;
|
||||
border-radius: 10px;
|
||||
background: rgba(255,255,255,0.05);
|
||||
border: 1px solid rgba(255,255,255,0.08);
|
||||
}
|
||||
|
||||
.userName {
|
||||
max-width: 200px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@@ -0,0 +1,93 @@
|
||||
import {ReactNode, useContext, useEffect, useState} from "react";
|
||||
import Button from "../../../../components/ui/Button/Button";
|
||||
import Modal from "../../../../components/ui/Modal/Modal";
|
||||
import User from "../../../Volunteers/interfaces/user.interface";
|
||||
import getAllUser from "../../../../utils/users/getAllUsers";
|
||||
import Loading from "../../../../components/ui/Loading/Loading";
|
||||
import getUserById from "../../../../utils/users/getUserById";
|
||||
import styles from "./AssignUserBtn.module.css";
|
||||
import {AuthContext} from "../../../../contexts/Auth/AuthContext";
|
||||
import assignOtherUser from "../../../../utils/tasks/assignOtherUser";
|
||||
import unAssignOtherUser from "../../../../utils/tasks/unAssignOtherUser";
|
||||
|
||||
interface AssignUserBtnProps {
|
||||
taskId: string | number;
|
||||
}
|
||||
|
||||
export default function AssignUserBtn({ taskId }: AssignUserBtnProps): ReactNode {
|
||||
|
||||
const [open, setOpen] = useState<boolean>(false);
|
||||
const [users, setUsers] = useState<Array<User>>([]);
|
||||
const [loading, setLoading] = useState<boolean>(true);
|
||||
|
||||
const { user } = useContext(AuthContext) as any;
|
||||
|
||||
if (!user?.isAdmin) return null;
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
setLoading(true);
|
||||
|
||||
const result = await getAllUser();
|
||||
|
||||
if (result.status !== 200 || !Array.isArray(result.data)) {
|
||||
console.error("Erreur lors du chargement des utilisateurs", result);
|
||||
return;
|
||||
}
|
||||
|
||||
const usersData = await Promise.all(
|
||||
result.data.map(async (id: number): Promise<User | null> => {
|
||||
const res = await getUserById(id);
|
||||
|
||||
if (res.status === 200) {
|
||||
return res.data as User;
|
||||
}
|
||||
|
||||
return null;
|
||||
})
|
||||
);
|
||||
|
||||
setUsers(usersData.filter((user): user is User => user !== null));
|
||||
setLoading(false);
|
||||
})();
|
||||
}, []);
|
||||
|
||||
const isUserAssigned = (u: User): boolean =>
|
||||
u.tasks.some(t => t.id === taskId);
|
||||
|
||||
const handleAssign = async (selectedUser: User) => {
|
||||
await assignOtherUser(taskId as number, selectedUser.id);
|
||||
setOpen(false);
|
||||
};
|
||||
|
||||
const handleUnassign = async (selectedUser: User) => {
|
||||
await unAssignOtherUser(taskId as number, selectedUser.id);
|
||||
setOpen(false);
|
||||
};
|
||||
|
||||
return <>
|
||||
<Button variant={"default"} onClick={() => setOpen(true)}>Assigner</Button>
|
||||
|
||||
<Modal open={open} onClose={() => setOpen(false)} title={"Assigner un utilisateur à cette tâche"}>
|
||||
<div className={styles.usersList}>
|
||||
{loading ? <Loading /> : users.map((user: User, index) => (
|
||||
<div key={index} className={styles.userCard}>
|
||||
<p className={styles.userName}>
|
||||
{user.name} {user.lastname}
|
||||
</p>
|
||||
|
||||
{isUserAssigned(user) ? (
|
||||
<Button variant={"danger"} onClick={() => handleUnassign(user)}>
|
||||
Désassigner
|
||||
</Button>
|
||||
) : (
|
||||
<Button onClick={() => handleAssign(user)}>
|
||||
Assigner
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Modal>
|
||||
</>
|
||||
}
|
||||
@@ -0,0 +1,129 @@
|
||||
import styles from "../../EventDetailPage.module.css";
|
||||
import Button from "../../../../components/ui/Button/Button";
|
||||
import { useContext, useState } from "react";
|
||||
import TextInput from "../../../../components/ui/Input/Input";
|
||||
import Modal from "../../../../components/ui/Modal/Modal";
|
||||
import createTaskApi from "../../../../utils/tasks/createTask";
|
||||
import { EventDetailContext } from "../../../../contexts/EventDetail/EventDetailContext";
|
||||
|
||||
type CreateTaskBtnProps = {
|
||||
id: string | number;
|
||||
};
|
||||
|
||||
export default function CreateTaskBtn({ id }: CreateTaskBtnProps) {
|
||||
const [openTaskModal, setOpenTaskModal] = useState(false);
|
||||
|
||||
const [taskName, setTaskName] = useState<string>("");
|
||||
const [taskDescription, setTaskDescription] = useState<string>("");
|
||||
const [taskLocation, setTaskLocation] = useState<string>("");
|
||||
const [maxParticipants, setMaxParticipants] = useState<string>("");
|
||||
const [startTime, setStartTime] = useState<string>("");
|
||||
const [endTime, setEndTime] = useState<string>("");
|
||||
|
||||
const { updateEventInfo } = useContext(EventDetailContext) as any;
|
||||
|
||||
const createTask = async () => {
|
||||
const data = await createTaskApi({
|
||||
eventId: id,
|
||||
name: taskName,
|
||||
description: taskDescription,
|
||||
start: startTime,
|
||||
end: endTime,
|
||||
location: taskLocation,
|
||||
maxParticipants,
|
||||
});
|
||||
|
||||
if (data?.status === 200) {
|
||||
setOpenTaskModal(false);
|
||||
setTaskName("");
|
||||
setTaskDescription("");
|
||||
setTaskLocation("");
|
||||
setMaxParticipants("");
|
||||
setStartTime("");
|
||||
setEndTime("");
|
||||
|
||||
updateEventInfo(id);
|
||||
} else {
|
||||
console.log("⚠️ Échec de la création de la task");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Button
|
||||
variant={"default"}
|
||||
className={styles.manageBtn}
|
||||
onClick={() => setOpenTaskModal(true)}
|
||||
>
|
||||
Créer tâche
|
||||
</Button>
|
||||
|
||||
<Modal
|
||||
open={openTaskModal}
|
||||
onClose={() => setOpenTaskModal(false)}
|
||||
title={"Créer tâche"}
|
||||
>
|
||||
<div className={styles.modalContent}>
|
||||
<div>
|
||||
<p>Nom de la tâche</p>
|
||||
<TextInput
|
||||
value={taskName}
|
||||
onChange={(e: any) => setTaskName(e.target.value)}
|
||||
placeholder="Nom de la tâche"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p>Description</p>
|
||||
<TextInput
|
||||
value={taskDescription}
|
||||
onChange={(e: any) => setTaskDescription(e.target.value)}
|
||||
placeholder="Description de la tâche"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p>Lieu</p>
|
||||
<TextInput
|
||||
value={taskLocation}
|
||||
onChange={(e: any) => setTaskLocation(e.target.value)}
|
||||
placeholder="Lieu"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p>Nombre maximum de participants</p>
|
||||
<TextInput
|
||||
type="number"
|
||||
value={maxParticipants}
|
||||
onChange={(e: any) => setMaxParticipants(e.target.value)}
|
||||
placeholder="Participants max"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p>Heure de début</p>
|
||||
<TextInput
|
||||
type="datetime-local"
|
||||
value={startTime}
|
||||
onChange={(e: any) => setStartTime(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p>Heure de fin</p>
|
||||
<TextInput
|
||||
type="datetime-local"
|
||||
value={endTime}
|
||||
onChange={(e: any) => setEndTime(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Button variant="default" onClick={createTask}>
|
||||
Créer la tâche
|
||||
</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,42 +0,0 @@
|
||||
import styles from "../../EventDetailPage.module.css";
|
||||
import Button from "../../../../components/ui/Button/Button";
|
||||
import Modal from "../../../../components/ui/Modal/Modal";
|
||||
import { useContext, useState } from "react";
|
||||
import { EventDetailContext } from "../../../../contexts/EventDetail/EventDetailContext.js";
|
||||
import { EventContext } from "../../../../contexts/Events/EventContext.js";
|
||||
import { useNavigate } from "react-router";
|
||||
|
||||
export default function DeleteEventBtn({ id }) {
|
||||
|
||||
const { eventInfo } = useContext(EventDetailContext)
|
||||
const { removeEvent } = useContext(EventContext)
|
||||
const [open, setOpen] = useState(false);
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleDelete = () => {
|
||||
setOpen(true);
|
||||
}
|
||||
|
||||
const delEvent = async () => {
|
||||
const result = await removeEvent(id);
|
||||
|
||||
if (result.status === 200 || result.status === 204) {
|
||||
setOpen(false);
|
||||
navigate("/events");
|
||||
}
|
||||
}
|
||||
|
||||
return <>
|
||||
|
||||
<Button variant={"danger"} className={styles.manageBtn} onClick={handleDelete}>Supprimer</Button>
|
||||
|
||||
<Modal open={open} onClose={() => setOpen(false)} title={"Suppression"}>
|
||||
<div className={styles.modalContent}>
|
||||
<p>Etes-vous sur de vouloir supprimer l'événement {eventInfo?.name} ?</p>
|
||||
|
||||
<Button variant={"default"} onClick={delEvent}>Confirmer</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
</>
|
||||
}
|
||||
@@ -0,0 +1,56 @@
|
||||
import styles from "../../EventDetailPage.module.css";
|
||||
import Button from "../../../../components/ui/Button/Button";
|
||||
import Modal from "../../../../components/ui/Modal/Modal";
|
||||
import { useContext, useState } from "react";
|
||||
import { EventDetailContext } from "../../../../contexts/EventDetail/EventDetailContext";
|
||||
import { EventContext } from "../../../../contexts/Events/EventContext";
|
||||
import { useNavigate } from "react-router";
|
||||
|
||||
type DeleteEventBtnProps = {
|
||||
id: string | number;
|
||||
};
|
||||
|
||||
export default function DeleteEventBtn({ id }: DeleteEventBtnProps) {
|
||||
const { eventInfo } = useContext(EventDetailContext) as any;
|
||||
const { removeEvent } = useContext(EventContext) as any;
|
||||
|
||||
const [open, setOpen] = useState(false);
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleDelete = () => {
|
||||
setOpen(true);
|
||||
};
|
||||
|
||||
const delEvent = async () => {
|
||||
const result = await removeEvent(id);
|
||||
|
||||
if (result.status === 200 || result.status === 204) {
|
||||
setOpen(false);
|
||||
navigate("/events");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Button
|
||||
variant={"danger"}
|
||||
className={styles.manageBtn}
|
||||
onClick={handleDelete}
|
||||
>
|
||||
Supprimer
|
||||
</Button>
|
||||
|
||||
<Modal open={open} onClose={() => setOpen(false)} title={"Suppression"}>
|
||||
<div className={styles.modalContent}>
|
||||
<p>
|
||||
Etes-vous sur de vouloir supprimer l'événement {eventInfo?.name} ?
|
||||
</p>
|
||||
|
||||
<Button variant={"default"} onClick={delEvent}>
|
||||
Confirmer
|
||||
</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,28 +0,0 @@
|
||||
import { useContext } from "react";
|
||||
import { AuthContext } from "../../../../contexts/Auth/AuthContext.js";
|
||||
import { EventDetailContext } from "../../../../contexts/EventDetail/EventDetailContext.js";
|
||||
import Button from "../../../../components/ui/Button/Button";
|
||||
import { useState } from "react";
|
||||
import Modal from "../../../../components/ui/Modal/Modal";
|
||||
import styles from "../../EventDetailPage.module.css";
|
||||
|
||||
export default function DeleteTaskBtn({ taskId, eventId, taskName }) {
|
||||
|
||||
const { user } = useContext(AuthContext)
|
||||
const { deleteTask } = useContext(EventDetailContext)
|
||||
|
||||
const [openModal, setOpenModal] = useState(false);
|
||||
|
||||
if(!user?.isAdmin) return null;
|
||||
|
||||
return <>
|
||||
<Button variant={"danger"} onClick={() => setOpenModal(true)}> Supprimer </Button>
|
||||
|
||||
<Modal open={openModal} onClose={setOpenModal} title={"Suppression"}>
|
||||
<div className={styles.modalContent}>
|
||||
<p className={styles.modalContent}>Etes-vous sur de vouloir supprimer la tâche {taskName} ? </p>
|
||||
<Button variant={"danger"} onClick={() => { deleteTask(taskId, eventId); setOpenModal(false) }}> Confirmer </Button>
|
||||
</div>
|
||||
</Modal>
|
||||
</>
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
import { useContext, useState } from "react";
|
||||
import { AuthContext } from "../../../../contexts/Auth/AuthContext";
|
||||
import { EventDetailContext } from "../../../../contexts/EventDetail/EventDetailContext";
|
||||
import Button from "../../../../components/ui/Button/Button";
|
||||
import Modal from "../../../../components/ui/Modal/Modal";
|
||||
import styles from "../../EventDetailPage.module.css";
|
||||
|
||||
type DeleteTaskBtnProps = {
|
||||
taskId: string | number;
|
||||
eventId: string | number;
|
||||
taskName: string;
|
||||
};
|
||||
|
||||
export default function DeleteTaskBtn({ taskId, eventId, taskName }: DeleteTaskBtnProps) {
|
||||
|
||||
const { user } = useContext(AuthContext) as any;
|
||||
const { deleteTask } = useContext(EventDetailContext) as any;
|
||||
|
||||
const [openModal, setOpenModal] = useState<boolean>(false);
|
||||
|
||||
if (!user?.isAdmin) return null;
|
||||
|
||||
return (
|
||||
<>
|
||||
<Button variant={"danger"} onClick={() => setOpenModal(true)}>
|
||||
Supprimer
|
||||
</Button>
|
||||
|
||||
<Modal open={openModal} onClose={() => setOpenModal(false)} title={"Suppression"}>
|
||||
<div className={styles.modalContent}>
|
||||
<p className={styles.modalContent}>
|
||||
Etes-vous sur de vouloir supprimer la tâche {taskName} ?
|
||||
</p>
|
||||
|
||||
<Button
|
||||
variant={"danger"}
|
||||
onClick={() => {
|
||||
deleteTask(taskId, eventId);
|
||||
setOpenModal(false);
|
||||
}}
|
||||
>
|
||||
Confirmer
|
||||
</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,98 +0,0 @@
|
||||
import styles from "./EventTask.module.css";
|
||||
import { formatDateLetter } from "../../../../utils/date/formatDateLetter.js";
|
||||
import Button from "../../../../components/ui/Button/Button";
|
||||
import assign from "../../../../utils/tasks/assign.js";
|
||||
import unAssign from "../../../../utils/tasks/unAssign.js";
|
||||
import { useContext, useEffect, useState } from "react";
|
||||
import isAssigned from "../../../../utils/tasks/isAssigned.js";
|
||||
import Modal from "../../../../components/ui/Modal/Modal";
|
||||
import { AuthContext } from "../../../../contexts/Auth/AuthContext.js";
|
||||
import DeleteTaskBtn from "../DeleteTaskBtn/DeleteTaskBtn.jsx";
|
||||
|
||||
export default function EventTask({ task, index, eventId }) {
|
||||
|
||||
const { update } = useContext(AuthContext)
|
||||
|
||||
const [assigned, setAssigned] = useState(false);
|
||||
const [open, setOpen] = useState(false);
|
||||
const [title, setTitle] = useState("");
|
||||
const [message, setMessage] = useState("");
|
||||
|
||||
async function checkAssign() {
|
||||
const data = await isAssigned(task.id);
|
||||
setAssigned(data?.data.assigned);
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
checkAssign();
|
||||
}, [])
|
||||
|
||||
|
||||
const handleRegisterBtn = async () => {
|
||||
const res = await assign(task.id);
|
||||
|
||||
switch (res.status) {
|
||||
case 200:
|
||||
update()
|
||||
setTitle("Inscription réussie")
|
||||
setMessage(`Vous êtes maintenant inscrit à la tâche ${task.name}`);
|
||||
setOpen(true);
|
||||
setAssigned(true);
|
||||
break;
|
||||
|
||||
case 409:
|
||||
setTitle("Erreur lors de l'inscription")
|
||||
setMessage("Vous êtes déjà inscrit à cette tâche")
|
||||
setOpen(true);
|
||||
break;
|
||||
|
||||
case 403:
|
||||
setTitle("Erreur lors de l'inscription")
|
||||
setMessage("Le nombre maximum d'inscription pour cette tâche à été atteint")
|
||||
setOpen(true);
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleUnassign = async () => {
|
||||
const res = await unAssign(task.id);
|
||||
|
||||
switch (res.status) {
|
||||
case 200:
|
||||
update()
|
||||
setTitle("Désinscription réussie")
|
||||
setMessage(`Vous n'êtes plus inscrit à la tâche ${task.name}`);
|
||||
setOpen(true);
|
||||
setAssigned(false);
|
||||
break;
|
||||
|
||||
case 409:
|
||||
setTitle("Erreur lors de la désinscription")
|
||||
setMessage(`Vous n'êtes pas inscrit à cette tâche`);
|
||||
setOpen(true);
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
return <div style={{"--i": index}} key={index} className={styles.content}>
|
||||
<div className={styles.task}>
|
||||
<div>
|
||||
<span><strong>{task.name}</strong></span>
|
||||
<p className={styles.taskDate}> {formatDateLetter(task.start)} - {formatDateLetter(task.end)} </p>
|
||||
<p>{task.description}</p>
|
||||
</div>
|
||||
<div className={styles.manageTaskBtn}>
|
||||
{assigned ?
|
||||
<Button variant={"danger"} onClick={() => handleUnassign()}> Se désinscrire </Button>
|
||||
:
|
||||
<Button onClick={() => handleRegisterBtn()}> S’inscrire </Button>
|
||||
}
|
||||
<DeleteTaskBtn eventId={eventId} taskId={task.id} taskName={task.name} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Modal open={open} onClose={setOpen} title={title}>
|
||||
<p className={styles.modalContent}>{message}</p>
|
||||
</Modal>
|
||||
</div>
|
||||
}
|
||||
@@ -0,0 +1,122 @@
|
||||
import styles from "./EventTask.module.css";
|
||||
import { formatDateLetter } from "../../../../utils/date/formatDateLetter";
|
||||
import Button from "../../../../components/ui/Button/Button";
|
||||
import assign from "../../../../utils/tasks/assign";
|
||||
import unAssign from "../../../../utils/tasks/unAssign";
|
||||
import { useContext, useEffect, useState } from "react";
|
||||
import isAssigned from "../../../../utils/tasks/isAssigned";
|
||||
import Modal from "../../../../components/ui/Modal/Modal";
|
||||
import { AuthContext } from "../../../../contexts/Auth/AuthContext";
|
||||
import DeleteTaskBtn from "../DeleteTaskBtn/DeleteTaskBtn";
|
||||
import AssignUserBtn from "../AssignUserBtn/AssignUserBtn";
|
||||
|
||||
type EventTaskProps = {
|
||||
task: any;
|
||||
index: number;
|
||||
eventId: string | number;
|
||||
};
|
||||
|
||||
export default function EventTask({ task, index, eventId }: EventTaskProps) {
|
||||
|
||||
const { update } = useContext(AuthContext) as any;
|
||||
|
||||
const [assigned, setAssigned] = useState<boolean>(false);
|
||||
const [open, setOpen] = useState<boolean>(false);
|
||||
const [title, setTitle] = useState<string>("");
|
||||
const [message, setMessage] = useState<string>("");
|
||||
|
||||
async function checkAssign() {
|
||||
const data = await isAssigned(task.id);
|
||||
setAssigned(data?.data.assigned);
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
checkAssign();
|
||||
}, []);
|
||||
|
||||
const handleRegisterBtn = async () => {
|
||||
const res = await assign(task.id);
|
||||
|
||||
switch (res.status) {
|
||||
case 200:
|
||||
update();
|
||||
setTitle("Inscription réussie");
|
||||
setMessage(`Vous êtes maintenant inscrit à la tâche ${task.name}`);
|
||||
setOpen(true);
|
||||
setAssigned(true);
|
||||
break;
|
||||
|
||||
case 409:
|
||||
setTitle("Erreur lors de l'inscription");
|
||||
setMessage("Vous êtes déjà inscrit à cette tâche");
|
||||
setOpen(true);
|
||||
break;
|
||||
|
||||
case 403:
|
||||
setTitle("Erreur lors de l'inscription");
|
||||
setMessage("Le nombre maximum d'inscription pour cette tâche à été atteint");
|
||||
setOpen(true);
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleUnassign = async () => {
|
||||
const res = await unAssign(task.id);
|
||||
|
||||
switch (res.status) {
|
||||
case 200:
|
||||
update();
|
||||
setTitle("Désinscription réussie");
|
||||
setMessage(`Vous n'êtes plus inscrit à la tâche ${task.name}`);
|
||||
setOpen(true);
|
||||
setAssigned(false);
|
||||
break;
|
||||
|
||||
case 409:
|
||||
setTitle("Erreur lors de la désinscription");
|
||||
setMessage(`Vous n'êtes pas inscrit à cette tâche`);
|
||||
setOpen(true);
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ "--i": index } as any} key={index} className={styles.content}>
|
||||
<div className={styles.task}>
|
||||
<div>
|
||||
<span>
|
||||
<strong>{task.name}</strong>
|
||||
</span>
|
||||
<p className={styles.taskDate}>
|
||||
{formatDateLetter(task.start)} - {formatDateLetter(task.end)}
|
||||
</p>
|
||||
<p>{task.description}</p>
|
||||
</div>
|
||||
|
||||
<div className={styles.manageTaskBtn}>
|
||||
{assigned ? (
|
||||
<Button variant={"danger"} onClick={() => handleUnassign()}>
|
||||
Se désinscrire
|
||||
</Button>
|
||||
) : (
|
||||
<Button onClick={() => handleRegisterBtn()}>
|
||||
S’inscrire
|
||||
</Button>
|
||||
)}
|
||||
|
||||
<DeleteTaskBtn
|
||||
eventId={eventId}
|
||||
taskId={task.id}
|
||||
taskName={task.name}
|
||||
/>
|
||||
|
||||
<AssignUserBtn taskId={task.id} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Modal open={open} onClose={() => setOpen(false)} title={title}>
|
||||
<p className={styles.modalContent}>{message}</p>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -19,9 +19,12 @@ function EventsPage(){
|
||||
<div className={styles.eventsContainer}>
|
||||
<ToolBar setFilters={setFilters} filters={filters} />
|
||||
<div className={styles.eventsList}>
|
||||
{filter(events, filters, "event").map((event, index) => (
|
||||
<Event key={index} event={event} />
|
||||
))}
|
||||
{Array.isArray(events) && events.length > 0 ? (
|
||||
filter(events, filters, "event").map((event, index) => (
|
||||
<Event key={index} event={event} />
|
||||
))) : (
|
||||
<p>Aucun événement n'existe pour le moment</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import styles from "./Event.module.css";
|
||||
import { useState, useEffect } from "react";
|
||||
import { useNavigate } from "react-router";
|
||||
import Button from "/src/components/ui/Button/Button"
|
||||
|
||||
@@ -7,27 +6,10 @@ function Event({event}){
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
const [eventMenu, seteventMenu] = useState(false);
|
||||
const [windowSize, setWindowSize] = useState({
|
||||
width: null,
|
||||
height: null,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
function handleResize() {
|
||||
setWindowSize({
|
||||
width: window.innerWidth,
|
||||
height: window.innerHeight,
|
||||
});
|
||||
}
|
||||
window.addEventListener("resize", handleResize);
|
||||
handleResize();
|
||||
return () => window.removeEventListener("resize", handleResize);
|
||||
}, []);
|
||||
|
||||
const handleNavigate = () => navigate(`/events/` + event.id);
|
||||
|
||||
return (
|
||||
<div className={`${styles.eventContainer} glassCard`} onClick={() => seteventMenu(!eventMenu)}>
|
||||
<div className={`${styles.eventContainer} glassCard`} onClick={handleNavigate}>
|
||||
<div className={styles.eventContainerTop}>
|
||||
<div className={styles.eventContent}>
|
||||
<div className={`${styles.eventImageDiv}`}>
|
||||
@@ -40,40 +22,9 @@ function Event({event}){
|
||||
<div className={styles.eventInfos}>
|
||||
<p className={styles.eventTitle}>{event.name}</p>
|
||||
<p>{event.description}</p>
|
||||
{event.tasks != null ? (
|
||||
<div className={eventMenu ? styles.eventMenuOpen : styles.eventMenuClose}>
|
||||
<ul>
|
||||
{event.tasks
|
||||
.slice(0,5)
|
||||
.map((task, index) => (
|
||||
<li key={index}> - {task.name}</li>
|
||||
))}
|
||||
{event.tasks.length > 5 ? (
|
||||
<li>...</li>
|
||||
) : null}
|
||||
</ul>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
{windowSize.width > 768 ? (
|
||||
<div className={styles.eventButtons}>
|
||||
<Button
|
||||
variant={"transparent"}
|
||||
onClick={()=>{seteventMenu(!eventMenu)}}
|
||||
className={`${eventMenu ? styles.moreButtonClicked : ""}`}
|
||||
>
|
||||
{">"}
|
||||
</Button>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
<div className={styles.eventContainerBottom}>
|
||||
{(windowSize.width <= 768 || eventMenu) ? (
|
||||
|
||||
<Button onClick={() => navigate(`/events/` + event.id)}>Voir plus</Button>
|
||||
|
||||
) : null}
|
||||
<Button onClick={handleNavigate} className={styles.openBtn}>Voir plus</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -6,6 +6,10 @@
|
||||
padding: 1rem 0.5rem;
|
||||
}
|
||||
|
||||
.eventContainer:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.eventContainerTop {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@@ -99,6 +103,11 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
.openBtn {
|
||||
align-self: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.eventImage {
|
||||
width: 100%;
|
||||
|
||||
@@ -3,13 +3,12 @@ import styles from "./Calendar.module.css";
|
||||
import {formatDateLetterJS} from "../../../../utils/date/formatDateLetter.js";
|
||||
import Button from "../../../../components/ui/Button/Button";
|
||||
import {AuthContext} from "../../../../contexts/Auth/AuthContext.ts";
|
||||
import ExportBtn from "./ExportBtn.tsx";
|
||||
|
||||
function
|
||||
Calendar() {
|
||||
const { user } = useContext(AuthContext);
|
||||
|
||||
const calendarUrl = `${import.meta.env.VITE_API_URL}/api/export/ics/${user.id}`;
|
||||
|
||||
const monthNames = [
|
||||
"Janvier", "Février", "Mars", "Avril", "Mai", "Juin",
|
||||
"Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"
|
||||
@@ -152,16 +151,7 @@ Calendar() {
|
||||
</div>
|
||||
)}
|
||||
<div className={`${styles.exportbox} glassBorder`}>
|
||||
<p><b>votre lien d'agenda:</b> {calendarUrl}</p>
|
||||
<Button className={styles.exportbtn}
|
||||
onClick={() => {
|
||||
window.open(
|
||||
"https://calendar.google.com/calendar/u/0/r/settings/addbyurl"
|
||||
);
|
||||
}}
|
||||
>
|
||||
Exporter
|
||||
</Button>
|
||||
<ExportBtn />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -156,6 +156,7 @@
|
||||
margin-top: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.exportbtn {
|
||||
|
||||
@@ -0,0 +1,21 @@
|
||||
import Button from "../../../../components/ui/Button/Button";
|
||||
import styles from "../../HomePage.module.css"
|
||||
import { useContext } from "react";
|
||||
import { AuthContext, AuthContextType } from "../../../../contexts/Auth/AuthContext";
|
||||
import { APP_CONFIG } from "../../../../config/appConfig";
|
||||
|
||||
export default function ExportBtn() {
|
||||
|
||||
const { user } = useContext(AuthContext) as AuthContextType;
|
||||
const calendarUrl = `${import.meta.env.VITE_API_URL}/api/export/ics/${user?.id}`;
|
||||
|
||||
return <Button className={styles.exportbtn}
|
||||
onClick={() => {
|
||||
window.open(
|
||||
`${APP_CONFIG.newCalendarURL}${calendarUrl}`
|
||||
);
|
||||
}}
|
||||
>
|
||||
Exporter
|
||||
</Button>
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
import styles from "./EventList.module.css";
|
||||
import { formatDateLetter } from "../../../../utils/date/formatDateLetter";
|
||||
import { useState } from "react";
|
||||
import { useNavigate } from "react-router";
|
||||
|
||||
type Task = {
|
||||
name: string;
|
||||
@@ -10,6 +10,7 @@ type Task = {
|
||||
};
|
||||
|
||||
type EventGroup = {
|
||||
id: number;
|
||||
date: string;
|
||||
name: string;
|
||||
start: string | Date;
|
||||
@@ -21,60 +22,19 @@ type EventItemProps = {
|
||||
};
|
||||
|
||||
export default function EventItem({ eventGroup }: EventItemProps) {
|
||||
const [isVisible, setIsVisible] = useState<boolean>(false);
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<div
|
||||
key={eventGroup.date}
|
||||
className={`${styles.eventGroup} glassBorder`}
|
||||
onClick={() => setIsVisible(!isVisible)}
|
||||
onClick={() => navigate(`/events/${eventGroup.id}`)}
|
||||
>
|
||||
<div className={styles.eventTitle}>
|
||||
<p className={styles.title}>{eventGroup.name}</p>
|
||||
<p>{formatDateLetter(eventGroup.start)}</p>
|
||||
</div>
|
||||
|
||||
{isVisible && (
|
||||
<ul className={styles.eventDetails}>
|
||||
{eventGroup.tasks.map((task, i) => (
|
||||
<li key={i} className={styles.eventTasks}>
|
||||
<p>
|
||||
- {task.name} - {task.description}
|
||||
</p>
|
||||
<p>
|
||||
{formatDateLetter(task.start)} - {formatDateLetter(task.end)}
|
||||
</p>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/*import styles from "./eventList.module.css";
|
||||
import { formatDateLetter } from "../../../../utils/date/formatDateLetter.ts";
|
||||
import { useState } from "react";
|
||||
|
||||
export default function EventItem({ eventGroup }) {
|
||||
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
|
||||
return <div key={eventGroup.date} className={`${styles.eventGroup} glassBorder`} onClick={() => setIsVisible(!isVisible)}>
|
||||
<div className={styles.eventTitle}>
|
||||
<p className={styles.title}>{eventGroup.name}</p>
|
||||
<p>{formatDateLetter(eventGroup.start)}</p>
|
||||
</div>
|
||||
{isVisible &&
|
||||
<ul className={styles.eventDetails}>
|
||||
{eventGroup.tasks.map((task, i) => (
|
||||
<li key={i} className={styles.eventTasks}>
|
||||
<p>- {task.name} - {task.description}</p>
|
||||
<p>{formatDateLetter(task.start)} - {formatDateLetter(task.end)}</p>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
*/
|
||||
}
|
||||
@@ -1,38 +1,3 @@
|
||||
/*import { useMemo } from "react";
|
||||
import styles from "./eventList.module.css";
|
||||
import EventItem from "./eventItem.jsx";
|
||||
import { EventContext } from "../../../../contexts/events/EventContext.js";
|
||||
import { useContext } from "react";
|
||||
|
||||
function EventList() {
|
||||
// Utilise une valeur par défaut pour `events` si elle est `undefined`
|
||||
const { events = [] } = useContext(EventContext);
|
||||
|
||||
const sortedEvents = useMemo(() => {
|
||||
// Vérifie explicitement que `events` est un tableau avant de trier
|
||||
if (!Array.isArray(events)) return [];
|
||||
return [...events].sort(
|
||||
(a, b) => new Date(a.start) - new Date(b.start)
|
||||
);
|
||||
}, [events]);
|
||||
|
||||
return (
|
||||
<div className={`${styles.glassCard} glassCard`}>
|
||||
<h2>Liste des événements à venir</h2>
|
||||
{sortedEvents.length > 0 ? (
|
||||
<div className={styles.eventList}>
|
||||
{sortedEvents.map((eventGroup, index) => (
|
||||
<EventItem eventGroup={eventGroup} key={index} />
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p>Aucun événement planifié pour l'instant.</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default EventList;*/
|
||||
import { useMemo, useContext } from "react";
|
||||
import styles from "./EventList.module.css";
|
||||
import EventItem from "./EventItem";
|
||||
|
||||
@@ -0,0 +1,28 @@
|
||||
import styles from "./LoginPage.module.css";
|
||||
import LoginForm from "./components/LoginForm/LoginForm";
|
||||
import Background from "../../components/Background/Background.jsx";
|
||||
import { useEffect, useContext } from "react";
|
||||
import { AuthContext, AuthContextType } from "../../../src/contexts/Auth/AuthContext";
|
||||
import { useNavigate } from "react-router";
|
||||
|
||||
function LoginPage() {
|
||||
const { user, loading } = useContext(AuthContext) as AuthContextType;
|
||||
const navigate = useNavigate();
|
||||
|
||||
useEffect(() => {
|
||||
if (!loading && user) {
|
||||
navigate("/");
|
||||
}
|
||||
}, [loading, user, navigate]);
|
||||
|
||||
return (
|
||||
<Background className="">
|
||||
<div className={styles.container}>
|
||||
<h1 className={styles.title}>Connexion</h1>
|
||||
<LoginForm />
|
||||
</div>
|
||||
</Background>
|
||||
);
|
||||
}
|
||||
|
||||
export default LoginPage;
|
||||
@@ -3,7 +3,7 @@ import styles from "./LoginForm.module.css";
|
||||
import Button from "../../../../components/ui/Button/Button";
|
||||
import Input from "../../../../components/ui/Input/Input";
|
||||
import Modal from "../../../../components/ui/Modal/Modal";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { useNavigate } from "react-router";
|
||||
import { AuthContext, AuthContextType } from "../../../../contexts/Auth/AuthContext";
|
||||
|
||||
interface LoginFormProps {
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
/* Conteneur principal */
|
||||
.container {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
@@ -113,7 +112,6 @@
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Conteneur des informations principales */
|
||||
.topDescription {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -122,14 +120,12 @@
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* Bloc d'informations */
|
||||
.infoBlock {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Conteneur pour les paramètres */
|
||||
.settingImage {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
@@ -137,7 +133,29 @@
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
/* Adaptation pour tablette et PC */
|
||||
.profilePictureContainer {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.pictureOverlay {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
color: white;
|
||||
text-align: center;
|
||||
padding: 2px;
|
||||
border-radius: 0 0 90% 90%;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
.clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
.profilePictureContainer:hover .pictureOverlay {
|
||||
opacity: 1;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.contentWrapper {
|
||||
flex-direction: row;
|
||||
@@ -177,7 +195,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* Adaptation pour grand écran */
|
||||
@media (min-width: 1024px) {
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
|
||||
+129
-161
@@ -7,28 +7,26 @@ import SettingsModal from "./components/SettingsModal/SettingsModal";
|
||||
import {useParams} from "react-router";
|
||||
import {useNavigate} from "react-router";
|
||||
import {useRef} from "react";
|
||||
import getUserById from "../../utils/users/getUserById.js";
|
||||
import getUserById from "../../utils/users/getUserById";
|
||||
import ManageMember from "./components/ManageMember/ManageMember.jsx";
|
||||
|
||||
import uploadProfilePhoto from "../../utils/users/uploadProfilePhoto";
|
||||
import deleteProfilePhoto from "../../utils/users/deleteProfilePhoto.js";
|
||||
|
||||
|
||||
interface TaskType {
|
||||
id: number;
|
||||
name: string;
|
||||
description: string;
|
||||
location: string;
|
||||
start: string;
|
||||
end: string;
|
||||
max_participants: number;
|
||||
events_id: number;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
pivot: {
|
||||
user_id: number;
|
||||
task_id: number;
|
||||
};
|
||||
id: number;
|
||||
name: string;
|
||||
description: string;
|
||||
location: string;
|
||||
start: string;
|
||||
end: string;
|
||||
max_participants: number;
|
||||
events_id: number;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
pivot: {
|
||||
user_id: number;
|
||||
task_id: number;
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
@@ -51,162 +49,132 @@ interface AuthContextType {
|
||||
}
|
||||
|
||||
function ProfilePage() {
|
||||
const navigate = useNavigate();
|
||||
const {id} = useParams();
|
||||
const {user, update} = useContext(AuthContext) as AuthContextType;
|
||||
const [profileUser, setProfileUser] = useState<User | null>(null);
|
||||
const [profilePicture, setProfilePicture] = useState<string | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [success, setSuccess] = useState<string | null>(null);
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
const navigate = useNavigate();
|
||||
const { id } = useParams();
|
||||
const { user, update } = useContext(AuthContext) as AuthContextType;
|
||||
const [profileUser, setProfileUser] = useState<User | null>(null);
|
||||
const [profilePicture, setProfilePicture] = useState<string | null>(null);
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const isOwnProfile = !id || user?.id.toString() === id;
|
||||
const isOwnProfile = !id || user?.id.toString() === id;
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
if (!isOwnProfile && id) {
|
||||
const res = await getUserById(id);
|
||||
if (res.status === 404) {
|
||||
navigate("/404");
|
||||
return;
|
||||
}
|
||||
if (res.status !== 200) {
|
||||
console.error("Erreur lors du chargement du profil", res);
|
||||
return;
|
||||
}
|
||||
setProfileUser(res.data);
|
||||
} else {
|
||||
update();
|
||||
setProfileUser(user);
|
||||
if (user?.profile_photo_path) {
|
||||
setProfilePicture(`${import.meta.env.VITE_API_URL}/storage/${user.profile_photo_path}`);
|
||||
}
|
||||
}
|
||||
})();
|
||||
}, [user, id]);
|
||||
|
||||
const handleEditPictureClick = () => {
|
||||
if (fileInputRef.current) {
|
||||
fileInputRef.current.click();
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
console.log(JSON.stringify(import.meta.env.VITE_API_URL));
|
||||
if (!isOwnProfile && id) {
|
||||
const res = await getUserById(Number(id));
|
||||
if (res.status === 404) {
|
||||
navigate("/404");
|
||||
return;
|
||||
}
|
||||
};
|
||||
|
||||
// Remplacé : handleFileChange extrait vers utils/users/uploadProfilePhoto
|
||||
const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (!file) return;
|
||||
|
||||
try {
|
||||
const res = await uploadProfilePhoto(file);
|
||||
if (res.ok) {
|
||||
setProfilePicture(`${import.meta.env.VITE_API_URL}/storage/${res.data.profile_photo_path}`);
|
||||
setSuccess("Photo mise à jour !");
|
||||
setError(null);
|
||||
await update();
|
||||
} else {
|
||||
setError(res.data?.message || res.error || "Erreur lors de l'upload.");
|
||||
setSuccess(null);
|
||||
}
|
||||
} catch (err) {
|
||||
setError("Erreur réseau.");
|
||||
setSuccess(null);
|
||||
if (res.status !== 200) {
|
||||
console.log("Erreur lors du chargement du profil", res);
|
||||
return;
|
||||
}
|
||||
};
|
||||
|
||||
// Remplacé : handleDeletePicture extrait vers utils/users/deleteProfilePhoto
|
||||
const handleDeletePicture = async () => {
|
||||
try {
|
||||
const res = await deleteProfilePhoto();
|
||||
if (res.status >= 200 && res.status < 300) {
|
||||
setProfilePicture(null);
|
||||
setSuccess("Photo supprimée !");
|
||||
setError(null);
|
||||
await update();
|
||||
} else {
|
||||
setError(res.data?.message || "Erreur lors de la suppression.");
|
||||
setSuccess(null);
|
||||
}
|
||||
} catch (err) {
|
||||
setError("Erreur réseau.");
|
||||
setSuccess(null);
|
||||
setProfileUser(res.data);
|
||||
} else {
|
||||
setProfileUser(user);
|
||||
if (user?.profile_photo_path) {
|
||||
setProfilePicture(`${import.meta.env.VITE_API_URL}/storage/${user.profile_photo_path}`);
|
||||
}
|
||||
};
|
||||
}
|
||||
})();
|
||||
}, [user, id]);
|
||||
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<div className={`${styles.profileboard} glassCard`}>
|
||||
<div className={styles.contentWrapper}>
|
||||
<div className={styles.profilePictureContainer}>
|
||||
<img
|
||||
src={isOwnProfile ? (profilePicture || "/react.svg") : "/react.svg"}
|
||||
alt="Photo de profil"
|
||||
className={styles.profilePicture}
|
||||
/>
|
||||
</div>
|
||||
const handleEditPictureClick = () => {
|
||||
if (fileInputRef.current) {
|
||||
fileInputRef.current.click();
|
||||
}
|
||||
};
|
||||
|
||||
{isOwnProfile && (
|
||||
<div className={styles.pictureButtons}>
|
||||
<button onClick={handleEditPictureClick} className={styles.editPictureButton}>
|
||||
Modifier la photo
|
||||
</button>
|
||||
{user?.profile_photo_path && (
|
||||
<button onClick={handleDeletePicture} className={styles.deletePictureButton}>
|
||||
Supprimer
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (!file) return;
|
||||
|
||||
<input
|
||||
type="file"
|
||||
ref={fileInputRef}
|
||||
onChange={handleFileChange}
|
||||
accept="image/*"
|
||||
style={{display: "none"}}
|
||||
/>
|
||||
{error && <p className={styles.errorMessage}>{error}</p>}
|
||||
{success && <p className={styles.successMessage}>{success}</p>}
|
||||
try {
|
||||
const res = await uploadProfilePhoto(file);
|
||||
if (res.ok) {
|
||||
setProfilePicture(`${import.meta.env.VITE_API_URL}/storage/${res.data.profile_photo_path}`);
|
||||
console.log("Photo mise à jour")
|
||||
await update();
|
||||
} else {
|
||||
console.log(res.data?.message || res.error || "Erreur lors de l'upload.");
|
||||
}
|
||||
} catch (err) {
|
||||
console.log("Erreur réseau.");
|
||||
}
|
||||
};
|
||||
const handleDeletePicture = async () => {
|
||||
|
||||
await deleteProfilePhoto();
|
||||
setProfilePicture(null);
|
||||
};
|
||||
|
||||
<div className={styles.description}>
|
||||
<div className={styles.headerProfile}>
|
||||
<h2>
|
||||
{profileUser?.name} {profileUser?.lastname}
|
||||
</h2>
|
||||
{user?.isAdmin && profileUser && !isOwnProfile && (
|
||||
<ManageMember userToManage={profileUser}/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className={styles.topDescription}>
|
||||
<div className={`${styles.infoBlock} glassBorder`}>
|
||||
<p><strong>Role :</strong> {profileUser?.role}</p>
|
||||
<p><strong>Membre depuis :</strong> {profileUser && formatDate(profileUser.created_at)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className={`${styles.infoBlock} glassBorder`}>
|
||||
<p><strong>Mail :</strong> {profileUser?.email}</p>
|
||||
<p><strong>Téléphone :</strong> {profileUser?.phone ?? "Non renseigné"}</p>
|
||||
</div>
|
||||
|
||||
{isOwnProfile && (
|
||||
<div className={styles.settingImage}>
|
||||
<SettingsModal/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<h2>Tâches :</h2>
|
||||
{profileUser?.tasks.length ? (
|
||||
profileUser.tasks.map((task) =><Task key={task.id} task={task}/>)
|
||||
) : (
|
||||
<p>Aucune tâche.</p>
|
||||
)}
|
||||
</div>
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<div className={`${styles.profileboard} glassCard`}>
|
||||
<div className={styles.contentWrapper}>
|
||||
<div className={styles.profilePictureContainer} onClick={isOwnProfile ? handleEditPictureClick : undefined} style={isOwnProfile ? { cursor: "pointer" } : {}}>
|
||||
<img
|
||||
src={isOwnProfile ? (profilePicture || "/react.svg") : "/react.svg"}
|
||||
alt="Photo de profil"
|
||||
className={styles.profilePicture}
|
||||
/>
|
||||
{isOwnProfile && (
|
||||
<div className={styles.pictureOverlay}>
|
||||
Modifier
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<input type="file" ref={fileInputRef} onChange={handleFileChange} accept="image/*" style={{ display: "none" }}/>
|
||||
<input
|
||||
type="file"
|
||||
ref={fileInputRef}
|
||||
onChange={handleFileChange}
|
||||
accept="image/*"
|
||||
style={{ display: "none" }}
|
||||
/>
|
||||
|
||||
<div className={styles.description}>
|
||||
<div className={styles.headerProfile}>
|
||||
<h2>
|
||||
{profileUser?.name} {profileUser?.lastname}
|
||||
</h2>
|
||||
{user?.isAdmin && profileUser && !isOwnProfile && (
|
||||
<ManageMember userToManage={profileUser} />
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className={styles.topDescription}>
|
||||
<div className={`${styles.infoBlock} glassBorder`}>
|
||||
<p><strong>Role :</strong> {profileUser?.role}</p>
|
||||
<p><strong>Membre depuis :</strong> {profileUser && formatDate(profileUser.created_at)}</p>
|
||||
</div>
|
||||
|
||||
<div className={`${styles.infoBlock} glassBorder`}>
|
||||
<p><strong>Mail :</strong> {profileUser?.email}</p>
|
||||
<p><strong>Téléphone :</strong> {profileUser?.phone ?? "Non renseigné"}</p>
|
||||
</div>
|
||||
|
||||
{isOwnProfile && (
|
||||
<div className={styles.settingImage}>
|
||||
<SettingsModal />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<h2>Tâches :</h2>
|
||||
{profileUser?.tasks.length ? (
|
||||
profileUser.tasks.map((task) => <Task key={task.id} task={task} />)
|
||||
) : (
|
||||
<p>Aucune tâche.</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ProfilePage;
|
||||
@@ -35,7 +35,7 @@ interface AuthContextType {
|
||||
}
|
||||
|
||||
export default function SettingsModal() {
|
||||
const {user, logout, update} = useContext(AuthContext) as AuthContextType;
|
||||
const {user, logout, update} = useContext(AuthContext) as unknown as AuthContextType;
|
||||
|
||||
const [open, setOpen] = useState<boolean>(false);
|
||||
const [isDelete, setIsDelete] = useState<boolean>(false);
|
||||
|
||||
@@ -1,12 +1,13 @@
|
||||
import styles from "./RegisterPage.module.css";
|
||||
import Background from "../../components/Background/Background.jsx";
|
||||
import Background from "../../components/Background/Background";
|
||||
import Input from "../../components/ui/Input/Input";
|
||||
import Button from "../../components/ui/Button/Button";
|
||||
import {useContext, useEffect, useState} from "react";
|
||||
import register from "../../utils/register.js";
|
||||
import { useNavigate } from "react-router";
|
||||
import { AuthContext } from "../../contexts/Auth/AuthContext.js";
|
||||
import { AuthContext } from "../../contexts/Auth/AuthContext";
|
||||
import Modal from "../../components/ui/Modal/Modal";
|
||||
import {AuthContextType } from "../../../src/contexts/Auth/AuthContext";
|
||||
|
||||
|
||||
function RegisterPage() {
|
||||
@@ -22,8 +23,7 @@ function RegisterPage() {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [title, setTitle] = useState("");
|
||||
const [message, setMessage] = useState("");
|
||||
|
||||
const { user, loading } = useContext(AuthContext)
|
||||
const { user, loading } = useContext(AuthContext) as AuthContextType
|
||||
|
||||
useEffect(() => {
|
||||
if (!loading && user) {
|
||||
@@ -31,15 +31,21 @@ function RegisterPage() {
|
||||
}
|
||||
}, [loading, user]);
|
||||
|
||||
const handleModal = (t, m) => {
|
||||
const handleModal = (t: string, m: string) => {
|
||||
setTitle(t)
|
||||
setMessage(m)
|
||||
setOpen(true);
|
||||
}
|
||||
|
||||
async function handleSubmit(e) {
|
||||
e.preventDefault();
|
||||
|
||||
const handleKeyDown = (e: React.KeyboardEvent) => {
|
||||
if (e.key === 'Enter') {
|
||||
handleSubmit();
|
||||
}
|
||||
};
|
||||
|
||||
async function handleSubmit():Promise<void>
|
||||
{
|
||||
|
||||
if(!(password === confirmPassword)) handleModal("Mot de passe invalide", "Les mots de passes ne conrrespondent pas");
|
||||
else if(password.length < 8) handleModal("Mot de passe invalide", "Le mot de passe doit faire plus de 8 charactères");
|
||||
else {
|
||||
@@ -54,7 +60,7 @@ function RegisterPage() {
|
||||
}
|
||||
}
|
||||
|
||||
const handlePhone = (e) => {
|
||||
const handlePhone = (e:React.ChangeEvent<HTMLInputElement>) => {
|
||||
const value = e.target.value;
|
||||
if (value === "" || /^[0-9 +]+$/.test(value)) {
|
||||
setPhone(value);
|
||||
@@ -62,13 +68,13 @@ function RegisterPage() {
|
||||
};
|
||||
|
||||
|
||||
return <Background>
|
||||
return <Background className="">
|
||||
|
||||
<div className={styles.container}>
|
||||
|
||||
<h1 className={styles.title}>Créer un compte</h1>
|
||||
|
||||
<div className={`glassCard ${styles.inputContainer}`}>
|
||||
<div className={`glassCard ${styles.inputContainer}`} onKeyDown={handleKeyDown}>
|
||||
|
||||
<div className={styles.formGroup}>
|
||||
<Input
|
||||
@@ -44,4 +44,5 @@
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
flex-shrink: 0;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
+1
-1
@@ -9,7 +9,7 @@ import EventsPage from "./pages/Events/EventsPage.jsx";
|
||||
import AdminPage from "./pages/Admin/AdminPage.jsx";
|
||||
import WaitValidationPage from "./pages/WaitValidation/WaitValidationPage.jsx";
|
||||
import PageNotFoundPage from "./pages/PageNotFound/PageNotFoundPage.jsx";
|
||||
import eventDetail from "./pages/EventDetail/EventDetailPage.jsx";
|
||||
import eventDetail from "./pages/EventDetail/EventDetailPage.tsx";
|
||||
import legalNotices from "./pages/LegalNotices/LegalNoticesPage.jsx";
|
||||
import RGPDPage from "./pages/RGPD/RGPDPage.jsx";
|
||||
|
||||
|
||||
@@ -0,0 +1,21 @@
|
||||
import { JSX } from "react";
|
||||
import { MemoryRouter } from "react-router";
|
||||
import Footer from "../components/Footer/Footer";
|
||||
|
||||
export default {
|
||||
title: "Layout/Footer",
|
||||
component: Footer,
|
||||
parameters: {
|
||||
layout: "fullscreen",
|
||||
},
|
||||
tags: ["autodocs"],
|
||||
decorators: [
|
||||
(Story: () => JSX.Element) => (
|
||||
<MemoryRouter>
|
||||
<Story />
|
||||
</MemoryRouter>
|
||||
),
|
||||
],
|
||||
};
|
||||
|
||||
export const Default = {};
|
||||
@@ -0,0 +1,30 @@
|
||||
import { JSX } from "react";
|
||||
import { MemoryRouter } from "react-router";
|
||||
import Header from "../components/Header/Header";
|
||||
import { EventProvider } from "../contexts/Events/EventProvider";
|
||||
import { PendingMembersProvider } from "../contexts/PendingMembers/PendingMembersProvider";
|
||||
import { AuthProvider } from "../contexts/Auth/AuthProvider";
|
||||
|
||||
export default {
|
||||
title: "Layout/Header",
|
||||
component: Header,
|
||||
parameters: {
|
||||
layout: "fullscreen",
|
||||
},
|
||||
tags: ["autodocs"],
|
||||
decorators: [
|
||||
(Story: () => JSX.Element) => (
|
||||
<MemoryRouter>
|
||||
<AuthProvider>
|
||||
<PendingMembersProvider>
|
||||
<EventProvider>
|
||||
<Story />
|
||||
</EventProvider>
|
||||
</PendingMembersProvider>
|
||||
</AuthProvider>
|
||||
</MemoryRouter>
|
||||
),
|
||||
],
|
||||
};
|
||||
|
||||
export const Default = {};
|
||||
@@ -1,13 +0,0 @@
|
||||
import Loading from "../components/ui/Loading/Loading";
|
||||
|
||||
|
||||
export default {
|
||||
title: 'UI/Loading',
|
||||
component: Loading,
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
},
|
||||
tags: ['autodocs'],
|
||||
};
|
||||
|
||||
export const Primary = {};
|
||||
@@ -0,0 +1,14 @@
|
||||
import Loading from "../components/ui/Loading/Loading"
|
||||
|
||||
|
||||
export default {
|
||||
title: "UI/Loading",
|
||||
component: Loading,
|
||||
parameters: {
|
||||
layout: "centered",
|
||||
},
|
||||
tags: ['autodocs'],
|
||||
argTypes: {},
|
||||
}
|
||||
|
||||
export const Default = {}
|
||||
@@ -1,13 +0,0 @@
|
||||
import fetchWrapper from "../fetchWrapper.js";
|
||||
import getXSRFToken from "../getXSRF.js";
|
||||
|
||||
export default async function login(email, password) {
|
||||
const csrfToken = await getXSRFToken();
|
||||
|
||||
return fetchWrapper(
|
||||
"/api/users/login",
|
||||
{ email, password },
|
||||
"POST",
|
||||
{ "X-XSRF-TOKEN": csrfToken }
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
import fetchWrapper from "../fetchWrapper";
|
||||
import getXSRFToken from "../getXSRF";
|
||||
|
||||
|
||||
|
||||
export default async function login(email: string, password: string) {
|
||||
const csrfToken: string = await getXSRFToken();
|
||||
return fetchWrapper(
|
||||
"/api/users/login",
|
||||
{ email, password },
|
||||
"POST",
|
||||
{ "X-XSRF-TOKEN": csrfToken }
|
||||
);
|
||||
}
|
||||
@@ -1,35 +1,3 @@
|
||||
|
||||
|
||||
/*export function formatDateLetter(d) {
|
||||
if (!d) return "Date inconnue";
|
||||
|
||||
const dateObj = new Date(d);
|
||||
if (isNaN(dateObj.getTime())) return "Date invalide";
|
||||
|
||||
const monthNames = [
|
||||
"Janvier", "Février", "Mars", "Avril", "Mai", "Juin",
|
||||
"Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"
|
||||
];
|
||||
|
||||
const day = dateObj.getDate().toString().padStart(2, "0");
|
||||
const month = monthNames[dateObj.getMonth()];
|
||||
const year = dateObj.getFullYear();
|
||||
const hours = dateObj.getHours().toString().padStart(2, "0");
|
||||
const minutes = dateObj.getMinutes().toString().padStart(2, "0");
|
||||
|
||||
return `${day} ${month} ${year} à ${hours}:${minutes}`;
|
||||
}
|
||||
|
||||
|
||||
export function formatDateLetterJS(d) {
|
||||
const monthNames = [
|
||||
"Janvier", "Février", "Mars", "Avril", "Mai", "Juin",
|
||||
"Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"
|
||||
];
|
||||
const [year, month, day] = d.split('-');
|
||||
return `${day} ${monthNames[parseInt(month) - 1]} ${year}`;
|
||||
}*/
|
||||
|
||||
export function formatDateLetter(d: string | Date | null | undefined): string {
|
||||
if (!d) return "Date inconnue";
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import fetchWrapper from "../fetchWrapper.js";
|
||||
import getXSRFToken from "../getXSRF.js";
|
||||
import fetchWrapper from "../fetchWrapper";
|
||||
import getXSRFToken from "../getXSRF";
|
||||
|
||||
export default async function createEvent(name, description, start, end) {
|
||||
export default async function createEvent(name:string, description:string, start:string, end:string) {
|
||||
const csrfToken = await getXSRFToken();
|
||||
|
||||
return fetchWrapper(
|
||||
@@ -1,7 +1,7 @@
|
||||
import fetchWrapper from "../fetchWrapper.js";
|
||||
import getXSRFToken from "../getXSRF.js";
|
||||
import fetchWrapper from "../fetchWrapper";
|
||||
import getXSRFToken from "../getXSRF";
|
||||
|
||||
export default async function deleteEvent(eventId) {
|
||||
export default async function deleteEvent(eventId:number) {
|
||||
const csrfToken = await getXSRFToken();
|
||||
|
||||
return fetchWrapper(
|
||||
@@ -1,28 +0,0 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import getAllEvents from "../../utils/events/getAllEvents";
|
||||
|
||||
function EventsCounter() {
|
||||
const [eventsCount, setEventsCount] = useState(0);
|
||||
const [loading, setLoading] = useState(true);
|
||||
useEffect(() => {
|
||||
const fetchEvents = async () => {
|
||||
try {
|
||||
const events = await getAllEvents();
|
||||
if (Array.isArray(events)) {
|
||||
setEventsCount(events.length);
|
||||
} else {
|
||||
setEventsCount(0);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
setEventsCount(0);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
fetchEvents();
|
||||
}, []);
|
||||
if (loading) return <p>Chargement...</p>;
|
||||
return <p>Nombre d’événements : {eventsCount}</p>;
|
||||
}
|
||||
export default EventsCounter;
|
||||
@@ -1,4 +1,4 @@
|
||||
import fetchWrapper from "../fetchWrapper.js";
|
||||
import fetchWrapper from "../fetchWrapper";
|
||||
|
||||
export default async function getAllEvents() {
|
||||
return fetchWrapper("/api/events/", null, "GET");
|
||||
@@ -1,5 +0,0 @@
|
||||
import fetchWrapper from "../fetchWrapper.js";
|
||||
|
||||
export default async function GetEventById(id) {
|
||||
return fetchWrapper(`/api/events/${id}`, null, "GET");
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
import fetchWrapper from "../fetchWrapper";
|
||||
|
||||
export default async function GetEventById(id:number) {
|
||||
return fetchWrapper(`/api/events/${id}`, null, "GET");
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
export default async function searchEvents(query) {
|
||||
export default async function searchEvents(query: string): Promise<any[] | null> {
|
||||
try {
|
||||
const encodedQuery = encodeURIComponent(query);
|
||||
const response = await fetch(
|
||||
@@ -13,7 +13,7 @@ export default async function searchEvents(query) {
|
||||
}
|
||||
);
|
||||
const data = await response.json();
|
||||
return data.hits.map(hit => hit.document);
|
||||
return data.hits.map((hit: any) => hit.document);
|
||||
|
||||
} catch (err) {
|
||||
console.error("Erreur :", err);
|
||||
@@ -1,44 +1,3 @@
|
||||
/*export default async function fetchWrapper(path,data = null,method = "GET",headers = {}) {
|
||||
try {
|
||||
const res = await fetch(
|
||||
`${import.meta.env.VITE_API_URL}${path}`,
|
||||
{
|
||||
method,
|
||||
credentials: "include",
|
||||
headers: {
|
||||
"Accept": "application/json",
|
||||
"Content-Type": "application/json",
|
||||
...headers,
|
||||
},
|
||||
body: data ? JSON.stringify(data) : null,
|
||||
}
|
||||
);
|
||||
|
||||
let responseData = null;
|
||||
|
||||
try {
|
||||
responseData = await res.json();
|
||||
} catch (_) {
|
||||
responseData = null;
|
||||
}
|
||||
|
||||
return {
|
||||
status: res.status,
|
||||
data: responseData,
|
||||
};
|
||||
|
||||
} catch (err) {
|
||||
console.error("❌ Erreur réseau :", err);
|
||||
|
||||
return {
|
||||
status: 0,
|
||||
data: {
|
||||
message: "Network error",
|
||||
},
|
||||
};
|
||||
}
|
||||
}*/
|
||||
|
||||
interface FetchResponse<T = any> {
|
||||
status: number;
|
||||
data: T | null;
|
||||
@@ -79,7 +38,7 @@ export default async function fetchWrapper(
|
||||
};
|
||||
|
||||
} catch (err) {
|
||||
console.error("❌ Erreur réseau :", err);
|
||||
console.error("Erreur réseau :", err);
|
||||
|
||||
return {
|
||||
status: 0,
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import fetchWrapper from "./fetchWrapper.js";
|
||||
import fetchWrapper from "./fetchWrapper";
|
||||
|
||||
export default async function getRoles() {
|
||||
return fetchWrapper("/api/roles", null, "GET");
|
||||
@@ -1,5 +1,5 @@
|
||||
import fetchWrapper from "./fetchWrapper.js";
|
||||
import fetchWrapper from "./fetchWrapper";
|
||||
|
||||
export default async function getUser() {
|
||||
return fetchWrapper("/api/users/me", null, "GET");
|
||||
}
|
||||
}
|
||||
+2
-2
@@ -1,6 +1,6 @@
|
||||
import getXSRFToken from "../getXSRF.js";
|
||||
import getXSRFToken from "../getXSRF";
|
||||
|
||||
export default async function deleteNotificationUser(notificationId) {
|
||||
export default async function deleteNotificationUser(notificationId:number) {
|
||||
const csrfToken = await getXSRFToken();
|
||||
|
||||
try {
|
||||
+1
-1
@@ -1,4 +1,4 @@
|
||||
import getXSRFToken from "../getXSRF.js";
|
||||
import getXSRFToken from "../getXSRF";
|
||||
|
||||
export default async function readNotifications() {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import fetchWrapper from "./fetchWrapper.js";
|
||||
import getXSRFToken from "./getXSRF.js";
|
||||
import fetchWrapper from "./fetchWrapper";
|
||||
import getXSRFToken from "./getXSRF";
|
||||
|
||||
export default async function register(email, password, name, lastname, phone) {
|
||||
export default async function register(email:string, password:string, name:string, lastname:string, phone:string) {
|
||||
const csrfToken = await getXSRFToken();
|
||||
|
||||
return fetchWrapper(
|
||||
@@ -0,0 +1,13 @@
|
||||
import fetchWrapper from "../fetchWrapper";
|
||||
import getXSRFToken from "../getXSRF";
|
||||
|
||||
export default async function assign(taskId: number): Promise<any> {
|
||||
const csrfToken = await getXSRFToken();
|
||||
|
||||
return fetchWrapper(
|
||||
"/api/events/task/assign",
|
||||
{task_id: taskId},
|
||||
"POST",
|
||||
{"X-XSRF-TOKEN": csrfToken}
|
||||
);
|
||||
}
|
||||
@@ -1,11 +1,11 @@
|
||||
import fetchWrapper from "../fetchWrapper.js";
|
||||
import getXSRFToken from "../getXSRF.js";
|
||||
|
||||
export default async function assign(taskId) {
|
||||
export default async function assignOtherUser(taskId: number, userId: number): Promise<any> {
|
||||
const csrfToken = await getXSRFToken();
|
||||
|
||||
return fetchWrapper(
|
||||
"/api/events/task/assign",
|
||||
`/api/events/task/assign/${userId}`,
|
||||
{task_id: taskId},
|
||||
"POST",
|
||||
{"X-XSRF-TOKEN": csrfToken}
|
||||
@@ -1,29 +0,0 @@
|
||||
import fetchWrapper from "../fetchWrapper.js";
|
||||
import getXSRFToken from "../getXSRF.js";
|
||||
|
||||
export default async function createTask({
|
||||
eventId,
|
||||
name,
|
||||
description,
|
||||
start,
|
||||
end,
|
||||
location,
|
||||
maxParticipants,
|
||||
}) {
|
||||
const csrfToken = await getXSRFToken();
|
||||
|
||||
return fetchWrapper(
|
||||
"/api/events/task",
|
||||
{
|
||||
event_id: eventId,
|
||||
name,
|
||||
description,
|
||||
start,
|
||||
end,
|
||||
location,
|
||||
max_participants: maxParticipants,
|
||||
},
|
||||
"POST",
|
||||
{"X-XSRF-TOKEN": csrfToken}
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
import fetchWrapper from "../fetchWrapper";
|
||||
import getXSRFToken from "../getXSRF";
|
||||
|
||||
interface CreateTaskParams {
|
||||
eventId: number;
|
||||
name: string;
|
||||
description: string;
|
||||
start: string;
|
||||
end: string;
|
||||
location: string;
|
||||
maxParticipants: number;
|
||||
}
|
||||
|
||||
export default async function createTask({
|
||||
eventId,
|
||||
name,
|
||||
description,
|
||||
start,
|
||||
end,
|
||||
location,
|
||||
maxParticipants,
|
||||
}: CreateTaskParams): Promise<any> {
|
||||
const csrfToken = await getXSRFToken();
|
||||
|
||||
return fetchWrapper(
|
||||
"/api/events/task",
|
||||
{
|
||||
event_id: eventId,
|
||||
name,
|
||||
description,
|
||||
start,
|
||||
end,
|
||||
location,
|
||||
max_participants: maxParticipants,
|
||||
},
|
||||
"POST",
|
||||
{"X-XSRF-TOKEN": csrfToken}
|
||||
);
|
||||
}
|
||||
@@ -1,13 +0,0 @@
|
||||
import fetchWrapper from "../fetchWrapper.js";
|
||||
import getXSRFToken from "../getXSRF.js";
|
||||
|
||||
export default async function deleteTask(taskId) {
|
||||
const csrfToken = await getXSRFToken();
|
||||
|
||||
return fetchWrapper(
|
||||
`/api/events/tasks/${taskId}`,
|
||||
{ task_id: taskId },
|
||||
"DELETE",
|
||||
{ "X-XSRF-TOKEN": csrfToken }
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
import fetchWrapper from "../fetchWrapper";
|
||||
import getXSRFToken from "../getXSRF";
|
||||
|
||||
export default async function deleteTask(taskId: number): Promise<any> {
|
||||
const csrfToken = await getXSRFToken();
|
||||
|
||||
return fetchWrapper(
|
||||
`/api/events/tasks/${taskId}`,
|
||||
{task_id: taskId},
|
||||
"DELETE",
|
||||
{"X-XSRF-TOKEN": csrfToken}
|
||||
);
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
import fetchWrapper from "../fetchWrapper.js";
|
||||
|
||||
export default async function isAssigned(taskId) {
|
||||
return fetchWrapper(
|
||||
`/api/events/tasks/${taskId}/assigned`,
|
||||
null,
|
||||
"GET"
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import fetchWrapper from "../fetchWrapper";
|
||||
|
||||
export default async function isAssigned(taskId: number): Promise<any> {
|
||||
return fetchWrapper(
|
||||
`/api/events/tasks/${taskId}/assigned`,
|
||||
null,
|
||||
"GET"
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
import fetchWrapper from "../fetchWrapper";
|
||||
import getXSRFToken from "../getXSRF";
|
||||
|
||||
export default async function unAssign(taskId: number): Promise<any> {
|
||||
const csrfToken = await getXSRFToken();
|
||||
|
||||
return fetchWrapper(
|
||||
"/api/events/task/unassign",
|
||||
{task_id: taskId},
|
||||
"POST",
|
||||
{"X-XSRF-TOKEN": csrfToken}
|
||||
);
|
||||
}
|
||||
@@ -1,13 +1,13 @@
|
||||
import fetchWrapper from "../fetchWrapper.js";
|
||||
import getXSRFToken from "../getXSRF.js";
|
||||
|
||||
export default async function unAssign(taskId) {
|
||||
export default async function unAssignOtherUser(taskId: number, userId: number): Promise<any> {
|
||||
const csrfToken = await getXSRFToken();
|
||||
|
||||
return fetchWrapper(
|
||||
"/api/events/task/unassign",
|
||||
`/api/events/task/unassign/${userId}`,
|
||||
{task_id: taskId},
|
||||
"POST",
|
||||
{"X-XSRF-TOKEN": csrfToken}
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,8 +1,8 @@
|
||||
import fetchWrapper from "../fetchWrapper.js";
|
||||
import getXSRFToken from "../getXSRF.js";
|
||||
import fetchWrapper from "../fetchWrapper";
|
||||
import getXSRFToken from "../getXSRF";
|
||||
import Response from "../../interfaces/response.interface";
|
||||
|
||||
export default async function adminCreateUser(email: string, name: string, lastname: string, phone: string): Promise<Response> {
|
||||
export default async function adminCreateUser(email: string, name: string, lastname: string, phone: string) {
|
||||
const csrfToken = await getXSRFToken();
|
||||
|
||||
return fetchWrapper(
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import fetchWrapper from "../fetchWrapper.js";
|
||||
import getXSRFToken from "../getXSRF.js";
|
||||
import fetchWrapper from "../fetchWrapper";
|
||||
import getXSRFToken from "../getXSRF";
|
||||
|
||||
export default async function deactivateUser(userId) {
|
||||
export default async function deactivateUser(userId:number) {
|
||||
const csrfToken = await getXSRFToken();
|
||||
|
||||
return fetchWrapper(
|
||||
@@ -1,7 +1,7 @@
|
||||
import fetchWrapper from "../fetchWrapper.js";
|
||||
import getXSRFToken from "../getXSRF.js";
|
||||
import fetchWrapper from "../fetchWrapper";
|
||||
import getXSRFToken from "../getXSRF";
|
||||
|
||||
export default async function deleteOtherUser(userId) {
|
||||
export default async function deleteOtherUser(userId:number) {
|
||||
const csrfToken = await getXSRFToken();
|
||||
|
||||
return fetchWrapper(
|
||||
@@ -1,4 +1,4 @@
|
||||
import getXSRFToken from "../getXSRF.js";
|
||||
import getXSRFToken from "../getXSRF";
|
||||
|
||||
export default async function deleteProfilePhoto(): Promise<{ status: number; ok: boolean; data?: any; error?: string }> {
|
||||
try {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import fetchWrapper from "../fetchWrapper.js";
|
||||
import fetchWrapper from "../fetchWrapper";
|
||||
|
||||
export default async function getAllUser() {
|
||||
return fetchWrapper("/api/users");
|
||||
@@ -1,5 +0,0 @@
|
||||
import fetchWrapper from "../fetchWrapper.js";
|
||||
|
||||
export default async function getUserById(id) {
|
||||
return fetchWrapper(`/api/users/${id}`);
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
import fetchWrapper from "../fetchWrapper";
|
||||
|
||||
export default async function getUserById(id:number) {
|
||||
return fetchWrapper(`/api/users/${id}`);
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
import fetchWrapper from "../fetchWrapper.js";
|
||||
import fetchWrapper from "../fetchWrapper";
|
||||
|
||||
export default async function getUserToValidate() {
|
||||
return fetchWrapper("/api/users/invalid");
|
||||
@@ -1,7 +1,7 @@
|
||||
import fetchWrapper from "../fetchWrapper.js";
|
||||
import getXSRFToken from "../getXSRF.js";
|
||||
import fetchWrapper from "../fetchWrapper";
|
||||
import getXSRFToken from "../getXSRF";
|
||||
|
||||
export default async function modifyRole(role, userId) {
|
||||
export default async function modifyRole(role:number, userId:number) {
|
||||
const csrfToken = await getXSRFToken();
|
||||
|
||||
return fetchWrapper(
|
||||
@@ -1,4 +1,4 @@
|
||||
export default async function searchUsers(query) {
|
||||
export default async function searchUsers(query: string): Promise<any[] | null> {
|
||||
try {
|
||||
const encodedQuery = encodeURIComponent(query);
|
||||
const response = await fetch(
|
||||
@@ -13,7 +13,7 @@ export default async function searchUsers(query) {
|
||||
}
|
||||
);
|
||||
const data = await response.json();
|
||||
return data.hits.map(hit => hit.document);
|
||||
return data.hits.map((hit: any) => hit.document);
|
||||
|
||||
} catch (err) {
|
||||
console.error("Erreur :", err);
|
||||
@@ -1,33 +1,12 @@
|
||||
/*import fetchWrapper from "../fetchWrapper.js";
|
||||
import getXSRFToken from "../getXSRF.js";
|
||||
|
||||
export default async function updateUser(name, lastname, phone) {
|
||||
const csrfToken = await getXSRFToken();
|
||||
|
||||
return fetchWrapper(
|
||||
"/api/users/update",
|
||||
{ name, lastname, phone },
|
||||
"POST",
|
||||
{ "X-XSRF-TOKEN": csrfToken }
|
||||
);
|
||||
}*/
|
||||
|
||||
import fetchWrapper from "../fetchWrapper";
|
||||
import getXSRFToken from "../getXSRF";
|
||||
|
||||
interface UserUpdateData {
|
||||
name: string;
|
||||
lastname: string;
|
||||
phone: string | null;
|
||||
export default async function updateUser(name: string, lastname: string, phone: string | null) {
|
||||
const csrfToken = await getXSRFToken();
|
||||
return fetchWrapper(
|
||||
"/api/users/update",
|
||||
{ name, lastname, phone },
|
||||
"POST",
|
||||
{ "X-XSRF-TOKEN": csrfToken }
|
||||
);
|
||||
}
|
||||
|
||||
interface RequestHeaders {
|
||||
"X-XSRF-TOKEN": string;
|
||||
}
|
||||
export default async function updateUser(name: string,lastname: string,phone: string | null): Promise<Response> {
|
||||
const csrfToken: string = await getXSRFToken();
|
||||
const userData: UserUpdateData = {name,lastname,phone,};
|
||||
const headers: RequestHeaders = {"X-XSRF-TOKEN": csrfToken,};
|
||||
return fetchWrapper("/api/users/update",userData,"POST",headers);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import getXSRFToken from "../getXSRF.js";
|
||||
import getXSRFToken from "../getXSRF";
|
||||
|
||||
export default async function uploadProfilePhoto(file: File): Promise<{ status: number; ok: boolean; data?: any; error?: string }> {
|
||||
const formData = new FormData();
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import fetchWrapper from "../fetchWrapper.js";
|
||||
import getXSRFToken from "../getXSRF.js";
|
||||
import fetchWrapper from "../fetchWrapper";
|
||||
import getXSRFToken from "../getXSRF";
|
||||
|
||||
export default async function validateUser(userId) {
|
||||
export default async function validateUser(userId:number) {
|
||||
const csrfToken = await getXSRFToken();
|
||||
|
||||
return fetchWrapper(
|
||||
Reference in New Issue
Block a user