From ec3a15a4677886d947224a96d6810d809237cdfa Mon Sep 17 00:00:00 2001
From: TekH <h.tek@digitaldata.works>
Date: Mon, 21 Sep 2026 17:07:20 +0200
Subject: [PATCH] Add envelope preview feature with popup and row events
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Enhanced the UI with a "Vorschau" (Preview) button to display
PDF previews of selected envelopes. Introduced a `DxPopup`
to show envelope details, including ID and title, with a
"Schließen" (Close) button.

Replaced `SelectedDataItemChanged` with `RowClick` and
`RowDoubleClick` events for improved row selection.
Single-click toggles row selection, while double-click opens
the preview popup. Added `_previewVisible` to manage popup
visibility and implemented `ShowPreview` for button-triggered
previews. Removed `OnSelectedEnvelopeChanged` as it is now
handled by the new row events. Updated grid layout persistence
to align with the new event structure.
---
 .../Pages/EnvelopeSenderPage.razor            | 71 +++++++++++++++++--
 1 file changed, 67 insertions(+), 4 deletions(-)

diff --git a/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Pages/EnvelopeSenderPage.razor b/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Pages/EnvelopeSenderPage.razor
index 78227ff6..d5aaeb3a 100644
--- a/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Pages/EnvelopeSenderPage.razor
+++ b/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Pages/EnvelopeSenderPage.razor
@@ -91,6 +91,14 @@
                     }
                 </button>
 
+                <button class="sender-btn" @onclick="ShowPreview" disabled="@(_selectedEnvelope == null)" title="Ausgewählten Umschlag als PDF anzeigen">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                        <path d="M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0z"/>
+                        <path d="M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8zm8 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z"/>
+                    </svg>
+                    Vorschau
+                </button>
+
                 <button class="sender-btn sender-btn--logout" @onclick="LogoutAsync" disabled="@_isLoggingOut" title="Abmelden">
                     @if (_isLoggingOut)
                     {
@@ -180,7 +188,8 @@
                                 PagerVisible="true"
                                 SelectionMode="GridSelectionMode.Single"
                                 SelectedDataItem="@_selectedEnvelope"
-                                SelectedDataItemChanged="@OnSelectedEnvelopeChanged"
+                                RowClick="OnRowClick"
+                                RowDoubleClick="OnRowDoubleClick"
                                 CustomizeElement="OnCustomizeElement"
                                 LayoutAutoLoading="OnActiveGridLayoutAutoLoading"
                                 LayoutAutoSaving="OnActiveGridLayoutAutoSaving">
@@ -298,7 +307,8 @@
                                 PagerVisible="true"
                                 SelectionMode="GridSelectionMode.Single"
                                 SelectedDataItem="@_selectedEnvelope"
-                                SelectedDataItemChanged="@OnSelectedEnvelopeChanged"
+                                RowClick="OnRowClick"
+                                RowDoubleClick="OnRowDoubleClick"
                                 CustomizeElement="OnCustomizeElement"
                                 LayoutAutoLoading="OnCompletedGridLayoutAutoLoading"
                                 LayoutAutoSaving="OnCompletedGridLayoutAutoSaving">
@@ -412,6 +422,26 @@
     </div>
 </div>
 
+@* ── PDF Vorschau Popup ────────────────────────────────────────────────── *@
+<DxPopup @bind-Visible="@_previewVisible"
+         HeaderText="@($"Vorschau — Umschlag #{_selectedEnvelope?.Id}")"
+         Width="480px"
+         CloseOnOutsideClick="true"
+         ShowFooter="true">
+    <BodyContentTemplate>
+        <div style="padding: 1rem;">
+            <p><strong>Umschlag-ID:</strong> @_selectedEnvelope?.Id</p>
+            <p><strong>Titel:</strong> @_selectedEnvelope?.Title</p>
+        </div>
+    </BodyContentTemplate>
+    <FooterContentTemplate>
+        <DxButton CssClass="popup-button my-1 ms-2"
+                  RenderStyle="ButtonRenderStyle.Secondary"
+                  Text="Schließen"
+                  Click="@(() => _previewVisible = false)" />
+    </FooterContentTemplate>
+</DxPopup>
+
 @code {
     private IEnumerable<EnvelopeDto>? _allEnvelopes;
     private IEnumerable<EnvelopeDto>? _activeEnvelopes;
@@ -428,6 +458,9 @@
     private EnvelopeGenerator.Server.Client.Services.CustomImageDto? _appLogo;
     private EnvelopeGenerator.Server.Client.Services.CustomImageDto? _companyLogo;
 
+    // Preview popup
+    private bool _previewVisible = false;
+
     // Stable keys used to store/restore each grid's layout in UserPreferences.GridLayouts
     private const string GridKeyActive = "sender.active-envelopes";
     private const string GridKeyCompleted = "sender.completed-envelopes";
@@ -540,9 +573,39 @@
         // Future: Add custom row coloring based on status if needed
     }
 
-    void OnSelectedEnvelopeChanged(object envelope)
+    // Single click: select row, or deselect if already selected (toggle)
+    void OnRowClick(GridRowClickEventArgs e)
     {
-        _selectedEnvelope = envelope as EnvelopeDto;
+        var clicked = e.Grid.GetDataItem(e.VisibleIndex) as EnvelopeDto;
+        if (clicked == null) return;
+
+        if (_selectedEnvelope?.Id == clicked.Id)
+        {
+            // Already selected → deselect
+            _selectedEnvelope = null;
+            e.Grid.DeselectDataItem(clicked);
+        }
+        else
+        {
+            // New row → select
+            _selectedEnvelope = clicked;
+            e.Grid.SelectDataItem(clicked);
+        }
+    }
+
+    // Double-click: select the row and open preview popup
+    void OnRowDoubleClick(GridRowClickEventArgs e)
+    {
+        var clicked = e.Grid.GetDataItem(e.VisibleIndex) as EnvelopeDto;
+        if (clicked == null) return;
+        _selectedEnvelope = clicked;
+        _previewVisible = true;
+    }
+
+    void ShowPreview()
+    {
+        if (_selectedEnvelope == null) return;
+        _previewVisible = true;
     }
 
     // ── Grid Layout Persistence ───────────────────────────────────────────────