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

frontend/components/planning.tsx

@@ -33,9 +33,10 @@ 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"
+	status: "Active" | "Inactive";
 }
 
 const Planning: React.FC<{
@@ -47,15 +48,17 @@ 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 [eventStatus, setEventStatus] = useState<"Active" | "Inactive">(
+		"Active",
+	);
 	const [newEvent, setNewEvent] = useState<Omit<
 		CalendarEventExternal,
 		"id"
@@ -142,24 +145,33 @@ 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,
+									start: date,
 								};
 							return ev;
 						});
 					}}
-					onEndChange={(e) => {
-						const val = e.currentTarget.value;
+					onEndDateChange={(date) => {
 						setNewEvent((ev) => {
 							if (ev)
 								return {
 									...ev,
-									end: val,
+									end: date,
 								};
 							return ev;
 						});
@@ -176,9 +188,21 @@ const Planning: React.FC<{
 						});
 					}}
 					onActiveStateChange={(e) => {
-						e ? setEventStatus("Active")
-							: setEventStatus("Inactive")
+						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"> = {
@@ -186,8 +210,8 @@ const Planning: React.FC<{
 								start: `${new Date(newEvent.start).toISOString()}`,
 								end: `${new Date(newEvent.end).toISOString()}`,
 								title: newEvent.title,
-								status: eventStatus
-							}
+								status: eventStatus,
+							};
 							const res = await request<undefined>(
 								`/events/new`,
 								{
@@ -217,24 +241,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;
 						});
@@ -274,8 +296,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;
@@ -286,8 +310,10 @@ const EventDialog: React.FC<
 > = ({
 	open,
 	onOpenChange,
-	onEndChange,
-	onStartChange,
+	// onEndChange,
+	// onStartChange,
+	onStartDateChange,
+	onEndDateChange,
 	onDelete,
 	onUpdate,
 	onAdd,
@@ -295,142 +321,106 @@ const EventDialog: React.FC<
 	onActiveStateChange,
 	event,
 }) => {
+	const [checked, setChecked] = useState<CheckedState>(
+		event.status === "Active",
+	);
 
-		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>
 
-		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 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"}
-										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"
-							/>
-						</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
+					<div className="grid grid-cols-4 items-center gap-4">
+						<Label htmlFor="start" className="text-right">
+							Début
+						</Label>
+						<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"
+											/> */}
+						<DateTimePicker
+							onDateSelectChange={(date) => onEndDateChange(date)}
+						/>
+					</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);
 								}
-								onCheckedChange={(e) => {
-									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
-								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>
-		);
-	};
+				</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>
+	);
+};
 
 export default Planning;