Merge branch 'dev' into refactor/filesName

# Conflicts:
#	src/pages/Login/components/LoginForm/loginForm.jsx
This commit is contained in:
Giovanni committed 2026-03-12 15:17:28 +01:00
commit 41d59b336b
11 files changed
+94 -40

No files matched your search

-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 {
+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>
@@ -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")}
@@ -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 {
@@ -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>
+1 -1
View File
@@ -1,6 +1,6 @@
import styles from "./HomePage.module.css"; import styles from "./HomePage.module.css";
import Calendar from "./components/Calendar/Calendar.jsx"; import Calendar from "./components/Calendar/Calendar.jsx";
import EventList from "./components/EventList/EventList.tsx"; import EventList from "./components/EventList/EventList";
function HomePage() { function HomePage() {
+40 -14
View File
@@ -4,10 +4,11 @@ import {formatDateLetterJS} from "../../../../utils/date/formatDateLetter.js";
import Button from "../../../../components/ui/Button/Button"; import Button from "../../../../components/ui/Button/Button";
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);
const calendarUrl = `${import.meta.env.VITE_API_URL}/api/export/ics/${user.id}`;
const monthNames = [ const monthNames = [
"Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Janvier", "Février", "Mars", "Avril", "Mai", "Juin",
@@ -17,17 +18,17 @@ function Calendar() {
const today = new Date(); const today = new Date();
const [currentMonth, setCurrentMonth] = useState(today.getMonth()); const [currentMonth, setCurrentMonth] = useState(today.getMonth());
const [currentYear] = useState(today.getFullYear()); const [currentYear, setCurrentYear] = useState(today.getFullYear());
const [selectedDay, setSelectedDay] = useState(null); const [selectedDay, setSelectedDay] = useState(null);
const eventsByDate = useMemo(() => { const eventsByDate = useMemo(() => {
if (!user?.tasks) return {}; if (!user?.tasks) return {};
return user.tasks.reduce((acc, task) => { return user.tasks.reduce((eventsByDate, task) => {
if (!task?.start) return acc; if (!task?.start) return eventsByDate;
const dateKey = task.start.split(" ")[0]; const dateKey = task.start.split(" ")[0];
if (!acc[dateKey]) acc[dateKey] = []; if (!eventsByDate[dateKey]) eventsByDate[dateKey] = [];
acc[dateKey].push(task); eventsByDate[dateKey].push(task);
return acc; return eventsByDate;
}, {}); }, {});
}, [user]); }, [user]);
@@ -66,9 +67,31 @@ function Calendar() {
<div className={styles.calendarContainer}> <div className={styles.calendarContainer}>
<div className={styles.calendarHeader}> <div className={styles.calendarHeader}>
<button onClick={() => setCurrentMonth(m => m === 0 ? 11 : m - 1)}>◀</button> <button
onClick={() => {
if (currentMonth === 0) {
setCurrentMonth(11);
setCurrentYear(y => y - 1);
} else {
setCurrentMonth(m => m - 1);
}
}}
>
◀
</button>
<p>{monthNames[currentMonth]} {currentYear}</p> <p>{monthNames[currentMonth]} {currentYear}</p>
<button onClick={() => setCurrentMonth(m => m === 11 ? 0 : m + 1)}>▶</button> <button
onClick={() => {
if (currentMonth === 11) {
setCurrentMonth(0);
setCurrentYear(y => y + 1);
} else {
setCurrentMonth(m => m + 1);
}
}}
>
▶
</button>
</div> </div>
<table className={styles.calendar}> <table className={styles.calendar}>
@@ -128,17 +151,20 @@ function Calendar() {
)} )}
</div> </div>
)} )}
<div className={`${styles.exportbox} glassBorder`}>
<p><b>votre lien d'agenda:</b> {calendarUrl}</p>
<Button className={styles.exportbtn} <Button className={styles.exportbtn}
variant={"primary"}
onClick={() => { onClick={() => {
window.location.href = window.open(
`http://localhost/api/export/ics/${user.id}`; "https://calendar.google.com/calendar/u/0/r/settings/addbyurl"
);
}} }}
> >
Exporter mon agenda Exporter
</Button> </Button>
</div> </div>
</div> </div>
</div>
); );
} }
@@ -150,10 +150,22 @@
display: none; display: none;
} }
.exportbtn{ .exportbox{
width: 100%;
padding: 15px;
margin-top: 16px; margin-top: 16px;
display: flex;
align-items: center;
} }
.exportbtn {
display: flex;
align-items: center;
max-height: 30px;
}
@media (max-width: 768px) { @media (max-width: 768px) {
.glassCard { .glassCard {
width: 100%; width: 100%;
@@ -68,9 +68,12 @@ h2{
} }
.eventTasks { .eventTasks {
display: flex; list-style: none;
flex-direction: row; margin: 10px;
justify-content: space-between; }
.taskDate{
font-size: 13px;
} }
@media (max-width: 768px) { @media (max-width: 768px) {
+1 -1
View File
@@ -1,5 +1,5 @@
import styles from "./LoginPage.module.css"; import styles from "./LoginPage.module.css";
import LoginForm from "./components/LoginForm/LoginForm.tsx"; import LoginForm from "./components/LoginForm/LoginForm";
import Background from "../../components/Background/Background.jsx"; import Background from "../../components/Background/Background.jsx";
import { useEffect, useContext } from "react"; import { useEffect, useContext } from "react";
import { AuthContext } from "../../contexts/Auth/AuthContext.js"; import { AuthContext } from "../../contexts/Auth/AuthContext.js";
+27 -14
View File
@@ -52,8 +52,8 @@ 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);
@@ -64,7 +64,6 @@ function ProfilePage() {
useEffect(() => { useEffect(() => {
(async () => { (async () => {
console.log(JSON.stringify(import.meta.env.VITE_API_URL));
if (!isOwnProfile && id) { if (!isOwnProfile && id) {
const res = await getUserById(id); const res = await getUserById(id);
if (res.status === 404) { if (res.status === 404) {
@@ -77,11 +76,10 @@ function ProfilePage() {
} }
setProfileUser(res.data); setProfileUser(res.data);
} else { } else {
//update(); update();
setProfileUser(user); setProfileUser(user);
if (user?.profile_photo_path) { if (user?.profile_photo_path) {
setProfilePicture(`${import.meta.env.VITE_API_URL}/storage/${user.profile_photo_path}`); setProfilePicture(`${import.meta.env.VITE_API_URL}/storage/${user.profile_photo_path}`);
//setProfilePicture(`${import.meta.env.VITE_API_URL}/${user.profile_photo_path}`);
} }
} }
})(); })();
@@ -93,6 +91,7 @@ function ProfilePage() {
} }
}; };
// Remplacé : handleFileChange extrait vers utils/users/uploadProfilePhoto
const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => { const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
const file = e.target.files?.[0]; const file = e.target.files?.[0];
if (!file) return; if (!file) return;
@@ -101,7 +100,6 @@ function ProfilePage() {
const res = await uploadProfilePhoto(file); const res = await uploadProfilePhoto(file);
if (res.ok) { if (res.ok) {
setProfilePicture(`${import.meta.env.VITE_API_URL}/storage/${res.data.profile_photo_path}`); setProfilePicture(`${import.meta.env.VITE_API_URL}/storage/${res.data.profile_photo_path}`);
//setProfilePicture(`${import.meta.env.VITE_API_URL}/${res.data.profile_photo_path}`);
setSuccess("Photo mise à jour !"); setSuccess("Photo mise à jour !");
setError(null); setError(null);
await update(); await update();
@@ -114,10 +112,24 @@ function ProfilePage() {
setSuccess(null); setSuccess(null);
} }
}; };
const handleDeletePicture = async () => {
deleteProfilePhoto(); // Remplacé : handleDeletePicture extrait vers utils/users/deleteProfilePhoto
const handleDeletePicture = async () => {
try {
const res = await deleteProfilePhoto();
if (res.status >= 200 && res.status < 300) {
setProfilePicture(null); 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);
}
}; };
return ( return (
@@ -138,7 +150,7 @@ function ProfilePage() {
Modifier la photo Modifier la photo
</button> </button>
{user?.profile_photo_path && ( {user?.profile_photo_path && (
<button onClick={handleDeletePicture} className={styles.editPictureButton}> <button onClick={handleDeletePicture} className={styles.deletePictureButton}>
Supprimer Supprimer
</button> </button>
)} )}
@@ -150,7 +162,7 @@ function ProfilePage() {
ref={fileInputRef} ref={fileInputRef}
onChange={handleFileChange} onChange={handleFileChange}
accept="image/*" accept="image/*"
style={{ display: "none" }} style={{display: "none"}}
/> />
{error && <p className={styles.errorMessage}>{error}</p>} {error && <p className={styles.errorMessage}>{error}</p>}
{success && <p className={styles.successMessage}>{success}</p>} {success && <p className={styles.successMessage}>{success}</p>}
@@ -161,14 +173,15 @@ function ProfilePage() {
{profileUser?.name} {profileUser?.lastname} {profileUser?.name} {profileUser?.lastname}
</h2> </h2>
{user?.isAdmin && profileUser && !isOwnProfile && ( {user?.isAdmin && profileUser && !isOwnProfile && (
<ManageMember userToManage={profileUser} /> <ManageMember userToManage={profileUser}/>
)} )}
</div> </div>
<div className={styles.topDescription}> <div className={styles.topDescription}>
<div className={`${styles.infoBlock} glassBorder`}> <div className={`${styles.infoBlock} glassBorder`}>
<p><strong>Role :</strong> {profileUser?.role}</p> <p><strong>Role :</strong> {profileUser?.role}</p>
<p><strong>Membre depuis :</strong> {profileUser && formatDate(profileUser.created_at)}</p> <p><strong>Membre depuis :</strong> {profileUser && formatDate(profileUser.created_at)}
</p>
</div> </div>
<div className={`${styles.infoBlock} glassBorder`}> <div className={`${styles.infoBlock} glassBorder`}>
@@ -178,14 +191,14 @@ function ProfilePage() {
{isOwnProfile && ( {isOwnProfile && (
<div className={styles.settingImage}> <div className={styles.settingImage}>
<SettingsModal /> <SettingsModal/>
</div> </div>
)} )}
</div> </div>
<h2>Tâches :</h2> <h2>Tâches :</h2>
{profileUser?.tasks.length ? ( {profileUser?.tasks.length ? (
profileUser.tasks.map((task) => <Task key={task.id} task={task} />) profileUser.tasks.map((task) =><Task key={task.id} task={task}/>)
) : ( ) : (
<p>Aucune tâche.</p> <p>Aucune tâche.</p>
)} )}