Shortcodes
{isLoading && (
diff --git a/frontend/app/(main)/planning/page.tsx b/frontend/app/(main)/planning/page.tsx
index 3584f6a..b7fbcb9 100644
--- a/frontend/app/(main)/planning/page.tsx
+++ b/frontend/app/(main)/planning/page.tsx
@@ -1,276 +1,20 @@
"use client";
+import Planning from "@/components/planning.tsx";
+import { useApi } from "@/hooks/use-api";
+import { type CalendarEventExternal } from "@schedule-x/calendar";
+import { Loader2 } from "lucide-react";
-import { request, useApi } from "@/hooks/use-api";
-import "@schedule-x/theme-shadcn/dist/index.css";
-import { useNextCalendarApp, ScheduleXCalendar } from "@schedule-x/react";
-import { createEventsServicePlugin } from "@schedule-x/events-service";
-import {
- CalendarEventExternal,
- createViewDay,
- createViewWeek,
-} from "@schedule-x/calendar";
-import { useEffect, useState } from "react";
-import { format } from "date-fns";
-import { Dialog } from "@radix-ui/react-dialog";
-import {
- DialogContent,
- DialogDescription,
- DialogFooter,
- DialogHeader,
- DialogTitle,
-} from "@/components/ui/dialog";
-import { Label } from "@/components/ui/label";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import {
- Popover,
- PopoverContent,
- PopoverTrigger,
-} from "@/components/ui/popover";
-import { CalendarIcon } from "lucide-react";
-import { Calendar } from "@/components/ui/calendar";
-import { cn } from "@/lib/utils";
-import { requestFormReset } from "react-dom";
+const Page = () => {
+ const {
+ data: requestedEvents,
+ isLoading,
+ success,
+ mutate,
+ } = useApi
("/events", undefined, false, false);
-const Planning = () => {
- const plugins = [createEventsServicePlugin()];
- const [eventSelected, setEventSelected] =
- useState(null);
- const [events, setEvents] = useState([
- {
- id: "1", // TODO put an uuid there
- title: "Event 1",
- start: format(new Date(Date.now()), "yyyy-MM-dd HH:mm"),
- end: format(
- new Date(Date.now() + 1 * 3600 * 1000),
- "yyyy-MM-dd HH:mm",
- ),
- },
- ]);
-
- const [requestCreateEvent, setRequestCreateEvent] = useState(false)
-
- const calendar = useNextCalendarApp(
- {
- theme: "shadcn",
- views: [createViewDay(), createViewWeek()],
- defaultView: "week",
- isDark: true,
- isResponsive: true,
- locale: "fr-FR",
- dayBoundaries: {
- start: "06:00",
- end: "00:00",
- },
- events,
- callbacks: {
- onEventClick(event, e) {
- setEventSelected(event);
- },
- async onClickDateTime(dateTime) {
- setRequestCreateEvent(true)
- const newEvent: CalendarEventExternal = {
- id: "5",
- title: "Event 1",
- start: dateTime,
- end: format(
- new Date(dateTime).getTime() + (1000 * 60 * 60),
- "yyyy-MM-dd HH:mm",
- ),
- }
- try {
- const res = await request(
- `/events/new`,
- {
- method: "POST",
- body: JSON.stringify(newEvent),
- requiresAuth: true,
- csrfToken: false
- },)
- if (res.status === "Error") {
- console.log("Error")
- }
- if (res.status === "Success") {
- console.log("Success")
- }
- } catch (e) {
- console.log(e)
- }
- },
- },
- },
- plugins,
- );
-
- const {data: requestedEvents, isLoading, success} = useApi("/events", {
- onSuccess: (data) => {
- calendar?.events.set(data)
- }
- }, false, false)
-
- useEffect(() => {
- // get all events
- calendar?.events.getAll();
- }, []);
-
- return (
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+ {selectMode && (
+
+ Select
+
+ )}
+ User ID
+ First Name
+ Last Name
+ Email
+ Password
+ Phone
+ Role
+
+ Actions
+
+
+
+
+ {members.map((member) => (
+
+ {selectMode && (
+
+
+ toggleMemberSelection(
+ member.user_id,
+ )
+ }
+ />
+
+ )}
+ {member.user_id}
+ {member.firstname}
+ {member.lastname}
+ {member.email}
+ {member.password}
+ {member.phone}
+ {member.role}
+
+
+
+
+
+ ))}
+
+
+
+
+
setUpdateDialogOpen(false)}
+ member={currentMember}
+ onUpdate={(updatedMember) => {
+ setMembers((prev) =>
+ prev.map((m) =>
+ m.user_id === updatedMember.user_id
+ ? updatedMember
+ : m,
+ ),
+ );
+ setUpdateDialogOpen(false);
+ }}
+ />
+ setAddDialogOpen(false)}
+ onAdd={handleAdd}
+ />
+
+
+ {newEvent && (
+
{
+ setNewEvent((e) => (open ? e : null));
+ }}
+ event={newEvent}
+ onStartChange={(e) => {
+ const val = e.currentTarget.value;
+ setNewEvent((ev) => {
+ if (ev)
+ return {
+ ...ev,
+ start: val,
+ };
+ return ev;
+ });
+ }}
+ onEndChange={(e) => {
+ const val = e.currentTarget.value;
+ setNewEvent((ev) => {
+ if (ev)
+ return {
+ ...ev,
+ end: val,
+ };
+ return ev;
+ });
+ }}
+ onAdd={async () => {
+ try {
+ const event: Omit = {
+ ...newEvent,
+ start: `${new Date(newEvent.start).toISOString()}`,
+ end: `${new Date(newEvent.end).toISOString()}`,
+ };
+ const res = await request(
+ `/events/new`,
+ {
+ method: "POST",
+ body: event,
+ requiresAuth: true,
+ csrfToken: false,
+ },
+ );
+ if (res.status === "Error") {
+ console.log("Error");
+ }
+ if (res.status === "Success") {
+ mutate?.();
+ console.log("Success");
+ }
+ } catch (e) {
+ console.log(e);
+ }
+ }}
+ />
+ )}
+ {eventSelected && (
+ {
+ setEventSelected((e) => (open ? e : null));
+ }}
+ event={eventSelected}
+ onStartChange={(e) => {
+ const val = e.currentTarget.value;
+ setEventSelected((ev) => {
+ if (ev)
+ return {
+ ...ev,
+ start: val,
+ };
+ return ev;
+ });
+ }}
+ onEndChange={(e) => {
+ const val = e.currentTarget.value;
+ setEventSelected((ev) => {
+ if (ev)
+ return {
+ ...ev,
+ end: val,
+ };
+ return ev;
+ });
+ }}
+ onDelete={async () => {
+ calendar?.events?.remove(eventSelected.id);
+ try {
+ const res = await request(
+ `/events/${eventSelected.id}/delete`,
+ {
+ method: "DELETE",
+ body: eventSelected,
+ requiresAuth: false,
+ csrfToken: false,
+ },
+ );
+ if (res.status === "Error") {
+ console.log("Error");
+ }
+ if (res.status === "Success") {
+ console.log("Success");
+ }
+ } catch (e) {
+ console.log(e);
+ }
+ setEventSelected(null);
+ }}
+ onUpdate={async () => {
+ await handleEventUpdate(eventSelected);
+ setEventSelected(null);
+ }}
+ />
+ )}
+
@@ -111,7 +120,7 @@ export default function ShortcodeDialog({ onSave }: ShortcodeDialogProps) {