checkbox for status visibility in frontend

backend/core/models/events.go

@@ -18,7 +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"`
+	Title		  string    `bun:"title,notnull" 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,10 +28,13 @@ 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";
+import { Checkbox } from "@/components/ui/checkbox";
+import { eventNames } from "process";
+import { useSearchParams } from "next/navigation";
+import { CheckedState } from "@radix-ui/react-checkbox";
 
 interface CalendarEventExternalDB extends CalendarEventExternal {
-	status: "Active" | "Inactive" 
+	status: "Active" | "Inactive"
 }
 
 const Planning: React.FC<{
@@ -183,7 +186,7 @@ const Planning: React.FC<{
 								end: `${new Date(newEvent.end).toISOString()}`,
 								title: newEvent.title,
 								status: eventStatus
-							} 
+							}
 							const res = await request<undefined>(
 								`/events/new`,
 								{
@@ -291,6 +294,9 @@ const EventDialog: React.FC<
 	onActiveStateChange,
 	event,
 }) => {
+
+		const [checked, setChecked] = useState<CheckedState>(event.status === "Active")
+
 		return (
 			<Dialog open={open} onOpenChange={onOpenChange}>
 				<DialogContent className="sm:max-w-md">
@@ -379,18 +385,23 @@ const EventDialog: React.FC<
 								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}
+								checked={
+									checked
+								}
 								onCheckedChange={(e) => {
-									const isChecked = typeof e === "boolean" ? e : false;
-									if (onActiveStateChange != undefined) {
-										onActiveStateChange(isChecked)
+									const booleanCheck = !!e
+									setChecked(prev => { return !prev })
+									if (onActiveStateChange) {
+										onActiveStateChange(booleanCheck)
 									}
 								}}
 							/>
 						</div>
 					</div>
+					<div className="">
+						Date syntax : yyyy-MM-dd HH:mm
+					</div>
 					<DialogFooter className="flex flex-row justify-end">
 						{onUpdate && (
 							<Button

frontend/components/ui/checkbox.tsx

@@ -1,30 +1,30 @@
-"use client";
+"use client"
 
-import * as React from "react";
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-import { Check } from "lucide-react";
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Check } from "lucide-react"
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils"
 
 const Checkbox = React.forwardRef<
-	React.ElementRef<typeof CheckboxPrimitive.Root>,
-	React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
 >(({ className, ...props }, ref) => (
-	<CheckboxPrimitive.Root
-		ref={ref}
-		className={cn(
-			"peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
-			className,
-		)}
-		{...props}
-	>
-		<CheckboxPrimitive.Indicator
-			className={cn("flex items-center justify-center text-current")}
-		>
-			<Check className="h-4 w-4" />
-		</CheckboxPrimitive.Indicator>
-	</CheckboxPrimitive.Root>
-));
-Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("flex items-center justify-center text-current")}
+    >
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
 
-export { Checkbox };
+export { Checkbox }

frontend/package-lock.json

@@ -1993,9 +1993,9 @@
 			"license": "MIT"
 		},
 		"node_modules/@schedule-x/calendar": {
-			"version": "2.14.3",
-			"resolved": "https://registry.npmjs.org/@schedule-x/calendar/-/calendar-2.14.3.tgz",
-			"integrity": "sha512-JR2HxAOzaz+6DguGhT7gYp8ydJmIgbPeTd4hTDd05zyF6OoUcbEgFmiZDC5VvDTbThzjkS1a9v/OM2n0WAHcPA==",
+			"version": "2.17.0",
+			"resolved": "https://registry.npmjs.org/@schedule-x/calendar/-/calendar-2.17.0.tgz",
+			"integrity": "sha512-a/Rpf+yOKjTpiMXNmZzhzlsF1/NvbUL4CRglHlY4Dn/oK/d3bOA1Q++y/Qzsv77y+cM7Ly1zLVl2aFvJNqT7Zg==",
 			"license": "MIT",
 			"peer": true,
 			"peerDependencies": {