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>
+	);
+}