Merge remote-tracking branch 'origin/dev/guerby' into dev/cedric

frontend/components/planning.tsx

@@ -29,6 +29,14 @@ import { Button } from "@/components/ui/button";
 import { KeyedMutator } from "swr";
 import { getCookie } from "cookies-next";
 import { useTheme } from "next-themes";
+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"
+}
 
 const Planning: React.FC<{
 	events: CalendarEventExternal[];
@@ -39,14 +47,15 @@ const Planning: React.FC<{
 	const isConnected = getCookie("auth_token");
 	const plugins = isConnected
 		? [
-				createEventsServicePlugin(),
-				createDragAndDropPlugin(),
-				createResizePlugin(),
-				createEventRecurrencePlugin(),
-			]
+			createEventsServicePlugin(),
+			createDragAndDropPlugin(),
+			createResizePlugin(),
+			createEventRecurrencePlugin(),
+		]
 		: [];
 	const [eventSelected, setEventSelected] =
 		useState<CalendarEventExternal | null>(null);
+	const [eventStatus, setEventStatus] = useState<String>("Active")
 	const [newEvent, setNewEvent] = useState<Omit<
 		CalendarEventExternal,
 		"id"
@@ -155,13 +164,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`,
 								{
@@ -253,6 +279,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
 > = ({
@@ -263,22 +291,40 @@ const EventDialog: React.FC<
 	onDelete,
 	onUpdate,
 	onAdd,
+	onTitleChange,
+	onActiveStateChange,
 	event,
 }) => {
-	return (
-		<Dialog open={open} onOpenChange={onOpenChange}>
-			<DialogContent className="sm:max-w-md">
-				<DialogHeader>
-					<DialogTitle>{event.title}</DialogTitle>
-					<DialogDescription>{event.description}</DialogDescription>
-				</DialogHeader>
 
-				<div className="grid gap-4 py-4">
-					<div className="grid grid-cols-4 items-center gap-4">
-						<Label htmlFor="start" className="text-right">
-							Début
-						</Label>
-						{/*<Popover>
+		const [checked, setChecked] = useState<CheckedState>(event.status === "Active")
+
+		return (
+			<Dialog open={open} onOpenChange={onOpenChange}>
+				<DialogContent className="sm:max-w-md">
+					<DialogHeader>
+						<DialogTitle>{event.title}</DialogTitle>
+						<DialogDescription>{event.description}</DialogDescription>
+					</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
+							</Label>
+							{/*<Popover>
 								<PopoverTrigger asChild>
 									<Button
 										variant={"outline"}
@@ -317,53 +363,74 @@ const EventDialog: React.FC<
 									/>
 								</PopoverContent>
 							</Popover> */}
-						<Input
-							id="start"
-							value={event.start || ""}
-							onChange={onStartChange}
-							className="col-span-3"
-						/>
+							<Input
+								id="start"
+								value={event.start || ""}
+								onChange={onStartChange}
+								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
+								id="status"
+								checked={
+									checked
+								}
+								onCheckedChange={(e) => {
+									const booleanCheck = !!e
+									setChecked(prev => { return !prev })
+									if (onActiveStateChange) {
+										onActiveStateChange(booleanCheck)
+									}
+								}}
+							/>
+						</div>
 					</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 className="">
+						Date syntax : yyyy-MM-dd HH:mm
 					</div>
-				</div>
-				<DialogFooter className="flex flex-row justify-end">
-					{onUpdate && (
-						<Button
-							variant="outline"
-							onClick={() => onUpdate()}
-							type="submit"
-						>
-							Actualiser
-						</Button>
-					)}
-					{onDelete && (
-						<Button
-							variant="destructive"
-							onClick={() => onDelete()}
-							type="submit"
-						>
-							Supprimer
-						</Button>
-					)}
-					{onAdd && !onUpdate && !onDelete && (
-						<Button onClick={() => onAdd()} type="submit">
-							Créer
-						</Button>
-					)}
-				</DialogFooter>
-			</DialogContent>
-		</Dialog>
-	);
-};
+					<DialogFooter className="flex flex-row justify-end">
+						{onUpdate && (
+							<Button
+								variant="outline"
+								onClick={() => onUpdate()}
+								type="submit"
+							>
+								Actualiser
+							</Button>
+						)}
+						{onDelete && (
+							<Button
+								variant="destructive"
+								onClick={() => onDelete()}
+								type="submit"
+							>
+								Supprimer
+							</Button>
+						)}
+						{onAdd && !onUpdate && !onDelete && (
+							<Button onClick={() => onAdd()} type="submit">
+								Créer
+							</Button>
+						)}
+					</DialogFooter>
+				</DialogContent>
+			</Dialog>
+		);
+	};
 
 export default Planning;

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": {