merge fixcss/profile into dev
This commit is contained in:
ORDONNEAU Antoine
@@ -0,0 +1,116 @@
|
||||
import styles from "../../EventDetailPage.module.css";
|
||||
import Button from "../../../../components/ui/Button/Button";
|
||||
import {useContext, useState} from "react";
|
||||
import TextInput from "../../../../components/ui/Input/Input";
|
||||
import Modal from "../../../../components/ui/Modal/Modal";
|
||||
import createTaskApi from "../../../../utils/tasks/createTask.js";
|
||||
import {EventDetailContext} from "../../../../contexts/EventDetail/EventDetailContext.js";
|
||||
|
||||
export default function CreateTaskBtn({ id }) {
|
||||
|
||||
const [openTaskModal, setOpenTaskModal] = useState(false);
|
||||
|
||||
const [taskName, setTaskName] = useState("");
|
||||
const [taskDescription, setTaskDescription] = useState("");
|
||||
const [taskLocation, setTaskLocation] = useState("");
|
||||
const [maxParticipants, setMaxParticipants] = useState("");
|
||||
const [startTime, setStartTime] = useState("");
|
||||
const [endTime, setEndTime] = useState("");
|
||||
|
||||
const { updateEventInfo } = useContext(EventDetailContext)
|
||||
|
||||
const createTask = async () => {
|
||||
const data = await createTaskApi({
|
||||
eventId: id,
|
||||
name: taskName,
|
||||
description: taskDescription,
|
||||
start: startTime,
|
||||
end: endTime,
|
||||
location: taskLocation,
|
||||
maxParticipants,
|
||||
});
|
||||
|
||||
if (data?.status === 200) {
|
||||
setOpenTaskModal(false);
|
||||
setTaskName("");
|
||||
setTaskDescription("");
|
||||
setTaskLocation("");
|
||||
setMaxParticipants("");
|
||||
setStartTime("");
|
||||
setEndTime("");
|
||||
|
||||
updateEventInfo(id)
|
||||
} else {
|
||||
console.log("⚠️ Échec de la création de la task");
|
||||
}
|
||||
};
|
||||
|
||||
return <>
|
||||
|
||||
<Button variant={"default"} className={styles.manageBtn} onClick={() => setOpenTaskModal(true)}>Créer tâche</Button>
|
||||
|
||||
<Modal open={openTaskModal} onClose={() => setOpenTaskModal(false)} title={"Créer tâche"}>
|
||||
<div className={styles.modalContent}>
|
||||
|
||||
<div>
|
||||
<p>Nom de la tâche</p>
|
||||
<TextInput
|
||||
value={taskName}
|
||||
onChange={(e) => setTaskName(e.target.value)}
|
||||
placeholder="Nom de la tâche"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p>Description</p>
|
||||
<TextInput
|
||||
value={taskDescription}
|
||||
onChange={(e) => setTaskDescription(e.target.value)}
|
||||
placeholder="Description de la tâche"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p>Lieu</p>
|
||||
<TextInput
|
||||
value={taskLocation}
|
||||
onChange={(e) => setTaskLocation(e.target.value)}
|
||||
placeholder="Lieu"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p>Nombre de participants max</p>
|
||||
<TextInput
|
||||
type="number"
|
||||
value={maxParticipants}
|
||||
onChange={(e) => setMaxParticipants(e.target.value)}
|
||||
placeholder="Participants max"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p>Heure de début</p>
|
||||
<TextInput
|
||||
type="datetime-local"
|
||||
value={startTime}
|
||||
onChange={(e) => setStartTime(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p>Heure de fin</p>
|
||||
<TextInput
|
||||
type="datetime-local"
|
||||
value={endTime}
|
||||
onChange={(e) => setEndTime(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Button variant="primary" onClick={createTask}> Créer la tâche </Button>
|
||||
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
</>
|
||||
}
|
||||
@@ -12,7 +12,7 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.settingImage {
|
||||
.settingAccount {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@@ -126,7 +126,7 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.settingImage {
|
||||
.settingAcount {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
@@ -144,6 +144,11 @@ function ProfilePage() {
|
||||
{user?.isAdmin && profileUser && !isOwnProfile && (
|
||||
<ManageMember userToManage={profileUser} />
|
||||
)}
|
||||
{isOwnProfile && (
|
||||
<div className={styles.settingAccount}>
|
||||
<SettingsModal />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className={styles.topDescription}>
|
||||
@@ -157,11 +162,6 @@ function ProfilePage() {
|
||||
<p><strong>Téléphone :</strong> {profileUser?.phone ?? "Non renseigné"}</p>
|
||||
</div>
|
||||
|
||||
{isOwnProfile && (
|
||||
<div className={styles.settingImage}>
|
||||
<SettingsModal />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<h2>Tâches :</h2>
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
.content {
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 28px;
|
||||
padding: 10px 20px 10px 20px;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
|
||||
.modifyIcon {
|
||||
height: 26px;
|
||||
width: 26px;
|
||||
@@ -22,9 +23,6 @@
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
padding: 18px;
|
||||
border-radius: 12px;
|
||||
background: var(--glass-bg, rgba(255, 255, 255, 0.25));
|
||||
backdrop-filter: blur(6px);
|
||||
}
|
||||
|
||||
.section h3 {
|
||||
@@ -43,7 +41,7 @@
|
||||
}
|
||||
|
||||
.submitBtn {
|
||||
width: 100%;
|
||||
align-self: center;
|
||||
text-align: center;
|
||||
margin-top: 10px;
|
||||
}
|
||||
@@ -59,40 +57,11 @@
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.content {
|
||||
padding: 28px;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.section {
|
||||
padding: 22px;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.submitBtn {
|
||||
width: auto;
|
||||
align-self: center;
|
||||
min-width: 220px;
|
||||
}
|
||||
|
||||
.section button {
|
||||
width: fit-content;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 900px) {
|
||||
.content {
|
||||
padding: 36px;
|
||||
gap: 36px;
|
||||
}
|
||||
|
||||
.section {
|
||||
padding: 26px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.modifyIcon {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
}
|
||||
}
|
||||
@@ -88,21 +88,9 @@ export default function SettingsModal() {
|
||||
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}>
|
||||
<div className={`glassBorder ${styles.section}`}>
|
||||
<h3>Modifier les informations du compte</h3>
|
||||
<div className={styles.test}>
|
||||
<h4>Changer de Prénom</h4>
|
||||
<TextInput
|
||||
value={name}
|
||||
@@ -111,8 +99,8 @@ export default function SettingsModal() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={styles.section}>
|
||||
<h4>Changer de nom</h4>
|
||||
<div className={styles.test}>
|
||||
<h4>Changer de nom</h4>
|
||||
<TextInput
|
||||
value={lastname}
|
||||
onChange={handleLastnameChange}
|
||||
@@ -120,8 +108,8 @@ export default function SettingsModal() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={styles.section}>
|
||||
<h4>Changer de numéro de téléphone</h4>
|
||||
<div className={styles.test}>
|
||||
<h4>Changer de numéro de téléphone</h4>
|
||||
<TextInput
|
||||
value={phone}
|
||||
onChange={handlePhoneChange}
|
||||
@@ -137,10 +125,25 @@ export default function SettingsModal() {
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className={styles.section}>
|
||||
<div className={`glassBorder ${styles.section}`}>
|
||||
<h3>Apparence</h3>
|
||||
<ThemeSwitcher/>
|
||||
</div>
|
||||
|
||||
<div className={`glassBorder ${styles.section}`}>
|
||||
<h3>Sécurité du compte</h3>
|
||||
|
||||
<Button variant="danger" onClick={handleLogout}>
|
||||
Déconnexion
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="danger"
|
||||
onClick={() => setIsDelete(true)}
|
||||
>
|
||||
Supprimer le compte
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user