Started to work on media upload and organization

2025-01-23 20:10:15 +01:00
parent f9dce4b40b
commit cdd8e34096
21 changed files with 1069 additions and 159 deletions
--- a/frontend/components/photo-dialog.tsx
+++ b/frontend/components/photo-dialog.tsx
@@ -0,0 +1,197 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import Image from "next/image";
+import { useDropzone } from "react-dropzone";
+import {
+	Dialog,
+	DialogContent,
+	DialogHeader,
+	DialogTitle,
+	DialogDescription,
+	DialogFooter,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import Media from "@/interfaces/Media";
+import Link from "next/link";
+
+interface PhotoDialogProps {
+	photo?: Media;
+	isOpen: boolean;
+	onClose: () => void;
+	onDelete?: (id: Media["id"]) => void;
+	onSave: (photo: Omit<Media, "id">, file: File) => void;
+}
+
+export function PhotoDialog({
+	photo,
+	isOpen,
+	onClose,
+	onDelete,
+	onSave,
+}: PhotoDialogProps) {
+	const [file, setFile] = useState<File | null>(null);
+	const [newPhoto, setNewPhoto] = useState<Omit<Media, "id">>({
+		url: "",
+		alt: "",
+		path: "",
+		type: "",
+		size: 0,
+	});
+	const [activeTab, setActiveTab] = useState<string>("url");
+
+	useEffect(() => {
+		setNewPhoto({
+			url: photo?.url ?? "",
+			alt: photo?.alt ?? "",
+			type: photo?.type ?? "",
+			path: photo?.path ?? "",
+			size: photo?.size ?? 0,
+		});
+	}, [photo]);
+
+	const onDrop = useCallback((acceptedFiles: File[]) => {
+		const file = acceptedFiles[0];
+		if (file) {
+			setFile(file);
+			const reader = new FileReader();
+			reader.onload = (e) => {
+				setNewPhoto((prev) => ({
+					...prev,
+					url: e.target?.result as string,
+				}));
+			};
+			reader.readAsDataURL(file);
+		}
+	}, []);
+
+	const { getRootProps, getInputProps, isDragActive } = useDropzone({
+		onDrop,
+		accept: { "image/*": [] },
+	});
+
+	const handleSave = () => {
+		if (file) onSave(newPhoto, file);
+		onClose();
+	};
+
+	const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+		const file = e.target.files?.[0];
+		if (file) {
+			setFile(file);
+			const reader = new FileReader();
+			reader.onload = (e) => {
+				setNewPhoto((prev) => ({
+					...prev,
+					url: e.target?.result as string,
+				}));
+			};
+			reader.readAsDataURL(file);
+		}
+	};
+
+	const isAddMode = !photo;
+
+	return (
+		<Dialog open={isOpen} onOpenChange={onClose}>
+			<DialogContent className="max-w-3xl">
+				<DialogHeader>
+					<DialogTitle>
+						{isAddMode
+							? "Ajouter une nouvelle photo"
+							: "Éditer la photo"}
+					</DialogTitle>
+					<DialogDescription>
+						{isAddMode
+							? "Ajouter une nouvelle photo dans la gallerie"
+							: "Mettre à jour les informations"}
+					</DialogDescription>
+				</DialogHeader>
+				<Tabs value={activeTab} onValueChange={setActiveTab}>
+					<TabsList className="grid w-full grid-cols-2">
+						<TabsTrigger value="url">URL</TabsTrigger>
+						<TabsTrigger value="drag">Drag & Drop</TabsTrigger>
+					</TabsList>
+					<TabsContent value="url" className="space-y-4">
+						<div className="w-full space-y-2">
+							<Label htmlFor="photo-src">URL de la photo</Label>
+							<Input
+								id="photo-src"
+								value={newPhoto.url}
+								onChange={(e) =>
+									setNewPhoto({
+										...newPhoto,
+										url: e.target.value,
+									})
+								}
+								placeholder="Enter URL for the image"
+							/>
+						</div>
+					</TabsContent>
+					<TabsContent value="drag" className="space-y-4">
+						<div
+							{...getRootProps()}
+							className="border-2 border-dashed rounded-md p-8 text-center cursor-pointer"
+						>
+							<input {...getInputProps()} />
+							{isDragActive ? (
+								<p>Déposez une image ici...</p>
+							) : (
+								<p>
+									Déposez une image directement ou cliquer
+									pour sélectionner.
+								</p>
+							)}
+						</div>
+					</TabsContent>
+				</Tabs>
+				<div className="mt-4">
+					<Link href={newPhoto.url} target="_blank">
+						<Image
+							src={newPhoto.url || "/placeholder.svg"}
+							alt={newPhoto.alt}
+							width={300}
+							height={300}
+							className="w-full max-h-[300px] object-contain rounded-md"
+						/>
+					</Link>
+				</div>
+				<div className="w-full space-y-2 mt-4">
+					<Label htmlFor="alt-text">Description</Label>
+					<Input
+						id="alt-text"
+						value={newPhoto.alt}
+						onChange={(e) =>
+							setNewPhoto({ ...newPhoto, alt: e.target.value })
+						}
+						placeholder="Entrer une description pour l'image"
+					/>
+				</div>
+				<DialogFooter className="sm:justify-between">
+					{!isAddMode && onDelete && (
+						<Button
+							variant="destructive"
+							onClick={() => onDelete(photo.id)}
+						>
+							Supprimer la photo
+						</Button>
+					)}
+					<div className="flex space-x-2">
+						<Button variant="outline" onClick={onClose}>
+							Annuler
+						</Button>
+						<Button
+							onClick={handleSave}
+							disabled={!newPhoto.url || !newPhoto.alt}
+						>
+							{isAddMode ? "Ajouter" : "Mettre à jour"}
+						</Button>
+					</div>
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
+	);
+}
--- a/frontend/components/ui/form.tsx
+++ b/frontend/components/ui/form.tsx
@@ -1,178 +1,182 @@
-"use client"
+"use client";

-import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
-import { Slot } from "@radix-ui/react-slot"
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { Slot } from "@radix-ui/react-slot";
 import {
-  Controller,
-  ControllerProps,
-  FieldPath,
-  FieldValues,
-  FormProvider,
-  useFormContext,
-} from "react-hook-form"
+	Controller,
+	ControllerProps,
+	FieldPath,
+	FieldValues,
+	FormProvider,
+	useFormContext,
+} from "react-hook-form";

-import { cn } from "@/lib/utils"
-import { Label } from "@/components/ui/label"
+import { cn } from "@/lib/utils";
+import { Label } from "@/components/ui/label";

-const Form = FormProvider
+const Form = FormProvider;

 type FormFieldContextValue<
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+	TFieldValues extends FieldValues = FieldValues,
+	TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 > = {
-  name: TName
-}
+	name: TName;
+};

 const FormFieldContext = React.createContext<FormFieldContextValue>(
-  {} as FormFieldContextValue
-)
+	{} as FormFieldContextValue,
+);

 const FormField = <
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+	TFieldValues extends FieldValues = FieldValues,
+	TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 >({
-  ...props
+	...props
 }: ControllerProps<TFieldValues, TName>) => {
-  return (
-    <FormFieldContext.Provider value={{ name: props.name }}>
-      <Controller {...props} />
-    </FormFieldContext.Provider>
-  )
-}
+	return (
+		<FormFieldContext.Provider value={{ name: props.name }}>
+			<Controller {...props} />
+		</FormFieldContext.Provider>
+	);
+};

 const useFormField = () => {
-  const fieldContext = React.useContext(FormFieldContext)
-  const itemContext = React.useContext(FormItemContext)
-  const { getFieldState, formState } = useFormContext()
+	const fieldContext = React.useContext(FormFieldContext);
+	const itemContext = React.useContext(FormItemContext);
+	const { getFieldState, formState } = useFormContext();

-  const fieldState = getFieldState(fieldContext.name, formState)
+	const fieldState = getFieldState(fieldContext.name, formState);

-  if (!fieldContext) {
-    throw new Error("useFormField should be used within <FormField>")
-  }
+	if (!fieldContext) {
+		throw new Error("useFormField should be used within <FormField>");
+	}

-  const { id } = itemContext
+	const { id } = itemContext;

-  return {
-    id,
-    name: fieldContext.name,
-    formItemId: `${id}-form-item`,
-    formDescriptionId: `${id}-form-item-description`,
-    formMessageId: `${id}-form-item-message`,
-    ...fieldState,
-  }
-}
+	return {
+		id,
+		name: fieldContext.name,
+		formItemId: `${id}-form-item`,
+		formDescriptionId: `${id}-form-item-description`,
+		formMessageId: `${id}-form-item-message`,
+		...fieldState,
+	};
+};

 type FormItemContextValue = {
-  id: string
-}
+	id: string;
+};

 const FormItemContext = React.createContext<FormItemContextValue>(
-  {} as FormItemContextValue
-)
+	{} as FormItemContextValue,
+);

 const FormItem = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
+	HTMLDivElement,
+	React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => {
-  const id = React.useId()
+	const id = React.useId();

-  return (
-    <FormItemContext.Provider value={{ id }}>
-      <div ref={ref} className={cn("space-y-2", className)} {...props} />
-    </FormItemContext.Provider>
-  )
-})
-FormItem.displayName = "FormItem"
+	return (
+		<FormItemContext.Provider value={{ id }}>
+			<div ref={ref} className={cn("space-y-2", className)} {...props} />
+		</FormItemContext.Provider>
+	);
+});
+FormItem.displayName = "FormItem";

 const FormLabel = React.forwardRef<
-  React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+	React.ComponentRef<typeof LabelPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
 >(({ className, ...props }, ref) => {
-  const { error, formItemId } = useFormField()
+	const { error, formItemId } = useFormField();

-  return (
-    <Label
-      ref={ref}
-      className={cn(error && "text-destructive", className)}
-      htmlFor={formItemId}
-      {...props}
-    />
-  )
-})
-FormLabel.displayName = "FormLabel"
+	return (
+		<Label
+			ref={ref}
+			className={cn(error && "text-destructive", className)}
+			htmlFor={formItemId}
+			{...props}
+		/>
+	);
+});
+FormLabel.displayName = "FormLabel";

 const FormControl = React.forwardRef<
-  React.ElementRef<typeof Slot>,
-  React.ComponentPropsWithoutRef<typeof Slot>
+	React.ElementRef<typeof Slot>,
+	React.ComponentPropsWithoutRef<typeof Slot>
 >(({ ...props }, ref) => {
-  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+	const { error, formItemId, formDescriptionId, formMessageId } =
+		useFormField();

-  return (
-    <Slot
-      ref={ref}
-      id={formItemId}
-      aria-describedby={
-        !error
-          ? `${formDescriptionId}`
-          : `${formDescriptionId} ${formMessageId}`
-      }
-      aria-invalid={!!error}
-      {...props}
-    />
-  )
-})
-FormControl.displayName = "FormControl"
+	return (
+		<Slot
+			ref={ref}
+			id={formItemId}
+			aria-describedby={
+				!error
+					? `${formDescriptionId}`
+					: `${formDescriptionId} ${formMessageId}`
+			}
+			aria-invalid={!!error}
+			{...props}
+		/>
+	);
+});
+FormControl.displayName = "FormControl";

 const FormDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
+	HTMLParagraphElement,
+	React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, ...props }, ref) => {
-  const { formDescriptionId } = useFormField()
+	const { formDescriptionId } = useFormField();

-  return (
-    <p
-      ref={ref}
-      id={formDescriptionId}
-      className={cn("text-[0.8rem] text-muted-foreground", className)}
-      {...props}
-    />
-  )
-})
-FormDescription.displayName = "FormDescription"
+	return (
+		<p
+			ref={ref}
+			id={formDescriptionId}
+			className={cn("text-[0.8rem] text-muted-foreground", className)}
+			{...props}
+		/>
+	);
+});
+FormDescription.displayName = "FormDescription";

 const FormMessage = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
+	HTMLParagraphElement,
+	React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, children, ...props }, ref) => {
-  const { error, formMessageId } = useFormField()
-  const body = error ? String(error?.message) : children
+	const { error, formMessageId } = useFormField();
+	const body = error ? String(error?.message) : children;

-  if (!body) {
-    return null
-  }
+	if (!body) {
+		return null;
+	}

-  return (
-    <p
-      ref={ref}
-      id={formMessageId}
-      className={cn("text-[0.8rem] font-medium text-destructive", className)}
-      {...props}
-    >
-      {body}
-    </p>
-  )
-})
-FormMessage.displayName = "FormMessage"
+	return (
+		<p
+			ref={ref}
+			id={formMessageId}
+			className={cn(
+				"text-[0.8rem] font-medium text-destructive",
+				className,
+			)}
+			{...props}
+		>
+			{body}
+		</p>
+	);
+});
+FormMessage.displayName = "FormMessage";

 export {
-  useFormField,
-  Form,
-  FormItem,
-  FormLabel,
-  FormControl,
-  FormDescription,
-  FormMessage,
-  FormField,
-}
+	useFormField,
+	Form,
+	FormItem,
+	FormLabel,
+	FormControl,
+	FormDescription,
+	FormMessage,
+	FormField,
+};
--- a/frontend/components/ui/pagination.tsx
+++ b/frontend/components/ui/pagination.tsx
@@ -0,0 +1,117 @@
+import * as React from "react";
+import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import { ButtonProps, buttonVariants } from "@/components/ui/button";
+
+const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
+	<nav
+		role="navigation"
+		aria-label="pagination"
+		className={cn("mx-auto flex w-full justify-center", className)}
+		{...props}
+	/>
+);
+Pagination.displayName = "Pagination";
+
+const PaginationContent = React.forwardRef<
+	HTMLUListElement,
+	React.ComponentProps<"ul">
+>(({ className, ...props }, ref) => (
+	<ul
+		ref={ref}
+		className={cn("flex flex-row items-center gap-1", className)}
+		{...props}
+	/>
+));
+PaginationContent.displayName = "PaginationContent";
+
+const PaginationItem = React.forwardRef<
+	HTMLLIElement,
+	React.ComponentProps<"li">
+>(({ className, ...props }, ref) => (
+	<li ref={ref} className={cn("", className)} {...props} />
+));
+PaginationItem.displayName = "PaginationItem";
+
+type PaginationLinkProps = {
+	isActive?: boolean;
+} & Pick<ButtonProps, "size"> &
+	React.ComponentProps<"a">;
+
+const PaginationLink = ({
+	className,
+	isActive,
+	size = "icon",
+	...props
+}: PaginationLinkProps) => (
+	<a
+		aria-current={isActive ? "page" : undefined}
+		className={cn(
+			buttonVariants({
+				variant: isActive ? "outline" : "ghost",
+				size,
+			}),
+			className,
+		)}
+		{...props}
+	/>
+);
+PaginationLink.displayName = "PaginationLink";
+
+const PaginationPrevious = ({
+	className,
+	...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+	<PaginationLink
+		aria-label="Go to previous page"
+		size="default"
+		className={cn("gap-1 pl-2.5", className)}
+		{...props}
+	>
+		<ChevronLeft className="h-4 w-4" />
+		<span>Previous</span>
+	</PaginationLink>
+);
+PaginationPrevious.displayName = "PaginationPrevious";
+
+const PaginationNext = ({
+	className,
+	...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+	<PaginationLink
+		aria-label="Go to next page"
+		size="default"
+		className={cn("gap-1 pr-2.5", className)}
+		{...props}
+	>
+		<span>Next</span>
+		<ChevronRight className="h-4 w-4" />
+	</PaginationLink>
+);
+PaginationNext.displayName = "PaginationNext";
+
+const PaginationEllipsis = ({
+	className,
+	...props
+}: React.ComponentProps<"span">) => (
+	<span
+		aria-hidden
+		className={cn("flex h-9 w-9 items-center justify-center", className)}
+		{...props}
+	>
+		<MoreHorizontal className="h-4 w-4" />
+		<span className="sr-only">More pages</span>
+	</span>
+);
+PaginationEllipsis.displayName = "PaginationEllipsis";
+
+export {
+	Pagination,
+	PaginationContent,
+	PaginationLink,
+	PaginationItem,
+	PaginationPrevious,
+	PaginationNext,
+	PaginationEllipsis,
+};
--- a/frontend/components/ui/tabs.tsx
+++ b/frontend/components/ui/tabs.tsx
@@ -0,0 +1,55 @@
+"use client";
+
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+
+import { cn } from "@/lib/utils";
+
+const Tabs = TabsPrimitive.Root;
+
+const TabsList = React.forwardRef<
+	React.ComponentRef<typeof TabsPrimitive.List>,
+	React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+	<TabsPrimitive.List
+		ref={ref}
+		className={cn(
+			"inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+			className,
+		)}
+		{...props}
+	/>
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const TabsTrigger = React.forwardRef<
+	React.ComponentRef<typeof TabsPrimitive.Trigger>,
+	React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+	<TabsPrimitive.Trigger
+		ref={ref}
+		className={cn(
+			"inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
+			className,
+		)}
+		{...props}
+	/>
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = React.forwardRef<
+	React.ComponentRef<typeof TabsPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+	<TabsPrimitive.Content
+		ref={ref}
+		className={cn(
+			"mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+			className,
+		)}
+		{...props}
+	/>
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };