diff --git a/frontend/src/pages/Dashboard.tsx b/frontend/src/pages/Dashboard.tsx index 474bc63..b2a570e 100644 --- a/frontend/src/pages/Dashboard.tsx +++ b/frontend/src/pages/Dashboard.tsx @@ -8,7 +8,7 @@ import { ShareDialog } from '../components/ShareDialog'; import TreeView from '../components/TreeView'; import type { TreeNode } from '../types/ui.types'; import { - getProjects, deleteProject, + getProjects, deleteProject, updateProject, getProjectFolders, createProjectFolder, renameProjectFolder, deleteProjectFolder, moveProjectToFolder, getProjectShares, type Project, type ProjectFolder, type ProjectShare, @@ -42,6 +42,10 @@ export function Dashboard({ onOpenProject }: DashboardProps) { const [showCreateFolder, setShowCreateFolder] = useState(false); const [newFolderName, setNewFolderName] = useState(''); const [newFolderParent, setNewFolderParent] = useState(null); + const [editingProjectName, setEditingProjectName] = useState(''); + const [editingProjectDesc, setEditingProjectDesc] = useState(''); + const [savingProject, setSavingProject] = useState(false); + const [dragOverFolderId, setDragOverFolderId] = useState(null); const fetchAll = useCallback(async () => { if (!token) return; @@ -91,6 +95,13 @@ export function Dashboard({ onOpenProject }: DashboardProps) { [allProjects, selectedProjectId], ); + useEffect(() => { + if (selectedProject) { + setEditingProjectName(selectedProject.name); + setEditingProjectDesc(selectedProject.description ?? ''); + } + }, [selectedProject]); + const treeNodes = useMemo((): TreeNode[] => { const rootProjectsCount = allProjects.filter(p => p.folder_id === null).length; const root: TreeNode = { @@ -213,21 +224,40 @@ export function Dashboard({ onOpenProject }: DashboardProps) { setSelectedProjectId(projectId); }; + const handleSaveProject = async () => { + if (!selectedProject || !token) return; + if (!editingProjectName.trim()) return; + setSavingProject(true); + try { + await updateProject(token, selectedProject.id, { + name: editingProjectName.trim(), + description: editingProjectDesc.trim() || null, + }); + fetchAll(); + } catch { + // ignore + } finally { + setSavingProject(false); + } + }; + const handleProjectDragStart = (e: React.DragEvent, projectId: string) => { setDraggedProjectId(projectId); e.dataTransfer.effectAllowed = 'move'; e.dataTransfer.setData('text/plain', `project:${projectId}`); }; - const handleFolderDragOver = (e: React.DragEvent) => { + const handleFolderDragOver = (e: React.DragEvent, folderId: string) => { if (!draggedProjectId) return; e.preventDefault(); e.dataTransfer.dropEffect = 'move'; - (e.currentTarget as HTMLElement).classList.add('tree-drop-target'); + setDragOverFolderId(folderId); }; - const handleFolderDragLeave = (e: React.DragEvent) => { - (e.currentTarget as HTMLElement).classList.remove('tree-drop-target'); + const handleFolderDragLeave = (_e: React.DragEvent, folderId: string) => { + if (dragOverFolderId === folderId) { + setDragOverFolderId(null); + } }; const handleFolderDrop = async (e: React.DragEvent, folderId: string) => { @@ -243,6 +273,7 @@ export function Dashboard({ onOpenProject }: DashboardProps) { // ignore } finally { setDraggedProjectId(null); + setDragOverFolderId(null); } }; @@ -366,9 +397,9 @@ export function Dashboard({ onOpenProject }: DashboardProps) { {folders.map(folder => (
handleFolderDragOver(e, folder.id)} + onDragLeave={(e) => handleFolderDragLeave(e, folder.id)} onDrop={(e) => handleFolderDrop(e, folder.id)} /> ))} @@ -418,7 +449,7 @@ export function Dashboard({ onOpenProject }: DashboardProps) { onClick={() => handleProjectCardClick(project.id)} draggable onDragStart={(e) => handleProjectDragStart(e, project.id)} - onDragEnd={() => setDraggedProjectId(null)} + onDragEnd={() => { setDraggedProjectId(null); setDragOverFolderId(null); }} >

{project.name}

{project.description &&

{project.description}

} @@ -454,10 +485,26 @@ export function Dashboard({ onOpenProject }: DashboardProps) {
{selectedProject ? ( <> -

{selectedProject.name}

- {selectedProject.description && ( -

{selectedProject.description}

- )} + setEditingProjectName(e.target.value)} + placeholder="Projektname" + /> +