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

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 >
);
};