125 lines
4.4 KiB
TypeScript
125 lines
4.4 KiB
TypeScript
import { useContext, useEffect, useState } from "react";
|
|
import { AuthContext } from "../../../../contexts/Auth/AuthContext";
|
|
import { EventDetailContext } from "../../../../contexts/EventDetail/EventDetailContext";
|
|
import Button from "../../../../components/ui/Button/Button";
|
|
import Modal from "../../../../components/ui/Modal/Modal";
|
|
import TextInput from "../../../../components/ui/Input/Input";
|
|
import styles from "../../EventDetailPage.module.css";
|
|
import updateTask from "../../../../utils/tasks/updateTask";
|
|
|
|
type EditTaskBtnProps = {
|
|
taskId: number;
|
|
eventId: number | string;
|
|
};
|
|
|
|
export default function EditTaskBtn({ taskId, eventId }: EditTaskBtnProps) {
|
|
const { user } = useContext(AuthContext) as any;
|
|
const { tasks, updateEventInfo } = useContext(EventDetailContext) as any;
|
|
const task = tasks?.find((t: any) => t.id === taskId);
|
|
|
|
const [open, setOpen] = useState(false);
|
|
const [name, setName] = useState<string>("");
|
|
const [description, setDescription] = useState<string>("");
|
|
const [start, setStart] = useState<string>("");
|
|
const [end, setEnd] = useState<string>("");
|
|
const [location, setLocation] = useState<string>("");
|
|
const [maxParticipants, setMaxParticipants] = useState<string>("");
|
|
|
|
useEffect(() => {
|
|
if (open && task) {
|
|
setName(task.name ?? "");
|
|
setDescription(task.description ?? "");
|
|
setStart(task.start ? task.start.slice(0, 16) : "");
|
|
setEnd(task.end ? task.end.slice(0, 16) : "");
|
|
setLocation(task.location ?? "");
|
|
setMaxParticipants(task.max_participants?.toString() ?? "");
|
|
}
|
|
}, [open, task]);
|
|
|
|
if (!user?.isAdmin) return null;
|
|
|
|
const handleSubmit = async () => {
|
|
await updateTask(taskId, {
|
|
name,
|
|
description,
|
|
start,
|
|
end,
|
|
location,
|
|
max_participants: Number(maxParticipants),
|
|
});
|
|
await updateEventInfo(eventId);
|
|
setOpen(false);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Button variant={"default"} onClick={() => setOpen(true)}>
|
|
Modifier
|
|
</Button>
|
|
|
|
<Modal open={open} onClose={() => setOpen(false)} title={"Modifier la tâche"}>
|
|
<div className={styles.modalContent}>
|
|
<div>
|
|
<p>Nom</p>
|
|
<TextInput
|
|
value={name}
|
|
onChange={(e: any) => setName(e.target.value)}
|
|
placeholder="Nom de la tâche"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<p>Description</p>
|
|
<TextInput
|
|
value={description}
|
|
onChange={(e: any) => setDescription(e.target.value)}
|
|
placeholder="Description"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<p>Lieu</p>
|
|
<TextInput
|
|
value={location}
|
|
onChange={(e: any) => setLocation(e.target.value)}
|
|
placeholder="Lieu"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<p>Participants max</p>
|
|
<TextInput
|
|
type="number"
|
|
value={maxParticipants}
|
|
onChange={(e: any) => setMaxParticipants(e.target.value)}
|
|
placeholder="Participants max"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<p>Début</p>
|
|
<TextInput
|
|
type="datetime-local"
|
|
value={start}
|
|
onChange={(e: any) => setStart(e.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<p>Fin</p>
|
|
<TextInput
|
|
type="datetime-local"
|
|
value={end}
|
|
onChange={(e: any) => setEnd(e.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
<Button variant="default" onClick={handleSubmit}>
|
|
Confirmer
|
|
</Button>
|
|
</div>
|
|
</Modal>
|
|
</>
|
|
);
|
|
}
|