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

correction graphique

Browse Source
This commit is contained in:
ORDONNEAU Antoine
2026-03-12 09:03:31 +01:00
parent 75e93abce6
commit fb7152bf21
7 changed files with 162 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Task/Task.module.css
-1
View File
@@ -2,7 +2,6 @@
width: 100%; width: 100%;
padding: 12px; padding: 12px;
margin-bottom: 10px; margin-bottom: 10px;
border-radius: 8px;
} }
.content { .content {
src/components/Task/Task.tsx
+1 -1
View File
@@ -52,7 +52,7 @@ const Task: React.FC<TaskProps> = ({ task }) => {
}, [task.events_id]); }, [task.events_id]);
return ( return (
<div className={`${styles.task} glassCard`}> <div className={`${styles.task} glassBorder`}>
<div className={styles.content}> <div className={styles.content}>
<div> <div>
<h2> <h2>
src/pages/Admin/components/IncompleteEvent/IncompleteEvent.jsx
+1 -1
View File
@@ -11,7 +11,7 @@ function IncompleteEvent() {
<h2>Derniers événements</h2> <h2>Derniers événements</h2>
<div className={styles.eventsContainer}> <div className={styles.eventsContainer}>
{events.map((event) => ( {events.map((event) => (
<div key={event.id} className={`glassCard ${styles.eventCard}`}> <div key={event.id} className={`glassBorder ${styles.eventCard}`}>
<h3>{event.name}</h3> <h3>{event.name}</h3>
<p className={styles.eventDate}> <p className={styles.eventDate}>
{new Date(event.start).toLocaleDateString("fr-FR")} - {new Date(event.end).toLocaleDateString("fr-FR")} {new Date(event.start).toLocaleDateString("fr-FR")} - {new Date(event.end).toLocaleDateString("fr-FR")}
src/pages/Admin/components/IncompleteEvent/IncompleteEvent.module.css
+3 -2
View File
@@ -29,17 +29,18 @@
transform: translateX(20px); transform: translateX(20px);
animation: slideInEvent 1s ease forwards; animation: slideInEvent 1s ease forwards;
flex-shrink: 0; flex-shrink: 0;
padding: 10px;
} }
.eventCard ul { .eventCard ul {
align-items: center; align-items: center;
margin-left: 8%; margin-left: 5%;
padding-left: 15px;
} }
.eventCard ul li { .eventCard ul li {
text-align: left; text-align: left;
list-style-type: circle; list-style-type: circle;
list-style: none;
} }
.eventCard > h3 { .eventCard > h3 {
src/pages/Admin/components/pendingMembers/PendingMembers.jsx
+1 -1
View File
@@ -58,7 +58,7 @@ function PendingMembers() {
{pendingMembers.map((member, index) => ( {pendingMembers.map((member, index) => (
<div key={index} className={`glassCard ${styles.memberCard}`}> <div key={index} className={`glassBorder ${styles.memberCard}`}>
<p>{member.name} {member.lastname}</p> <p>{member.name} {member.lastname}</p>
src/pages/Home/components/Calendar/calendar.jsx
+2 -1
View File
@@ -5,7 +5,8 @@ import {EventContext} from "../../../../contexts/events/EventContext.js";
import Button from "../../../../components/ui/button/button.jsx"; import Button from "../../../../components/ui/button/button.jsx";
import {AuthContext} from "../../../../contexts/auth/AuthContext.ts"; import {AuthContext} from "../../../../contexts/auth/AuthContext.ts";
function Calendar() { function
Calendar() {
const { user } = useContext(AuthContext); const { user } = useContext(AuthContext);
src/pages/Profile/ProfilePage.tsx
+154 -153
View File
@@ -17,20 +17,20 @@ import deleteProfilePhoto from "../../utils/users/deleteProfilePhoto.js";
interface TaskType { interface TaskType {
id: number; id: number;
name: string; name: string;
description: string; description: string;
location: string; location: string;
start: string; start: string;
end: string; end: string;
max_participants: number; max_participants: number;
events_id: number; events_id: number;
created_at: string; created_at: string;
updated_at: string; updated_at: string;
pivot: { pivot: {
user_id: number; user_id: number;
task_id: number; task_id: number;
}; };
} }
@@ -53,161 +53,162 @@ interface AuthContextType {
} }
function ProfilePage() { function ProfilePage() {
const navigate = useNavigate(); const navigate = useNavigate();
const { id } = useParams(); const {id} = useParams();
const { user, update } = useContext(AuthContext) as AuthContextType; const {user, update} = useContext(AuthContext) as AuthContextType;
const [profileUser, setProfileUser] = useState<User | null>(null); const [profileUser, setProfileUser] = useState<User | null>(null);
const [profilePicture, setProfilePicture] = useState<string | null>(null); const [profilePicture, setProfilePicture] = useState<string | null>(null);
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
const [success, setSuccess] = useState<string | null>(null); const [success, setSuccess] = useState<string | null>(null);
const fileInputRef = useRef<HTMLInputElement>(null); const fileInputRef = useRef<HTMLInputElement>(null);
const isOwnProfile = !id || user?.id.toString() === id; const isOwnProfile = !id || user?.id.toString() === id;
useEffect(() => { useEffect(() => {
(async () => { (async () => {
if (!isOwnProfile && id) { if (!isOwnProfile && id) {
const res = await getUserById(id); const res = await getUserById(id);
if (res.status === 404) { if (res.status === 404) {
navigate("/404"); navigate("/404");
return; 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();
} }
if (res.status !== 200) { };
console.error("Erreur lors du chargement du profil", res);
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);
} }
setProfileUser(res.data); };
} else {
update(); // Remplacé : handleDeletePicture extrait vers utils/users/deleteProfilePhoto
setProfileUser(user); const handleDeletePicture = async () => {
if (user?.profile_photo_path) { try {
setProfilePicture(`${import.meta.env.VITE_API_URL}/storage/${user.profile_photo_path}`); 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);
} }
} };
})();
}, [user, id]);
const handleEditPictureClick = () => { return (
if (fileInputRef.current) { <div className={styles.container}>
fileInputRef.current.click(); <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>
// Remplacé : handleFileChange extrait vers utils/users/uploadProfilePhoto {isOwnProfile && (
const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => { <div className={styles.pictureButtons}>
const file = e.target.files?.[0]; <button onClick={handleEditPictureClick} className={styles.editPictureButton}>
if (!file) return; Modifier la photo
</button>
{user?.profile_photo_path && (
<button onClick={handleDeletePicture} className={styles.deletePictureButton}>
Supprimer
</button>
)}
</div>
)}
try { <input
const res = await uploadProfilePhoto(file); type="file"
if (res.ok) { ref={fileInputRef}
setProfilePicture(`${import.meta.env.VITE_API_URL}/storage/${res.data.profile_photo_path}`); onChange={handleFileChange}
setSuccess("Photo mise à jour !"); accept="image/*"
setError(null); style={{display: "none"}}
await update(); />
} else { {error && <p className={styles.errorMessage}>{error}</p>}
setError(res.data?.message || res.error || "Erreur lors de l'upload."); {success && <p className={styles.successMessage}>{success}</p>}
setSuccess(null);
}
} catch (err) {
setError("Erreur réseau.");
setSuccess(null);
}
};
// Remplacé : handleDeletePicture extrait vers utils/users/deleteProfilePhoto <div className={styles.description}>
const handleDeletePicture = async () => { <div className={styles.headerProfile}>
try { <h2>
const res = await deleteProfilePhoto(); {profileUser?.name} {profileUser?.lastname}
if (res.status >= 200 && res.status < 300) { </h2>
setProfilePicture(null); {user?.isAdmin && profileUser && !isOwnProfile && (
setSuccess("Photo supprimée !"); <ManageMember userToManage={profileUser}/>
setError(null); )}
await update(); </div>
} else {
setError(res.data?.message || "Erreur lors de la suppression.");
setSuccess(null);
}
} catch (err) {
setError("Erreur réseau.");
setSuccess(null);
}
};
return ( <div className={styles.topDescription}>
<div className={styles.container}> <div className={`${styles.infoBlock} glassBorder`}>
<div className={`${styles.profileboard} glassCard`}> <p><strong>Role :</strong> {profileUser?.role}</p>
<div className={styles.contentWrapper}> <p><strong>Membre depuis :</strong> {profileUser && formatDate(profileUser.created_at)}
<div className={styles.profilePictureContainer}> </p>
<img </div>
src={isOwnProfile ? (profilePicture || "/react.svg") : "/react.svg"}
alt="Photo de profil"
className={styles.profilePicture}
/>
</div>
{isOwnProfile && ( <div className={`${styles.infoBlock} glassBorder`}>
<div className={styles.pictureButtons}> <p><strong>Mail :</strong> {profileUser?.email}</p>
<button onClick={handleEditPictureClick} className={styles.editPictureButton}> <p><strong>Téléphone :</strong> {profileUser?.phone ?? "Non renseigné"}</p>
Modifier la photo </div>
</button>
{user?.profile_photo_path && (
<button onClick={handleDeletePicture} className={styles.deletePictureButton}>
Supprimer
</button>
)}
</div>
)}
<input {isOwnProfile && (
type="file" <div className={styles.settingImage}>
ref={fileInputRef} <SettingsModal/>
onChange={handleFileChange} </div>
accept="image/*" )}
style={{ display: "none" }} </div>
/>
{error && <p className={styles.errorMessage}>{error}</p>}
{success && <p className={styles.successMessage}>{success}</p>}
<div className={styles.description}> <h2>Tâches :</h2>
<div className={styles.headerProfile}> {profileUser?.tasks.length ? (
<h2> profileUser.tasks.map((task) =><Task key={task.id} task={task}/>)
{profileUser?.name} {profileUser?.lastname} ) : (
</h2> <p>Aucune tâche.</p>
{user?.isAdmin && profileUser && !isOwnProfile && ( )}
<ManageMember userToManage={profileUser} /> </div>
)}
</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>
)}
</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> );
</div>
);
} }
export default ProfilePage; export default ProfilePage;