TekH
b15f95755c
Implemented the first phase of a planned multi-format export feature for the `/sender` dashboard. Added a compact export block to the right action bar in `EnvelopeSenderPage.razor`, including a format dropdown (XLSX, CSV, PDF), a "Selected Rows Only" toggle, and an "Export" button. The UI is fully integrated with responsive design and theme consistency across `blazing-berry`, `blazing-dark`, and `purple`. No export logic is implemented yet; placeholder handlers are in place for the export button. Styles were added to `wwwroot/css/sender-page.css` to ensure alignment with the existing design language and mobile usability. This commit completes Phase 1 of the implementation plan. Phase 2 will add the actual export functionality.
135 lines
4.9 KiB
Markdown
135 lines
4.9 KiB
Markdown
# SF-74 — Phase 6e Plan (Multi-Format Export + Selected Rows)
|
||
|
||
**Ticket:** SF-74
|
||
**Scope:** `/sender` Dashboard (`EnvelopeSenderPage.razor`)
|
||
**Status:** Planung abgeschlossen, Umsetzung wartet auf Freigabe
|
||
|
||
---
|
||
|
||
## Ziel
|
||
|
||
Für die Envelope-Grid-Ansicht auf `/sender` soll ein **einfaches, konsistentes Export-UX** umgesetzt werden:
|
||
|
||
1. Mehrere Export-Formate: **XLSX, CSV, PDF**
|
||
2. Option: **Nur ausgewählte Zeilen exportieren**
|
||
3. Keine komplexe Grid-Toolbar; stattdessen schlanke Integration in die vorhandene Action-Bar
|
||
|
||
---
|
||
|
||
## Technische Grundlage (DevExpress)
|
||
|
||
Direkter Export ist über `DxGrid` möglich (ohne Backend-Endpoint):
|
||
|
||
- `ExportToXlsxAsync(...)`
|
||
- `ExportToCsvAsync(...)`
|
||
- `ExportToPdfAsync(...)`
|
||
|
||
Die Datei wird direkt im Browser heruntergeladen.
|
||
|
||
**Wichtige Einschränkung (bekannt):** Inhalte aus `CellDisplayTemplate`/Detail-Templates werden nicht 1:1 exportiert. Das betrifft in unserem Grid v. a. die Template-Spalten `Status` und `EnvelopeReceivers`.
|
||
|
||
---
|
||
|
||
## UX-Entscheidung (vereinfacht)
|
||
|
||
Anstatt 3–4 separater Export-Buttons:
|
||
|
||
- Ein kompakter Export-Block in der rechten Action-Bar
|
||
- `Format`-Dropdown (XLSX/CSV/PDF)
|
||
- `Nur ausgewählte` Toggle/Checkbox
|
||
- Ein einzelner `Exportieren`-Button
|
||
|
||
Dadurch bleibt die Oberfläche aufgeräumt und konsistent mit den bestehenden Toolbar-Buttons.
|
||
|
||
---
|
||
|
||
## Implementierungsplan (2 Phasen, strikt sequentiell)
|
||
|
||
## Phase 1 — UI/Design Integration (ohne finale Export-Logik)
|
||
|
||
### Ziel
|
||
Export-Bedienelemente visuell integrieren, inklusive responsivem Verhalten und Theme-Konsistenz.
|
||
|
||
### Änderungen
|
||
|
||
#### 1) `EnvelopeSenderPage.razor`
|
||
- Export-Block in der bestehenden rechten Toolbar ergänzen.
|
||
- Neue Controls:
|
||
- Format-Auswahl (XLSX, CSV, PDF)
|
||
- `Nur ausgewählte` CheckBox/Toggle
|
||
- `Exportieren` Button
|
||
- Initialzustand:
|
||
- Standardformat = `XLSX`
|
||
- Export-Button zunächst mit Platzhalter-Handler (oder no-op), bis Phase 2
|
||
|
||
#### 2) `wwwroot/css/sender-page.css`
|
||
- Schlanke Styles für den Export-Block hinzufügen, z. B.:
|
||
- `.sender-export-group`
|
||
- `.sender-export-format`
|
||
- `.sender-export-selected`
|
||
- Bestehende Button-Designsprache beibehalten (`sender-btn`), keine visuelle Sonderwelt.
|
||
- Mobile/Wrap-Verhalten absichern (`@media`): Export-Controls dürfen umbrechen, ohne die Action-Bar zu zerlegen.
|
||
|
||
### Definition of Done (Phase 1)
|
||
- Export-UI ist sichtbar und intuitiv platziert.
|
||
- Layout ist konsistent in allen 3 Themes (`blazing-berry`, `blazing-dark`, `purple`).
|
||
- Mobile Darstellung bleibt nutzbar.
|
||
- Noch keine produktive Export-Logik (kommt erst in Phase 2).
|
||
|
||
---
|
||
|
||
## Phase 2 — Export-Funktionalität (XLSX/CSV/PDF + Selected Rows)
|
||
|
||
### Ziel
|
||
Ein Export-Handler mit Format-Switch und Selected-Rows-Unterstützung.
|
||
|
||
### Änderungen
|
||
|
||
#### 1) `EnvelopeSenderPage.razor` — State + Logik
|
||
- Neue State-Felder:
|
||
- Exportformat (Enum oder string)
|
||
- `bool _exportSelectedRowsOnly`
|
||
- `bool _isExporting`
|
||
- Export-Methode (zentral):
|
||
- Aktives Grid bestimmen: `_activeTab == "active" ? _gridActive : _gridCompleted`
|
||
- Dateiname je Tab/Datum erzeugen
|
||
- Je nach Format aufrufen:
|
||
- XLSX: `ExportToXlsxAsync(..., new GridXlExportOptions { ... })`
|
||
- CSV: `ExportToCsvAsync(..., new GridCsvExportOptions { ... })`
|
||
- PDF: `ExportToPdfAsync(..., new GridPdfExportOptions { ... })`
|
||
- Während Export: `_isExporting = true` (Button disable, optional Spinner).
|
||
|
||
#### 2) Selected Rows Only
|
||
- Option in Export-Options durchreichen: `ExportSelectedRowsOnly = _exportSelectedRowsOnly`.
|
||
- Für robuste Selected-Rows-Exports in beiden Grids:
|
||
- `KeyFieldName="Id"` setzen.
|
||
- Falls notwendig: Mehrfachselektion im Grid aktivieren (nur wenn dies die bestehenden Row-Aktionen nicht negativ beeinflusst).
|
||
|
||
#### 3) Spalten-Strategie für Export
|
||
- Template-Spalten (`Status`, `EnvelopeReceivers`) in Phase 2 pragmatisch behandeln:
|
||
- entweder exportierbar lassen (bekannte Einschränkung akzeptiert),
|
||
- oder `ExportEnabled="false"` setzen, um leere/irrelevante Spalten zu vermeiden.
|
||
- Entscheidung wird bei Umsetzung anhand der resultierenden Export-Datei getroffen.
|
||
|
||
### Definition of Done (Phase 2)
|
||
- XLSX/CSV/PDF Export funktioniert aus beiden Tabs (`active`, `completed`).
|
||
- `Nur ausgewählte` wirkt korrekt auf den Exportumfang.
|
||
- Export ist gegen Mehrfachklicks abgesichert.
|
||
- Dateinamen sind konsistent und verständlich.
|
||
|
||
---
|
||
|
||
## Risiken / Hinweise
|
||
|
||
1. **Template-Spalten-Limitierung (DevExpress):** Kein 1:1 Export von visuell komplexen Templates.
|
||
2. **Selected Rows UX:** Falls Multi-Select benötigt wird, müssen bestehende Single-Selection-Aktionen (`Bearbeiten`, `Vorschau`, `Löschen`) sauber behandelt werden.
|
||
3. **PDF Export Layout:** Kann sich visuell vom Grid unterscheiden; ggf. später `CustomizeCell`/`CustomizePageFooter` ergänzen.
|
||
|
||
---
|
||
|
||
## Umsetzungstaktik
|
||
|
||
- **Keine Parallelisierung der Phasen.**
|
||
- Erst nach expliziter Freigabe: **Phase 1** implementieren.
|
||
- Nach vollständigem Abschluss/Review von Phase 1: **Phase 2** implementieren.
|