Improve folder view
This commit is contained in:
Arthur Belleville
parent
1b3b2315a7
commit
4dcee49451
1 changed files with 164 additions and 126 deletions
|
|
@ -37,6 +37,9 @@ export const TabloPage = () => {
|
|||
const [editingFolderId, setEditingFolderId] = useState<string | null>(null);
|
||||
const [editingFolderName, setEditingFolderName] = useState("");
|
||||
|
||||
// Folder modal state
|
||||
const [openFolderId, setOpenFolderId] = useState<string | null>(null);
|
||||
|
||||
// Sample tablo data - in a real app this would come from an API
|
||||
const [tablos, setTablos] = useState<Tablo[]>([
|
||||
{ id: 1, name: "Projet Alpha", color: "bg-blue-500" },
|
||||
|
|
@ -248,11 +251,7 @@ export const TabloPage = () => {
|
|||
};
|
||||
|
||||
const toggleFolder = (folderId: string) => {
|
||||
setFolders(
|
||||
folders.map((folder) =>
|
||||
folder.id === folderId ? { ...folder, isOpen: !folder.isOpen } : folder
|
||||
)
|
||||
);
|
||||
setOpenFolderId(openFolderId === folderId ? null : folderId);
|
||||
};
|
||||
|
||||
const removeTabloFromFolder = (folderId: string, tabloId: number) => {
|
||||
|
|
@ -385,31 +384,36 @@ export const TabloPage = () => {
|
|||
{/* Contextual Menu */}
|
||||
{hoveredTablo === tablo.id && (
|
||||
<div className="absolute top-2 right-2 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 py-2 z-10">
|
||||
{!inFolder &&
|
||||
menuItems.map((item, index) => (
|
||||
<button
|
||||
key={index}
|
||||
className="w-full px-4 py-2 text-left text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center gap-2"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
console.log(`${item.name} clicked for ${tablo.name}`);
|
||||
}}
|
||||
>
|
||||
<span>{item.icon}</span>
|
||||
<span>{item.name}</span>
|
||||
</button>
|
||||
))}
|
||||
{inFolder && folderId && (
|
||||
{/* Regular menu items - always show */}
|
||||
{menuItems.map((item, index) => (
|
||||
<button
|
||||
className="w-full px-4 py-2 text-left text-sm text-red-600 dark:text-red-400 hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center gap-2"
|
||||
key={index}
|
||||
className="w-full px-4 py-2 text-left text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center gap-2"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
removeTabloFromFolder(folderId, tablo.id);
|
||||
console.log(`${item.name} clicked for ${tablo.name}`);
|
||||
}}
|
||||
>
|
||||
<span>📤</span>
|
||||
<span>Sortir du dossier</span>
|
||||
<span>{item.icon}</span>
|
||||
<span>{item.name}</span>
|
||||
</button>
|
||||
))}
|
||||
|
||||
{/* Additional option for tablos in folders */}
|
||||
{inFolder && folderId && (
|
||||
<>
|
||||
<div className="border-t border-gray-200 dark:border-gray-600 my-1"></div>
|
||||
<button
|
||||
className="w-full px-4 py-2 text-left text-sm text-red-600 dark:text-red-400 hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center gap-2"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
removeTabloFromFolder(folderId, tablo.id);
|
||||
}}
|
||||
>
|
||||
<span>📤</span>
|
||||
<span>Sortir du dossier</span>
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -445,113 +449,68 @@ export const TabloPage = () => {
|
|||
{isDragOver && dragOverPosition === "after" && (
|
||||
<div className="absolute -right-1 top-0 bottom-0 w-1 bg-blue-400 rounded-full z-20" />
|
||||
)}
|
||||
{!folder.isOpen ? (
|
||||
// Closed folder view
|
||||
<div
|
||||
className={`bg-gray-600 dark:bg-gray-700 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 cursor-pointer aspect-square flex flex-col items-center justify-center relative ${
|
||||
draggedItem?.type === "folder" && draggedItem?.id === folder.id
|
||||
? "opacity-50 scale-95"
|
||||
: ""
|
||||
}`}
|
||||
onClick={() => toggleFolder(folder.id)}
|
||||
>
|
||||
{/* Mini preview of tablos in folder */}
|
||||
<div className="absolute inset-0 p-4 grid grid-cols-2 gap-1">
|
||||
{folder.tablos.slice(0, 4).map((tablo, index) => (
|
||||
<div
|
||||
key={tablo.id}
|
||||
className={`${tablo.color} rounded opacity-80 aspect-square`}
|
||||
style={{
|
||||
transform: `scale(${0.8 - index * 0.05}) translateZ(${
|
||||
index * 10
|
||||
}px)`,
|
||||
zIndex: 4 - index,
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 text-center p-2">
|
||||
<div className="text-4xl mb-2">📁</div>
|
||||
{editingFolderId === folder.id ? (
|
||||
<input
|
||||
type="text"
|
||||
value={editingFolderName}
|
||||
onChange={(e) => setEditingFolderName(e.target.value)}
|
||||
onBlur={saveEditingFolder}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") {
|
||||
saveEditingFolder();
|
||||
} else if (e.key === "Escape") {
|
||||
cancelEditingFolder();
|
||||
}
|
||||
}}
|
||||
className="bg-white dark:bg-gray-600 text-gray-900 dark:text-white text-sm font-semibold px-2 py-1 rounded border-none outline-none focus:ring-2 focus:ring-blue-400 text-center"
|
||||
autoFocus
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
/>
|
||||
) : (
|
||||
<h3
|
||||
className="text-white text-sm font-semibold truncate cursor-text"
|
||||
onDoubleClick={(e) => {
|
||||
e.stopPropagation();
|
||||
startEditingFolder(folder.id, folder.name);
|
||||
}}
|
||||
>
|
||||
{folder.name}
|
||||
</h3>
|
||||
)}
|
||||
<p className="text-white text-xs opacity-75">
|
||||
{folder.tablos.length} tablo
|
||||
{folder.tablos.length !== 1 ? "s" : ""}
|
||||
</p>
|
||||
</div>
|
||||
{/* Folder view - always shows as closed since modal handles open state */}
|
||||
<div
|
||||
className={`bg-gray-600 dark:bg-gray-700 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 cursor-pointer aspect-square flex flex-col items-center justify-center relative ${
|
||||
draggedItem?.type === "folder" && draggedItem?.id === folder.id
|
||||
? "opacity-50 scale-95"
|
||||
: ""
|
||||
}`}
|
||||
onClick={() => toggleFolder(folder.id)}
|
||||
>
|
||||
{/* Mini preview of tablos in folder */}
|
||||
<div className="absolute inset-0 p-4 grid grid-cols-2 gap-1">
|
||||
{folder.tablos.slice(0, 4).map((tablo, index) => (
|
||||
<div
|
||||
key={tablo.id}
|
||||
className={`${tablo.color} rounded opacity-80 aspect-square`}
|
||||
style={{
|
||||
transform: `scale(${0.8 - index * 0.05}) translateZ(${
|
||||
index * 10
|
||||
}px)`,
|
||||
zIndex: 4 - index,
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
// Open folder view
|
||||
<div className="bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg p-4 min-h-[200px]">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
{editingFolderId === folder.id ? (
|
||||
<input
|
||||
type="text"
|
||||
value={editingFolderName}
|
||||
onChange={(e) => setEditingFolderName(e.target.value)}
|
||||
onBlur={saveEditingFolder}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") {
|
||||
saveEditingFolder();
|
||||
} else if (e.key === "Escape") {
|
||||
cancelEditingFolder();
|
||||
}
|
||||
}}
|
||||
className="bg-white dark:bg-gray-700 text-gray-900 dark:text-white text-lg font-semibold px-3 py-1 rounded border border-gray-300 dark:border-gray-600 outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 flex-1 mr-2"
|
||||
autoFocus
|
||||
/>
|
||||
) : (
|
||||
<h3
|
||||
className="text-lg font-semibold text-gray-900 dark:text-white cursor-text"
|
||||
onDoubleClick={() =>
|
||||
startEditingFolder(folder.id, folder.name)
|
||||
|
||||
<div className="relative z-10 text-center p-2">
|
||||
<div className="text-4xl mb-2">📁</div>
|
||||
{editingFolderId === folder.id ? (
|
||||
<input
|
||||
type="text"
|
||||
value={editingFolderName}
|
||||
onChange={(e) => setEditingFolderName(e.target.value)}
|
||||
onBlur={saveEditingFolder}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") {
|
||||
saveEditingFolder();
|
||||
} else if (e.key === "Escape") {
|
||||
cancelEditingFolder();
|
||||
}
|
||||
>
|
||||
{folder.name}
|
||||
</h3>
|
||||
)}
|
||||
<button
|
||||
onClick={() => toggleFolder(folder.id)}
|
||||
className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 ml-2"
|
||||
}}
|
||||
className="bg-white dark:bg-gray-600 text-gray-900 dark:text-white text-sm font-semibold px-2 py-1 rounded border-none outline-none focus:ring-2 focus:ring-blue-400 text-center"
|
||||
autoFocus
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
/>
|
||||
) : (
|
||||
<h3
|
||||
className="text-white text-sm font-semibold truncate cursor-text"
|
||||
onDoubleClick={(e) => {
|
||||
e.stopPropagation();
|
||||
startEditingFolder(folder.id, folder.name);
|
||||
}}
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
{folder.tablos.map((tablo) =>
|
||||
renderTablo(tablo, true, folder.id)
|
||||
)}
|
||||
</div>
|
||||
{folder.name}
|
||||
</h3>
|
||||
)}
|
||||
<p className="text-white text-xs opacity-75">
|
||||
{folder.tablos.length} tablo
|
||||
{folder.tablos.length !== 1 ? "s" : ""}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -677,6 +636,85 @@ export const TabloPage = () => {
|
|||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Folder Modal */}
|
||||
{openFolderId && (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full max-w-4xl mx-4 max-h-[80vh] overflow-hidden">
|
||||
{(() => {
|
||||
const currentFolder = folders.find((f) => f.id === openFolderId);
|
||||
if (!currentFolder) return null;
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700">
|
||||
{editingFolderId === openFolderId ? (
|
||||
<input
|
||||
type="text"
|
||||
value={editingFolderName}
|
||||
onChange={(e) => setEditingFolderName(e.target.value)}
|
||||
onBlur={saveEditingFolder}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") {
|
||||
saveEditingFolder();
|
||||
} else if (e.key === "Escape") {
|
||||
cancelEditingFolder();
|
||||
}
|
||||
}}
|
||||
className="bg-white dark:bg-gray-700 text-gray-900 dark:text-white text-2xl font-bold px-3 py-1 rounded border border-gray-300 dark:border-gray-600 outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 flex-1 mr-4"
|
||||
autoFocus
|
||||
/>
|
||||
) : (
|
||||
<h2
|
||||
className="text-2xl font-bold text-gray-900 dark:text-white cursor-text"
|
||||
onDoubleClick={() =>
|
||||
startEditingFolder(openFolderId, currentFolder.name)
|
||||
}
|
||||
>
|
||||
📁 {currentFolder.name}
|
||||
</h2>
|
||||
)}
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm text-gray-500 dark:text-gray-400">
|
||||
{currentFolder.tablos.length} tablo
|
||||
{currentFolder.tablos.length !== 1 ? "s" : ""}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => setOpenFolderId(null)}
|
||||
className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 p-2"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="p-6 overflow-y-auto max-h-[60vh]">
|
||||
{currentFolder.tablos.length === 0 ? (
|
||||
<div className="text-center py-12">
|
||||
<div className="text-6xl mb-4">📂</div>
|
||||
<p className="text-gray-500 dark:text-gray-400 text-lg">
|
||||
Ce dossier est vide
|
||||
</p>
|
||||
<p className="text-gray-400 dark:text-gray-500 text-sm mt-2">
|
||||
Glissez des tablos ici pour les organiser
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
|
||||
{currentFolder.tablos.map((tablo) =>
|
||||
renderTablo(tablo, true, openFolderId)
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
})()}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue