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

Calendar event creation form (not finished)

Browse Source
This commit is contained in:
gom-by
2025-02-03 12:37:44 +01:00
parent cd0e416734
commit 97dc0b8022
2 changed files with 123 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
backend/core/models/events.go
View File

@@ -18,6 +18,7 @@ type Event struct {
bun.BaseModel `bun:"table:events"` bun.BaseModel `bun:"table:events"`
EventID uuid.UUID `bun:"event_id,type:uuid,pk,default:gen_random_uuid()" json:"id"` EventID uuid.UUID `bun:"event_id,type:uuid,pk,default:gen_random_uuid()" json:"id"`
Title string `bun:"title,notnull,default:'no title'" json:"title"`
CreationDate time.Time `bun:"creation_date,notnull,default:current_timestamp" json:"creationDate"` CreationDate time.Time `bun:"creation_date,notnull,default:current_timestamp" json:"creationDate"`
ScheduleStart time.Time `bun:"schedule_start,notnull" json:"start"` ScheduleStart time.Time `bun:"schedule_start,notnull" json:"start"`
ScheduleEnd time.Time `bun:"schedule_end,notnull" json:"end"` ScheduleEnd time.Time `bun:"schedule_end,notnull" json:"end"`

188
frontend/components/planning.tsx
View File

@@ -28,6 +28,11 @@ import { Button } from "@/components/ui/button";
import { KeyedMutator } from "swr"; import { KeyedMutator } from "swr";
import { getCookie } from "cookies-next"; import { getCookie } from "cookies-next";
import { useTheme } from "next-themes"; import { useTheme } from "next-themes";
import { Checkbox } from "@radix-ui/react-checkbox";
interface CalendarEventExternalDB extends CalendarEventExternal {
status: "Active" | "Inactive"
}
const Planning: React.FC<{ const Planning: React.FC<{
events: CalendarEventExternal[]; events: CalendarEventExternal[];
@@ -38,14 +43,15 @@ const Planning: React.FC<{
const isConnected = getCookie("auth_token"); const isConnected = getCookie("auth_token");
const plugins = isConnected const plugins = isConnected
? [ ? [
createEventsServicePlugin(), createEventsServicePlugin(),
createDragAndDropPlugin(), createDragAndDropPlugin(),
createResizePlugin(), createResizePlugin(),
createEventRecurrencePlugin(), createEventRecurrencePlugin(),
] ]
: []; : [];
const [eventSelected, setEventSelected] = const [eventSelected, setEventSelected] =
useState<CalendarEventExternal | null>(null); useState<CalendarEventExternal | null>(null);
const [eventStatus, setEventStatus] = useState<String>("Active")
const [newEvent, setNewEvent] = useState<Omit< const [newEvent, setNewEvent] = useState<Omit<
CalendarEventExternal, CalendarEventExternal,
"id" "id"
@@ -154,13 +160,30 @@ const Planning: React.FC<{
return ev; 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")
}}
onAdd={async () => { onAdd={async () => {
try { try {
const event: Omit<CalendarEventExternal, "id"> = { const event: Omit<CalendarEventExternal, "id"> = {
...newEvent, ...newEvent,
start: `${new Date(newEvent.start).toISOString()}`, start: `${new Date(newEvent.start).toISOString()}`,
end: `${new Date(newEvent.end).toISOString()}`, end: `${new Date(newEvent.end).toISOString()}`,
}; title: newEvent.title,
status: eventStatus
}
const res = await request<undefined>( const res = await request<undefined>(
`/events/new`, `/events/new`,
{ {
@@ -252,6 +275,8 @@ const EventDialog: React.FC<
onDelete?: () => void; onDelete?: () => void;
onUpdate?: () => void; onUpdate?: () => void;
onAdd?: () => void; onAdd?: () => void;
onTitleChange?: React.ChangeEventHandler<HTMLInputElement>;
onActiveStateChange?: (status: boolean) => void;
event: CalendarEventExternal | Omit<CalendarEventExternal, "id">; event: CalendarEventExternal | Omit<CalendarEventExternal, "id">;
} & DialogProps } & DialogProps
> = ({ > = ({
@@ -262,22 +287,37 @@ const EventDialog: React.FC<
onDelete, onDelete,
onUpdate, onUpdate,
onAdd, onAdd,
onTitleChange,
onActiveStateChange,
event, event,
}) => { }) => {
return ( return (
<Dialog open={open} onOpenChange={onOpenChange}> <Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="sm:max-w-md"> <DialogContent className="sm:max-w-md">
<DialogHeader> <DialogHeader>
<DialogTitle>{event.title}</DialogTitle> <DialogTitle>{event.title}</DialogTitle>
<DialogDescription>{event.description}</DialogDescription> <DialogDescription>{event.description}</DialogDescription>
</DialogHeader> </DialogHeader>
<div className="grid gap-4 py-4"> <div className="grid gap-4 py-4">
<div className="grid grid-cols-4 items-center gap-4"> <div className="grid grid-cols-4 items-center gap-4">
<Label htmlFor="start" className="text-right"> <Label htmlFor="title" className="text-right">
Début Titre
</Label> </Label>
{/*<Popover> <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>
{/*<Popover>
<PopoverTrigger asChild> <PopoverTrigger asChild>
<Button <Button
variant={"outline"} variant={"outline"}
@@ -316,53 +356,69 @@ const EventDialog: React.FC<
/> />
</PopoverContent> </PopoverContent>
</Popover> */} </Popover> */}
<Input <Input
id="start" id="start"
value={event.start || ""} value={event.start || ""}
onChange={onStartChange} onChange={onStartChange}
className="col-span-3" className="col-span-3"
/> />
</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"
/>
</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
className="grid-cols-4 p-0 m-0 h-4 w-4 border rounded"
id="status"
checked={true}
onCheckedChange={(e) => {
const isChecked = typeof e === "boolean" ? e : false;
if (onActiveStateChange != undefined) {
onActiveStateChange(isChecked)
}
}}
/>
</div>
</div> </div>
<div className="grid grid-cols-4 items-center gap-4"> <DialogFooter className="flex flex-row justify-end">
<Label htmlFor="end" className="text-right"> {onUpdate && (
Fin <Button
</Label> variant="outline"
<Input onClick={() => onUpdate()}
id="end" type="submit"
value={event.end || ""} >
onChange={onEndChange} Actualiser
className="col-span-3" </Button>
/> )}
</div> {onDelete && (
</div> <Button
<DialogFooter className="flex flex-row justify-end"> variant="destructive"
{onUpdate && ( onClick={() => onDelete()}
<Button type="submit"
variant="outline" >
onClick={() => onUpdate()} Supprimer
type="submit" </Button>
> )}
Actualiser {onAdd && !onUpdate && !onDelete && (
</Button> <Button onClick={() => onAdd()} type="submit">
)} Créer
{onDelete && ( </Button>
<Button )}
variant="destructive" </DialogFooter>
onClick={() => onDelete()} </DialogContent>
type="submit" </Dialog>
> );
Supprimer };
</Button>
)}
{onAdd && !onUpdate && !onDelete && (
<Button onClick={() => onAdd()} type="submit">
Créer
</Button>
)}
</DialogFooter>
</DialogContent>
</Dialog>
);
};
export default Planning; export default Planning;