diff --git a/frontend/components/date-time-picker.tsx b/frontend/components/date-time-picker.tsx new file mode 100644 index 0000000..dabcc6d --- /dev/null +++ b/frontend/components/date-time-picker.tsx @@ -0,0 +1,114 @@ +"use client" + +import * as React from "react"; +import { format } from "date-fns"; + +import { cn } from "@/lib/utils"; +import { Button } from "@/components/ui/button"; +import { Calendar } from "@/components/ui/calendar"; +import { + Popover, + PopoverContent, + PopoverTrigger, +} from "@/components/ui/popover"; +import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"; + +interface DateTimePickerProps { + onDateSelectChange: (selectedDate: Date | undefined) => void; +} + +export function DateTimePicker({ + onDateSelectChange +}: DateTimePickerProps) { + const [date, setDate] = React.useState(); + const [isOpen, setIsOpen] = React.useState(false); + // TODO : this is buggy as hell + + const hours = Array.from({ length: 24 }, (_, i) => i); + const handleDateSelect = (selectedDate: Date | undefined) => { + if (selectedDate) { + setDate(selectedDate); + onDateSelectChange(selectedDate) + } + }; + + const handleTimeChange = ( + type: "hour" | "minute", + value: string + ) => { + if (date) { + const newDate = new Date(date); + if (type === "hour") { + newDate.setHours(parseInt(value)); + } else if (type === "minute") { + newDate.setMinutes(parseInt(value)); + } + setDate(newDate); + } + }; + + return ( + + + + + +
+ +
+ +
+ {hours.reverse().map((hour) => ( + + ))} +
+ +
+ +
+ {Array.from({ length: 12 }, (_, i) => i * 5).map((minute) => ( + + ))} +
+ +
+
+
+
+
+ ); +} diff --git a/frontend/components/planning.tsx b/frontend/components/planning.tsx index e00ff3d..30f462f 100644 --- a/frontend/components/planning.tsx +++ b/frontend/components/planning.tsx @@ -32,6 +32,7 @@ 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"; interface CalendarEventExternalDB extends CalendarEventExternal { status: "Active" | "Inactive" @@ -141,27 +142,34 @@ const Planning: React.FC<{ setNewEvent((e) => (open ? e : null)); }} event={newEvent} - onStartChange={(e) => { - const val = e.currentTarget.value; + //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: val, - }; - return ev; - }); + if (ev) return { + ...ev, + start: date, + }; + return ev + }) }} - onEndChange={(e) => { - const val = e.currentTarget.value; + onEndDateChange={date => { setNewEvent((ev) => { - if (ev) - return { - ...ev, - end: val, - }; - return ev; - }); + if (ev) return { + ...ev, + end: date, + }; + return ev + }) }} onTitleChange={(e) => { const val = e.currentTarget.value; @@ -178,6 +186,17 @@ const Planning: React.FC<{ e ? setEventStatus("Active") : setEventStatus("Inactive") }} + //onEndChange={(e) => { + // const val = e.currentTarget.value; + // setNewEvent((ev) => { + // if (ev) + // return { + // ...ev, + // end: val, + // }; + // return ev; + // }); + //}} onAdd={async () => { try { const event: Omit = { @@ -216,24 +235,22 @@ const Planning: React.FC<{ setEventSelected((e) => (open ? e : null)); }} event={eventSelected} - onStartChange={(e) => { - const val = e.currentTarget.value; + onStartDateChange={(date) => { setEventSelected((ev) => { if (ev) return { ...ev, - start: val, + start: date, }; return ev; }); }} - onEndChange={(e) => { - const val = e.currentTarget.value; + onEndDateChange={(date) => { setEventSelected((ev) => { if (ev) return { ...ev, - end: val, + end: date, }; return ev; }); @@ -273,8 +290,10 @@ const Planning: React.FC<{ const EventDialog: React.FC< { - onEndChange: React.ChangeEventHandler; - onStartChange: React.ChangeEventHandler; + // onEndChange: React.ChangeEventHandler; + // onStartChange: React.ChangeEventHandler; + onStartDateChange: (selectedDate: Date | undefined) => void; + onEndDateChange: (selectedDate: Date | undefined) => void; onDelete?: () => void; onUpdate?: () => void; onAdd?: () => void; @@ -285,8 +304,10 @@ const EventDialog: React.FC< > = ({ open, onOpenChange, - onEndChange, - onStartChange, + // onEndChange, + // onStartChange, + onStartDateChange, + onEndDateChange, onDelete, onUpdate, onAdd, @@ -294,7 +315,6 @@ const EventDialog: React.FC< onActiveStateChange, event, }) => { - const [checked, setChecked] = useState(event.status === "Active") return ( @@ -316,68 +336,29 @@ const EventDialog: React.FC< onChange={onTitleChange} className="col-span-3" type="text" - /> + />
- {/* - - - - - - date > new Date() || - date < new Date("1900-01-01") - } - initialFocus - /> - - */} - onStartDateChange(date)} />
- */} + onEndDateChange(date)} />
@@ -399,9 +380,6 @@ const EventDialog: React.FC< />
-
- Date syntax : yyyy-MM-dd HH:mm -
{onUpdate && (