AppStd/EnvelopeGenerator
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Files
b15f95755c1e11e97c90edab55dae034480e1d0f
EnvelopeGenerator/EnvelopeGenerator.Server/SF-74-PLAN.6e.md
TekH b15f95755c Add multi-format export UI to EnvelopeSenderPage 
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.
2026-09-24 18:07:05 +02:00

4.9 KiB
Raw Blame History

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.
Reference in New Issue View Git Blame Copy Permalink