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

Create createTaskBtn.jsx component

Browse Source
This commit is contained in:
T'JAMPENS QUENTIN p2406187
2026-01-27 14:39:00 +01:00
parent ae6d93eb81
commit 6c51e70817
3 changed files with 113 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/eventDetail/components/createTaskBtn/createTaskBtn.jsx
+111
View File
@@ -0,0 +1,111 @@
import styles from "../../eventDetail.module.css";
import Button from "../../../../components/ui/button/button.jsx";
import { useState } from "react";
import TextInput from "../../../../components/ui/input/input.jsx";
import Modal from "../../../../components/ui/modal/modal.jsx";
import createTaskApi from "../../../../utils/tasks/createTask.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 createTask = async () => {
const success = await createTaskApi({
eventId: id,
name: taskName,
description: taskDescription,
start: startTime,
end: endTime,
location: taskLocation,
maxParticipants,
});
if (success) {
setOpenTaskModal(false);
setTaskName("");
setTaskDescription("");
setTaskLocation("");
setMaxParticipants("");
setStartTime("");
setEndTime("");
} 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 maximum de participants</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="default" onClick={createTask}> Créer la tâche </Button>
</div>
</Modal>
</>
}
src/pages/eventDetail/components/createTaskBtn/createTaskBtn.module.css
View File
src/pages/eventDetail/eventDetail.jsx
+2 -97
View File
@@ -9,8 +9,7 @@ import Modal from "../../components/ui/modal/modal.jsx";
import { AuthContext } from "../../contexts/auth/AuthContext.js";
import { EventContext } from "../../contexts/events/EventContext.js";
import { useNavigate } from "react-router";
import TextInput from "../../components/ui/input/input.jsx";
import createTaskApi from "../../utils/tasks/createTask.js";
import CreateTaskBtn from "./components/createTaskBtn/createTaskBtn.jsx";
function EventDetail() {
@@ -24,14 +23,6 @@ function EventDetail() {
const [open, setOpen] = useState(false);
const [event, setEvent] = useState(null);
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("");
useEffect(() => {
(async () => {
@@ -53,30 +44,6 @@ function EventDetail() {
}
}
const createTask = async () => {
const success = await createTaskApi({
eventId: id,
name: taskName,
description: taskDescription,
start: startTime,
end: endTime,
location: taskLocation,
maxParticipants,
});
if (success) {
setOpenTaskModal(false);
setTaskName("");
setTaskDescription("");
setTaskLocation("");
setMaxParticipants("");
setStartTime("");
setEndTime("");
} else {
console.log("⚠️ Échec de la création de la task");
}
};
return (
<div className={styles.allContent}>
@@ -92,7 +59,7 @@ function EventDetail() {
</div>
{user?.isAdmin && <div className={styles.manageEvent}>
<Button variant={"danger"} className={styles.manageBtn} onClick={handleDelete}>Supprimer</Button>
<Button variant={"default"} className={styles.manageBtn} onClick={() => setOpenTaskModal(true)}>Créer tâche</Button>
<CreateTaskBtn id={id} />
</div>}
</div>
</div>
@@ -114,68 +81,6 @@ function EventDetail() {
</div>
</Modal>
<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 maximum de participants</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="default" onClick={createTask}> Créer la tâche </Button>
</div>
</Modal>
</div>
);