diff --git a/CLAUDE.md b/CLAUDE.md index 2c8a914..4046c3d 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -52,32 +52,44 @@ XX. **Nome Problema (FIX/IMPLEMENTATO DATA):** - **Problema:** Descrizione breve **Lavoro completato nell'ultima sessione:** -- **NUOVA FEATURE: Pannelli Ridimensionabili e Collassabili nel Report Designer** - COMPLETATO - - **Obiettivo:** I pannelli del report designer devono essere collassabili, ridimensionabili, riposizionabili e la configurazione deve essere persistita - - **Nuovi file creati:** - - `frontend/src/hooks/useLocalStorage.ts` - Hook generico per persistenza in localStorage - - `frontend/src/hooks/usePanelLayout.ts` - Hook per gestire configurazione pannelli (larghezza, collapsed, posizione) - - `frontend/src/components/reportEditor/ResizablePanel.tsx` - Componente pannello ridimensionabile con: - - Handle di resize trascinabile sul bordo - - Stato collassato con icona, badge e titolo verticale - - Header compatto con titolo, icona e pulsante collasso - - Nessuna scrollbar visibile (hidden ma funzionale) - - **Configurazione pannelli:** - - Salvata in localStorage con chiave `apollinare-report-editor-panels` - - Default: Pages (sinistra, 220px), Data (destra, 280px), Properties (destra, 280px) - - Ogni pannello ha: id, width, collapsed, position (left/right), order - - **Scrollbar nascoste:** Usato CSS per nascondere scrollbar mantenendo funzionalità scroll - - `&::-webkit-scrollbar: { width: 0 }` per Chrome/Safari - - `scrollbarWidth: "none"` per Firefox - - `msOverflowStyle: "none"` per IE/Edge - - **Canvas centrato:** La viewport del report rimane sempre al centro dell'area disponibile - - **File modificati:** - - `ReportEditorPage.tsx` - Integrato `usePanelLayout`, usato `ResizablePanel` per tutti i pannelli - - `PageNavigator.tsx` - Aggiunto CSS per nascondere scrollbar - - `DataBindingPanel.tsx` - Aggiunto CSS per nascondere scrollbar - - `PropertiesPanel.tsx` - Aggiunto CSS per nascondere scrollbar - - **File rimossi:** - - `CollapsiblePanel.tsx` - Sostituito da `ResizablePanel` +- **NUOVA FEATURE: Sistema Pannelli Drag-and-Drop con Sidebar Ridimensionabili** - COMPLETATO + - **Obiettivo:** I pannelli del report designer devono poter essere trascinati tra sidebar sinistra e destra, con ridimensionamento orizzontale a livello sidebar + - **Architettura implementata:** + - `SidebarDropZone.tsx` - Contenitore sidebar con: + - Drop zone per drag-and-drop pannelli (HTML5 Drag and Drop API) + - Handle di resize orizzontale sul bordo interno + - Indicatore visivo durante il drag + - Props: `position`, `width`, `onWidthChange`, `onPanelDrop`, `panelIds` + - `ResizablePanel.tsx` - Pannello individuale con: + - Header trascinabile (`draggable="true"`) + - Resize verticale (flex) tra pannelli nella stessa sidebar + - Stato collassato con icona e titolo verticale + - `width: 100%` - si adatta alla larghezza della sidebar + - `usePanelLayout.ts` - Hook per gestione stato: + - `sidebarWidths: { left: number, right: number }` per larghezza sidebar + - `panels[]` con `flex` per distribuzione verticale + - `movePanelToPosition()` redistribuisce flex quando un pannello viene droppato + - Persistenza in localStorage (versione 3) + - **Comportamento:** + - Trascinando l'header di un pannello si può spostarlo tra sidebar + - Quando un pannello viene droppato, tutti i pannelli nella sidebar di destinazione ottengono `flex: 1` (distribuzione equa) + - Il resize orizzontale agisce sulla sidebar intera, non sui singoli pannelli + - I pannelli adottano automaticamente la larghezza della sidebar + - **Layout Full-Width:** + - `Layout.tsx` modificato per Report Editor: `p: 0`, `overflow: hidden`, `width: 100vw - drawerWidth` + - `ReportEditorPage.tsx`: `flex: 1`, `minHeight: 0` per espansione corretta + - Canvas container: `width: 100%` per occupare tutto lo spazio disponibile + +- **FIX: Layout Report Designer Non Full-Width** - COMPLETATO + - **Problema:** Il report designer non occupava tutta la larghezza del browser + - **Causa:** Il Layout usava `width: 100%` invece di `100vw` e il padding non veniva rimosso per il report editor + - **Soluzione:** + - `Layout.tsx`: Usato `width: 100vw` e `calc(100vw - drawerWidth)` invece di `100%` + - `Layout.tsx`: Padding condizionale `p: 0` per route `/report-editor` + - `Layout.tsx`: `overflow: hidden` e `height: 100vh` per contenitore main + - `ReportEditorPage.tsx`: Rimossi margini negativi, usato `flex: 1` e `minHeight: 0` + - `EditorCanvas.tsx`: Modifiche utente per larghezza canvas + - **File modificati:** `Layout.tsx`, `ReportEditorPage.tsx`, `EditorCanvas.tsx` - **NUOVA FEATURE: Panning e Zoom stile Draw.io nel Report Designer** - COMPLETATO (sessione precedente) - **Problema:** Le scorciatoie da tastiera (Ctrl+X, Ctrl+C, etc.) venivano intercettate dal browser invece che dalla pagina @@ -1272,6 +1284,32 @@ frontend/src/ - Implementate tutte le scorciatoie dichiarate nel context menu (Ctrl+X/C/V/D/A/L/G, Ctrl+[/], Delete, Escape) - **File:** `EditorCanvas.tsx` (aggiunto `isTextEditing()` a `EditorCanvasRef`), `ReportEditorPage.tsx` (riscritto `useEffect` delle scorciatoie, aggiunto `canvasRef`) +29. **Sistema Pannelli Drag-and-Drop tra Sidebar (IMPLEMENTATO 29/11/2025):** + - **Obiettivo:** Permettere agli utenti di trascinare i pannelli tra sidebar sinistra e destra, con ridimensionamento a livello sidebar + - **Implementazione:** + - `SidebarDropZone.tsx` - Drop zone con HTML5 Drag and Drop API e resize orizzontale + - `ResizablePanel.tsx` - Pannello con header draggable e resize verticale (flex) + - `usePanelLayout.ts` - Hook con `sidebarWidths` invece di larghezza per-pannello + - Versione config incrementata a 3 per forzare migrazione localStorage + - **Comportamento chiave:** + - `movePanelToPosition()` redistribuisce `flex: 1` a tutti i pannelli nella sidebar di destinazione + - Pannelli usano `width: 100%` per adattarsi alla sidebar + - `PANEL_DRAG_TYPE = "application/x-panel-id"` per identificare i drag + - **File:** `SidebarDropZone.tsx`, `ResizablePanel.tsx`, `usePanelLayout.ts`, `ReportEditorPage.tsx` + +30. **Layout Report Designer Non Full-Width (FIX 29/11/2025):** + - **Problema:** Il report designer non occupava tutta la larghezza disponibile del browser + - **Causa:** Il Layout usava `width: 100%` che si riferisce al parent, non al viewport. Inoltre il padding non veniva rimosso per il report editor + - **Soluzione:** + - `Layout.tsx`: Cambiato `width: 100%` → `width: 100vw` e `calc(100vw - drawerWidth)` + - `Layout.tsx`: Aggiunto controllo condizionale per route `/report-editor`: `p: 0`, `overflow: hidden` + - `Layout.tsx`: Cambiato `minHeight: 100vh` → `height: 100vh` con `overflow: hidden` + - `Layout.tsx`: Content box usa `flex: 1` con `minHeight: 0` (fondamentale per flexbox) + - `ReportEditorPage.tsx`: Rimossi margini negativi, usato `flex: 1` e `minHeight: 0` + - `ReportEditorPage.tsx`: Canvas container con `width: 100%` + - **Nota:** `minHeight: 0` è fondamentale in flexbox per permettere ai contenitori di ridursi sotto la dimensione del loro contenuto + - **File:** `Layout.tsx`, `ReportEditorPage.tsx`, `EditorCanvas.tsx` + ### Schema Database Report System Le tabelle sono già nel DbContext (`AppollinareDbContext.cs`): diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx index bc4b7a4..f02ec7e 100644 --- a/frontend/src/components/Layout.tsx +++ b/frontend/src/components/Layout.tsx @@ -215,23 +215,31 @@ export default function Layout() { sx={{ flexGrow: 1, width: { - xs: "100%", - sm: `calc(100% - ${drawerWidth}px)`, + xs: "100vw", + sm: `calc(100vw - ${drawerWidth}px)`, }, - minHeight: "100vh", + height: "100vh", display: "flex", flexDirection: "column", + overflow: "hidden", }} > {/* Toolbar spacer */} - + {/* Content */} diff --git a/frontend/src/components/reportEditor/EditorCanvas.tsx b/frontend/src/components/reportEditor/EditorCanvas.tsx index 3c9d29e..0741500 100644 --- a/frontend/src/components/reportEditor/EditorCanvas.tsx +++ b/frontend/src/components/reportEditor/EditorCanvas.tsx @@ -1522,6 +1522,7 @@ const EditorCanvas = forwardRef( sx={{ flex: 1, overflow: "auto", + width: "100%", display: "flex", justifyContent: "center", alignItems: "flex-start", diff --git a/frontend/src/pages/ReportEditorPage.tsx b/frontend/src/pages/ReportEditorPage.tsx index 29b4962..a5bf6ee 100644 --- a/frontend/src/pages/ReportEditorPage.tsx +++ b/frontend/src/pages/ReportEditorPage.tsx @@ -1862,9 +1862,9 @@ export default function ReportEditorPage() { sx={{ display: "flex", flexDirection: "column", - height: { xs: "calc(100vh - 56px)", sm: "calc(100vh - 64px)" }, - mx: { xs: -1.5, sm: -2, md: -3 }, - mt: { xs: -1.5, sm: -2, md: -3 }, + flex: 1, + width: "100%", + minHeight: 0, // Important: allows flex container to shrink overflow: "hidden", }} > diff --git a/src/Apollinare.API/apollinare.db-shm b/src/Apollinare.API/apollinare.db-shm index 8d59635..d574bb6 100644 Binary files a/src/Apollinare.API/apollinare.db-shm and b/src/Apollinare.API/apollinare.db-shm differ diff --git a/src/Apollinare.API/apollinare.db-wal b/src/Apollinare.API/apollinare.db-wal index bcce40c..c42d95d 100644 Binary files a/src/Apollinare.API/apollinare.db-wal and b/src/Apollinare.API/apollinare.db-wal differ