cdricms/latosa-escrima
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/dev/guerby' into dev/cedric

Browse Source
This commit is contained in:
cdricms
2025-02-10 09:56:16 +01:00
parent bcb563fa1c 3439d74e84
commit 605223d041
6 changed files with 422 additions and 316 deletions
Download Patch File Download Diff File Expand all files Collapse all files

258
frontend/components/planning.tsx
View File

@@ -8,11 +8,7 @@ import { createEventsServicePlugin } from "@schedule-x/events-service";
import { createDragAndDropPlugin } from "@schedule-x/drag-and-drop";
import { createResizePlugin } from "@schedule-x/resize";
import { createEventRecurrencePlugin } from "@schedule-x/event-recurrence";
import {
CalendarEventExternal,
createViewDay,
createViewWeek,
} from "@schedule-x/calendar";
import { createViewDay, createViewWeek } from "@schedule-x/calendar";
import { useEffect, useState } from "react";
import { format } from "date-fns";
import { Dialog, DialogProps } from "@radix-ui/react-dialog";
@@ -23,25 +19,49 @@ import {
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 { KeyedMutator } from "swr";
import { getCookie } from "cookies-next";
import { useTheme } from "next-themes";
import { Checkbox } from "@/components/ui/checkbox";
import { eventNames } from "process";
import { useSearchParams } from "next/navigation";
import { CheckedState } from "@radix-ui/react-checkbox";
import { DateTimePicker } from "./date-time-picker";
import { EventForm, EventFormValues } from "./event-dialog";
import ICalendarEvent from "@/interfaces/ICalendarEvent";
interface CalendarEventExternalDB extends CalendarEventExternal {
status: "Active" | "Inactive";
}
const mapFrequencyToRrule = (
frequency: "unique" | "quotidien" | "hebdomadaire" | "mensuel",
frequencyEndDate?: Date,
): string => {
let rrule = "";
switch (frequency) {
case "quotidien":
rrule = "FREQ=DAILY";
break;
case "hebdomadaire":
rrule = "FREQ=WEEKLY";
break;
case "mensuel":
rrule = "FREQ=MONTHLY";
break;
default:
return "";
}
if (frequencyEndDate) {
const until = frequencyEndDate.getTime();
const untilDate = new Date(until);
const epochDateString = untilDate
.toISOString()
.replace(/[-:]/g, "")
.split(".")[0]; // Format as YYYYMMDDTHHmmss
rrule += `;UNTIL=${epochDateString}`;
}
return rrule;
};
const Planning: React.FC<{
events: CalendarEventExternal[];
mutate?: KeyedMutator<ApiResponse<CalendarEventExternal[]>>;
events: ICalendarEvent[];
mutate?: KeyedMutator<ApiResponse<ICalendarEvent[]>>;
}> = ({ events, mutate }) => {
const { resolvedTheme } = useTheme();
console.log(resolvedTheme);
@@ -54,18 +74,15 @@ const Planning: React.FC<{
createEventRecurrencePlugin(),
]
: [];
const [eventSelected, setEventSelected] =
useState<CalendarEventExternal | null>(null);
const [eventStatus, setEventStatus] = useState<"Active" | "Inactive">(
"Active",
const [eventSelected, setEventSelected] = useState<ICalendarEvent | null>(
null,
);
const [newEvent, setNewEvent] = useState<Omit<ICalendarEvent, "id"> | null>(
null,
);
const [newEvent, setNewEvent] = useState<Omit<
CalendarEventExternal,
"id"
> | null>(null);
const handleEventUpdate = async (eventSelected: CalendarEventExternal) => {
const event: CalendarEventExternal = {
const handleEventUpdate = async (eventSelected: ICalendarEvent) => {
const event: ICalendarEvent = {
...eventSelected,
start: `${new Date(eventSelected.start).toISOString()}`,
end: `${new Date(eventSelected.end).toISOString()}`,
@@ -104,14 +121,10 @@ const Planning: React.FC<{
})),
callbacks: {
onEventClick(event, e) {
setEventSelected(event);
setEventSelected(event as ICalendarEvent);
},
// async onBeforeEventUpdate(oldEvent, newEvent) {
// await request("/api/me/has-permissions")
// },
async onEventUpdate(newEvent) {
// console.log(event);
await handleEventUpdate(newEvent);
await handleEventUpdate(newEvent as ICalendarEvent);
},
},
},
@@ -145,72 +158,20 @@ const Planning: React.FC<{
setNewEvent((e) => (open ? e : null));
}}
event={newEvent}
//onStartChange={(e) => {
// const val = e.currentTarget.value;
// setNewEvent((ev) => {
// if (ev)
// return {
// ...ev,
// start: val,
// };
// return ev;
// });
//}}
onStartDateChange={(date) => {
setNewEvent((ev) => {
if (ev)
return {
...ev,
start: date,
};
return ev;
});
}}
onEndDateChange={(date) => {
setNewEvent((ev) => {
if (ev)
return {
...ev,
end: date,
};
return ev;
});
}}
onTitleChange={(e) => {
const val = e.currentTarget.value;
setNewEvent((ev) => {
if (ev)
return {
...ev,
title: val,
};
return ev;
});
}}
onActiveStateChange={(e) => {
e
? setEventStatus("Active")
: setEventStatus("Inactive");
}}
//onEndChange={(e) => {
// const val = e.currentTarget.value;
// setNewEvent((ev) => {
// if (ev)
// return {
// ...ev,
// end: val,
// };
// return ev;
// });
//}}
onAdd={async () => {
onSubmitEvent={async (eventFormValues) => {
const rrule = mapFrequencyToRrule(
eventFormValues.frequency,
eventFormValues.frequencyEndDate,
);
try {
const event: Omit<CalendarEventExternal, "id"> = {
const event: Omit<ICalendarEvent, "id"> = {
...newEvent,
start: `${new Date(newEvent.start).toISOString()}`,
end: `${new Date(newEvent.end).toISOString()}`,
title: newEvent.title,
status: eventStatus,
start: `${eventFormValues.startDate} ${eventFormValues.startTime}`,
end: `${eventFormValues.endDate} ${eventFormValues.endTime}`,
title: `${eventFormValues.title}`,
fullDay: eventFormValues.fullDay,
rrule: rrule,
isVisible: eventFormValues.isVisible,
};
const res = await request<undefined>(
`/events/new`,
@@ -241,25 +202,8 @@ const Planning: React.FC<{
setEventSelected((e) => (open ? e : null));
}}
event={eventSelected}
onStartDateChange={(date) => {
setEventSelected((ev) => {
if (ev && date)
return {
...ev,
start: format(date, "YYYY-MM-DD HH:MM"),
};
return ev;
});
}}
onEndDateChange={(date) => {
setEventSelected((ev) => {
if (ev && date)
return {
...ev,
end: format(date, "YYYY-MM-DD HH:MM"),
};
return ev;
});
onSubmitEvent={(eventForm) => {
console.log("Event form: " + eventForm);
}}
onDelete={async () => {
calendar?.events?.remove(eventSelected.id);
@@ -296,35 +240,21 @@ const Planning: React.FC<{
const EventDialog: React.FC<
{
// onEndChange: React.ChangeEventHandler<HTMLInputElement>;
// onStartChange: React.ChangeEventHandler<HTMLInputElement>;
onStartDateChange: (selectedDate: Date | undefined) => void;
onEndDateChange: (selectedDate: Date | undefined) => void;
onSubmitEvent: (eventFormValues: EventFormValues) => void;
onDelete?: () => void;
onUpdate?: () => void;
onAdd?: () => void;
onTitleChange?: React.ChangeEventHandler<HTMLInputElement>;
onActiveStateChange?: (status: boolean) => void;
event: CalendarEventExternal | Omit<CalendarEventExternal, "id">;
event: ICalendarEvent | Omit<ICalendarEvent, "id">;
} & DialogProps
> = ({
open,
onOpenChange,
// onEndChange,
// onStartChange,
onStartDateChange,
onEndDateChange,
onSubmitEvent,
onDelete,
onUpdate,
onAdd,
onTitleChange,
onActiveStateChange,
event,
}) => {
const [checked, setChecked] = useState<CheckedState>(
event.status === "Active",
);
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="sm:max-w-md">
@@ -332,67 +262,7 @@ const EventDialog: React.FC<
<DialogTitle>{event.title}</DialogTitle>
<DialogDescription>{event.description}</DialogDescription>
</DialogHeader>
<div className="grid gap-4 py-4">
<div className="grid grid-cols-4 items-center gap-4">
<Label htmlFor="title" className="text-right">
Titre
</Label>
<Input
id="title"
value={event.title || ""}
onChange={onTitleChange}
className="col-span-3"
type="text"
/>
</div>
<div className="grid grid-cols-4 items-center gap-4">
<Label htmlFor="start" className="text-right">
Début
</Label>
<DateTimePicker
onDateSelectChange={(date) =>
onStartDateChange(date)
}
/>
</div>
<div className="grid grid-cols-4 items-center gap-4">
<Label htmlFor="end" className="text-right">
Fin
</Label>
{/*<Input
id="end"
value={event.end || ""}
onChange={onEndChange}
className="col-span-3"
/> */}
<DateTimePicker
onDateSelectChange={(date) => onEndDateChange(date)}
/>
</div>
<div className="grid grid-cols-4 items-center gap-4">
<Label
htmlFor="status"
className="col-span-3 text-right"
>
Rendre cette évènement actif ?
</Label>
<Checkbox
id="status"
checked={checked}
onCheckedChange={(e) => {
const booleanCheck = !!e;
setChecked((prev) => {
return !prev;
});
if (onActiveStateChange) {
onActiveStateChange(booleanCheck);
}
}}
/>
</div>
</div>
<EventForm event={event} onSubmitEvent={onSubmitEvent} />
<DialogFooter className="flex flex-row justify-end">
{onUpdate && (
<Button