TekH
1ad673904a
Replace inline styles and magic-number height calculations with a proper BEM CSS class system. Attach HeaderCssClass and BodyCssClass to DxPopup so DevExpress DOM targets can be styled reliably without deep selector hacks. Layout changes: - Remove hardcoded calc(90vh - 114px) height from viewer wrapper; use flex layout so the body fills available space naturally - Change overflow on DxPdfViewer wrapper from hidden to auto to allow horizontal scrolling at high zoom levels - Center PDF pages horizontally inside dxbrv-document-surface via flex New CSS classes (BEM): - .sender-preview-popup root shell, accent top border - .sender-preview-popup__header styled header via HeaderCssClass - .sender-preview-popup__body flex column body via BodyCssClass - .sender-preview-viewer-wrap padding wrapper for the PDF viewer - .sender-preview-pdf-viewer viewer shell with rounded corners / shadow - .sender-preview-state-wrap centered container for loading/error states - .sender-preview-error-card error message card with left accent border - .sender-preview-error-icon circular icon wrapper - .sender-preview-error-title/msg typography helpers Theme support: - Purple, Blazing Dark variants via data-sf-theme attribute overrides Custom scrollbars: - WebKit scrollbar styling scoped to .sender-preview-popup__body Inline style cleanup in EnvelopeSenderPage.razor: - Replace all ad-hoc style= attributes with the new CSS classes above
756 lines
43 KiB
Plaintext
756 lines
43 KiB
Plaintext
@page "/sender"
|
|
@rendermode InteractiveServer
|
|
@using System.Text.Json
|
|
@using EnvelopeGenerator.Domain.Constants
|
|
@using EnvelopeGenerator.Server.Client.Models
|
|
@using DevExpress.Blazor
|
|
@using DevExpress.Blazor.PdfViewer
|
|
@using EnvelopeGenerator.Server.Client.Services
|
|
@using EnvelopeGenerator.Application.Common.Dto
|
|
@using EnvelopeGenerator.Server.Services
|
|
@inject EnvelopeGenerator.Server.Client.Services.EnvelopeService EnvelopeService
|
|
@inject EnvelopeGenerator.Server.Client.Services.AuthService AuthService
|
|
@inject EnvelopeGenerator.Server.Client.Services.ThemeService ThemeService
|
|
@inject EnvelopeGenerator.Server.Client.Services.UserPreferencesService UserPreferencesService
|
|
@inject EnvelopeGenerator.Server.Client.Services.CustomImagesService CustomImagesService
|
|
@inject EnvelopeReceiverPageDataService ReceiverPageDataService
|
|
@inject IEnvelopeAuthService EnvelopeAuthService
|
|
@inject ILogger<EnvelopeSenderPage> Logger
|
|
@inject NavigationManager Navigation
|
|
@inject IJSRuntime JSRuntime
|
|
@inject AppVersionService AppVersion
|
|
|
|
<link href="@AppVersion.GetVersionedUrl("css/envelope-viewer.css")" rel="stylesheet" />
|
|
<link href="@AppVersion.GetVersionedUrl("css/sender-page.css")" rel="stylesheet" />
|
|
|
|
<div class="sender-dashboard-layout">
|
|
<div class="sender-action-bar">
|
|
<div class="sender-action-bar__inner">
|
|
<div class="sender-title-section">
|
|
<div class="sender-logo">
|
|
@* signFLOW logo from appsettings.json — fallback to envelope SVG if not loaded *@
|
|
@if (_appLogo is not null && !string.IsNullOrEmpty(_appLogo.Src))
|
|
{
|
|
<img src="@_appLogo.Src"
|
|
style="height: @_appLogo.Height"
|
|
class="@_appLogo.GetClass("Main")"
|
|
alt="signFLOW" />
|
|
}
|
|
else
|
|
{
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" viewBox="0 0 16 16">
|
|
<path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4Zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2Zm13 2.383-4.708 2.825L15 11.105V5.383Zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741ZM1 11.105l4.708-2.897L1 5.383v5.722Z" />
|
|
</svg>
|
|
}
|
|
</div>
|
|
<div class="sender-title">Umschlag-Übersicht</div>
|
|
</div>
|
|
|
|
@* ── Kunden-Logo (Mitte) ───────────────────────────────────────── *@
|
|
<div class="sender-customer-logo-area">
|
|
@if (_companyLogo is not null && !string.IsNullOrEmpty(_companyLogo.Src))
|
|
{
|
|
<img src="@_companyLogo.Src"
|
|
style="height: @_companyLogo.Height"
|
|
class="@_companyLogo.GetClass("Show")"
|
|
alt="Kunden-Logo" />
|
|
}
|
|
else
|
|
{
|
|
<div class="sf-customer-logo-placeholder">Kunden-Logo</div>
|
|
}
|
|
</div>
|
|
|
|
@* ── Toolbar (rechts) ─────────────────────────────────────────── *@
|
|
<div class="sender-toolbar">
|
|
<button class="sender-btn sender-btn--primary" @onclick="CreateEnvelope" title="Neuen Umschlag erstellen">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
|
<path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z" />
|
|
</svg>
|
|
Neuer Umschlag
|
|
</button>
|
|
|
|
<button class="sender-btn" @onclick="EditEnvelope" disabled="@(_selectedEnvelope == null || IsEnvelopeSent(_selectedEnvelope))" title="Ausgewählten Umschlag bearbeiten">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
|
<path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z" />
|
|
</svg>
|
|
Bearbeiten
|
|
</button>
|
|
|
|
<button class="sender-btn sender-btn--danger" @onclick="DeleteEnvelope" disabled="@(_selectedEnvelope == null)" title="Ausgewählten Umschlag löschen">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
|
<path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" />
|
|
<path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" />
|
|
</svg>
|
|
Löschen
|
|
</button>
|
|
|
|
<button class="sender-btn" @onclick="RefreshEnvelopes" disabled="@_isLoading" title="Aktualisieren">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
|
<path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z" />
|
|
<path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z" />
|
|
</svg>
|
|
@if (_isLoading)
|
|
{
|
|
<span class="spinner-border spinner-border-sm" style="width: 14px; height: 14px;"></span>
|
|
}
|
|
</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)
|
|
{
|
|
<span class="spinner-border spinner-border-sm" style="width: 14px; height: 14px;"></span>
|
|
}
|
|
else
|
|
{
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
|
<path fill-rule="evenodd" d="M10 12.5a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v2a.5.5 0 0 0 1 0v-2A1.5 1.5 0 0 0 9.5 2h-8A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-2a.5.5 0 0 0-1 0v2z" />
|
|
<path fill-rule="evenodd" d="M15.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L14.293 7.5H5.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3z" />
|
|
</svg>
|
|
}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="sender-content">
|
|
@if (_isLoading && _allEnvelopes == null)
|
|
{
|
|
<div class="d-flex justify-content-center align-items-center h-100">
|
|
<div class="text-center">
|
|
<div class="spinner-border text-white mb-3" style="width: 3.5rem; height: 3.5rem;" role="status">
|
|
<span class="visually-hidden">Lädt...</span>
|
|
</div>
|
|
<p class="text-white fw-semibold">Umschläge werden geladen...</p>
|
|
</div>
|
|
</div>
|
|
}
|
|
else if (_errorMessage != null)
|
|
{
|
|
<div class="error-container">
|
|
<div class="alert alert-danger shadow-lg">
|
|
<div class="d-flex align-items-start">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" class="me-3 flex-shrink-0" viewBox="0 0 16 16">
|
|
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
|
|
<path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z" />
|
|
</svg>
|
|
<div>
|
|
<h5 class="mb-2">Fehler beim Laden der Umschläge</h5>
|
|
<p class="mb-0">@_errorMessage</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
else
|
|
{
|
|
<div class="sender-grid-container">
|
|
<div class="sender-tabs">
|
|
<button class="sender-tab @(_activeTab == "active" ? "sender-tab--active" : "")" @onclick='() => _activeTab = "active"'>
|
|
<span>Aktive Umschläge</span>
|
|
@if (_activeEnvelopes != null)
|
|
{
|
|
<span style="opacity: 0.6; margin-left: 0.5rem;">(@_activeEnvelopes.Count())</span>
|
|
}
|
|
</button>
|
|
<button class="sender-tab @(_activeTab == "completed" ? "sender-tab--active" : "")" @onclick='() => _activeTab = "completed"'>
|
|
<span>Abgeschlossene Umschläge</span>
|
|
@if (_completedEnvelopes != null)
|
|
{
|
|
<span style="opacity: 0.6; margin-left: 0.5rem;">(@_completedEnvelopes.Count())</span>
|
|
}
|
|
</button>
|
|
</div>
|
|
|
|
<div class="sender-grid-wrapper">
|
|
|
|
@* Grid persistence hint — informs users their layout is auto-saved *@
|
|
<div class="sf-grid-persistence-hint">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="currentColor" viewBox="0 0 16 16">
|
|
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
|
|
<path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z" />
|
|
</svg>
|
|
Die Größe und Position der Spalten wird automatisch für Sie gespeichert.
|
|
</div>
|
|
@if (_activeTab == "active")
|
|
{
|
|
<DxGrid Data="@_activeEnvelopes"
|
|
@ref="_gridActive"
|
|
ShowFilterRow="true"
|
|
ShowSearchBox="true"
|
|
AllowColumnReorder="true"
|
|
AllowSort=true
|
|
ColumnResizeMode="GridColumnResizeMode.ColumnsContainer"
|
|
PageSize="20"
|
|
PagerVisible="true"
|
|
SelectionMode="GridSelectionMode.Single"
|
|
AllowSelectRowByClick="true"
|
|
SelectedDataItem="@_selectedEnvelope"
|
|
SelectedDataItemChanged="@((object o) => _selectedEnvelope = o as EnvelopeDto)"
|
|
RowClick="OnRowClick"
|
|
RowDoubleClick="OnRowDoubleClick"
|
|
CustomizeElement="OnCustomizeElement"
|
|
LayoutAutoLoading="OnActiveGridLayoutAutoLoading"
|
|
LayoutAutoSaving="OnActiveGridLayoutAutoSaving">
|
|
<Columns>
|
|
<DxGridDataColumn FieldName="Id" Caption="ID"
|
|
SortIndex="0"
|
|
SortOrder="GridColumnSortOrder.Descending">
|
|
<CellDisplayTemplate Context="cellContext">
|
|
@((cellContext.DataItem as EnvelopeDto)?.Id)
|
|
</CellDisplayTemplate>
|
|
</DxGridDataColumn>
|
|
<DxGridDataColumn FieldName="Title" Caption="Titel">
|
|
<CellDisplayTemplate Context="cellContext">
|
|
<strong>@((cellContext.DataItem as EnvelopeDto)?.Title)</strong>
|
|
</CellDisplayTemplate>
|
|
</DxGridDataColumn>
|
|
<DxGridDataColumn FieldName="Status" Caption="Status">
|
|
<CellDisplayTemplate Context="cellContext">
|
|
@{
|
|
var envelope = cellContext.DataItem as EnvelopeDto;
|
|
if (envelope != null)
|
|
{
|
|
var statusInfo = GetStatusInfo(envelope.Status);
|
|
<div class="status-badge status-badge--@statusInfo.CssClass">
|
|
<span class="status-dot status-dot--@statusInfo.DotColor"></span>
|
|
@statusInfo.Label
|
|
</div>
|
|
}
|
|
}
|
|
</CellDisplayTemplate>
|
|
</DxGridDataColumn>
|
|
<DxGridDataColumn FieldName="EnvelopeReceivers" Caption="Empfänger">
|
|
<CellDisplayTemplate Context="cellContext">
|
|
@{
|
|
var envelope = cellContext.DataItem as EnvelopeDto;
|
|
if (envelope != null)
|
|
{
|
|
var receivers = envelope.EnvelopeReceivers?.ToList() ?? [];
|
|
var signed = receivers.Count(r => r.Signed);
|
|
var total = receivers.Count;
|
|
<div style="display: flex; align-items: center; gap: 0.5rem;">
|
|
<span style="font-size: 0.875rem; color: #6b7280;">
|
|
@signed / @total unterschrieben
|
|
</span>
|
|
@if (total > 0)
|
|
{
|
|
<div style="flex: 1; min-width: 60px; max-width: 120px; height: 6px; background: #e5e7eb; border-radius: 3px; overflow: hidden;">
|
|
<div style="height: 100%; background: linear-gradient(90deg, #81c784 0%, #66bb6a 100%); width: @((signed * 100.0 / total).ToString("F0"))%;"></div>
|
|
</div>
|
|
}
|
|
</div>
|
|
}
|
|
}
|
|
</CellDisplayTemplate>
|
|
</DxGridDataColumn>
|
|
<DxGridDataColumn FieldName="EnvelopeTypeTitle" Caption="Typ"
|
|
Width="120px" AllowSort="true" />
|
|
<DxGridDataColumn FieldName="AddedWhen" Caption="Erstellt"
|
|
DisplayFormat="{0:dd.MM.yyyy}" Width="110px" AllowSort="true" />
|
|
<DxGridDataColumn FieldName="ChangedWhen" Caption="Geändert am"
|
|
DisplayFormat="{0:dd.MM.yyyy}" Width="110px" AllowSort="true" />
|
|
</Columns>
|
|
<DetailRowTemplate Context="detailContext">
|
|
<div style="padding: 1rem; background: #f9fafb;">
|
|
<h6 style="font-weight: 600; color: #374151; margin-bottom: 0.75rem;">Empfänger</h6>
|
|
@{
|
|
var envelope = detailContext.DataItem as EnvelopeDto;
|
|
if (envelope?.EnvelopeReceivers?.Any() == true)
|
|
{
|
|
<div style="display: flex; flex-direction: column; gap: 0.5rem;">
|
|
@foreach (var receiver in envelope.EnvelopeReceivers)
|
|
{
|
|
<div style="display: flex; align-items: center; gap: 1rem; padding: 0.5rem; background: white; border-radius: 6px; border: 1px solid #e5e7eb;">
|
|
<span class="receiver-badge receiver-badge--@(receiver.Signed ? "signed" : "unsigned")" style="min-width: 100px;">
|
|
@if (receiver.Signed)
|
|
{
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 16 16">
|
|
<path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z" />
|
|
</svg>
|
|
<span>Unterschrieben</span>
|
|
}
|
|
else
|
|
{
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 16 16">
|
|
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
|
|
<path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />
|
|
</svg>
|
|
<span>Ausstehend</span>
|
|
}
|
|
</span>
|
|
<div style="flex: 1; font-size: 0.875rem;">
|
|
<strong style="color: #1f2937;">@receiver.Name</strong>
|
|
<span style="color: #6b7280; margin-left: 0.5rem;">@receiver.Receiver?.EmailAddress</span>
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
}
|
|
else
|
|
{
|
|
<p style="color: #9ca3af; font-size: 0.875rem; margin: 0;">Keine Empfänger</p>
|
|
}
|
|
}
|
|
</div>
|
|
</DetailRowTemplate>
|
|
</DxGrid>
|
|
}
|
|
else
|
|
{
|
|
<DxGrid Data="@_completedEnvelopes"
|
|
@ref="_gridCompleted"
|
|
ShowFilterRow="true"
|
|
ShowSearchBox="true"
|
|
PageSize="20"
|
|
PagerVisible="true"
|
|
SelectionMode="GridSelectionMode.Single"
|
|
AllowSelectRowByClick="true"
|
|
SelectedDataItem="@_selectedEnvelope"
|
|
SelectedDataItemChanged="@((object o) => _selectedEnvelope = o as EnvelopeDto)"
|
|
RowClick="OnRowClick"
|
|
RowDoubleClick="OnRowDoubleClick"
|
|
CustomizeElement="OnCustomizeElement"
|
|
LayoutAutoLoading="OnCompletedGridLayoutAutoLoading"
|
|
LayoutAutoSaving="OnCompletedGridLayoutAutoSaving">
|
|
<Columns>
|
|
<DxGridDataColumn FieldName="Id" Caption="ID"
|
|
SortIndex="0"
|
|
SortOrder="GridColumnSortOrder.Descending">
|
|
<CellDisplayTemplate Context="cellContext">
|
|
@((cellContext.DataItem as EnvelopeDto)?.Id)
|
|
</CellDisplayTemplate>
|
|
</DxGridDataColumn>
|
|
<DxGridDataColumn FieldName="Title" Caption="Titel">
|
|
<CellDisplayTemplate Context="cellContext">
|
|
<strong>@((cellContext.DataItem as EnvelopeDto)?.Title)</strong>
|
|
</CellDisplayTemplate>
|
|
</DxGridDataColumn>
|
|
<DxGridDataColumn FieldName="Status" Caption="Status">
|
|
<CellDisplayTemplate Context="cellContext">
|
|
@{
|
|
var envelope = cellContext.DataItem as EnvelopeDto;
|
|
if (envelope != null)
|
|
{
|
|
var statusInfo = GetStatusInfo(envelope.Status);
|
|
<div class="status-badge status-badge--@statusInfo.CssClass">
|
|
<span class="status-dot status-dot--@statusInfo.DotColor"></span>
|
|
@statusInfo.Label
|
|
</div>
|
|
}
|
|
}
|
|
</CellDisplayTemplate>
|
|
</DxGridDataColumn>
|
|
<DxGridDataColumn FieldName="EnvelopeReceivers" Caption="Empfänger">
|
|
<CellDisplayTemplate Context="cellContext">
|
|
@{
|
|
var envelope = cellContext.DataItem as EnvelopeDto;
|
|
if (envelope != null)
|
|
{
|
|
var receivers = envelope.EnvelopeReceivers?.ToList() ?? [];
|
|
var signed = receivers.Count(r => r.Signed);
|
|
var total = receivers.Count;
|
|
<div style="display: flex; align-items: center; gap: 0.5rem;">
|
|
<span style="font-size: 0.875rem; color: #6b7280;">
|
|
@signed / @total unterschrieben
|
|
</span>
|
|
@if (total > 0)
|
|
{
|
|
<div style="flex: 1; min-width: 60px; max-width: 120px; height: 6px; background: #e5e7eb; border-radius: 3px; overflow: hidden;">
|
|
<div style="height: 100%; background: linear-gradient(90deg, #81c784 0%, #66bb6a 100%); width: @((signed * 100.0 / total).ToString("F0"))%;"></div>
|
|
</div>
|
|
}
|
|
</div>
|
|
}
|
|
}
|
|
</CellDisplayTemplate>
|
|
</DxGridDataColumn>
|
|
<DxGridDataColumn FieldName="EnvelopeTypeTitle" Caption="Typ"
|
|
Width="120px" AllowSort="true" />
|
|
<DxGridDataColumn FieldName="AddedWhen" Caption="Erstellt"
|
|
DisplayFormat="{0:dd.MM.yyyy}" Width="110px" AllowSort="true" />
|
|
<DxGridDataColumn FieldName="ChangedWhen" Caption="Geändert am"
|
|
DisplayFormat="{0:dd.MM.yyyy}" Width="110px" AllowSort="true" />
|
|
</Columns>
|
|
<DetailRowTemplate Context="detailContext">
|
|
<div style="padding: 1rem; background: #f9fafb;">
|
|
<h6 style="font-weight: 600; color: #374151; margin-bottom: 0.75rem;">Empfänger</h6>
|
|
@{
|
|
var envelope = detailContext.DataItem as EnvelopeDto;
|
|
if (envelope?.EnvelopeReceivers?.Any() == true)
|
|
{
|
|
<div style="display: flex; flex-direction: column; gap: 0.5rem;">
|
|
@foreach (var receiver in envelope.EnvelopeReceivers)
|
|
{
|
|
<div style="display: flex; align-items: center; gap: 1rem; padding: 0.5rem; background: white; border-radius: 6px; border: 1px solid #e5e7eb;">
|
|
<span class="receiver-badge receiver-badge--@(receiver.Signed ? "signed" : "unsigned")" style="min-width: 100px;">
|
|
@if (receiver.Signed)
|
|
{
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 16 16">
|
|
<path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z" />
|
|
</svg>
|
|
<span>Unterschrieben</span>
|
|
}
|
|
else
|
|
{
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 16 16">
|
|
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
|
|
<path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />
|
|
</svg>
|
|
<span>Ausstehend</span>
|
|
}
|
|
</span>
|
|
<div style="flex: 1; font-size: 0.875rem;">
|
|
<strong style="color: #1f2937;">@receiver.Name</strong>
|
|
<span style="color: #6b7280; margin-left: 0.5rem;">@receiver.Receiver?.EmailAddress</span>
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
}
|
|
else
|
|
{
|
|
<p style="color: #9ca3af; font-size: 0.875rem; margin: 0;">Keine Empfänger</p>
|
|
}
|
|
}
|
|
</div>
|
|
</DetailRowTemplate>
|
|
</DxGrid>
|
|
}
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
|
|
@* ── PDF Vorschau Popup ────────────────────────────────────────────────── *@
|
|
<DxPopup @bind-Visible="@_previewVisible"
|
|
HeaderText="@($"Vorschau — {_selectedEnvelope?.Title} (#{_selectedEnvelope?.Id})")"
|
|
Width="80vw"
|
|
MaxWidth="80vw"
|
|
Height="90vh"
|
|
MaxHeight="90vh"
|
|
CloseOnOutsideClick="true"
|
|
ShowFooter="false"
|
|
CssClass="sender-preview-popup"
|
|
HeaderCssClass="sender-preview-popup__header"
|
|
BodyCssClass="sender-preview-popup__body"
|
|
Closed="OnPreviewClosed"
|
|
AllowResize="true"
|
|
ApplyBackgroundShading="true"
|
|
Scrollable="true"
|
|
AllowDrag=true
|
|
EnableAdaptivity=true
|
|
ShowHeader=true>
|
|
<BodyContentTemplate>
|
|
@if (_previewLoading)
|
|
{
|
|
<div class="sender-preview-state-wrap">
|
|
<div class="text-center">
|
|
<div class="spinner-border mb-3" style="width:3rem;height:3rem;" role="status">
|
|
<span class="visually-hidden">Lädt...</span>
|
|
</div>
|
|
<p style="color:#6b7280;font-size:0.875rem;">Dokument wird geladen…</p>
|
|
</div>
|
|
</div>
|
|
}
|
|
else if (_previewErrorMessage is not null)
|
|
{
|
|
<div class="sender-preview-state-wrap">
|
|
<div class="sender-preview-error-card">
|
|
<div class="sender-preview-error-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#dc2626" viewBox="0 0 16 16">
|
|
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
|
|
<path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z" />
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<p class="sender-preview-error-title">Dokument konnte nicht geladen werden</p>
|
|
<p class="sender-preview-error-msg">@_previewErrorMessage</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
else if (_previewPdfBytes is not null && _previewViewerMounted)
|
|
{
|
|
<div class="sender-preview-viewer-wrap">
|
|
<DxPdfViewer DocumentContent="@_previewPdfBytes"
|
|
ZoomLevel="-2"
|
|
IsSinglePagePreview="true"
|
|
CssClass="sender-preview-pdf-viewer" />
|
|
</div>
|
|
}
|
|
</BodyContentTemplate>
|
|
</DxPopup>
|
|
|
|
@code {
|
|
private IEnumerable<EnvelopeDto>? _allEnvelopes;
|
|
private IEnumerable<EnvelopeDto>? _activeEnvelopes;
|
|
private IEnumerable<EnvelopeDto>? _completedEnvelopes;
|
|
private EnvelopeDto? _selectedEnvelope;
|
|
private string _activeTab = "active";
|
|
private bool _isLoading = true;
|
|
private bool _isLoggingOut = false;
|
|
private string? _errorMessage;
|
|
private DxGrid? _gridActive;
|
|
private DxGrid? _gridCompleted;
|
|
|
|
// Logo config loaded from /api/CustomImages after auth
|
|
private EnvelopeGenerator.Server.Client.Services.CustomImageDto? _appLogo;
|
|
private EnvelopeGenerator.Server.Client.Services.CustomImageDto? _companyLogo;
|
|
|
|
// Preview popup
|
|
private bool _previewVisible = false;
|
|
private bool _previewLoading = false;
|
|
private bool _previewViewerMounted = false;
|
|
private byte[]? _previewPdfBytes = null;
|
|
private string? _previewErrorMessage = null;
|
|
|
|
// 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";
|
|
|
|
protected override async Task OnInitializedAsync()
|
|
{
|
|
var hasAccess = await AuthService.CheckSenderAccessAsync();
|
|
if (!hasAccess)
|
|
{
|
|
Navigation.NavigateTo($"/sender/login");
|
|
return;
|
|
}
|
|
|
|
// Load theme + DisplayName from server after authentication.
|
|
// Non-fatal: if this fails the page still loads with default theme.
|
|
// ThemeService.ScheduleSaveAsync() already logs errors internally.
|
|
try { await ThemeService.LoadFromServerAsync(); }
|
|
catch { /* swallow — default theme remains active */ }
|
|
|
|
// Load logo config — authenticated, so this should succeed
|
|
var logos = await CustomImagesService.GetAsync();
|
|
_appLogo = logos.App;
|
|
_companyLogo = logos.Company;
|
|
|
|
await LoadEnvelopesAsync();
|
|
}
|
|
|
|
async Task LoadEnvelopesAsync()
|
|
{
|
|
_isLoading = true;
|
|
_errorMessage = null;
|
|
await InvokeAsync(StateHasChanged);
|
|
|
|
try
|
|
{
|
|
_allEnvelopes = await EnvelopeService.GetAsync() ?? [];
|
|
|
|
// Split into active and completed based on status
|
|
var envelopes = _allEnvelopes.ToList();
|
|
_activeEnvelopes = envelopes.Where(e => ((EnvelopeStatus)e.Status).IsActive()).ToList();
|
|
_completedEnvelopes = envelopes.Where(e => ((EnvelopeStatus)e.Status).IsCompleted()).ToList();
|
|
}
|
|
catch (Exception ex)
|
|
{
|
|
_errorMessage = ex.Message;
|
|
}
|
|
finally
|
|
{
|
|
_isLoading = false;
|
|
await InvokeAsync(StateHasChanged);
|
|
}
|
|
}
|
|
|
|
async Task RefreshEnvelopes()
|
|
{
|
|
await LoadEnvelopesAsync();
|
|
}
|
|
|
|
void CreateEnvelope()
|
|
{
|
|
Navigation.NavigateTo("/sender/editor");
|
|
}
|
|
|
|
void EditEnvelope()
|
|
{
|
|
if (_selectedEnvelope == null) return;
|
|
// TODO: Navigate to envelope editor
|
|
}
|
|
|
|
void DeleteEnvelope()
|
|
{
|
|
if (_selectedEnvelope == null) return;
|
|
// TODO: Show delete confirmation dialog
|
|
}
|
|
|
|
async Task LogoutAsync()
|
|
{
|
|
_isLoggingOut = true;
|
|
await InvokeAsync(StateHasChanged);
|
|
UserPreferencesService.InvalidateCache();
|
|
await AuthService.LogoutSenderAsync();
|
|
Navigation.NavigateTo("/sender/login", forceLoad: true);
|
|
}
|
|
|
|
bool IsEnvelopeSent(EnvelopeDto envelope)
|
|
{
|
|
var status = (EnvelopeStatus)envelope.Status;
|
|
return status >= EnvelopeStatus.EnvelopeQueued;
|
|
}
|
|
|
|
(string Label, string CssClass, string DotColor) GetStatusInfo(EnvelopeStatus status)
|
|
{
|
|
return status switch
|
|
{
|
|
EnvelopeStatus.EnvelopePartlySigned => ("Teilweise unterschrieben", "partly-signed", "green"),
|
|
EnvelopeStatus.EnvelopeQueued => ("In Warteschlange", "queued", "orange"),
|
|
EnvelopeStatus.EnvelopeSent => ("Gesendet", "sent", "orange"),
|
|
EnvelopeStatus.EnvelopeCompletelySigned => ("Vollständig unterschrieben", "completed", "green"),
|
|
EnvelopeStatus.EnvelopeDeleted => ("Gelöscht", "deleted", "red"),
|
|
EnvelopeStatus.EnvelopeRejected => ("Abgelehnt", "rejected", "red"),
|
|
EnvelopeStatus.EnvelopeWithdrawn => ("Zurückgezogen", "withdrawn", "red"),
|
|
EnvelopeStatus.EnvelopeCreated => ("Erstellt", "created", "blue"),
|
|
EnvelopeStatus.EnvelopeSaved => ("Gespeichert", "saved", "blue"),
|
|
_ => ("Unbekannt", "unknown", "blue")
|
|
};
|
|
}
|
|
|
|
void OnCustomizeElement(GridCustomizeElementEventArgs e)
|
|
{
|
|
// Future: Add custom row coloring based on status if needed
|
|
}
|
|
|
|
// Single click: native DX selection handles the UI instantly.
|
|
// We only manage toggle: if the same row is clicked again, deselect.
|
|
void OnRowClick(GridRowClickEventArgs e)
|
|
{
|
|
var clicked = e.Grid.GetDataItem(e.VisibleIndex) as EnvelopeDto;
|
|
if (clicked == null) return;
|
|
|
|
if (_selectedEnvelope?.Id == clicked.Id)
|
|
{
|
|
// Same row clicked again → deselect
|
|
_selectedEnvelope = null;
|
|
e.Grid.DeselectDataItem(clicked);
|
|
}
|
|
// Different row: @bind-SelectedDataItem already updated _selectedEnvelope
|
|
}
|
|
|
|
// 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;
|
|
_ = OpenPreviewAsync(clicked);
|
|
}
|
|
|
|
async Task ShowPreview()
|
|
{
|
|
if (_selectedEnvelope == null) return;
|
|
await OpenPreviewAsync(_selectedEnvelope);
|
|
}
|
|
|
|
private async Task OpenPreviewAsync(EnvelopeDto envelope)
|
|
{
|
|
// Unmount the viewer first — let the previous instance fully dispose
|
|
_previewViewerMounted = false;
|
|
_previewPdfBytes = null;
|
|
_previewErrorMessage = null;
|
|
_previewLoading = true;
|
|
_previewVisible = true;
|
|
await InvokeAsync(StateHasChanged);
|
|
|
|
try
|
|
{
|
|
var user = EnvelopeAuthService.GetCurrentUser();
|
|
if (user?.Identity is null || !user.Identity.IsAuthenticated)
|
|
{
|
|
_previewErrorMessage = "Nicht authentifiziert. Bitte melden Sie sich erneut an.";
|
|
return;
|
|
}
|
|
|
|
_previewPdfBytes = await ReceiverPageDataService.GetDocumentOfSenderAsync(user, envelope.Id);
|
|
|
|
// PDF ready — mount the viewer now
|
|
_previewViewerMounted = true;
|
|
}
|
|
catch (DigitalData.Core.Exceptions.NotFoundException)
|
|
{
|
|
_previewErrorMessage = $"Das Dokument für Umschlag #{envelope.Id} wurde nicht gefunden oder Sie haben keinen Zugriff darauf.";
|
|
Logger.LogWarning("Preview: document not found for envelope {EnvelopeId}", envelope.Id);
|
|
}
|
|
catch (Exception ex)
|
|
{
|
|
_previewErrorMessage = $"Fehler beim Laden des Dokuments: {ex.Message}";
|
|
Logger.LogError(ex, "Preview: failed to load document for envelope {EnvelopeId}", envelope.Id);
|
|
}
|
|
finally
|
|
{
|
|
_previewLoading = false;
|
|
await InvokeAsync(StateHasChanged);
|
|
}
|
|
}
|
|
|
|
void OnPreviewClosed()
|
|
{
|
|
// Unmount the viewer first — prevent DevExpress async render from
|
|
// accessing the already-disposed byte array
|
|
_previewViewerMounted = false;
|
|
_ = InvokeAsync(async () =>
|
|
{
|
|
await Task.Yield(); // wait one render cycle for the viewer to be removed from the DOM
|
|
_previewPdfBytes = null;
|
|
_previewErrorMessage = null;
|
|
_previewLoading = false;
|
|
await InvokeAsync(StateHasChanged);
|
|
});
|
|
}
|
|
|
|
// ── Grid Layout Persistence ───────────────────────────────────────────────
|
|
// LayoutAutoLoading fires when the grid initializes — restore saved layout.
|
|
// LayoutAutoSaving fires when the user changes column order/width/sort — persist it.
|
|
// UserPreferencesService.GetAsync() uses the 1h in-memory cache → 0 HTTP on restore.
|
|
// UserPreferencesService.SaveGridLayoutAsync() merges the single key → 1 PUT.
|
|
|
|
async Task OnActiveGridLayoutAutoLoading(GridPersistentLayoutEventArgs e)
|
|
{
|
|
// Use cached preferences only — avoid HTTP during grid initialization.
|
|
// If cache is empty (LoadFromServerAsync failed), skip layout restore silently.
|
|
var prefs = UserPreferencesService.GetCached();
|
|
if (prefs is not null && prefs.GridLayouts.TryGetValue(GridKeyActive, out var json))
|
|
e.Layout = JsonSerializer.Deserialize<GridPersistentLayout>(json);
|
|
}
|
|
|
|
async Task OnActiveGridLayoutAutoSaving(GridPersistentLayoutEventArgs e)
|
|
{
|
|
try
|
|
{
|
|
var json = JsonSerializer.Serialize(e.Layout);
|
|
await UserPreferencesService.SaveGridLayoutAsync(GridKeyActive, json);
|
|
}
|
|
catch (Exception ex)
|
|
{
|
|
await JSRuntime.InvokeVoidAsync("console.warn", $"[Sender] Grid layout save failed: {ex.Message}");
|
|
}
|
|
}
|
|
|
|
async Task OnCompletedGridLayoutAutoLoading(GridPersistentLayoutEventArgs e)
|
|
{
|
|
var prefs = UserPreferencesService.GetCached();
|
|
if (prefs is not null && prefs.GridLayouts.TryGetValue(GridKeyCompleted, out var json))
|
|
e.Layout = JsonSerializer.Deserialize<GridPersistentLayout>(json);
|
|
}
|
|
|
|
async Task OnCompletedGridLayoutAutoSaving(GridPersistentLayoutEventArgs e)
|
|
{
|
|
var json = JsonSerializer.Serialize(e.Layout);
|
|
await UserPreferencesService.SaveGridLayoutAsync(GridKeyCompleted, json);
|
|
}
|
|
} |