Create createTaskBtn.jsx component
This commit is contained in:
T'JAMPENS QUENTIN p2406187
@@ -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>
|
||||||
|
|
||||||
|
</>
|
||||||
|
}
|
||||||
@@ -9,8 +9,7 @@ import Modal from "../../components/ui/modal/modal.jsx";
|
|||||||
import { AuthContext } from "../../contexts/auth/AuthContext.js";
|
import { AuthContext } from "../../contexts/auth/AuthContext.js";
|
||||||
import { EventContext } from "../../contexts/events/EventContext.js";
|
import { EventContext } from "../../contexts/events/EventContext.js";
|
||||||
import { useNavigate } from "react-router";
|
import { useNavigate } from "react-router";
|
||||||
import TextInput from "../../components/ui/input/input.jsx";
|
import CreateTaskBtn from "./components/createTaskBtn/createTaskBtn.jsx";
|
||||||
import createTaskApi from "../../utils/tasks/createTask.js";
|
|
||||||
|
|
||||||
|
|
||||||
function EventDetail() {
|
function EventDetail() {
|
||||||
@@ -24,14 +23,6 @@ function EventDetail() {
|
|||||||
const [open, setOpen] = useState(false);
|
const [open, setOpen] = useState(false);
|
||||||
const [event, setEvent] = useState(null);
|
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(() => {
|
useEffect(() => {
|
||||||
(async () => {
|
(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 (
|
return (
|
||||||
<div className={styles.allContent}>
|
<div className={styles.allContent}>
|
||||||
@@ -92,7 +59,7 @@ function EventDetail() {
|
|||||||
</div>
|
</div>
|
||||||
{user?.isAdmin && <div className={styles.manageEvent}>
|
{user?.isAdmin && <div className={styles.manageEvent}>
|
||||||
<Button variant={"danger"} className={styles.manageBtn} onClick={handleDelete}>Supprimer</Button>
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -114,68 +81,6 @@ function EventDetail() {
|
|||||||
</div>
|
</div>
|
||||||
</Modal>
|
</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>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user