Add envelope preview feature with popup and row events
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.
This commit is contained in:
@@ -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 ───────────────────────────────────────────────
|
||||
|
||||
Reference in New Issue
Block a user