events form
This commit is contained in:
gom-by
@@ -8,7 +8,6 @@ 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";
|
||||
@@ -22,25 +21,43 @@ 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,15 +71,14 @@ const Planning: React.FC<{
|
||||
]
|
||||
: [];
|
||||
const [eventSelected, setEventSelected] =
|
||||
useState<CalendarEventExternal | null>(null);
|
||||
const [eventStatus, setEventStatus] = useState<"Active" | "Inactive">("Active")
|
||||
useState<ICalendarEvent | null>(null);
|
||||
const [newEvent, setNewEvent] = useState<Omit<
|
||||
CalendarEventExternal,
|
||||
ICalendarEvent,
|
||||
"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()}`,
|
||||
@@ -101,14 +117,24 @@ const Planning: React.FC<{
|
||||
})),
|
||||
callbacks: {
|
||||
onEventClick(event, e) {
|
||||
setEventSelected(event);
|
||||
},
|
||||
// async onBeforeEventUpdate(oldEvent, newEvent) {
|
||||
// await request("/api/me/has-permissions")
|
||||
// },
|
||||
console.log("event from schedule-x: " + event)
|
||||
const eSelected: ICalendarEvent = {
|
||||
...event,
|
||||
rrule: "",
|
||||
isVisible: true,
|
||||
fullday: false
|
||||
}
|
||||
setEventSelected(eSelected);
|
||||
},
|
||||
async onEventUpdate(newEvent) {
|
||||
// console.log(event);
|
||||
await handleEventUpdate(newEvent);
|
||||
console.log("event from schedule-x: " + newEvent)
|
||||
const eSelected: ICalendarEvent = {
|
||||
...newEvent,
|
||||
rrule: "",
|
||||
isVisible: true,
|
||||
fullday: false
|
||||
}
|
||||
await handleEventUpdate(eSelected);
|
||||
},
|
||||
},
|
||||
},
|
||||
@@ -142,69 +168,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`,
|
||||
@@ -235,25 +212,8 @@ const Planning: React.FC<{
|
||||
setEventSelected((e) => (open ? e : null));
|
||||
}}
|
||||
event={eventSelected}
|
||||
onStartDateChange={(date) => {
|
||||
setEventSelected((ev) => {
|
||||
if (ev)
|
||||
return {
|
||||
...ev,
|
||||
start: date,
|
||||
};
|
||||
return ev;
|
||||
});
|
||||
}}
|
||||
onEndDateChange={(date) => {
|
||||
setEventSelected((ev) => {
|
||||
if (ev)
|
||||
return {
|
||||
...ev,
|
||||
end: date,
|
||||
};
|
||||
return ev;
|
||||
});
|
||||
onSubmitEvent={ (eventForm) => {
|
||||
console.log("Event form: " + eventForm)
|
||||
}}
|
||||
onDelete={async () => {
|
||||
calendar?.events?.remove(eventSelected.id);
|
||||
@@ -290,33 +250,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">
|
||||
@@ -324,62 +272,9 @@ 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
|
||||
|
||||
Reference in New Issue
Block a user