Files
SAE-BUT2-frontend/src/pages/EventDetail/components/CreateTaskBtn/CreateTaskBtn.jsx
T

116 lines
3.9 KiB
React

import styles from "../../EventDetail.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 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>
</>
}