docs: add implementation plan for gvScostamentoPerformance grid layout
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,268 @@
|
||||
# gvScostamentoPerformance Grid Layout — Implementation Plan
|
||||
|
||||
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
|
||||
|
||||
**Goal:** Migliorare la leggibilità e la presentazione visiva della griglia `gvScostamentoPerformance` in `ScostamentoPerformance.aspx` — colonne fisse in px, scroll orizzontale, colonne bloccate, tema Aqua uniforme e CSS override mirati.
|
||||
|
||||
**Architecture:** Tutte le modifiche sono confinate al solo file `ScostamentoPerformance.aspx`. Il markup ASPX viene aggiornato inline (attributi DevExpress + blocco `<style>`). Nessuna modifica al code-behind né al datasource.
|
||||
|
||||
**Tech Stack:** ASP.NET Web Forms 4.7.2, DevExpress ASPxGridView v23.2, tema Aqua, CSS inline override.
|
||||
|
||||
---
|
||||
|
||||
## File coinvolti
|
||||
|
||||
| Operazione | File |
|
||||
|---|---|
|
||||
| Modify | `OlympiaIntranet/ScostamentoPerformance.aspx` |
|
||||
|
||||
Nessun file creato. Nessun file di test (il progetto non ha suite di test — verifica visiva via IIS Express).
|
||||
|
||||
---
|
||||
|
||||
### Task 1: Tema Aqua e scroll orizzontale
|
||||
|
||||
Modificare gli attributi radice di `gvScostamentoPerformance` per cambiare tema e abilitare lo scroll orizzontale.
|
||||
|
||||
**Files:**
|
||||
- Modify: `OlympiaIntranet/ScostamentoPerformance.aspx:64-77`
|
||||
|
||||
- [ ] **Step 1: Cambiare Theme da Office2010Blue ad Aqua**
|
||||
|
||||
Nel tag di apertura `<dx:ASPxGridView ID="gvScostamentoPerformance"` alla riga 64, sostituire:
|
||||
```xml
|
||||
Theme="Office2010Blue"
|
||||
```
|
||||
con:
|
||||
```xml
|
||||
Theme="Aqua"
|
||||
```
|
||||
|
||||
- [ ] **Step 2: Aggiungere HorizontalScrollBarMode al blocco Settings**
|
||||
|
||||
Sostituire il blocco `<Settings ... />` esistente (riga 77):
|
||||
```xml
|
||||
<Settings ShowFilterRow="True" ShowHeaderFilterButton="True" ShowFilterBar="Visible" VerticalScrollBarMode="Visible" VerticalScrollableHeight="750" />
|
||||
```
|
||||
con:
|
||||
```xml
|
||||
<Settings ShowFilterRow="True" ShowHeaderFilterButton="True" ShowFilterBar="Visible" VerticalScrollBarMode="Visible" VerticalScrollableHeight="750" HorizontalScrollBarMode="Visible" />
|
||||
```
|
||||
|
||||
- [ ] **Step 3: Verifica rapida in Visual Studio**
|
||||
|
||||
Aprire il file in VS2022 e controllare che non ci siano errori di markup (il designer dovrebbe caricare senza errori). Se `HorizontalScrollBarMode` non è un attributo valido su `<Settings>` per questa versione di DevExpress, rimuoverlo — lo scroll orizzontale verrà gestito dal CSS nel Task 3.
|
||||
|
||||
- [ ] **Step 4: Commit**
|
||||
|
||||
```bash
|
||||
git add OlympiaIntranet/ScostamentoPerformance.aspx
|
||||
git commit -m "style: change gvScostamentoPerformance theme to Aqua, enable horizontal scroll"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 2: Colonne bloccate e larghezze in pixel fissi
|
||||
|
||||
Aggiornare ogni colonna: `Fixed="True"` sulle prime 4, larghezza in px su tutte.
|
||||
|
||||
**Files:**
|
||||
- Modify: `OlympiaIntranet/ScostamentoPerformance.aspx:88-139`
|
||||
|
||||
- [ ] **Step 1: Bloccare la colonna Command (riga 88)**
|
||||
|
||||
Sostituire:
|
||||
```xml
|
||||
<dx:GridViewCommandColumn ShowEditButton="True" VisibleIndex="0" Width="50px" Caption=" " />
|
||||
```
|
||||
con:
|
||||
```xml
|
||||
<dx:GridViewCommandColumn ShowEditButton="True" VisibleIndex="0" Width="50px" Caption=" " Fixed="True" />
|
||||
```
|
||||
|
||||
- [ ] **Step 2: Bloccare e fissare la colonna Gestore (riga 90)**
|
||||
|
||||
Sostituire:
|
||||
```xml
|
||||
<dx:GridViewDataTextColumn FieldName="Gestore" Caption="Gestore" VisibleIndex="2" ReadOnly="true" Width="6%" />
|
||||
```
|
||||
con:
|
||||
```xml
|
||||
<dx:GridViewDataTextColumn FieldName="Gestore" Caption="Gestore" VisibleIndex="2" ReadOnly="true" Width="90px" Fixed="True" />
|
||||
```
|
||||
|
||||
- [ ] **Step 3: Bloccare e fissare la colonna Portafoglio (riga 91)**
|
||||
|
||||
Sostituire:
|
||||
```xml
|
||||
<dx:GridViewDataTextColumn FieldName="Portafoglio" Caption="Portafoglio" VisibleIndex="3" ReadOnly="true" Width="6%" />
|
||||
```
|
||||
con:
|
||||
```xml
|
||||
<dx:GridViewDataTextColumn FieldName="Portafoglio" Caption="Portafoglio" VisibleIndex="3" ReadOnly="true" Width="90px" Fixed="True" />
|
||||
```
|
||||
|
||||
- [ ] **Step 4: Bloccare e fissare la colonna Intestazione (riga 92)**
|
||||
|
||||
Sostituire:
|
||||
```xml
|
||||
<dx:GridViewDataTextColumn FieldName="Intestazione" Caption="Intestazione" VisibleIndex="4" ReadOnly="true" Width="10%" />
|
||||
```
|
||||
con:
|
||||
```xml
|
||||
<dx:GridViewDataTextColumn FieldName="Intestazione" Caption="Intestazione" VisibleIndex="4" ReadOnly="true" Width="150px" Fixed="True" />
|
||||
```
|
||||
|
||||
- [ ] **Step 5: Aggiornare larghezze delle colonne restanti**
|
||||
|
||||
Sostituire le colonne seguenti (solo attributo `Width`, nessun altro cambiamento):
|
||||
|
||||
```xml
|
||||
<!-- Linea: 6% → 90px -->
|
||||
<dx:GridViewDataTextColumn FieldName="Linea" Caption="Linea" VisibleIndex="5" ReadOnly="true" Width="90px" />
|
||||
|
||||
<!-- Patrimonio: 6% → 110px -->
|
||||
<dx:GridViewDataTextColumn FieldName="Patrimonio" Caption="Patrimonio" VisibleIndex="6" ReadOnly="true" Width="110px">
|
||||
<PropertiesTextEdit DisplayFormatString="N0" />
|
||||
</dx:GridViewDataTextColumn>
|
||||
|
||||
<!-- DataApertura: 5% → 90px -->
|
||||
<dx:GridViewDataTextColumn FieldName="DataApertura" Caption="Data Ap." VisibleIndex="7" ReadOnly="true" Width="90px">
|
||||
<PropertiesTextEdit DisplayFormatString="dd/MM/yyyy" />
|
||||
</dx:GridViewDataTextColumn>
|
||||
|
||||
<!-- PerfTWRPtf: 4% → 85px -->
|
||||
<dx:GridViewDataTextColumn FieldName="PerfTWRPtf" Caption="TWR Ptf" VisibleIndex="8" ReadOnly="true" Width="85px">
|
||||
<PropertiesTextEdit DisplayFormatString="N2" />
|
||||
</dx:GridViewDataTextColumn>
|
||||
|
||||
<!-- PerfTWRLinea: 5% → 95px -->
|
||||
<dx:GridViewDataTextColumn FieldName="PerfTWRLinea" Caption="TWR Linea" VisibleIndex="9" ReadOnly="true" Width="95px">
|
||||
<PropertiesTextEdit DisplayFormatString="N2" />
|
||||
</dx:GridViewDataTextColumn>
|
||||
|
||||
<!-- DeltaTWR: 4% → 80px -->
|
||||
<dx:GridViewDataTextColumn FieldName="DeltaTWR" Caption="Delta" VisibleIndex="10" ReadOnly="true" Width="80px">
|
||||
<PropertiesTextEdit DisplayFormatString="N2" />
|
||||
</dx:GridViewDataTextColumn>
|
||||
|
||||
<!-- Benchmark: 4% → 90px -->
|
||||
<dx:GridViewDataTextColumn FieldName="Benchmark" Caption="Benchmark" VisibleIndex="10" ReadOnly="true" Width="90px">
|
||||
<PropertiesTextEdit DisplayFormatString="N2" />
|
||||
</dx:GridViewDataTextColumn>
|
||||
|
||||
<!-- Apporti: 5% → 95px -->
|
||||
<dx:GridViewDataTextColumn FieldName="Apporti" Caption="Apporti" VisibleIndex="11" ReadOnly="true" Width="95px">
|
||||
<PropertiesTextEdit DisplayFormatString="N0" />
|
||||
</dx:GridViewDataTextColumn>
|
||||
|
||||
<!-- Prelievi: 5% → 95px -->
|
||||
<dx:GridViewDataTextColumn FieldName="Prelievi" Caption="Prelievi" VisibleIndex="12" ReadOnly="true" Width="95px">
|
||||
<PropertiesTextEdit DisplayFormatString="N0" />
|
||||
</dx:GridViewDataTextColumn>
|
||||
|
||||
<!-- Addebiti: 5% → 95px -->
|
||||
<dx:GridViewDataTextColumn FieldName="Addebiti" Caption="Addebiti" VisibleIndex="13" ReadOnly="true" Width="95px">
|
||||
<PropertiesTextEdit DisplayFormatString="N0" />
|
||||
</dx:GridViewDataTextColumn>
|
||||
|
||||
<!-- Commento: 16% → 210px -->
|
||||
<dx:GridViewDataComboBoxColumn FieldName="Commento" Caption="Commento" VisibleIndex="14" Width="210px">
|
||||
<!-- PropertiesComboBox invariato -->
|
||||
</dx:GridViewDataComboBoxColumn>
|
||||
|
||||
<!-- Note: 12% → 170px -->
|
||||
<dx:GridViewDataMemoColumn FieldName="Note" Caption="Note" VisibleIndex="14" Width="170px">
|
||||
<PropertiesMemoEdit Rows="3" />
|
||||
</dx:GridViewDataMemoColumn>
|
||||
|
||||
<!-- BloccoCommento: 3% → 60px -->
|
||||
<dx:GridViewDataCheckColumn FieldName="BloccoCommento" Caption="Blocco" VisibleIndex="15" Width="60px" />
|
||||
```
|
||||
|
||||
- [ ] **Step 6: Commit**
|
||||
|
||||
```bash
|
||||
git add OlympiaIntranet/ScostamentoPerformance.aspx
|
||||
git commit -m "style: fix column widths to px and freeze Gestore/Portafoglio/Intestazione columns"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 3: CSS override nel blocco `<head>`
|
||||
|
||||
Aggiungere gli stili inline che correggono padding, bordo inferiore, filter bar e separatore colonne bloccate.
|
||||
|
||||
**Files:**
|
||||
- Modify: `OlympiaIntranet/ScostamentoPerformance.aspx:10-12`
|
||||
|
||||
- [ ] **Step 1: Aggiungere il blocco CSS dopo lo stile esistente**
|
||||
|
||||
Il blocco `<style>` attuale (righe 10–12) contiene:
|
||||
```html
|
||||
<style>
|
||||
html, body { margin: 0; padding: 0; overflow: hidden; height: 100%; }
|
||||
</style>
|
||||
```
|
||||
|
||||
Sostituirlo con:
|
||||
```html
|
||||
<style>
|
||||
html, body { margin: 0; padding: 0; overflow: hidden; height: 100%; }
|
||||
|
||||
/* Padding celle griglia */
|
||||
.dxgvDataRow_Aqua td,
|
||||
.dxgvDataRow_Aqua td.dxgvTD_Aqua {
|
||||
padding: 6px 8px !important;
|
||||
}
|
||||
|
||||
/* Bordo inferiore griglia */
|
||||
.dxgvControl_Aqua {
|
||||
border-bottom: 2px solid #4a90d9 !important;
|
||||
}
|
||||
|
||||
/* Filter bar ("Crea Filtro") visibile */
|
||||
.dxgvFilterBar_Aqua {
|
||||
background-color: #e0f0fb !important;
|
||||
border-top: 1px solid #b0cfe8 !important;
|
||||
color: #1a6bb5 !important;
|
||||
}
|
||||
|
||||
/* Separatore visivo tra colonne bloccate e scorrevoli */
|
||||
.dxgvFixedColumnLeftDivider_Aqua {
|
||||
border-right: 2px solid #2a6fb0 !important;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
> **Nota:** I selettori CSS usano i nomi di classe generati da DevExpress per il tema Aqua. Se a runtime le classi effettive differiscono (verificabile con DevTools del browser → Inspect sull'elemento griglia), aggiornare i selettori con quelli reali. Il pattern è sempre `dxgv<Elemento>_<Tema>`.
|
||||
|
||||
- [ ] **Step 2: Verifica visiva in IIS Express**
|
||||
|
||||
Avviare il progetto (F5 in VS2022), navigare a `ScostamentoPerformance.aspx` e controllare:
|
||||
- ✅ Header griglia in blu Aqua (coerente con il form filtri sopra)
|
||||
- ✅ Colonne Gestore/Portafoglio/Intestazione restano visibili durante lo scroll orizzontale
|
||||
- ✅ Celle con padding sufficiente (non schiacciate)
|
||||
- ✅ Bordo inferiore della griglia visibile
|
||||
- ✅ "Crea Filtro" (filter bar) con sfondo azzurro chiaro e testo leggibile
|
||||
|
||||
Se uno o più CSS override non producono effetto, aprire DevTools (F12), ispezionare l'elemento e trovare il selettore corretto generato da DevExpress, quindi aggiornarlo nel markup.
|
||||
|
||||
- [ ] **Step 3: Commit finale**
|
||||
|
||||
```bash
|
||||
git add OlympiaIntranet/ScostamentoPerformance.aspx
|
||||
git commit -m "style: add CSS overrides for Aqua theme — padding, bottom border, filter bar, fixed column divider"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 4: Push su remote
|
||||
|
||||
- [ ] **Step 1: Push su Gitea**
|
||||
|
||||
```bash
|
||||
git push origin master
|
||||
```
|
||||
|
||||
Verifica su `https://git.smart-roots.net/glicciardello/OlympiaIntranet` che i 3 commit siano visibili nel branch `master`.
|
||||
Reference in New Issue
Block a user