# 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.