feat: dashboard 3-column layout — project folders treeview, project cards with open button, info panel
This commit is contained in:
A0 Orchestrator
+91
-98
@@ -1,125 +1,118 @@
|
||||
# Test Report – 2 Features Implementation
|
||||
# Test Report - Dashboard Redesign (3-Spalten Layout)
|
||||
|
||||
**Date:** 2026-07-01
|
||||
**Project:** web-cad-impl
|
||||
**Datum:** 2026-07-03
|
||||
**Task:** Redesign Dashboard mit Projekt-Ordnern, 3-Spalten Layout, Info-Panel
|
||||
|
||||
## Features Implemented
|
||||
## Summary
|
||||
|
||||
### Feature 1: Globale Block-Bibliothek als Baumstruktur
|
||||
- Backend: `global_block_folders` and `global_blocks` DB tables
|
||||
- Backend: CRUD API routes with auth middleware and input validation
|
||||
- Frontend: API service functions in api.ts
|
||||
- Frontend: BlockLibraryTree.tsx component with tree view, drag&drop, context menu, inline rename
|
||||
- Frontend: CanvasArea drop handler for global blocks
|
||||
- Frontend: RightSidebar integration with token prop
|
||||
| Check | Result |
|
||||
|-------|--------|
|
||||
| Frontend `tsc --noEmit` | PASS (0 errors) |
|
||||
| Frontend `vite build` | PASS (built in 3.73s) |
|
||||
| Frontend `npm test` | PASS (374 tests, 15 files) |
|
||||
| Backend `tsc --noEmit` | PASS (0 errors) |
|
||||
| Backend `npm test` | PASS (239 tests, 16 files) |
|
||||
|
||||
### Feature 2: Gruppierungs-Tool
|
||||
- RibbonBar: Gruppieren + Degruppieren buttons in Start tab
|
||||
- App.tsx: handleGroup/handleUngroup with Yjs sync
|
||||
- InteractionEngine: Group-aware selection (click group member → select all), group-aware movement
|
||||
- RenderEngine: Dashed bounding box with group name label
|
||||
- LeftSidebar: Group section with buttons
|
||||
- Keyboard shortcuts: G (group), Ctrl+G (ungroup)
|
||||
- GroupTool: getGroupElements() method for group expansion
|
||||
## Backend Test Details
|
||||
|
||||
## Test Results
|
||||
### New Tests: `projectFolders.test.ts` (18 tests)
|
||||
|
||||
### Backend Tests
|
||||
```
|
||||
✓ tests/projectFolders.test.ts (18 tests) 283ms
|
||||
|
||||
**Command:** `cd backend && node_modules/.bin/tsc --noEmit && node_modules/.bin/vitest run`
|
||||
Test Files 1 passed (1)
|
||||
Tests 18 passed (18)
|
||||
```
|
||||
|
||||
**TypeScript Check:** Exit 0 – 0 errors
|
||||
Tests cover:
|
||||
- List empty folders initially
|
||||
- Create folder (with/without parent)
|
||||
- List folders with created items
|
||||
- Get single folder
|
||||
- Rename folder
|
||||
- Reject folder creation without name
|
||||
- Reject rename without name
|
||||
- Reject operations on non-existent folder (404)
|
||||
- Reject unauthenticated requests (401)
|
||||
- Create project with folder_id
|
||||
- List projects filtered by folder
|
||||
- List unfoldered projects (folderId=null)
|
||||
- Move project to different folder
|
||||
- Move project to root (folder_id=null)
|
||||
- Reject moving to non-existent folder (404)
|
||||
- Delete folder moves projects to root
|
||||
- Delete remaining folders
|
||||
|
||||
### Full Backend Suite
|
||||
|
||||
```
|
||||
Test Files 16 passed (16)
|
||||
Tests 239 passed (239)
|
||||
Duration 9.73s
|
||||
```
|
||||
|
||||
(221 existing + 18 new = 239 total)
|
||||
|
||||
## Frontend Test Details
|
||||
|
||||
**Test Results:**
|
||||
```
|
||||
Test Files 15 passed (15)
|
||||
Tests 221 passed (221)
|
||||
Duration 11.25s
|
||||
Tests 374 passed (374)
|
||||
Duration 12.23s
|
||||
```
|
||||
|
||||
**New test file:** `backend/tests/globalBlocks.test.ts` (28 tests)
|
||||
- Authentication checks (401 without token)
|
||||
- Folder CRUD: create, list (root/sub/all), rename, delete with cascade
|
||||
- Block CRUD: create (in folder/root), list (all/folder/root), get, rename, move, update data, delete
|
||||
- Validation: missing name, empty name, non-string block_data, self-parent prevention
|
||||
## Build Verification
|
||||
|
||||
### Frontend Tests
|
||||
|
||||
**Command:** `cd frontend && node_modules/.bin/tsc --noEmit && node_modules/.bin/vitest run && node_modules/.bin/vite build`
|
||||
|
||||
**TypeScript Check:** Exit 0 – 0 errors
|
||||
|
||||
**Test Results:**
|
||||
```
|
||||
Test Files 15 passed (15)
|
||||
Tests 367 passed (367)
|
||||
Duration 12.83s
|
||||
```
|
||||
|
||||
**New test file:** `frontend/tests/globalBlocks.test.ts` (18 tests)
|
||||
- Global folders API: fetch all, fetch root (null), fetch sub-folders, error handling
|
||||
- Create folder: with/without parent
|
||||
- Rename/delete folder
|
||||
- Global blocks API: fetch all, fetch by folder, fetch root-level
|
||||
- Create block with full data
|
||||
- Rename/delete block
|
||||
- GroupManager.getGroupElements: single element, group members, any member, after ungroup
|
||||
|
||||
**Build:** `vite build` Exit 0 – successful
|
||||
### Frontend Build
|
||||
```
|
||||
✓ 345 modules transformed.
|
||||
dist/index.html 0.37 kB │ gzip: 0.27 kB
|
||||
dist/assets/index-DEeNVxCv.css 55.25 kB │ gzip: 9.48 kB
|
||||
dist/assets/index-BKqmT5jX.js 972.79 kB │ gzip: 327.93 kB
|
||||
built in 4.33s
|
||||
dist/assets/index-BZ8Y_YgF.css 64.74 kB │ gzip: 10.84 kB
|
||||
dist/assets/index-BaRGTmsw.js 994.68 kB │ gzip: 334.41 kB
|
||||
✓ built in 3.73s
|
||||
```
|
||||
|
||||
## Smoke Test Description
|
||||
### Backend TypeScript Check
|
||||
```
|
||||
node_modules/.bin/tsc --noEmit
|
||||
(exit 0, no errors)
|
||||
```
|
||||
|
||||
### Feature 1 – Global Block Library
|
||||
- Backend API tested via integration tests: folders and blocks can be created, listed, renamed, moved, deleted with proper auth and validation
|
||||
- Frontend API service functions tested with mocked fetch: all 8 functions (getGlobalFolders, createGlobalFolder, renameGlobalFolder, deleteGlobalFolder, getGlobalBlocks, createGlobalBlock, renameGlobalBlock, deleteGlobalBlock) verify correct URL, method, headers, and body
|
||||
- BlockLibraryTree component renders tree structure with expand/collapse, context menu (right-click), inline rename (double-click), drag&drop blocks onto canvas, SVG file import
|
||||
## Smoke-Test Description
|
||||
|
||||
### Feature 2 – Group Tool
|
||||
- RibbonBar shows Gruppieren and Degruppieren buttons in Start tab
|
||||
- LeftSidebar shows Gruppierung section with both buttons
|
||||
- Keyboard shortcuts: G triggers group, Ctrl+G triggers ungroup
|
||||
- GroupManager.getGroupElements returns all group members for any element in a group
|
||||
- InteractionEngine group-aware selection: shift-click a group member selects all group members
|
||||
- InteractionEngine group-aware movement: moving a selected element also moves all its group members
|
||||
- RenderEngine draws dashed orange bounding box around group elements with group name label
|
||||
- Groups sync to Yjs CRDT for real-time collaboration (collab.setGroup)
|
||||
- **Frontend tsc:** 0 TypeScript errors — all types valid
|
||||
- **Frontend build:** Vite build succeeds, output generated correctly
|
||||
- **Frontend tests:** All 374 existing tests pass — no regressions
|
||||
- **Backend tsc:** 0 TypeScript errors — new DBProjectFolder interface, listProjects signature, moveProjectToFolder, CRUD methods all type-safe
|
||||
- **Backend tests:** All 239 tests pass (221 existing + 18 new) — new project folder CRUD and project-folder integration fully tested
|
||||
- **API endpoints tested via inject:** GET/POST/PUT/DELETE /api/project-folders, PUT /api/projects/:id/folder, GET /api/projects?folderId=...
|
||||
|
||||
## Files Changed
|
||||
|
||||
### Modified (15 files)
|
||||
- backend/src/database/DatabaseInterface.ts – Added DBGlobalBlockFolder, DBGlobalBlock types and interface methods
|
||||
- backend/src/database/SqliteAdapter.ts – Implemented global folder/block CRUD methods
|
||||
- backend/src/database/schema.sql – Added global_block_folders and global_blocks tables
|
||||
- backend/src/server.ts – Registered globalBlockRoutes
|
||||
- frontend/src/App.tsx – Added group/ungroup handlers, token prop to RightSidebar, groups prop to CanvasArea
|
||||
- frontend/src/canvas/RenderEngine.ts – Added setGroups, drawGroupBoxes method
|
||||
- frontend/src/components/CanvasArea.tsx – Added groups prop, sync to RenderEngine/InteractionEngine, global block drop handler
|
||||
- frontend/src/components/LeftSidebar.tsx – Added Gruppierung section with group/ungroup buttons
|
||||
- frontend/src/components/RibbonBar.tsx – Added Gruppieren/Degruppieren buttons in Start tab
|
||||
- frontend/src/components/RightSidebar.tsx – Added BlockLibraryTree import and token prop
|
||||
- frontend/src/interaction/index.ts – Added GroupManager import, group-aware selection and movement, G/Ctrl+G shortcuts
|
||||
- frontend/src/services/api.ts – Added 8 global block API functions
|
||||
- frontend/src/styles.css – Added CSS for global library tree, context menu, group section
|
||||
- frontend/src/tools/modification/GroupTool.ts – Added getGroupElements method
|
||||
- frontend/src/types/ui.types.ts – Added token to RightSidebarProps, groups to CanvasAreaProps, onGroup/onUngroup to LeftSidebarProps
|
||||
### Modified (8 files, +966/-94 lines)
|
||||
1. `backend/src/database/DatabaseInterface.ts` — Added DBProjectFolder interface, folder_id to DBProject, listProjects(ownerId?, folderId?), moveProjectToFolder, project folder CRUD methods
|
||||
2. `backend/src/database/SqliteAdapter.ts` — Implemented all new methods, ALTER TABLE for folder_id on existing DBs, updated createProject with folder_id
|
||||
3. `backend/src/database/schema.sql` — Added project_folders table + indexes
|
||||
4. `backend/src/routes/projects.ts` — Added folderId query param filtering
|
||||
5. `backend/src/server.ts` — Registered projectFolders route
|
||||
6. `frontend/src/pages/Dashboard.tsx` — Complete rewrite with 3-column layout (TreeView, project cards, info panel)
|
||||
7. `frontend/src/services/api.ts` — Added ProjectFolder type, getProjectFolders, createProjectFolder, renameProjectFolder, deleteProjectFolder, moveProjectToFolder, getProjectsByFolder
|
||||
8. `frontend/src/styles/auth.css` — Added 3-column grid layout, TreeView styles, info-panel styles, context menu, folder forms, responsive breakpoint
|
||||
|
||||
### New (4 files)
|
||||
- backend/src/routes/globalBlocks.ts – CRUD routes for global folders and blocks
|
||||
- backend/tests/globalBlocks.test.ts – Backend integration tests (28 tests)
|
||||
- frontend/src/components/BlockLibraryTree.tsx – Tree view component for global block library
|
||||
- frontend/tests/globalBlocks.test.ts – Frontend API service tests (18 tests)
|
||||
### New (2 files)
|
||||
9. `backend/src/routes/projectFolders.ts` — New route: GET/POST/PUT/DELETE /api/project-folders, PUT /api/projects/:id/folder (111 lines)
|
||||
10. `backend/tests/projectFolders.test.ts` — 18 tests covering all folder CRUD + project-folder integration (285 lines)
|
||||
|
||||
## Git Diff --stat
|
||||
```
|
||||
15 files changed, 684 insertions(+), 7 deletions(-)
|
||||
```
|
||||
## Known Issues
|
||||
|
||||
## No Errors Encountered
|
||||
- CSS build warning: `Unexpected "}"` at line 1519 — pre-existing, not caused by this change
|
||||
- Chunk size warning for JS bundle > 500kB — pre-existing
|
||||
|
||||
All tests pass, build succeeds, TypeScript checks pass with 0 errors.
|
||||
## No Forbidden Patterns
|
||||
|
||||
- No `as any` in production code
|
||||
- No `@ts-ignore` in production code
|
||||
- No `eslint-disable` in production code
|
||||
- No `console.log` in production code
|
||||
- No empty methods or stubs
|
||||
- No TODO/FIXME markers in main path
|
||||
|
||||
Reference in New Issue
Block a user