110 lines
3.8 KiB
TypeScript
110 lines
3.8 KiB
TypeScript
import { UserTablo } from "@xtablo/shared/types/tablos.types";
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@xtablo/ui/components/select";
|
|
import { BookOpen } from "lucide-react";
|
|
import { useState } from "react";
|
|
import { useTabloNotes } from "../hooks/notes";
|
|
import { LoadingSpinner } from "./LoadingSpinner";
|
|
import { NotesEditor } from "./NotesEditor";
|
|
|
|
interface TabloNotesSectionProps {
|
|
tablo: UserTablo;
|
|
isAdmin: boolean;
|
|
}
|
|
|
|
export const TabloNotesSection = ({ tablo }: TabloNotesSectionProps) => {
|
|
const { notes, isLoading } = useTabloNotes(tablo.id);
|
|
const [selectedNoteId, setSelectedNoteId] = useState<string | null>(null);
|
|
|
|
// Auto-select first note when notes are loaded
|
|
if (notes && notes.length > 0 && !selectedNoteId) {
|
|
setSelectedNoteId(notes[0].id);
|
|
}
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="flex items-center justify-center h-64">
|
|
<LoadingSpinner />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const selectedNote = notes?.find((note) => note.id === selectedNoteId);
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div>
|
|
<h1 className="text-3xl font-bold text-foreground">Notes</h1>
|
|
<p className="text-muted-foreground mt-1">Notes partagées avec ce tablo (lecture seule)</p>
|
|
</div>
|
|
|
|
{/* Empty State */}
|
|
{!notes || notes.length === 0 ? (
|
|
<div className="flex flex-col items-center justify-center py-12 px-4 text-center">
|
|
<div className="w-16 h-16 bg-muted rounded-full flex items-center justify-center mb-4">
|
|
<BookOpen className="w-8 h-8 text-muted-foreground" />
|
|
</div>
|
|
<h3 className="text-lg font-medium text-foreground mb-2">Aucune note partagée</h3>
|
|
<p className="text-muted-foreground max-w-md">
|
|
Il n'y a actuellement aucune note partagée avec ce tablo.
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-6">
|
|
{/* Note Selector */}
|
|
<div className="flex items-center gap-4">
|
|
<label className="text-sm font-medium text-foreground whitespace-nowrap">
|
|
Sélectionner une note:
|
|
</label>
|
|
<Select value={selectedNoteId || undefined} onValueChange={setSelectedNoteId}>
|
|
<SelectTrigger className="w-full max-w-md">
|
|
<SelectValue placeholder="Choisir une note..." />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{notes.map((note) => (
|
|
<SelectItem key={note.id} value={note.id}>
|
|
{note.title || "Sans titre"}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
{/* Selected Note Display */}
|
|
{selectedNote && (
|
|
<div className="border border-border rounded-lg bg-card overflow-hidden">
|
|
<div className="border-b border-border bg-muted/30 px-6 py-4">
|
|
<h2 className="text-xl font-semibold text-foreground">
|
|
{selectedNote.title || "Sans titre"}
|
|
</h2>
|
|
<p className="text-xs text-muted-foreground mt-1">
|
|
Dernière modification:{" "}
|
|
{selectedNote.updated_at &&
|
|
new Date(selectedNote.updated_at).toLocaleDateString("fr-FR", {
|
|
day: "numeric",
|
|
month: "long",
|
|
year: "numeric",
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
})}
|
|
</p>
|
|
</div>
|
|
<div className="bg-background">
|
|
<NotesEditor
|
|
key={selectedNote.id}
|
|
initialContent={selectedNote.content || ""}
|
|
readOnly={true}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|