task(F2-frontend): library search, favorites section, star toggle, svg thumbnails, grid view
This commit is contained in:
Agent Zero
@@ -9,6 +9,7 @@ import {
|
||||
createGlobalBlock,
|
||||
renameGlobalBlock,
|
||||
deleteGlobalBlock,
|
||||
setGlobalBlockFavorite,
|
||||
exportLibrary,
|
||||
importLibrary,
|
||||
} from '../services/api';
|
||||
@@ -43,6 +44,19 @@ const BlockLibraryTree: React.FC<BlockLibraryTreeProps> = ({ token, onBlockDragS
|
||||
const wcadInputRef = useRef<HTMLInputElement>(null);
|
||||
const [dragOverFolderId, setDragOverFolderId] = useState<string | null>(null);
|
||||
|
||||
// ─── Task F2: Suche, Favoriten, Thumbnail-Grid ───────────
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [viewMode, setViewMode] = useState<'tree' | 'grid'>('tree');
|
||||
|
||||
const handleToggleFavorite = useCallback(async (blockId: string, next: boolean) => {
|
||||
try {
|
||||
const updated = await setGlobalBlockFavorite(token, blockId, next);
|
||||
setBlocks(prev => prev.map(b => (b.id === blockId ? { ...b, is_favorite: updated.is_favorite } : b)));
|
||||
} catch {
|
||||
// silently ignore — favorite stays unchanged on failure
|
||||
}
|
||||
}, [token]);
|
||||
|
||||
const loadData = useCallback(async () => {
|
||||
try {
|
||||
const [allFolders, allBlocks] = await Promise.all([
|
||||
@@ -128,7 +142,10 @@ const BlockLibraryTree: React.FC<BlockLibraryTreeProps> = ({ token, onBlockDragS
|
||||
return roots;
|
||||
}, [folders, blocks, expandedIds]);
|
||||
|
||||
const rootBlocks = blocks.filter(b => !b.folder_id).sort((a, b) => a.name.localeCompare(b.name));
|
||||
const q = searchQuery.toLowerCase().trim();
|
||||
const matchesSearch = useCallback((b: GlobalBlock) => !q || b.name.toLowerCase().includes(q), [q]);
|
||||
const rootBlocks = blocks.filter(b => !b.folder_id && matchesSearch(b)).sort((a, b) => a.name.localeCompare(b.name));
|
||||
const favoriteBlocks = blocks.filter(b => b.is_favorite && matchesSearch(b)).sort((a, b) => a.name.localeCompare(b.name));
|
||||
const tree = buildTree();
|
||||
|
||||
const toggleExpand = (folderId: string) => {
|
||||
@@ -307,6 +324,83 @@ const BlockLibraryTree: React.FC<BlockLibraryTreeProps> = ({ token, onBlockDragS
|
||||
setRenameValue('');
|
||||
};
|
||||
|
||||
// ─── Task F2: Block-Leaf mit Thumbnail + Favorite-Stern ──
|
||||
const renderBlockLeaf = (block: GlobalBlock, depth: number): React.ReactNode => {
|
||||
const isBlockRenaming = renamingId === block.id;
|
||||
return (
|
||||
<div
|
||||
key={block.id}
|
||||
className="tree-item tree-item-leaf draggable"
|
||||
style={{ paddingLeft: `${depth * 16 + 8}px` }}
|
||||
draggable
|
||||
onDragStart={(e) => handleBlockDragStart(e, block)}
|
||||
onContextMenu={(e) => handleContextMenu(e, 'block', block.id, block.folder_id)}
|
||||
title={block.name}
|
||||
>
|
||||
{block.svg_data ? (
|
||||
<span className="tree-thumb" dangerouslySetInnerHTML={{ __html: block.svg_data }} />
|
||||
) : (
|
||||
<span className="tree-icon">📦</span>
|
||||
)}
|
||||
{isBlockRenaming ? (
|
||||
<input
|
||||
type="text"
|
||||
className="tree-rename-input"
|
||||
value={renameValue}
|
||||
autoFocus
|
||||
onChange={(e) => setRenameValue(e.target.value)}
|
||||
onBlur={confirmRename}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') confirmRename();
|
||||
if (e.key === 'Escape') { setRenamingId(null); setRenameValue(''); }
|
||||
}}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
/>
|
||||
) : (
|
||||
<span
|
||||
className="tree-label"
|
||||
onDoubleClick={(e) => { e.stopPropagation(); startRename(block.id, block.name); }}
|
||||
>
|
||||
{block.name}
|
||||
</span>
|
||||
)}
|
||||
<button
|
||||
className={`tree-fav-btn${block.is_favorite ? ' active' : ''}`}
|
||||
title={block.is_favorite ? 'Favorit entfernen' : 'Als Favorit markieren'}
|
||||
onClick={(e) => { e.stopPropagation(); void handleToggleFavorite(block.id, !block.is_favorite); }}
|
||||
>
|
||||
{block.is_favorite ? '★' : '☆'}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Task F2: Grid-Zelle mit Thumbnail
|
||||
const renderGridCell = (block: GlobalBlock): React.ReactNode => (
|
||||
<div
|
||||
key={block.id}
|
||||
className="lib-grid-cell"
|
||||
draggable
|
||||
onDragStart={(e) => handleBlockDragStart(e, block)}
|
||||
onContextMenu={(e) => handleContextMenu(e, 'block', block.id, block.folder_id)}
|
||||
title={`${block.name}${block.is_favorite ? ' ★' : ''}`}
|
||||
>
|
||||
<div className="lib-grid-thumb">
|
||||
{block.svg_data
|
||||
? <span className="tree-thumb" dangerouslySetInnerHTML={{ __html: block.svg_data }} />
|
||||
: <span className="lib-grid-placeholder">📦</span>}
|
||||
</div>
|
||||
<div className="lib-grid-name">{block.name}</div>
|
||||
<button
|
||||
className={`tree-fav-btn${block.is_favorite ? ' active' : ''}`}
|
||||
title={block.is_favorite ? 'Favorit entfernen' : 'Als Favorit markieren'}
|
||||
onClick={(e) => { e.stopPropagation(); void handleToggleFavorite(block.id, !block.is_favorite); }}
|
||||
>
|
||||
{block.is_favorite ? '★' : '☆'}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
|
||||
const renderFolderNode = (node: FolderNode, depth: number): React.ReactNode => {
|
||||
const isRenaming = renamingId === node.folder.id;
|
||||
const isDragOver = dragOverFolderId === node.folder.id;
|
||||
@@ -350,44 +444,7 @@ const BlockLibraryTree: React.FC<BlockLibraryTreeProps> = ({ token, onBlockDragS
|
||||
{node.expanded && (
|
||||
<div className="tree-children">
|
||||
{node.children.map(child => renderFolderNode(child, depth + 1))}
|
||||
{node.blocks.map(block => {
|
||||
const isBlockRenaming = renamingId === block.id;
|
||||
return (
|
||||
<div
|
||||
key={block.id}
|
||||
className="tree-item tree-item-leaf draggable"
|
||||
style={{ paddingLeft: `${(depth + 1) * 16 + 8}px` }}
|
||||
draggable
|
||||
onDragStart={(e) => handleBlockDragStart(e, block)}
|
||||
onContextMenu={(e) => handleContextMenu(e, 'block', block.id, block.folder_id)}
|
||||
title={block.name}
|
||||
>
|
||||
<span className="tree-icon">📦</span>
|
||||
{isBlockRenaming ? (
|
||||
<input
|
||||
type="text"
|
||||
className="tree-rename-input"
|
||||
value={renameValue}
|
||||
autoFocus
|
||||
onChange={(e) => setRenameValue(e.target.value)}
|
||||
onBlur={confirmRename}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') confirmRename();
|
||||
if (e.key === 'Escape') { setRenamingId(null); setRenameValue(''); }
|
||||
}}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
/>
|
||||
) : (
|
||||
<span
|
||||
className="tree-label"
|
||||
onDoubleClick={(e) => { e.stopPropagation(); startRename(block.id, block.name); }}
|
||||
>
|
||||
{block.name}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{node.blocks.filter(matchesSearch).map(block => renderBlockLeaf(block, depth + 1))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@@ -426,44 +483,39 @@ const BlockLibraryTree: React.FC<BlockLibraryTreeProps> = ({ token, onBlockDragS
|
||||
<input ref={fileInputRef} type="file" accept=".svg,image/svg+xml" style={{ display: 'none' }} onChange={handleSvgImport} />
|
||||
<input ref={wcadInputRef} type="file" accept=".wcadlib,application/json" style={{ display: 'none' }} onChange={handleWcadFile} />
|
||||
</div>
|
||||
<div className="global-lib-toolbar">
|
||||
<input
|
||||
type="text"
|
||||
className="global-lib-search"
|
||||
placeholder="Blöcke suchen…"
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
/>
|
||||
<button
|
||||
className="global-lib-add-btn"
|
||||
title={viewMode === 'grid' ? 'Baumansicht' : 'Rasteransicht'}
|
||||
onClick={() => setViewMode(m => (m === 'grid' ? 'tree' : 'grid'))}
|
||||
>
|
||||
{viewMode === 'grid' ? '☰' : '▦'}
|
||||
</button>
|
||||
</div>
|
||||
<div className="tree tree-global" role="tree" aria-label="Globale Block-Bibliothek">
|
||||
{tree.map(node => renderFolderNode(node, 0))}
|
||||
{rootBlocks.map(block => {
|
||||
const isBlockRenaming = renamingId === block.id;
|
||||
return (
|
||||
<div
|
||||
key={block.id}
|
||||
className="tree-item tree-item-leaf draggable"
|
||||
draggable
|
||||
onDragStart={(e) => handleBlockDragStart(e, block)}
|
||||
onContextMenu={(e) => handleContextMenu(e, 'block', block.id, null)}
|
||||
title={block.name}
|
||||
>
|
||||
<span className="tree-icon">📦</span>
|
||||
{isBlockRenaming ? (
|
||||
<input
|
||||
type="text"
|
||||
className="tree-rename-input"
|
||||
value={renameValue}
|
||||
autoFocus
|
||||
onChange={(e) => setRenameValue(e.target.value)}
|
||||
onBlur={confirmRename}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') confirmRename();
|
||||
if (e.key === 'Escape') { setRenamingId(null); setRenameValue(''); }
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<span
|
||||
className="tree-label"
|
||||
onDoubleClick={(e) => { e.stopPropagation(); startRename(block.id, block.name); }}
|
||||
>
|
||||
{block.name}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{favoriteBlocks.length > 0 && (
|
||||
<div className="lib-fav-section">
|
||||
<div className="lib-fav-title">★ Favoriten</div>
|
||||
{favoriteBlocks.map(block => renderBlockLeaf(block, 0))}
|
||||
</div>
|
||||
)}
|
||||
{viewMode === 'grid' ? (
|
||||
<div className="lib-grid">
|
||||
{[...favoriteBlocks, ...blocks.filter(b => !b.is_favorite && matchesSearch(b)).sort((a, b) => a.name.localeCompare(b.name))].map(renderGridCell)}
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{tree.map(node => renderFolderNode(node, 0))}
|
||||
{rootBlocks.map(block => renderBlockLeaf(block, 0))}
|
||||
</>
|
||||
)}
|
||||
{folders.length === 0 && blocks.length === 0 && (
|
||||
<div className="global-lib-empty">Globale Bibliothek ist leer — Rechtsklick für Ordner</div>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user