@@ -258,21 +266,21 @@ export const AnimatedBackground = () => {
{/* Bouncing balls */}
diff --git a/ui/src/components/TabloModal.tsx b/ui/src/components/TabloModal.tsx
index e64e70d..669446a 100644
--- a/ui/src/components/TabloModal.tsx
+++ b/ui/src/components/TabloModal.tsx
@@ -1,11 +1,21 @@
import { ClickOutside } from "./ClickOutside";
-import { useState } from "react";
+import { useState, useEffect, useRef } from "react";
import { ImageColorPicker } from "./ImageColorPicker";
import { StatusPicker } from "./StatusPicker";
import { useInviteUser } from "@ui/hooks/invite";
import { TabloUpdate, UserTablo } from "@ui/types/tablos.types";
import { useTabloMembers } from "@ui/hooks/tablos";
import { useUser } from "@ui/providers/UserStoreProvider";
+import {
+ useTabloFileNames,
+ useCreateTabloFile,
+ useDeleteTabloFile,
+ useDownloadTabloFile,
+} from "@ui/hooks/tablo_data";
+import { toast } from "@ui/ui-library/toast/toast-queue";
+import { FileTrigger } from "@ui/ui-library/file-trigger";
+import { Button } from "@ui/ui-library/button";
+import { Trash2Icon, DownloadIcon } from "lucide-react";
type StatusType = "todo" | "in_progress" | "done";
@@ -16,13 +26,9 @@ interface TabloModalProps {
readOnly?: boolean;
}
-export const TabloModal = ({
- tablo,
- onClose,
- onEdit,
- readOnly = false,
-}: TabloModalProps) => {
+export const TabloModal = ({ tablo, onClose, onEdit }: TabloModalProps) => {
const currentUser = useUser();
+ const isAdmin = tablo?.is_admin ?? false;
const [editData, setEditData] = useState
(tablo);
const [isEditingName, setIsEditingName] = useState(false);
@@ -31,13 +37,29 @@ export const TabloModal = ({
const [selectedColor, setSelectedColor] = useState(
tablo?.color || "bg-blue-500"
);
-
+ const [error, setError] = useState("");
const { data: members } = useTabloMembers(tablo?.id ?? "");
const [showMembers, setShowMembers] = useState(false);
const [inviteEmail, setInviteEmail] = useState("");
const inviteUser = useInviteUser();
+ const {
+ data: fileData,
+ isLoading: filesLoading,
+ error: filesError,
+ } = useTabloFileNames(tablo?.id ?? "");
+ const [showFiles, setShowFiles] = useState(false);
+
+ // File upload state
+ const [selectedFile, setSelectedFile] = useState(null);
+ const [isUploading, setIsUploading] = useState(false);
+ const [deletingFile, setDeletingFile] = useState(null);
+ const [downloadingFile, setDownloadingFile] = useState(null);
+ const createFile = useCreateTabloFile();
+ const deleteFile = useDeleteTabloFile();
+ const downloadFile = useDownloadTabloFile();
+
const handleSaveEdit = () => {
if (editData && onEdit) {
// Clear the unused field based on selection
@@ -63,52 +85,292 @@ export const TabloModal = ({
return emailRegex.test(email);
};
+ const handleFileSelect = (files: FileList | null) => {
+ const file = files?.[0];
+ if (!file) return;
+
+ // Validate file size (2MB limit)
+ const maxSize = 2 * 1024 * 1024; // 2MB in bytes
+ if (file.size > maxSize) {
+ setError("Le fichier ne peut pas dépasser 2MB");
+ return;
+ }
+
+ setError("");
+ setSelectedFile(file);
+ };
+
+ const handleFileUpload = async () => {
+ if (!selectedFile || !tablo?.id) return;
+
+ setIsUploading(true);
+ try {
+ const reader = new FileReader();
+ reader.onload = async (e) => {
+ try {
+ const content = e.target?.result as string;
+
+ await createFile.mutateAsync({
+ tabloId: tablo.id,
+ fileName: selectedFile.name,
+ data: {
+ content,
+ contentType: selectedFile.type || "application/octet-stream",
+ },
+ });
+
+ // Reset upload state
+ setSelectedFile(null);
+ setIsUploading(false);
+ } catch (uploadError) {
+ setIsUploading(false);
+ console.error("Upload error:", uploadError);
+ }
+ };
+
+ reader.onerror = () => {
+ setIsUploading(false);
+ toast.add(
+ {
+ title: "Erreur de lecture",
+ description: "Impossible de lire le fichier sélectionné",
+ type: "error",
+ },
+ {
+ timeout: 5000,
+ }
+ );
+ };
+
+ // Read file as base64 data URL for binary files, or as text for text files
+ if (
+ selectedFile.type.startsWith("text/") ||
+ selectedFile.type === "application/json"
+ ) {
+ reader.readAsText(selectedFile);
+ } else {
+ reader.readAsDataURL(selectedFile);
+ }
+ } catch (error) {
+ setIsUploading(false);
+ console.error("Upload error:", error);
+ }
+ };
+
+ const cancelFileUpload = () => {
+ setSelectedFile(null);
+ };
+
+ const handleDeleteFile = async (fileName: string) => {
+ if (!tablo?.id) return;
+
+ // Simple confirmation
+ if (
+ !window.confirm(
+ `Êtes-vous sûr de vouloir supprimer le fichier "${fileName}" ?`
+ )
+ ) {
+ return;
+ }
+
+ setDeletingFile(fileName);
+ try {
+ await deleteFile.mutateAsync({
+ tabloId: tablo.id,
+ fileName,
+ });
+ } catch (error) {
+ console.error("Delete error:", error);
+ } finally {
+ setDeletingFile(null);
+ }
+ };
+
+ const handleDownloadFile = async (fileName: string) => {
+ if (!tablo?.id) return;
+
+ setDownloadingFile(fileName);
+ try {
+ await downloadFile.mutateAsync({
+ tabloId: tablo.id,
+ fileName,
+ });
+ } catch (error) {
+ console.error("Download error:", error);
+ } finally {
+ setDownloadingFile(null);
+ }
+ };
+
if (!tablo) return null;
const currentData = editData || tablo;
+ // Keyboard shortcuts
+ useEffect(() => {
+ const handleKeyDown = (e: KeyboardEvent) => {
+ if (e.key === "Escape") {
+ onClose();
+ }
+ if (e.key === "Enter" && (e.ctrlKey || e.metaKey) && isAdmin) {
+ handleSaveEdit();
+ }
+ };
+
+ document.addEventListener("keydown", handleKeyDown);
+ return () => document.removeEventListener("keydown", handleKeyDown);
+ }, [onClose, handleSaveEdit, isAdmin]);
+
+ // Auto-focus name input when editing
+ const nameInputRef = useRef(null);
+ useEffect(() => {
+ if (isEditingName && nameInputRef.current) {
+ nameInputRef.current.focus();
+ nameInputRef.current.select();
+ }
+ }, [isEditingName]);
+
return (
-
+
-
+
{/* Header */}
-
- {!readOnly && isEditingName ? (
-
setIsEditingName(false)}>
-
- setEditData((prev) =>
- prev ? { ...prev, name: e.target.value } : null
- )
- }
- className="text-2xl font-bold text-gray-900 dark:text-white bg-transparent border-b-2 border-blue-500 focus:outline-none focus:border-blue-600"
- />
-
- ) : (
-
setIsEditingName(true) : undefined}
- >
- {tablo.name}
-
- )}
+
+
+ {/* Tablo Color/Image Preview */}
+
+ {tablo.image ? (
+
+ ) : (
+
+
+ {tablo.name.charAt(0).toUpperCase()}
+
+
+ )}
+
+
+ {/* Title */}
+
+ {isAdmin && isEditingName ? (
+
setIsEditingName(false)}>
+
+ setEditData((prev) =>
+ prev ? { ...prev, name: e.target.value } : null
+ )
+ }
+ onKeyDown={(e) => {
+ if (e.key === "Enter") {
+ setIsEditingName(false);
+ }
+ }}
+ className="text-xl font-bold text-gray-900 dark:text-white bg-transparent border-b-2 border-blue-500 focus:outline-none focus:border-blue-600 w-full"
+ placeholder="Nom du tablo"
+ />
+
+ ) : (
+
+
setIsEditingName(true) : undefined
+ }
+ title={tablo.name}
+ >
+ {tablo.name}
+
+
+ {isAdmin ? "Administrateur" : "Invité"} •{" "}
+ {currentData.status === "todo" && "À faire"}
+ {currentData.status === "in_progress" && "En cours"}
+ {currentData.status === "done" && "Terminé"}
+
+
+ )}
+
+
+
+ {/* Close Button */}
+ {/* Error Banner */}
+ {error && (
+
+
+
+ {error}
+
+
+
+ )}
+
{/* Content - Expandable */}
-
- {readOnly ? (
+
+ {!isAdmin ? (
/* Read-only content */
{/* Tablo Preview */}
@@ -205,16 +467,396 @@ export const TabloModal = ({
)}
+ {/* Files Section */}
+
+
+
+
+ Fichiers
+
+ {fileData?.fileNames && (
+
+ {fileData.fileNames.length}
+
+ )}
+
+
+
+
+ {showFiles && (
+
+ {/* File Upload Section - Only for Admins */}
+ {isAdmin && (
+
+
+
+
+ Ajouter un fichier
+
+
+
+ {!selectedFile ? (
+
+
+
+
+
+ ) : (
+
+
+
+
+
+ {selectedFile.name}
+
+
+ {(selectedFile.size / 1024 / 1024).toFixed(2)} MB
+
+
+
+
+
+
+
+
+
+ )}
+
+
+ Taille maximale: 2MB
+
+
+ )}
+
+ {/* File List */}
+
+ {filesLoading ? (
+
+
+
+ Chargement des fichiers...
+
+
+ ) : filesError ? (
+
+
+
+
+ Erreur lors du chargement des fichiers
+
+
+
+ ) : fileData &&
+ fileData.fileNames &&
+ fileData.fileNames.length > 0 ? (
+
+ {fileData.fileNames.map((fileName, index) => {
+ const fileExtension =
+ fileName.split(".").pop()?.toLowerCase() || "";
+ const isImage = [
+ "jpg",
+ "jpeg",
+ "png",
+ "gif",
+ "webp",
+ "svg",
+ ].includes(fileExtension);
+ const isPdf = fileExtension === "pdf";
+ const isText = ["txt", "md", "json", "csv"].includes(
+ fileExtension
+ );
+
+ return (
+
+
+
+
+ {fileName}
+
+
+ {fileExtension || "Fichier"}
+
+
+
+
+ {isAdmin && (
+
+ )}
+
+
+ );
+ })}
+
+ ) : (
+
+
+
+ Aucun fichier dans ce tablo
+
+ {isAdmin && (
+
+ Ajoutez votre premier fichier ci-dessus
+
+ )}
+
+ )}
+
+
+ )}
+
+
{/* Members Section */}
-
-
-
- Membres
-
+
+
+
+
+ Membres
+
+ {members && (
+
+ {members.length}
+
+ )}
+
