Calendar event creation form (not finished)

backend/core/models/events.go

@@ -18,6 +18,7 @@ type Event struct {
 	bun.BaseModel `bun:"table:events"`
 
 	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"`
 	ScheduleStart time.Time `bun:"schedule_start,notnull" json:"start"`
 	ScheduleEnd   time.Time `bun:"schedule_end,notnull" json:"end"`

frontend/components/planning.tsx

@@ -28,6 +28,11 @@ import { Button } from "@/components/ui/button";
 import { KeyedMutator } from "swr";
 import { getCookie } from "cookies-next";
 import { useTheme } from "next-themes";
+import { Checkbox } from "@radix-ui/react-checkbox";
+
+interface CalendarEventExternalDB extends CalendarEventExternal {
+	status: "Active" | "Inactive" 
+}
 
 const Planning: React.FC<{
 	events: CalendarEventExternal[];
@@ -46,6 +51,7 @@ const Planning: React.FC<{
 		: [];
 	const [eventSelected, setEventSelected] =
 		useState<CalendarEventExternal | null>(null);
+	const [eventStatus, setEventStatus] = useState<String>("Active")
 	const [newEvent, setNewEvent] = useState<Omit<
 		CalendarEventExternal,
 		"id"
@@ -154,13 +160,30 @@ const Planning: React.FC<{
 							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 () => {
 						try {
 							const event: Omit<CalendarEventExternal, "id"> = {
 								...newEvent,
 								start: `${new Date(newEvent.start).toISOString()}`,
 								end: `${new Date(newEvent.end).toISOString()}`,
-							};
+								title: newEvent.title,
+								status: eventStatus
+							} 
 							const res = await request<undefined>(
 								`/events/new`,
 								{
@@ -252,6 +275,8 @@ const EventDialog: React.FC<
 		onDelete?: () => void;
 		onUpdate?: () => void;
 		onAdd?: () => void;
+		onTitleChange?: React.ChangeEventHandler<HTMLInputElement>;
+		onActiveStateChange?: (status: boolean) => void;
 		event: CalendarEventExternal | Omit<CalendarEventExternal, "id">;
 	} & DialogProps
 > = ({
@@ -262,6 +287,8 @@ const EventDialog: React.FC<
 	onDelete,
 	onUpdate,
 	onAdd,
+	onTitleChange,
+	onActiveStateChange,
 	event,
 }) => {
 		return (
@@ -273,6 +300,19 @@ const EventDialog: React.FC<
 					</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
@@ -334,6 +374,22 @@ const EventDialog: React.FC<
 								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>
 					<DialogFooter className="flex flex-row justify-end">
 						{onUpdate && (
@@ -363,6 +419,6 @@ const EventDialog: React.FC<
 				</DialogContent>
 			</Dialog>
 		);
-};
+	};
 
 export default Planning;