Giovanni/SAE-BUT2-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add responsive+ delete inline style

Browse Source
This commit is contained in:
p2405951
2026-01-12 14:56:01 +01:00
parent a90d52b44b
commit e38fdc11ab
7 changed files with 314 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/IncompleteEvent/IncompleteEvent.module.css
+2 -2
View File
@@ -27,7 +27,7 @@
list-style-type: circle;
}
.eventsContainer::-webkit-scrollbar {
/*.eventsContainer::-webkit-scrollbar {
height: 8px;
}
@@ -43,7 +43,7 @@
.eventsContainer::-webkit-scrollbar-thumb:hover {
background: rgba(30, 96, 249, 0.7);
}
}*/
.eventCard {
min-width: calc((100% - 20px) / 3);
src/components/PendingMembers/PendingMembers.jsx
+127 -10
View File
@@ -1,8 +1,10 @@
import React, { useState, useEffect } from "react";
/*import React, { useState, useEffect } from "react";
import Button from "../ui/button/button";
import styles from "./PendingMembers.module.css";
import getInvalidUsers from "../../utils/users/getUserToValidate";
import getUserById from "../../utils/users/getUserById";
import validateUser from "../../utils/users/validateUser";
import deleteUser from "../../utils/users/deleteUser";
function pendingMembers() {
const [pendingMembers, setPendingMembers] = useState([]);
@@ -30,15 +32,31 @@ function pendingMembers() {
fetchPendingMembers();
}, []);
const handleValidate = async (id) => {
console.log(`Valider l'utilisateur ID: ${id}`);
setPendingMembers(pendingMembers.filter(member => member.id !== id));
};
const handleReject = async (id) => {
const res = await deleteUser(id);
if (!res.ok) {
console.error(res.status, res.data);
alert(res.data?.message || "Action refusée");
return;
}
setPendingMembers(prev => prev.filter(u => u.id !== id));
};
const handleValidate = async (id) => {
const res = await validateUser(id);
if (!res.ok) {
alert(res.data?.message || "Validation refusée");
return;
}
setPendingMembers(prev => prev.filter(u => u.id !== id));
};
const handleReject = async (id) => {
console.log(`Refuser l'utilisateur ID: ${id}`);
setPendingMembers(pendingMembers.filter(member => member.id !== id));
};
if (loading) {
return <div>Chargement des membres en attente...</div>;
@@ -65,4 +83,103 @@ function pendingMembers() {
</div>
);
}
export default pendingMembers;
export default pendingMembers;*/
import React, { useState, useEffect } from "react";
import Button from "../ui/button/button";
import styles from "./PendingMembers.module.css";
import getInvalidUsers from "../../utils/users/getUserToValidate";
import getUserById from "../../utils/users/getUserById";
import validateUser from "../../utils/users/validateUser";
import deleteUser from "../../utils/users/deleteUser";
function PendingMembers() {
const [pendingMembers, setPendingMembers] = useState([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
const fetchPendingMembers = async () => {
setLoading(true);
const userIds = await getInvalidUsers();
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 handleValidate = async (id) => {
const ok = await validateUser(id);
if (!ok) return;
setPendingMembers((prev) =>
prev.filter((member) => member.id !== id)
);
};
const handleReject = async (id) => {
const ok = await deleteUser(id);
if (!ok) return;
setPendingMembers((prev) =>
prev.filter((member) => member.id !== id)
);
};
if (loading) {
return <div>Chargement des membres en attente...</div>;
}
return (
<div className={`${styles.rightBlock} glassCard`}>
<h2>Membres en attente de validation</h2>
<div className={styles.membersContainer}>
{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.id)}
variant="primary"
>
Valider
</Button>
<Button
onClick={() => handleReject(member.id)}
variant="danger"
>
Refuser
</Button>
</div>
</div>
))}
</div>
</div>
);
}
export default PendingMembers;
src/components/PendingMembers/PendingMembers.module.css
+2 -2
View File
@@ -18,7 +18,7 @@
}
.membersContainer::-webkit-scrollbar {
/*.membersContainer::-webkit-scrollbar {
width: 8px;
}
@@ -34,7 +34,7 @@
.membersContainer::-webkit-scrollbar-thumb:hover {
background: rgba(125, 249, 30, 0.7);
}
}*/
.memberCard {
display: flex;
src/components/chart/ParticipationChart.jsx
+81 -2
View File
@@ -1,4 +1,4 @@
import React, { useState } from "react";
/*import React, { useState } from "react";
import { Doughnut } from "react-chartjs-2";
import { Chart, ArcElement } from "chart.js";
import { MenuItem, Select, FormControl } from "@mui/material";
@@ -87,4 +87,83 @@ function participationChart() {
);
}
export default participationChart;
export default participationChart;*/
import React, { useState } from "react";
import { Doughnut } from "react-chartjs-2";
import { Chart, ArcElement } from "chart.js";
import { MenuItem, Select, FormControl } from "@mui/material";
import styles from "./ParticipationChart.module.css";
Chart.register(ArcElement);
function ParticipationChart() {
const [selected, setSelected] = useState("3");
const [participationRate, setParticipationRate] = useState(78);
const chartData = {
labels: ["Progress", "Background"],
datasets: [
{
data: [participationRate, 100 - participationRate],
backgroundColor: ["#1e60f9ff", "#ffffffff"],
borderWidth: 0,
weight: 10,
cutout: "93%",
circumference: 360,
rotation: -90,
},
],
};
const chartOptions = {
responsive: true,
maintainAspectRatio: true,
plugins: {
legend: { display: false },
tooltip: { enabled: false },
},
animation: {
animateScale: true,
animateRotate: true,
},
};
return (
<div className={`${styles.leftBlock} glassCard`}>
<div className={styles.participationHeader}>
<div className={`${styles.partiText} glassCard`}>
<label htmlFor="months">Taux de participation depuis :</label>
<div className={styles.formControl}>
<FormControl className={styles.formDesign}>
<Select
value={selected}
onChange={(e) => setSelected(e.target.value)}
className={styles.selectRoot}
MenuProps={{
classes: {paper: styles.selectMenuPaper,},
MenuListProps: {
className: styles.selectMenuList,},
}}
displayEmpty
>
<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>
<div className={styles.chartContainer}>
<div className={styles.chartWrapper}>
<Doughnut data={chartData} options={chartOptions} />
<div className={styles.chartPercentage}>{participationRate}%</div>
</div>
</div>
</div>
);
}
export default ParticipationChart;
src/components/chart/ParticipationChart.module.css
+86 -37
View File
@@ -3,15 +3,18 @@
display: flex;
flex-direction: column;
align-items: center;
height: calc(100vh - 260px);
/* Exemple: calc(100vh - 60px) */
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 {
@@ -27,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;
@@ -59,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);
@@ -76,45 +138,32 @@
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;
.chartPercentage {
font-size: 48px;
}
.chartContainer{
height:fit-content;
}
}
}
src/utils/users/deleteUser.js
+8 -16
View File
@@ -1,22 +1,14 @@
export default async function deleteUser(userId) {
try {
const res = await fetch(`http://${import.meta.env.VITE_API_URL}/api/users/${userId}`, {
method: 'DELETE',
credentials: 'include',
const res = await fetch(
`http://${import.meta.env.VITE_API_URL}/api/users/${userId}`,
{
method: "DELETE",
credentials: "include",
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
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 lors de la suppression :', err);
return null;
}
return res.ok;
}
src/utils/users/validateUser
+8 -16
View File
@@ -1,22 +1,14 @@
export default async function validateUser(userId) {
try {
const res = await fetch(`http://${import.meta.env.VITE_API_URL}/api/users/${userId}/validate`, {
method: 'POST',
credentials: 'include',
const res = await fetch(
`http://${import.meta.env.VITE_API_URL}/api/users/${userId}/validate`,
{
method: "POST",
credentials: "include",
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
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 lors de la validation :', err);
return null;
}
return res.ok;
}