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

resolve conflicts btw ts interface

Browse Source
This commit is contained in:
p2405951
2026-03-03 12:15:52 +01:00
parent d9b0e97df8 39b21f8ff8
commit fd5a7d0426
43 changed files with 1101 additions and 914 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/Admin/components/pendingMembers/PendingMembers.jsx
+7 -23
View File
@@ -1,11 +1,10 @@
import React, {useState, useEffect} from "react";
import React, {useState, useEffect, useContext} from "react";
import Button from "../../../../components/ui/button/button.tsx";
import styles from "./PendingMembers.module.css";
import Modal from "../../../../components/ui/modal/modal.tsx";
import getUserToValidate from "../../../../utils/users/getUserToValidate.js";
import getUserById from "../../../../utils/users/getUserById.js";
import validateUser from "../../../../utils/users/validateUser.js";
import deleteOtherUser from "../../../../utils/users/deleteOtherUser.js";
import { PendingMembersContext } from "../../../../contexts/pendingMembers/PendingMembersContext";
function PendingMembers() {
@@ -13,23 +12,10 @@ function PendingMembers() {
const [open, setOpen] = useState(false);
const [message, setMessage] = useState("");
const [title, setTitle] = useState("");
const [pendingMembers, setPendingMembers] = useState([]);
const fetchUsers = async () => {
const result = await getUserToValidate();
const userIds = result.data;
if (userIds && userIds.length > 0) {
const users = await Promise.all(userIds.map(id => getUserById(id)));
const usersData = users.map(u => u.data);
setPendingMembers(usersData);
} else setPendingMembers([]);
}
const { pendingMembers, updatePendingMembers } = useContext(PendingMembersContext);
useEffect(() => {
fetchUsers();
updatePendingMembers();
}, []);
const handleValidate = async (id, name) => {
@@ -38,14 +24,12 @@ function PendingMembers() {
if(result.status === 200) {
setTitle("Utilisateur accepté avec succès")
setMessage(`L'utilisateur ${name} a été accepté avec succès`)
setOpen(true);
} else {
setTitle("Erreur")
setMessage(`Une erreur est survenue durant l'acceptation de l'utilisateur ${name}`)
setOpen(true);
}
fetchUsers();
setOpen(true);
updatePendingMembers();
}
const handleRefuse = async (id, name) => {
@@ -61,7 +45,7 @@ function PendingMembers() {
setOpen(true);
}
fetchUsers();
updatePendingMembers();
}
return (
src/pages/Profile/ProfilePage.module.css
+44
View File
@@ -7,11 +7,25 @@
}
.profileboard {
<<<<<<< HEAD
width: 100%;
padding: 16px;
border-radius: 20px;
box-sizing: border-box;
=======
width: 100%;
padding: 16px;
border-radius: 20px;
box-sizing: border-box;
}
.settingImage {
display: flex;
justify-content: center;
align-items: center;
>>>>>>> dev
}
.contentWrapper {
display: flex;
flex-direction: column;
@@ -77,12 +91,42 @@
margin-bottom: 16px;
}
<<<<<<< HEAD
.headerProfile h2 {
font-size: 1.6rem;
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
=======
.description h2 {
font-size: 1.6rem;
margin-bottom: 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.description button {
width: 44px;
height: 44px;
min-width: 44px;
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
background: transparent;
border: none;
cursor: pointer;
}
.modifyIcon {
width: 22px;
height: 22px;
display: block;
margin: 0;
>>>>>>> dev
}
/* Conteneur des informations principales */
src/pages/Profile/ProfilePage.tsx
+137 -125
View File
@@ -1,45 +1,91 @@
import { useContext, useEffect, useState, useRef } from "react";
import styles from "./ProfilePage.module.css";
import { AuthContext } from "../../contexts/auth/AuthContext";
import formatDate from "../../utils/date/formatDate";
import getXSRFToken from "../../utils/getXSRF.js";
import fetchWrapper from "../../utils/fetchWrapper";
import {useContext, useEffect, useState} from "react";
import styles from "./ProfilePage.module.css";
import {AuthContext} from "../../contexts/auth/AuthContext";
import formatDate from "../../utils/date/formatDate";
import Task from "../../components/Task/Task";
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 ManageMember from "./components/manageMember/ManageMember.jsx";
interface TaskType {
id: number;
title?: string;
completed?: boolean;
[key: string]: unknown;
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;
};
}
interface User {
name: string;
lastname: string;
role: string;
email: string;
phone: string | null;
created_at: string;
tasks: TaskType[];
profile_photo_path?: string | null;
id: number;
name: string;
lastname: string;
role: string;
email: string;
phone: string | null;
created_at: string;
isAdmin: boolean;
tasks: TaskType[];
profile_photo_path?: string | null;
}
interface AuthContextType {
user: User | null;
update: () => void;
user: User | null;
update: () => void;
}
function ProfilePage() {
const csrfToken = getXSRFToken();
const navigate = useNavigate();
const { id } = useParams();
const { user, update } = useContext(AuthContext) as AuthContextType;
/*const [profilePicture, setProfilePicture] = useState<string | null>(
user?.profile_photo_path ? `${import.meta.env.VITE_API_URL}/storage/${user.profile_photo_path}`: null);*/
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);
// Fonction pour déclencher l'input file
const isOwnProfile = !id || user?.id.toString() === id;
// Charger le profil de l'utilisateur (soi-même ou un autre)
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]);
// Fonctions pour la photo de profil (uniquement si c'est le profil de l'utilisateur connecté)
const handleEditPictureClick = () => {
if (fileInputRef.current) {
fileInputRef.current.click();
@@ -47,80 +93,56 @@ function ProfilePage() {
};
const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
const file = e.target.files?.[0];
if (!file) return;
const file = e.target.files?.[0];
if (!file) return;
const formData = new FormData();
formData.append("photo", file);
const formData = new FormData();
formData.append("photo", file);
try {
const response = await fetch(`${import.meta.env.VITE_API_URL}/api/profile-photo`, {
method: "POST",
headers: {
"X-XSRF-TOKEN": decodeURIComponent(await csrfToken),
},
credentials: "include",
body: formData,
});
if (response.ok) {
const data = await response.json();
setProfilePicture(`${import.meta.env.VITE_API_URL}/storage/${data?.profile_photo_path}`);
setSuccess("Photo de profil mise à jour avec succès !");
setError(null);
await update();
/*if (response.ok) {
const data = await response.json();
console.log("data:", data);
console.log("URL:", `/storage/${data?.profile_photo_path}`);
setProfilePicture(`${import.meta.env.VITE_API_URL}/storage/${data?.profile_photo_path}`);
setSuccess("Photo de profil mise à jour avec succès !");
setError(null);
update();*/
} else {
const errorData = await response.json();
setError(errorData?.message || "Erreur lors de l'upload de la photo.");
setSuccess(null);
}
} catch (err) {
setError("Erreur réseau. Vérifiez votre connexion.");
setSuccess(null);
}
};
// Fonction pour supprimer la photo de profil
const handleDeletePicture = async () => {
try {
const token = localStorage.getItem("token");
const response = await fetchWrapper("/api/profile-photo",null,"DELETE");
if (response.status >= 200 && response.status < 300) {
setProfilePicture(null);
setSuccess("Photo de profil supprimée avec succès !");
const csrfToken = await getXSRFToken();
const response = await fetch(`${import.meta.env.VITE_API_URL}/api/profile-photo`, {
method: "POST",
headers: { "X-XSRF-TOKEN": decodeURIComponent(csrfToken) },
credentials: "include",
body: formData,
});
if (response.ok) {
const data = await response.json();
setProfilePicture(`${import.meta.env.VITE_API_URL}/storage/${data.profile_photo_path}`);
setSuccess("Photo mise à jour !");
setError(null);
await update();
await update();
} else {
const errorData =response.data;
setError(errorData.message || "Erreur lors de la suppression de la photo.");
const errorData = await response.json();
setError(errorData.message || "Erreur lors de l'upload.");
setSuccess(null);
}
} catch (err) {
setError("Erreur réseau. Vérifiez votre connexion.");
setError("Erreur réseau.");
setSuccess(null);
}
};
useEffect(() => {
console.log("user reçu:", user);
if (user?.profile_photo_path) {
setProfilePicture(`${import.meta.env.VITE_API_URL}/storage/${user.profile_photo_path}`);
} else if (user && !user.profile_photo_path && !profilePicture) {
setProfilePicture(null);
}
}, [user]);
const handleDeletePicture = async () => {
try {
const response = await fetchWrapper("/api/profile-photo", null, "DELETE");
if (response.status >= 200 && response.status < 300) {
setProfilePicture(null);
setSuccess("Photo supprimée !");
setError(null);
await update();
} else {
const errorData = response.data;
setError(errorData.message || "Erreur lors de la suppression.");
setSuccess(null);
}
} catch (err) {
setError("Erreur réseau.");
setSuccess(null);
}
};
return (
<div className={styles.container}>
@@ -128,27 +150,25 @@ useEffect(() => {
<div className={styles.contentWrapper}>
<div className={styles.profilePictureContainer}>
<img
src={profilePicture || "/react.svg"}
src={isOwnProfile ? (profilePicture || "/react.svg") : "/react.svg"}
alt="Photo de profil"
className={styles.profilePicture}
/>
</div>
<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
{isOwnProfile && (
<div className={styles.pictureButtons}>
<button onClick={handleEditPictureClick} className={styles.editPictureButton}>
Modifier la photo
</button>
)}
</div>
{user?.profile_photo_path && (
<button onClick={handleDeletePicture} className={styles.deletePictureButton}>
Supprimer
</button>
)}
</div>
)}
<input
type="file"
ref={fileInputRef}
@@ -162,44 +182,37 @@ useEffect(() => {
<div className={styles.description}>
<div className={styles.headerProfile}>
<h2>
{user?.name} {user?.lastname}
{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> {user?.role}
</p>
<p>
<strong>Membre depuis :</strong>{" "}
{user && formatDate(user.created_at)}
</p>
<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> {user?.email}
</p>
<p>
<strong>Téléphone :</strong>{" "}
{user?.phone ?? "Pas de numéro enregistré"}
</p>
<p><strong>Mail :</strong> {profileUser?.email}</p>
<p><strong>Téléphone :</strong> {profileUser?.phone ?? "Non renseigné"}</p>
</div>
<div className={styles.settingImage}>
{/* <SettingsModal /> */}
</div>
{isOwnProfile && (
<div className={styles.settingImage}>
<SettingsModal />
</div>
)}
</div>
<h2>Tâches :</h2>
{/* {user && user.tasks.length > 0 ? (
user.tasks.map((task) => (
<Task key={task.id} task={task} />
))
{profileUser?.tasks.length ? (
profileUser.tasks.map((task) => <Task key={task.id} task={task} />)
) : (
<p>Aucune tâche pour le moment.</p>
)} */}
<p>Aucune tâche.</p>
)}
</div>
</div>
</div>
@@ -207,5 +220,4 @@ useEffect(() => {
);
}
export default ProfilePage;
export default ProfilePage;
src/pages/Profile/components/SettingsModal/SettingsModal.jsx
-86
View File
@@ -1,86 +0,0 @@
import Modal from "../../../../components/ui/modal/modal.tsx";
import Button from "../../../../components/ui/button/button.tsx";
import styles from "./SettingsModal.module.css"
import { useContext, useState } from "react";
import ThemeSwitcher from "../../../../components/ui/themeSwitcher/ThemeSwitcher.jsx";
import { AuthContext } from "../../../../contexts/auth/AuthContext.js";
import TextInput from "../../../../components/ui/input/input.tsx";
import updateUser from "../../../../utils/users/updateUser.js";
import deleteUser from "../../../../utils/users/deleteUser.js";
export default function SettingsModal() {
const { user, logout, update } = useContext(AuthContext);
const [open, setOpen] = useState(false);
const [isDelete, setIsDelete] = useState(false);
const [name, setName] = useState(user?.name);
const [lastname, setLastName] = useState(user?.lastname);
const [phone, setPhone] = useState(user?.phone);
const handleLogout = () => {
logout();
}
const handleSubmit = async () => {
await updateUser(name, lastname, phone);
update();
}
const handleDelete = async () => {
await deleteUser();
update();
}
return (
<>
<Button variant={"transparent"} onClick={() => setOpen(!open)}>
<img src={"/icons/settings-wheel.svg"} alt={"Modify btn"} className={styles.modifyIcon}/>
</Button>
<Modal title={"Paramètres"} open={open} onClose={() => setOpen(false)}>
<div className={styles.content}>
<div className={styles.section}>
<h3>Compte</h3>
<Button variant={"danger"} onClick={handleLogout}> Déconnexion </Button>
<Button variant={"danger"} onClick={() => setIsDelete(true)}> Supprimer le compte </Button>
<div className={styles.section}>
<h4>Changer de Prénom</h4>
<TextInput value={name} onChange={e => setName(e.target.value)} type={"text"} />
</div>
<div className={styles.section}>
<h4>Changer de nom</h4>
<TextInput value={lastname} onChange={e => setLastName(e.target.value)} type={"text"} />
</div>
<div className={styles.section}>
<h4>Changer de numéro de téléphone</h4>
<TextInput value={phone} onChange={e => setPhone(e.target.value)} type={"text"} />
</div>
<Button className={styles.submitBtn} onClick={handleSubmit}>Confirmer</Button>
</div>
<div className={styles.section}>
<h3>Apparence</h3>
<ThemeSwitcher />
</div>
</div>
</Modal>
<Modal title={"Validation"} open={isDelete} onClose={() => setIsDelete(false)}>
<div className={styles.section}>
<p className={styles.alignText}> Êtes vous vraiment sûr de vouloir supprimer votre compte ?</p>
<Button variant={"danger"} className={styles.submitBtn} onClick={handleDelete}>Confirmer</Button>
</div>
</Modal>
</>
)
}
src/pages/Profile/components/SettingsModal/SettingsModal.module.css
+48 -23
View File
@@ -1,73 +1,98 @@
.content {
width: 100%;
padding: 16px;
padding: 20px;
display: flex;
flex-direction: column;
gap: 20px;
gap: 28px;
}
.modifyIcon {
height: 28px;
width: 28px;
height: 26px;
width: 26px;
transition: transform 0.2s ease, opacity 0.2s ease;
}
.modifyIcon:hover {
transform: rotate(15deg);
opacity: 0.8;
}
.section {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 10px;
gap: 16px;
padding: 18px;
border-radius: 12px;
background: var(--glass-bg, rgba(255, 255, 255, 0.25));
backdrop-filter: blur(6px);
}
.section h3 {
font-size: 1.1rem;
margin-bottom: 5px;
font-size: 1.15rem;
font-weight: 600;
}
.section h4 {
font-size: 0.95rem;
font-size: 0.9rem;
font-weight: 500;
}
.submitBtn {
width: 100%;
margin-top: 15px;
opacity: 0.85;
}
.section button {
width: 100%;
}
@media (min-width: 600px) {
.submitBtn {
width: 100%;
text-align: center;
margin-top: 10px;
}
.alignText {
text-align: center;
line-height: 1.5;
}
.section :global(input) {
width: 100%;
box-sizing: border-box;
}
@media (min-width: 640px) {
.content {
padding: 24px;
padding: 28px;
gap: 32px;
}
.section h3 {
font-size: 1.2rem;
.section {
padding: 22px;
gap: 18px;
}
.submitBtn {
width: auto;
align-self: center;
min-width: 200px;
min-width: 220px;
}
.section button {
width: fit-content;
}
}
@media (min-width: 900px) {
.content {
padding: 30px;
gap: 30px;
padding: 36px;
gap: 36px;
}
.section {
gap: 14px;
padding: 26px;
border-radius: 16px;
}
.modifyIcon {
height: 30px;
width: 30px;
}
}
}
src/pages/Profile/components/SettingsModal/SettingsModal.tsx
+166
View File
@@ -1,3 +1,4 @@
<<<<<<< HEAD
/*import Modal from "../../../../components/ui/modal/modal.jsx";
import Button from "../../../../components/ui/button/button.jsx";
import styles from "./SettingsModal.module.css"
@@ -51,29 +52,171 @@ export default function SettingsModal() {
<div className={styles.section}>
<h4>Changer de Prénom</h4>
<TextInput value={name} onChange={e => setName(e.target.value)} type={"text"} />
=======
import {useContext, useState, ChangeEvent} from "react";
import Modal from "../../../../components/ui/modal/modal";
import Button from "../../../../components/ui/button/button";
import styles from "./SettingsModal.module.css";
import ThemeSwitcher from "../../../../components/ui/themeSwitcher/ThemeSwitcher.jsx";
import {AuthContext} from "../../../../contexts/auth/AuthContext";
import TextInput from "../../../../components/ui/input/input";
import updateUser from "../../../../utils/users/updateUser.js";
import deleteUser from "../../../../utils/users/deleteUser.js";
interface TaskType {
id: number;
title?: string;
completed?: boolean;
[key: string]: unknown;
}
interface User {
id: number;
name: string;
lastname: string;
role: string;
email: string;
phone: string | null;
created_at: string;
isAdmin: boolean;
tasks: TaskType[];
}
interface AuthContextType {
user: User;
update: () => void;
logout: () => void;
}
export default function SettingsModal() {
const {user, logout, update} = useContext(AuthContext) as AuthContextType;
const [open, setOpen] = useState<boolean>(false);
const [isDelete, setIsDelete] = useState<boolean>(false);
const [name, setName] = useState<string>(user?.name ?? "");
const [lastname, setLastName] = useState<string>(user?.lastname ?? "");
const [phone, setPhone] = useState<string>(user?.phone ?? "");
const handleLogout = (): void => {
logout();
};
const handleSubmit = async (): Promise<void> => {
await updateUser(name, lastname, phone || null);
update();
setOpen(false);
};
const handleDelete = async (): Promise<void> => {
await deleteUser();
update();
};
const handleNameChange = (e: ChangeEvent<HTMLInputElement>): void => {
setName(e.target.value);
};
const handleLastnameChange = (e: ChangeEvent<HTMLInputElement>): void => {
setLastName(e.target.value);
};
const handlePhoneChange = (e: ChangeEvent<HTMLInputElement>): void => {
setPhone(e.target.value);
};
return (
<>
<Button variant="transparent" onClick={() => setOpen((prev) => !prev)}>
<img
src="/icons/settings-wheel.svg"
alt="Modify btn"
className={styles.modifyIcon}
/>
</Button>
<Modal
title="Paramètres"
open={open}
onClose={() => setOpen(false)}
>
<div className={styles.content}>
<div className={styles.section}>
<h3>Compte</h3>
<Button variant="danger" onClick={handleLogout}>
Déconnexion
</Button>
<Button
variant="danger"
onClick={() => setIsDelete(true)}
>
Supprimer le compte
</Button>
<div className={styles.section}>
<h4>Changer de Prénom</h4>
<TextInput
value={name}
onChange={handleNameChange}
type="text"
/>
>>>>>>> dev
</div>
<div className={styles.section}>
<h4>Changer de nom</h4>
<<<<<<< HEAD
<TextInput value={lastname} onChange={e => setLastName(e.target.value)} type={"text"} />
=======
<TextInput
value={lastname}
onChange={handleLastnameChange}
type="text"
/>
>>>>>>> dev
</div>
<div className={styles.section}>
<h4>Changer de numéro de téléphone</h4>
<<<<<<< HEAD
<TextInput value={phone} onChange={e => setPhone(e.target.value)} type={"text"} />
</div>
<Button className={styles.submitBtn} onClick={handleSubmit}>Confirmer</Button>
=======
<TextInput
value={phone}
onChange={handlePhoneChange}
type="text"
/>
</div>
<Button
className={styles.submitBtn}
onClick={handleSubmit}
>
Confirmer
</Button>
>>>>>>> dev
</div>
<div className={styles.section}>
<h3>Apparence</h3>
<<<<<<< HEAD
<ThemeSwitcher />
=======
<ThemeSwitcher/>
>>>>>>> dev
</div>
</div>
</Modal>
<<<<<<< HEAD
<Modal title={"Validation"} open={isDelete} onClose={() => setIsDelete(false)}>
<div className={styles.section}>
@@ -185,3 +328,26 @@ export default function SettingsModal() {
</>
);
}
=======
<Modal
title="Validation"
open={isDelete}
onClose={() => setIsDelete(false)}
>
<div className={styles.section}>
<p className={styles.alignText}>
Êtes vous vraiment sûr de vouloir supprimer votre compte ?
</p>
<Button
variant="danger"
className={styles.submitBtn}
onClick={handleDelete}
>
Confirmer
</Button>
</div>
</Modal>
</>
);
}
>>>>>>> dev
src/pages/VolunteerProfile/components/manageMember/ManageMember.jsx → src/pages/Profile/components/manageMember/ManageMember.jsx
View File
src/pages/VolunteerProfile/components/manageMember/deactivateMember/deactivateMemberBtn.jsx → src/pages/Profile/components/manageMember/deactivateMember/deactivateMemberBtn.jsx
View File
src/pages/VolunteerProfile/components/manageMember/manageMember.module.css → src/pages/Profile/components/manageMember/manageMember.module.css
View File
src/pages/VolunteerProfile/components/manageMember/modifyrole/ModifyRole.jsx → src/pages/Profile/components/manageMember/modifyrole/ModifyRole.jsx
View File
src/pages/VolunteerProfile/VolunteerProfilePage.jsx
-84
View File
@@ -1,84 +0,0 @@
import styles from "./VolunteerProfilePage.module.css";
import { useParams, useNavigate } from "react-router";
import { useEffect, useState, useContext } from "react";
import getUserById from "../../utils/users/getUserById.js";
import formatDate from "../../utils/date/formatDate.js";
import Task from "../../components/Task/Task.jsx";
import ManageMember from "./components/manageMember/ManageMember.jsx";
import { AuthContext } from "../../contexts/auth/AuthContext.js";
export default function VolunteerProfilePage() {
const { id } = useParams();
const navigate = useNavigate();
const { user: currentUser } = useContext(AuthContext);
const [user, setUser] = useState(null);
useEffect(() => {
(async () => {
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;
}
setUser(res.data);
})();
}, [id, navigate]);
if (!user) return null;
return (
<div className={styles.container}>
<div className={`${styles.profileboard} glassCard`}>
<div className={styles.contentWrapper}>
<div className={styles.profilePictureContainer}>
<img
src="/react.svg"
alt="Photo de profil"
className={styles.profilePicture}
/>
</div>
<div className={styles.description}>
<div className={styles.headerProfile}>
<h2>{user.name} {user.lastname}</h2>
{currentUser?.isAdmin && (
<ManageMember userToManage={user} />
)}
</div>
<div className={styles.topDescription}>
<div className={`${styles.infoBlock} glassBorder`}>
<p><strong>Role :</strong> {user.role}</p>
<p><strong>Membre depuis :</strong> {formatDate(user.created_at)}</p>
</div>
<div className={`${styles.infoBlock} glassBorder`}>
<p><strong>Mail :</strong> {user.email}</p>
<p>
<strong>Téléphone :</strong>{" "}
{user.phone ?? "Pas de numéro enregistré"}
</p>
</div>
</div>
<h2>Tâches :</h2>
{user.tasks?.length > 0 ? (
user.tasks.map((task, index) => (
<Task key={index} task={task} />
))
) : (
<p>Aucune tâche pour le moment.</p>
)}
</div>
</div>
</div>
</div>
);
}
src/pages/VolunteerProfile/VolunteerProfilePage.module.css
-163
View File
@@ -1,163 +0,0 @@
.container {
width: 100%;
padding: 10px;
box-sizing: border-box;
}
.profileboard {
width: 100%;
padding: 15px;
border-radius: 20px;
box-sizing: border-box;
}
.contentWrapper {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.profilePictureContainer {
width: 120px;
height: 120px;
margin-bottom: 15px;
}
.profilePicture {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
}
.description {
width: 100%;
text-align: left;
margin-left:4%;
}
.topDescription {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
margin-bottom: 15px;
}
.infoBlock {
width: 100%;
background: rgba(255, 255, 255, 0.1);
padding: 10px;
border-radius: 5px;
}
.eventTasks {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out, opacity 0.2s ease;
opacity: 0;
padding-left: 20px;
}
.eventTasks.expanded {
max-height: 500px;
opacity: 1;
margin-top: 10px;
}
.description h2{
font-size:30px;
}
.profilePicture{
width:90%;
}
.settingsBtns {
display: flex;
gap: 5px;
justify-content: right;
}
@media screen and (min-width: 768px) {
.contentWrapper {
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
}
.profilePictureContainer {
width: 150px;
height: 150px;
margin-right: 20px;
margin-bottom: 0;
}
.description {
width: calc(100% - 170px);
margin-left:4%;
}
.topDescription {
flex-direction: row;
justify-content: space-between;
}
.infoBlock {
width: 48%;
}
.event {
padding: 15px;
}
.description h2{
font-size:30px;
}
.profilePicture{
width:90%;
}
}
.description button{
width:50px;
height:50px;
}
.headerProfile {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
@media screen and (min-width: 1024px) {
.container {
max-width: 100%;
margin: 0 auto;
padding: 20px;
}
.profileboard {
padding: 25px;
}
.profilePictureContainer {
width: 30%;
height:auto;
}
.profilePicture{
width:90%;
}
.description {
width: calc(100% - 200px);
margin-left:4%;
}
.event {
padding: 18px;
}
.description h2{
font-size:30px;
}
}
src/pages/Volunteers/VolunteerCard.jsx
-78
View File
@@ -1,78 +0,0 @@
import React, {useState} from "react";
import styles from "./VolunteersPage.module.css";
import formatDate from "../../utils/date/formatDate.js";
import { useNavigate } from "react-router";
import Button from "../../components/ui/button/button.tsx";
export default function VolunteerCard({ user }) {
const [isExpanded, setIsExpanded] = useState(false);
const toggleExpand = () => {
setIsExpanded(!isExpanded);
};
const navigate = useNavigate();
return (
<div className={`${styles.profileboard} glassCard`} onClick={(() => setIsExpanded(!isExpanded))}>
<div className={styles.header}>
<h2 className={styles.userName}>
<span className={styles.firstName}>{user?.name}</span>{" "}
<span className={styles.lastName}>{user?.lastname}</span>
</h2>
<Button
variant={"transparent"}
onClick={toggleExpand}
className={`${isExpanded ? styles.moreButtonClicked : ""}`}
>
{">"}
</Button>
</div>
<div className={styles.mainContent}>
{!isExpanded ? (
<div className={styles.basicInfo}>
<p><strong>Rôle :</strong> {user?.role}</p>
<p><strong>Membre depuis :</strong> {user?.created_at && formatDate(user.created_at)}</p>
</div>
) : (
<div className={styles.expandedContent}>
<div className={styles.profilePictureContainer}>
<img src={"/react.svg"} alt="profile" className={styles.profilePicture} />
</div>
<div className={styles.textInfo}>
<div className={styles.basicInfo}>
<p><strong>Rôle :</strong> {user?.role}</p>
<p><strong>Membre depuis :</strong> {user?.created_at && formatDate(user.created_at)}</p>
</div>
<div className={styles.contactInfo}>
<p><strong>Email :</strong> {user?.email}</p>
{user?.phone && <p><strong>Téléphone :</strong> {user.phone}</p>}
</div>
</div>
</div>
)}
</div>
{isExpanded && (
<div className={styles.bottomBar}>
<Button
onClick={() => navigate(`/profile/${user.id}`)}
variant="primary"
>
Voir plus
</Button>
</div>
)}
</div>
);
}
src/pages/Volunteers/VolunteersPage.jsx
-53
View File
@@ -1,53 +0,0 @@
import { useState, useEffect } from "react";
import styles from "./VolunteersPage.module.css";
import VolunteerCard from "./VolunteerCard.jsx";
import getAllUser from "../../utils/users/getAllUsers.js";
import ToolBar from "../../components/ToolBar/ToolBar.jsx";
import filter from "../../utils/filter.js";
import getUserById from "../../utils/users/getUserById.js";
function VolunteerPage() {
const [filters, setFilters] = useState({
alphabetical: "asc",
yearOrder: "desc",
});
const [users, setUsers] = useState([]);
useEffect(() => {
(async () => {
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) => {
const res = await getUserById(id);
if (res.status === 200) {
return res.data;
}
console.warn(`Utilisateur ${id} non récupéré`, res.status);
return null;
})
);
setUsers(usersData.filter(Boolean));
})();
}, []);
return (
<div className={styles.container}>
<ToolBar setFilters={setFilters} filters={filters} showCreate={false} />
<div className={styles.usersList}>
{filter(users, filters, "user").map((user, index) => (
<VolunteerCard key={user.id ?? index} user={user} />
))}
</div>
</div>
);
}
export default VolunteerPage;
src/pages/Volunteers/VolunteersPage.module.css
+20 -24
View File
@@ -3,33 +3,18 @@
position: relative;
padding: 10px;
}
.userName {
display: flex;
gap: 5px;
font-weight: bold;
font-size: 1rem;
overflow: hidden;
}
.firstName {
white-space: nowrap;
flex-shrink: 0;
}
.lastName {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex-shrink: 1;
max-width: 100px;
}
.usersList {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
display: grid;
gap: 16px;
width: 100%;
grid-template-columns: 1fr;
}
.usersList > * {
min-width: 0;
}
.profileboard {
width: 100%;
max-width: 380px;
@@ -140,12 +125,23 @@
}
}
.loading {
width: 100%;
text-align: center;
font-size: 1.1rem;
opacity: 1;
color: white;
}
@media screen and (min-width: 1024px) {
.container {
padding: 20px;
}
.usersList {
gap: 20px;
grid-template-columns: repeat(3, 1fr);
padding-right: 5em;
padding-left: 5em;
}
.profileboard {
max-width: 700px;
src/pages/Volunteers/VolunteersPage.tsx
+81
View File
@@ -0,0 +1,81 @@
import { useEffect, useState } from "react";
import styles from "./VolunteersPage.module.css";
import VolunteerCard from "./components/VolunteersCard/VolunteerCard";
import getAllUser from "../../utils/users/getAllUsers";
import ToolBar from "../../components/ToolBar/ToolBar";
import filter from "../../utils/filter";
import getUserById from "../../utils/users/getUserById";
import User from "./interfaces/user.interface";
import Loading from "../../components/ui/loading/loading";
interface Filters {
alphabetical: "asc" | "desc";
yearOrder: "asc" | "desc";
}
const VolunteerPage: React.FC = () => {
const [filters, setFilters] = useState<Filters>({
alphabetical: "asc",
yearOrder: "desc",
});
const [users, setUsers] = useState<User[]>([]);
const [loading, setLoading] = useState<boolean>(true);
useEffect(() => {
const fetchUsers = async (): Promise<void> => {
setLoading(true);
try {
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;
}
console.warn(`Utilisateur ${id} non récupéré`, res.status);
return null;
})
);
setUsers(usersData.filter((user): user is User => user !== null));
} catch (error) {
console.error("Erreur réseau", error);
} finally {
setLoading(false);
}
};
fetchUsers();
}, []);
if(loading) return <Loading />;
return (
<div className={styles.container}>
<ToolBar
setFilters={setFilters}
filters={filters}
showCreate={false}
/>
<div className={styles.usersList}>
{filter(users, filters, "user").map((user: User) => (
<VolunteerCard key={user.id} user={user} />
))}
</div>
</div>
);
};
export default VolunteerPage;
src/pages/Volunteers/components/VolunteersCard/VolunteerCard.tsx
+29
View File
@@ -0,0 +1,29 @@
import styles from "./VolunteersCard.module.css";
import { useNavigate } from "react-router";
import Button from "../../../../components/ui/button/button";
import User from "../../interfaces/user.interface"
interface VolunteersCardProps {
user: User;
}
export default function VolunteerCard({ user }: VolunteersCardProps) {
const navigate = useNavigate();
const handleNavigate = (): void => { navigate(`/profile/${user.id}`) }
return (
<div className={`glassCard ${styles.volunteerCard}`}>
<div className={styles.header}>
<img src={"/react.svg"} alt="profile" className={styles.profilePicture} />
<p> {user.name} {user.lastname} </p>
</div>
<div className={styles.content}>
<p> {user.email} </p>
<Button variant={"primary"} onClick={handleNavigate}>Voir</Button>
</div>
</div>
);
}
src/pages/Volunteers/components/VolunteersCard/VolunteersCard.module.css
+47
View File
@@ -0,0 +1,47 @@
.volunteerCard {
display: flex;
flex-direction: column;
gap: 12px;
}
.header {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
.header p {
flex: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.content {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
.content p {
flex: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.content button {
flex-shrink: 0;
}
.profilePicture {
background-color: #1d1d1f;
border-radius: 20px;
width: 40px;
height: 40px;
flex-shrink: 0;
}
src/pages/Volunteers/interfaces/task.interface.ts
+16
View File
@@ -0,0 +1,16 @@
export default interface Task {
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;
}
}
src/pages/Volunteers/interfaces/user.interface.ts
+16
View File
@@ -0,0 +1,16 @@
import Task from "./task.interface";
export default interface User {
id: number;
name: string;
lastname: string;
email: string;
role: string;
isAdmin: boolean;
phone: string | null;
created_at: string;
updated_at: string;
verified_at: string | null;
validate: number;
tasks: Task[];
}