Merge branch 'dev' into refactor/filesName
# Conflicts: # src/pages/Login/components/LoginForm/loginForm.jsx
This commit is contained in:
commit
41d59b336b
11 files changed
+94
-40
No files matched your search
@@ -2,7 +2,6 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
border-radius: 8px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
|
|||||||
@@ -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,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() {
|
||||||
|
|
||||||
|
|||||||
@@ -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,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";
|
||||||
|
|||||||
@@ -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>
|
||||||
)}
|
)}
|
||||||
|
|||||||
Reference in new issue
Block a user