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

New date picker for events form

Browse Source
This commit is contained in:
gom-by
2025-02-07 12:23:08 +01:00
parent 49d3817339
commit 535b32317e
5 changed files with 407 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
frontend/components/date-time-picker.tsx Normal file
View File

@@ -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<Date>();
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 (
<Popover open={isOpen} onOpenChange={setIsOpen}>
<PopoverTrigger asChild>
<Button
variant="outline"
className={cn(
"w-fit justify-start text-left font-normal",
!date && "text-muted-foreground"
)}
>
{/*<CalendarIcon className="mr-2 h-4 w-4" />*/}
<p className="w-full"> {date ? (
format(date, "MM/dd/yyyy hh:mm")
) : (
<span>MM/DD/YYYY hh:mm</span>
)} </p>
</Button>
</PopoverTrigger>
<PopoverContent className="w-auto p-0">
<div className="sm:flex">
<Calendar
mode="single"
selected={date}
onSelect={handleDateSelect}
initialFocus
/>
<div className="flex flex-col sm:flex-row sm:h-[300px] divide-y sm:divide-y-0 sm:divide-x">
<ScrollArea className="w-64 sm:w-auto">
<div className="flex sm:flex-col p-2">
{hours.reverse().map((hour) => (
<Button
key={hour}
size="icon"
variant={date && date.getHours() === hour ? "default" : "ghost"}
className="sm:w-full shrink-0 aspect-square"
onClick={() => handleTimeChange("hour", hour.toString())}
>
{hour}
</Button>
))}
</div>
<ScrollBar orientation="horizontal" className="sm:hidden" />
</ScrollArea>
<ScrollArea className="w-64 sm:w-auto">
<div className="flex sm:flex-col p-2">
{Array.from({ length: 12 }, (_, i) => i * 5).map((minute) => (
<Button
key={minute}
size="icon"
variant={date && date.getMinutes() === minute ? "default" : "ghost"}
className="sm:w-full shrink-0 aspect-square"
onClick={() => handleTimeChange("minute", minute.toString())}
>
{minute.toString().padStart(2, '0')}
</Button>
))}
</div>
<ScrollBar orientation="horizontal" className="sm:hidden" />
</ScrollArea>
</div>
</div>
</PopoverContent>
</Popover>
);
}

146
frontend/components/planning.tsx
View File

@@ -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<CalendarEventExternal, "id"> = {
@@ -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<HTMLInputElement>;
onStartChange: React.ChangeEventHandler<HTMLInputElement>;
// onEndChange: React.ChangeEventHandler<HTMLInputElement>;
// onStartChange: React.ChangeEventHandler<HTMLInputElement>;
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<CheckedState>(event.status === "Active")
return (
@@ -316,68 +336,29 @@ const EventDialog: React.FC<
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>
{/*<Popover>
<PopoverTrigger asChild>
<Button
variant={"outline"}
className={cn(
"w-[240px] pl-3 text-left font-normal",
!eventSelected?.start &&
"text-muted-foreground",
)}
>
{eventSelected?.start ? (
format(eventSelected?.start, "PPP")
) : (
<span>Choisissez une date.</span>
)}
<CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
</Button>
</PopoverTrigger>
<PopoverContent
className="w-auto p-0"
align="start"
>
<Calendar
mode="single"
selected={
new Date(
eventSelected?.start ??
Date.now(),
)
}
// onSelect={field.onChange}
disabled={(date) =>
date > new Date() ||
date < new Date("1900-01-01")
}
initialFocus
/>
</PopoverContent>
</Popover> */}
<Input
id="start"
value={event.start || ""}
onChange={onStartChange}
className="col-span-3"
<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"
{/*<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">
@@ -399,9 +380,6 @@ const EventDialog: React.FC<
/>
</div>
</div>
<div className="">
Date syntax : yyyy-MM-dd HH:mm
</div>
<DialogFooter className="flex flex-row justify-end">
{onUpdate && (
<Button
@@ -427,8 +405,8 @@ const EventDialog: React.FC<
</Button>
)}
</DialogFooter>
</DialogContent>
</Dialog>
</DialogContent >
</Dialog >
);
};

76
frontend/components/ui/calendar.tsx Normal file
View File

@@ -0,0 +1,76 @@
"use client"
import * as React from "react"
import { ChevronLeft, ChevronRight } from "lucide-react"
import { DayPicker } from "react-day-picker"
import { cn } from "@/lib/utils"
import { buttonVariants } from "@/components/ui/button"
export type CalendarProps = React.ComponentProps<typeof DayPicker>
function Calendar({
className,
classNames,
showOutsideDays = true,
...props
}: CalendarProps) {
return (
<DayPicker
showOutsideDays={showOutsideDays}
className={cn("p-3", className)}
classNames={{
months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
month: "space-y-4",
caption: "flex justify-center pt-1 relative items-center",
caption_label: "text-sm font-medium",
nav: "space-x-1 flex items-center",
nav_button: cn(
buttonVariants({ variant: "outline" }),
"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
),
nav_button_previous: "absolute left-1",
nav_button_next: "absolute right-1",
table: "w-full border-collapse space-y-1",
head_row: "flex",
head_cell:
"text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
row: "flex w-full mt-2",
cell: cn(
"relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md",
props.mode === "range"
? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
: "[&:has([aria-selected])]:rounded-md"
),
day: cn(
buttonVariants({ variant: "ghost" }),
"h-8 w-8 p-0 font-normal aria-selected:opacity-100"
),
day_range_start: "day-range-start",
day_range_end: "day-range-end",
day_selected:
"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
day_today: "bg-accent text-accent-foreground",
day_outside:
"day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",
day_disabled: "text-muted-foreground opacity-50",
day_range_middle:
"aria-selected:bg-accent aria-selected:text-accent-foreground",
day_hidden: "invisible",
...classNames,
}}
components={{
IconLeft: ({ className, ...props }) => (
<ChevronLeft className={cn("h-4 w-4", className)} {...props} />
),
IconRight: ({ className, ...props }) => (
<ChevronRight className={cn("h-4 w-4", className)} {...props} />
),
}}
{...props}
/>
)
}
Calendar.displayName = "Calendar"
export { Calendar }