Merge branch 'dev' into 'features/manageMember'
# Conflicts: # src/utils/users/deleteUser.js
This commit is contained in:
T'JAMPENS QUENTIN p2406187
@@ -1,33 +1,54 @@
|
||||
import React from "react";
|
||||
import React, { useState, useEffect } from "react";
|
||||
import styles from "./IncompleteEvent.module.css";
|
||||
import getAllEvents from "../../utils/events/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);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchEvents = async () => {
|
||||
const data = await getAllEvents();
|
||||
setEvents(data?.data || data || []);
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
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={`glassBorder ${styles.eventCard}`}>
|
||||
<h3>{event.title}</h3>
|
||||
{events.map((event) => (
|
||||
<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.map((task, taskIndex) => (
|
||||
<li key={taskIndex}>{task}</li>
|
||||
))}
|
||||
</ul>
|
||||
{event.tasks?.length ? (
|
||||
event.tasks.map((task, taskIndex) => (
|
||||
<li key={taskIndex}>{task.name}</li>
|
||||
))
|
||||
) : (
|
||||
<li>Aucune tâche associée.</li>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.rightBlock>h2 {
|
||||
.rightBlock > h2 {
|
||||
font-size: 29px;
|
||||
}
|
||||
|
||||
@@ -17,20 +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 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.eventCard {
|
||||
min-width: calc((100% - 20px) / 3);
|
||||
max-width: calc((100% - 20px) / 3);
|
||||
@@ -38,63 +24,69 @@ display: none;
|
||||
max-height: 250px;
|
||||
overflow-y: auto;
|
||||
text-align: center;
|
||||
padding: 10px 10px 200px 10px;
|
||||
box-sizing: border-box;
|
||||
opacity: 0;
|
||||
transform: translateX(20px);
|
||||
animation: slideInEvent 1s ease forwards;
|
||||
flex-shrink: 1;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.eventCard:nth-child(1) {
|
||||
animation-delay: 0s;
|
||||
.eventCard ul {
|
||||
align-items: center;
|
||||
margin-left: 8%;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.eventCard:nth-child(2) {
|
||||
animation-delay: 0.1s;
|
||||
.eventCard ul li {
|
||||
text-align: left;
|
||||
list-style-type: circle;
|
||||
}
|
||||
|
||||
.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::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.eventCard>h3 {
|
||||
.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;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
opacity: 1;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@keyframes slideInEvent {
|
||||
from {
|
||||
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: 0;
|
||||
}
|
||||
|
||||
.eventCard h3 {
|
||||
@@ -102,18 +94,21 @@ display: none;
|
||||
}
|
||||
|
||||
.eventsContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
max-height: 300px;
|
||||
margin-top: 15px;
|
||||
height: fit-content;
|
||||
overflow-y: auto;
|
||||
padding-bottom: 0;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
.rightBlock>h2 {
|
||||
.rightBlock > h2 {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.emptyEvent {
|
||||
min-width: 100%;
|
||||
min-height: 200px;
|
||||
max-height: fit-content;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,39 +1,102 @@
|
||||
import React from "react";
|
||||
import React, { useState, useEffect } from "react";
|
||||
import Button from "../ui/button/button";
|
||||
import styles from "./PendingMembers.module.css";
|
||||
|
||||
function pendingMembers() {
|
||||
const pendingMembers = [
|
||||
{ name: "Antoine Ordonneau" },
|
||||
{ name: "Giovanni Josserand" },
|
||||
{ name: "Quentin T'Jampens" },
|
||||
{ name: "Quentin T'Jampens" },
|
||||
{ name: "Quentin T'Jampens" },
|
||||
{ name: "Quentin T'Jampens" },
|
||||
{ name: "Quentin T'Jampens" }
|
||||
];
|
||||
import getUserToValidate from "../../utils/users/getUserToValidate";
|
||||
import getUserById from "../../utils/users/getUserById";
|
||||
import validateUser from "../../utils/users/validateUser";
|
||||
import deleteUser from "../../utils/users/deleteUser";
|
||||
|
||||
const handleValidate = (name) => {
|
||||
console.log(`Valider ${name}`);
|
||||
function PendingMembers() {
|
||||
const [pendingMembers, setPendingMembers] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [actionLoading, setActionLoading] = useState(null);
|
||||
const [error, setError] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchPendingMembers = async () => {
|
||||
setLoading(true);
|
||||
const userIds = await getUserToValidate();
|
||||
if (userIds && userIds.length > 0) {
|
||||
const users = await Promise.all(userIds.map((id) => getUserById(id)));
|
||||
setPendingMembers(users.filter(Boolean));
|
||||
} else {
|
||||
setPendingMembers([]);
|
||||
}
|
||||
setLoading(false);
|
||||
};
|
||||
fetchPendingMembers();
|
||||
}, []);
|
||||
|
||||
const removeMember = (id) => {
|
||||
setPendingMembers(prevMembers =>
|
||||
prevMembers.filter(member => member.id !== id)
|
||||
);
|
||||
};
|
||||
|
||||
const handleReject = (name) => {
|
||||
console.log(`Refuser ${name}`);
|
||||
const handleValidate = async (id) => {
|
||||
setActionLoading(id);
|
||||
setError(null);
|
||||
try {
|
||||
const result = await validateUser(id);
|
||||
if (result.success) {
|
||||
removeMember(id);
|
||||
} else {
|
||||
setError(result.message || "Échec de la validation.");
|
||||
}
|
||||
} catch (err) {
|
||||
setError("Erreur lors de la validation.");
|
||||
} finally {
|
||||
setActionLoading(null);
|
||||
}
|
||||
};
|
||||
|
||||
const handleReject = async (id) => {
|
||||
setActionLoading(id);
|
||||
setError(null);
|
||||
try {
|
||||
const result = await deleteUser(id);
|
||||
if (result.success) {
|
||||
removeMember(id);
|
||||
} else {
|
||||
setError(result.message || "Échec de la suppression.");
|
||||
}
|
||||
} catch (err) {
|
||||
setError("Erreur lors de la suppression.");
|
||||
} finally {
|
||||
setActionLoading(null);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return <div>Chargement des membres en attente...</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`${styles.rightBlock} glassCard`}>
|
||||
<h2>Membres en attente de validation</h2>
|
||||
{error && <p style={{ color: "red" }}>{error}</p>}
|
||||
|
||||
<div className={styles.membersContainer}>
|
||||
{pendingMembers.map((member, index) => (
|
||||
<div key={index} className={`glassBorder ${styles.memberCard}`}>
|
||||
<p>{member.name}</p>
|
||||
{pendingMembers.length === 0 && <p>Aucun membre en attente</p>}
|
||||
|
||||
{pendingMembers.map((member) => (
|
||||
<div key={member.id} className={`glassCard ${styles.memberCard}`}>
|
||||
<p>{member.name} {member.lastname}</p>
|
||||
<div className={styles.buttonGroup}>
|
||||
<Button onClick={() => handleValidate(member.name)} variant="primary">
|
||||
Valider
|
||||
<Button
|
||||
onClick={() => handleValidate(member.id)}
|
||||
variant="primary"
|
||||
disabled={actionLoading === member.id}
|
||||
>
|
||||
{actionLoading === member.id ? "En cours..." : "Valider"}
|
||||
</Button>
|
||||
<Button onClick={() => handleReject(member.name)} variant="danger">
|
||||
Refuser
|
||||
<Button
|
||||
onClick={() => handleReject(member.id)}
|
||||
variant="danger"
|
||||
disabled={actionLoading === member.id}
|
||||
>
|
||||
{actionLoading === member.id ? "En cours..." : "Refuser"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -43,4 +106,4 @@ function pendingMembers() {
|
||||
);
|
||||
}
|
||||
|
||||
export default pendingMembers;
|
||||
export default PendingMembers;
|
||||
|
||||
@@ -18,10 +18,24 @@
|
||||
}
|
||||
|
||||
|
||||
.membersContainer::-webkit-scrollbar {
|
||||
display: none;
|
||||
/*.membersContainer::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.membersContainer::-webkit-scrollbar-track {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.membersContainer::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 0, 0, 0.5);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.membersContainer::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(125, 249, 30, 0.7);
|
||||
}*/
|
||||
|
||||
.memberCard {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
@@ -1,14 +1,32 @@
|
||||
import React, { useState } from "react";
|
||||
import React, { useState, useEffect } 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";
|
||||
import getAllEvents from "../../utils/events/getAllEvents";
|
||||
|
||||
Chart.register(ArcElement);
|
||||
|
||||
function ParticipationChart() {
|
||||
const [selected, setSelected] = useState("3");
|
||||
const [participationRate] = useState(78);
|
||||
|
||||
const [eventsCount, setEventsCount] = useState(0);
|
||||
const [participationRate, setParticipationRate] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchEvents = async () => {
|
||||
const res = await getAllEvents();
|
||||
|
||||
const eventsArray = res?.data ?? [];
|
||||
|
||||
setEventsCount(eventsArray.length);
|
||||
|
||||
const rate = Math.min(eventsArray.length, 100);
|
||||
setParticipationRate(rate);
|
||||
};
|
||||
|
||||
fetchEvents();
|
||||
}, []);
|
||||
|
||||
const chartData = {
|
||||
labels: ["Progress", "Background"],
|
||||
@@ -17,9 +35,7 @@ function ParticipationChart() {
|
||||
data: [participationRate, 100 - participationRate],
|
||||
backgroundColor: ["#1e60f9ff", "#ffffffff"],
|
||||
borderWidth: 0,
|
||||
weight: 10,
|
||||
cutout: "93%",
|
||||
circumference: 360,
|
||||
rotation: -90,
|
||||
},
|
||||
],
|
||||
@@ -31,56 +47,35 @@ function ParticipationChart() {
|
||||
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} glassBorder`}>
|
||||
<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 className={`${styles.partiText} glassCard`}>
|
||||
<label>Taux de participation depuis :</label>
|
||||
|
||||
<FormControl className={styles.formDesign}>
|
||||
<Select
|
||||
value={selected}
|
||||
onChange={(e) => setSelected(e.target.value)}
|
||||
className={styles.selectRoot}
|
||||
>
|
||||
<MenuItem value="1">1 mois</MenuItem>
|
||||
<MenuItem value="3">3 mois</MenuItem>
|
||||
<MenuItem value="6">6 mois</MenuItem>
|
||||
<MenuItem value="12">12 mois</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.chartContainer}>
|
||||
<div className={styles.chartWrapper}>
|
||||
<Doughnut data={chartData} options={chartOptions} />
|
||||
<div className={styles.chartPercentage}>{participationRate}%</div>
|
||||
<div className={styles.chartPercentage}>
|
||||
{eventsCount} events
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -3,14 +3,18 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
height: calc(100vh - 260px);
|
||||
margin-bottom: auto;
|
||||
height: 100%;
|
||||
min-height: calc(100vh - 260px);
|
||||
box-sizing: border-box;
|
||||
padding: 20px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.participationHeader {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.partiText {
|
||||
@@ -26,14 +30,15 @@
|
||||
|
||||
.partiText label {
|
||||
font-size: 20px;
|
||||
text-align: right;
|
||||
text-align: center;
|
||||
transition: all 0.3s ease;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.chartContainer {
|
||||
max-width: 80%;
|
||||
width: 400px;
|
||||
width: 80%;
|
||||
max-width: 400px;
|
||||
height: auto;
|
||||
aspect-ratio: 1/1;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
animation: slideEvent2 2s;
|
||||
@@ -58,12 +63,70 @@
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.formControl {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.formDesign {
|
||||
margin: 0 auto;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.selectRoot {
|
||||
width: 100px;
|
||||
height: 35px;
|
||||
font-size: 19px;
|
||||
border:none;
|
||||
}
|
||||
|
||||
.selectRoot .MuiOutlinedInput-notchedOutline {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.selectRoot .MuiSelect-select {
|
||||
padding: 8px;
|
||||
padding-right: 24px;
|
||||
}
|
||||
|
||||
.selectRoot .MuiSvgIcon-root {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.selectRoot .MuiMenu-paper {
|
||||
border-radius: 7px;
|
||||
width: 100px;
|
||||
max-width: 100px;
|
||||
}
|
||||
|
||||
.selectRoot .MuiMenuItem-root {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.selectMenuPaper {
|
||||
border-radius: 7px;
|
||||
width: 100px;
|
||||
max-width: 120px;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
border:none;
|
||||
}
|
||||
|
||||
.selectMenuItem {
|
||||
font-size: 18px;
|
||||
min-height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
@keyframes slideEvent2 {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(-20px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
@@ -75,45 +138,52 @@
|
||||
opacity: 0;
|
||||
transform: translateX(20px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.formControl {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.formDesign {
|
||||
margin: 0 auto;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 760px) {
|
||||
.partiText {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
.leftBlock {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
min-height: auto;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.chartContainer {
|
||||
width: 90%;
|
||||
max-width: 300px;
|
||||
height: auto;
|
||||
aspect-ratio: 1/1;
|
||||
}
|
||||
|
||||
.partiText label {
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.leftBlock {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
height: fit-content;
|
||||
margin-bottom: auto;
|
||||
margin-top: 30px;
|
||||
}
|
||||
.chartContainer{
|
||||
height:fit-content;
|
||||
.chartPercentage {
|
||||
font-size: 48px;
|
||||
}
|
||||
}
|
||||
/* scrollbar */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(100, 100, 100, 0.3);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(100, 100, 100, 0.5);
|
||||
}
|
||||
|
||||
}
|
||||
@@ -9,6 +9,8 @@ import Modal from "../../components/ui/modal/modal.jsx";
|
||||
import { AuthContext } from "../../contexts/auth/AuthContext.js";
|
||||
import deleteEvent from "../../utils/events/deleteEvent.js";
|
||||
import { useNavigate } from "react-router";
|
||||
import TextInput from "../../components/ui/input/input.jsx";
|
||||
import createTaskApi from "../../utils/tasks/createTask.js";
|
||||
|
||||
|
||||
function EventDetail() {
|
||||
@@ -21,6 +23,14 @@ function EventDetail() {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [event, setEvent] = useState(null);
|
||||
|
||||
const [openTaskModal, setOpenTaskModal] = useState(false);
|
||||
const [taskName, setTaskName] = useState("");
|
||||
const [taskDescription, setTaskDescription] = useState("");
|
||||
const [taskLocation, setTaskLocation] = useState("");
|
||||
const [maxParticipants, setMaxParticipants] = useState("");
|
||||
const [startTime, setStartTime] = useState("");
|
||||
const [endTime, setEndTime] = useState("");
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
@@ -42,6 +52,31 @@ function EventDetail() {
|
||||
}
|
||||
}
|
||||
|
||||
const createTask = async () => {
|
||||
const success = await createTaskApi({
|
||||
eventId: id,
|
||||
name: taskName,
|
||||
description: taskDescription,
|
||||
start: startTime,
|
||||
end: endTime,
|
||||
location: taskLocation,
|
||||
maxParticipants,
|
||||
});
|
||||
|
||||
if (success) {
|
||||
setOpenTaskModal(false);
|
||||
setTaskName("");
|
||||
setTaskDescription("");
|
||||
setTaskLocation("");
|
||||
setMaxParticipants("");
|
||||
setStartTime("");
|
||||
setEndTime("");
|
||||
} else {
|
||||
console.log("⚠️ Échec de la création de la task");
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<div className={styles.allContent}>
|
||||
<div className={`glassCard`}>
|
||||
@@ -54,7 +89,10 @@ function EventDetail() {
|
||||
<p>{event && formatDateLetter(event.start)}</p>
|
||||
<p>{event?.description}</p>
|
||||
</div>
|
||||
{user?.isAdmin && <Button variant={"danger"} className={styles.deleteEventBtn} onClick={handleDelete}>Supprimer</Button>}
|
||||
{user?.isAdmin && <div className={styles.manageEvent}>
|
||||
<Button variant={"danger"} className={styles.manageBtn} onClick={handleDelete}>Supprimer</Button>
|
||||
<Button variant={"default"} className={styles.manageBtn} onClick={() => setOpenTaskModal(true)}>Créer tâche</Button>
|
||||
</div>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -74,6 +112,70 @@ function EventDetail() {
|
||||
<Button variant={"default"} onClick={delEvent}>Confirmer</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
<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) => setTaskName(e.target.value)}
|
||||
placeholder="Nom de la tâche"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p>Description</p>
|
||||
<TextInput
|
||||
value={taskDescription}
|
||||
onChange={(e) => setTaskDescription(e.target.value)}
|
||||
placeholder="Description de la tâche"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p>Lieu</p>
|
||||
<TextInput
|
||||
value={taskLocation}
|
||||
onChange={(e) => setTaskLocation(e.target.value)}
|
||||
placeholder="Lieu"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p>Nombre maximum de participants</p>
|
||||
<TextInput
|
||||
type="number"
|
||||
value={maxParticipants}
|
||||
onChange={(e) => setMaxParticipants(e.target.value)}
|
||||
placeholder="Participants max"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p>Heure de début</p>
|
||||
<TextInput
|
||||
type="datetime-local"
|
||||
value={startTime}
|
||||
onChange={(e) => setStartTime(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p>Heure de fin</p>
|
||||
<TextInput
|
||||
type="datetime-local"
|
||||
value={endTime}
|
||||
onChange={(e) => setEndTime(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Button variant="default" onClick={createTask}> Créer la tâche </Button>
|
||||
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -52,7 +52,7 @@
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.deleteEventBtn {
|
||||
.manageBtn {
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
@@ -61,4 +61,10 @@
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.manageEvent {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 10px;
|
||||
}
|
||||
@@ -1,14 +1,23 @@
|
||||
|
||||
|
||||
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 [datePart, timePart] = d.split(' ');
|
||||
const [year, month, day] = datePart.split('-');
|
||||
const [hours, minutes] = timePart.split(':');
|
||||
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} ${monthNames[parseInt(month, 10) - 1]} ${year} à ${hours}:${minutes}`;
|
||||
return `${day} ${month} ${year} à ${hours}:${minutes}`;
|
||||
}
|
||||
|
||||
|
||||
@@ -19,4 +28,5 @@ export function formatDateLetterJS(d) {
|
||||
];
|
||||
const [year, month, day] = d.split('-');
|
||||
return `${day} ${monthNames[parseInt(month) - 1]} ${year}`;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,28 @@
|
||||
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;
|
||||
@@ -0,0 +1,49 @@
|
||||
import getXSRFToken from "../getXSRF.js";
|
||||
|
||||
export default async function createTask({
|
||||
eventId,
|
||||
name,
|
||||
description,
|
||||
start,
|
||||
end,
|
||||
location,
|
||||
maxParticipants,
|
||||
}) {
|
||||
const csrfToken = await getXSRFToken();
|
||||
|
||||
try {
|
||||
const res = await fetch(
|
||||
`${import.meta.env.VITE_API_URL}/api/events/task`,
|
||||
{
|
||||
method: "POST",
|
||||
credentials: "include",
|
||||
headers: {
|
||||
Accept: "application/json",
|
||||
"Content-Type": "application/json",
|
||||
"X-XSRF-TOKEN": csrfToken,
|
||||
},
|
||||
body: JSON.stringify({
|
||||
event_id: eventId,
|
||||
name,
|
||||
description,
|
||||
start,
|
||||
end,
|
||||
location,
|
||||
max_participants: maxParticipants,
|
||||
}),
|
||||
}
|
||||
);
|
||||
|
||||
if (!res.ok) {
|
||||
const errorData = await res.json();
|
||||
return false;
|
||||
}
|
||||
|
||||
const data = await res.json();
|
||||
return true;
|
||||
|
||||
} catch (err) {
|
||||
console.log("❌ Erreur réseau :", err);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
export default async function getUserToValidate() {
|
||||
try {
|
||||
const res = await fetch(`${import.meta.env.VITE_API_URL}/api/users/invalid`, {
|
||||
method: 'GET',
|
||||
credentials: 'include',
|
||||
headers: {
|
||||
'Accept': 'application/json'
|
||||
}
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
throw new Error(`Erreur serveur : ${res.status}`);
|
||||
}
|
||||
|
||||
const data = await res.json();
|
||||
return data;
|
||||
} catch (err) {
|
||||
console.error('Erreur :', err);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
import getXSRFToken from "../getXSRF.js";
|
||||
|
||||
export default async function validateUser(userId) {
|
||||
const csrfToken = await getXSRFToken();
|
||||
try {
|
||||
const res = await fetch(
|
||||
`${import.meta.env.VITE_API_URL}/api/users/${userId}/validate`,
|
||||
{
|
||||
method: "POST",
|
||||
credentials: "include",
|
||||
headers: {
|
||||
Accept: "application/json",
|
||||
'X-XSRF-TOKEN': csrfToken,
|
||||
},
|
||||
}
|
||||
);
|
||||
if (!res.ok) {
|
||||
const errorData = await res.json();
|
||||
console.error("Erreur backend:", errorData);
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
} catch (err) {
|
||||
console.error("Erreur réseau:", err);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user