AppStd/EnvelopeGenerator
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Enhance signature handling and annotation features

Browse Source 
- Added dependency injection for `AnnotationService`, `DocumentService`, and `AuthService` in `ReportViewer.razor`.
- Improved signature button logic with dynamic appearance and feedback.
- Introduced annotation checkbox overlays for marking signature fields.
- Refactored signature saving and application logic into `SaveSignatureAsync` and `SubmitSignaturesAsync`.
- Added `BuildFreshBaseReport` and `AddAnnotationPlaceholders` for dynamic report creation.
- Implemented annotation-specific signature placement with `AddSignatureAtAnnotation`.
- Enhanced state management for annotations and signature overlays.
- Updated `app.css` with styles for annotation checkboxes.
- Added cache-control headers and versioned JavaScript in `index.html`.
- Improved `receiver-signature.js` with annotation checkbox management, optimized signature pad logic, and debugging utilities.
- Performed general code cleanup and optimization for maintainability.
This commit is contained in:
tekh
2026-05-31 16:38:41 +02:00
parent a668dfa3eb
commit 614a275740
4 changed files with 594 additions and 243 deletions
Download Patch File Download Diff File Expand all files Collapse all files

323
EnvelopeGenerator.ReceiverUI/Pages/ReportViewer.razor
View File

@@ -17,7 +17,10 @@
@using DevExpress.Blazor.Reporting
@using Microsoft.Extensions.Options
@using EnvelopeGenerator.ReceiverUI.Options
@using EnvelopeGenerator.ReceiverUI.Models
@implements IDisposable
@inject IJSRuntime JSRuntime
@inject AnnotationService AnnotationService
@inject IOptions<ApiOptions> AppOptions
@inject NavigationManager Navigation
@inject InMemoryReportStorageWebExtension ReportStorage
@@ -43,10 +46,31 @@
@if(!string.IsNullOrWhiteSpace(SignatureValidationMessage)) {
<div class="text-danger mb-2">@SignatureValidationMessage</div>
}
<div class="d-flex gap-2 flex-wrap">
<button class="btn btn-primary" @onclick="OpenSignaturePopupAsync">
@(SignatureApplied ? "Unterschrift erneuern" : "Unterschrift hinzufuegen")
<div class="d-flex gap-2 flex-wrap align-items-center">
<button class="btn @(_capturedSignature is not null ? "btn-outline-success" : "btn-primary")" @onclick="OpenSignaturePopupAsync">
@if (_capturedSignature is not null) {
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="me-1" 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>Unterschrift gespeichert</span>
} else {
<span>Unterschrift erstellen</span>
}
</button>
@if (_annotations.Count > 0) {
@if (_capturedSignature is not null && !SignatureApplied) {
<span class="text-muted small fst-italic align-self-center">
@_checkedAnnotations.Count von @_annotations.Count @(_annotations.Count == 1 ? "Feld" : "Felder") markiert
</span>
<button class="btn btn-primary" @onclick="SubmitSignaturesAsync">
Unterschriften anwenden
</button>
} else if (!SignatureApplied) {
<span class="text-muted small fst-italic align-self-center">
Bitte zuerst eine Unterschrift erstellen, dann die Felder im Dokument markieren.
</span>
}
}
<button class="btn btn-success" disabled="@(!SignatureApplied)" @onclick="ExportSignedPdfAsync">Signiertes PDF exportieren</button>
@if (!string.IsNullOrWhiteSpace(EnvelopeKey)) {
<button class="btn btn-outline-danger ms-auto" @onclick="LogoutAsync" disabled="@IsLoggingOut" title="Abmelden">
@@ -135,7 +159,7 @@
<FooterContentTemplate>
<div class="d-flex gap-2 flex-wrap justify-content-end w-100">
<button class="btn btn-outline-secondary" @onclick="RenewSignatureAsync">Unterschrift erneuern</button>
<button class="btn btn-primary" @onclick="ApplySignatureAsync">Zum Bericht hinzufuegen</button>
<button class="btn btn-primary" @onclick="SaveSignatureAsync">Speichern</button>
<button class="btn btn-secondary" @onclick="CloseSignaturePopup">Schliessen</button>
</div>
</FooterContentTemplate>
@@ -151,38 +175,47 @@
@code {
const string SignatureTabDraw = "draw";
const string SignatureTabText = "text";
const string SignatureTabImage = "image";
const string DrawCanvasId = "receiver-signature-pad";
const string TypedCanvasId = "receiver-typed-signature-pad";
const string ImageInputId = "receiver-signature-image-input";
const string ImageCanvasId = "receiver-image-signature-pad";
const string SignatureTabDraw = "draw";
const string SignatureTabText = "text";
const string SignatureTabImage = "image";
const string DrawCanvasId = "receiver-signature-pad";
const string TypedCanvasId = "receiver-typed-signature-pad";
const string ImageInputId = "receiver-signature-image-input";
const string ImageCanvasId = "receiver-image-signature-pad";
readonly (string Text, string Value)[] TypedSignatureFonts = {
("Brush Script", "'Brush Script MT', cursive"),
("Segoe Script", "'Segoe Script', cursive"),
("Lucida Handwriting", "'Lucida Handwriting', cursive"),
("Comic Sans", "'Comic Sans MS', cursive"),
("Cursive", "cursive")
};
readonly (string Text, string Value)[] TypedSignatureFonts = {
("Brush Script", "'Brush Script MT', cursive"),
("Segoe Script", "'Segoe Script', cursive"),
("Lucida Handwriting", "'Lucida Handwriting', cursive"),
("Comic Sans", "'Comic Sans MS', cursive"),
("Cursive", "cursive")
};
[Parameter] public string? EnvelopeKey { get; set; }
[Parameter] public string? EnvelopeKey { get; set; }
DxReportViewer? reportViewer;
XtraReport? Report;
bool SignatureApplied;
bool SignaturePopupVisible;
string? SignatureValidationMessage;
string? PopupValidationMessage;
string ActiveSignatureTab = SignatureTabDraw;
string TypedSignatureText = string.Empty;
string TypedSignatureFont = "'Brush Script MT', cursive";
string SignerFullName = string.Empty;
string SignerPosition = string.Empty;
string SignaturePlace = string.Empty;
int ViewerKey;
bool IsLoggingOut;
DxReportViewer? reportViewer;
XtraReport? Report;
bool SignatureApplied;
bool SignaturePopupVisible;
string? SignatureValidationMessage;
string? PopupValidationMessage;
string ActiveSignatureTab = SignatureTabDraw;
string TypedSignatureText = string.Empty;
string TypedSignatureFont = "'Brush Script MT', cursive";
string SignerFullName = string.Empty;
string SignerPosition = string.Empty;
string SignaturePlace = string.Empty;
int ViewerKey;
bool IsLoggingOut;
IReadOnlyList<AnnotationDto> _annotations = [];
record SignatureCapture(string DataUrl, string FullName, string Position, string Place);
SignatureCapture? _capturedSignature;
byte[]? _basePdfBytes;
// annotation IDs the user has checked via overlay checkboxes
readonly HashSet<long> _checkedAnnotations = [];
DotNetObjectReference<ReportViewer>? _dotNetRef;
int _lastOverlayViewerKey = -1;
async Task LogoutAsync() {
if (string.IsNullOrWhiteSpace(EnvelopeKey) || IsLoggingOut) return;
@@ -202,41 +235,39 @@
}
}
_annotations = await AnnotationService.GetAnnotationsAsync(EnvelopeKey ?? "fake");
if (!AppOptions.Value.ForceToUseFakeDocument && !string.IsNullOrWhiteSpace(EnvelopeKey)) {
var (pdfBytes, _) = await DocumentService.GetDocumentAsync(EnvelopeKey);
if (pdfBytes is { Length: > 0 }) {
var report = new XtraReport();
var detail = new DevExpress.XtraReports.UI.DetailBand();
report.Bands.Add(detail);
detail.Controls.Add(new DevExpress.XtraReports.UI.XRPdfContent { Source = pdfBytes, GenerateOwnPages = true });
ReportStorage.SetData(report, EnvelopeKey);
Report = ReportStorage.TryGetReport(EnvelopeKey, out var stored) ? stored : report;
return;
}
if (pdfBytes is { Length: > 0 })
_basePdfBytes = pdfBytes;
}
Report = CreateReportInstance();
var initialReport = BuildFreshBaseReport();
Report = initialReport;
}
async Task<XtraReport?> BuildPdfReportAsync(string key) {
Console.WriteLine("BuildPdfReportAsync is invoked..");
var (pdfBytes, _) = await DocumentService.GetDocumentAsync(key);
Console.WriteLine($"[BuildPdfReport] key={key}, pdfBytes={pdfBytes?.Length ?? 0}");
protected override async Task OnAfterRenderAsync(bool firstRender) {
if (firstRender)
_dotNetRef = DotNetObjectReference.Create(this);
if (pdfBytes is not { Length: > 0 })
return CreateReportInstance();
if (Report is not null && _annotations.Count > 0
&& _capturedSignature is not null && !SignatureApplied
&& _lastOverlayViewerKey != ViewerKey) {
_lastOverlayViewerKey = ViewerKey;
await JSRuntime.InvokeVoidAsync(
"receiverSignature.installAnnotationCheckboxes",
_annotations, _checkedAnnotations.ToArray(), _dotNetRef);
}
}
var report = new XtraReport();
var detail = new DevExpress.XtraReports.UI.DetailBand();
report.Bands.Add(detail);
var pdfContent = new DevExpress.XtraReports.UI.XRPdfContent { Source = pdfBytes, GenerateOwnPages = true };
detail.Controls.Add(pdfContent);
Console.WriteLine($"[BuildPdfReport] XRPdfContent added, Source length={pdfContent.Source?.Length ?? 0}");
ReportStorage.SetData(report, key);
var result = ReportStorage.TryGetReport(key, out var stored) ? stored : report;
Console.WriteLine($"[BuildPdfReport] TryGetReport success={stored is not null}, bands={result?.Bands?.Count}");
return result;
[JSInvokable]
public async Task OnAnnotationToggled(long annotationId, bool isChecked) {
if (isChecked)
_checkedAnnotations.Add(annotationId);
else
_checkedAnnotations.Remove(annotationId);
await InvokeAsync(StateHasChanged);
}
async Task OpenSignaturePopupAsync() {
@@ -300,30 +331,61 @@
await JSRuntime.InvokeVoidAsync("receiverSignature.renderTypedSignature", TypedCanvasId, TypedSignatureText, TypedSignatureFont);
}
async Task ApplySignatureAsync() {
if(string.IsNullOrWhiteSpace(SignerFullName)) {
async Task SaveSignatureAsync() {
if (string.IsNullOrWhiteSpace(SignerFullName)) {
PopupValidationMessage = "Bitte geben Sie Vor- und Nachname ein.";
return;
}
if(string.IsNullOrWhiteSpace(SignaturePlace)) {
if (string.IsNullOrWhiteSpace(SignaturePlace)) {
PopupValidationMessage = "Bitte geben Sie den Ort ein.";
return;
}
var signatureDataUrl = await GetActiveSignatureDataUrlAsync();
if(string.IsNullOrWhiteSpace(signatureDataUrl)) {
if (string.IsNullOrWhiteSpace(signatureDataUrl)) {
PopupValidationMessage = "Die Unterschrift ist fuer den PDF-Export erforderlich.";
return;
}
PopupValidationMessage = null;
SignatureValidationMessage = null;
Report = CreateSignedReportInstance(signatureDataUrl, SignerFullName.Trim(), SignerPosition.Trim(), SignaturePlace.Trim());
SignatureApplied = true;
_capturedSignature = new(signatureDataUrl, SignerFullName.Trim(), SignerPosition.Trim(), SignaturePlace.Trim());
// If no annotations, apply immediately (no checkbox step needed)
if (_annotations.Count == 0) {
var freshReport = BuildFreshBaseReport();
AddSignature(freshReport, _capturedSignature.DataUrl, _capturedSignature.FullName, _capturedSignature.Position, _capturedSignature.Place);
Report = freshReport;
SignatureApplied = true;
SignaturePopupVisible = false;
ViewerKey++;
return;
}
// Close popup; checkboxes will appear on the PDF via OnAfterRenderAsync
SignaturePopupVisible = false;
_lastOverlayViewerKey = -1; // force overlay reinstall
await InvokeAsync(StateHasChanged);
}
async Task SubmitSignaturesAsync() {
if (_checkedAnnotations.Count == 0) {
SignatureValidationMessage = "Bitte markieren Sie mindestens ein Unterschriftsfeld im Dokument.";
return;
}
if (_checkedAnnotations.Count < _annotations.Count) {
SignatureValidationMessage = $"Bitte markieren Sie alle {_annotations.Count} Unterschriftsfelder. Noch {_annotations.Count - _checkedAnnotations.Count} offen.";
return;
}
SignatureValidationMessage = null;
var freshReport = BuildFreshBaseReport();
foreach (var ann in _annotations)
AddSignatureAtAnnotation(freshReport, ann, _capturedSignature!.DataUrl, _capturedSignature.FullName, _capturedSignature.Position, _capturedSignature.Place);
Report = freshReport;
SignatureApplied = true;
ViewerKey++;
await InvokeAsync(StateHasChanged);
}
async Task<string?> GetActiveSignatureDataUrlAsync() {
@@ -352,19 +414,60 @@
}
}
XtraReport BuildFreshBaseReport() {
if (_basePdfBytes is { Length: > 0 }) {
var report = new XtraReport();
var detail = new DevExpress.XtraReports.UI.DetailBand();
report.Bands.Add(detail);
detail.Controls.Add(new DevExpress.XtraReports.UI.XRPdfContent { Source = _basePdfBytes, GenerateOwnPages = true });
return report;
}
return CreateReportInstance();
}
static void AddAnnotationPlaceholders(XtraReport report, IReadOnlyList<AnnotationDto> annotations) {
var bottomMargin = report.Bands.OfType<BottomMarginBand>().FirstOrDefault();
if (bottomMargin is null) {
bottomMargin = new BottomMarginBand();
report.Bands.Add(bottomMargin);
}
const float sigWidth = 230F;
const float sigHeight = 154F;
const float bottomPad = 6F;
const float defaultTopPad = 8F;
const float maxBandHeight = 210F;
float requiredHeight = defaultTopPad + sigHeight + bottomPad;
bottomMargin.HeightF = Math.Min(maxBandHeight, Math.Max(bottomMargin.HeightF, requiredHeight));
float topPad = Math.Max(0F, bottomMargin.HeightF - bottomPad - sigHeight);
foreach (var ann in annotations) {
float sigX = (float)(ann.X);
var annotId = ann.Id.ToString();
var placeholder = new XRLabel {
Name = $"receiverSignaturePlaceholder_{annotId}",
Text = "\u270e Bitte unterschreiben",
BoundsF = new RectangleF(sigX, topPad, sigWidth, sigHeight),
Borders = BorderSide.All,
BorderColor = System.Drawing.Color.FromArgb(230, 81, 0),
BackColor = System.Drawing.Color.FromArgb(30, 255, 236, 153),
Font = new DXFont("Open Sans", 10F, DXFontStyle.Regular),
ForeColor = System.Drawing.Color.FromArgb(94, 38, 0),
TextAlignment = TextAlignment.MiddleCenter
};
bottomMargin.Controls.Add(placeholder);
}
}
XtraReport CreateReportInstance() {
return ReportStorage.TryGetReport("LargeDatasetReport", out var savedReport)
? savedReport
: PredefinedReports.ReportsFactory.GetReport("LargeDatasetReport");
}
XtraReport CreateSignedReportInstance(string signatureDataUrl, string signerFullName, string signerPosition, string signaturePlace) {
var baseReportName = string.IsNullOrWhiteSpace(EnvelopeKey) ? "LargeDatasetReport" : EnvelopeKey;
var report = ReportStorage.TryGetReport(baseReportName, out var stored) ? stored : CreateReportInstance();
AddSignature(report, signatureDataUrl, signerFullName, signerPosition, signaturePlace);
return report;
}
static void AddSignature(XtraReport report, string signatureDataUrl, string signerFullName, string signerPosition, string signaturePlace) {
var imageBytes = Convert.FromBase64String(signatureDataUrl[(signatureDataUrl.IndexOf(',') + 1)..]);
using var imageStream = new MemoryStream(imageBytes);
@@ -434,5 +537,73 @@
foreach(var control in controls)
bottomMargin.Controls.Remove(control);
}
static void AddSignatureAtAnnotation(XtraReport report, AnnotationDto? annotation, string signatureDataUrl, string signerFullName, string signerPosition, string signaturePlace) {
var imageBytes = Convert.FromBase64String(signatureDataUrl[(signatureDataUrl.IndexOf(',') + 1)..]);
using var imageStream = new MemoryStream(imageBytes);
var imageSource = new ImageSource(DXImage.FromStream(imageStream));
var bottomMargin = report.Bands.OfType<BottomMarginBand>().FirstOrDefault();
if (bottomMargin is null) {
bottomMargin = new BottomMarginBand();
report.Bands.Add(bottomMargin);
}
var annotId = annotation?.Id.ToString() ?? "0";
RemoveExistingSignatureById(bottomMargin, annotId);
const float sigWidth = 230F;
const float sigImgHeight = 70F;
const float infoHeight = 65F;
const float innerGap = 5F;
const float bottomPad = 6F;
const float defaultTopPad = 8F;
const float maxBandHeight = 210F;
float sigX = (float)(annotation?.X ?? 390.0);
float requiredHeight = defaultTopPad + sigImgHeight + innerGap + infoHeight + bottomPad;
bottomMargin.HeightF = Math.Min(maxBandHeight, Math.Max(bottomMargin.HeightF, requiredHeight));
float topPad = Math.Max(0F, bottomMargin.HeightF - bottomPad - infoHeight - innerGap - sigImgHeight);
float imageY = topPad;
float labelY = imageY + sigImgHeight + innerGap;
var signatureInformation = string.IsNullOrWhiteSpace(signerPosition)
? $"Empfaengerunterschrift\n{signerFullName}\n{signaturePlace}, {DateTime.Now:d}"
: $"Empfaengerunterschrift\n{signerFullName}\n{signerPosition}\n{signaturePlace}, {DateTime.Now:d}";
var signature = new XRPictureBox {
Name = $"receiverSignatureImage_{annotId}",
ImageSource = imageSource,
BoundsF = new RectangleF(sigX, imageY, sigWidth, sigImgHeight),
Sizing = ImageSizeMode.ZoomImage,
Borders = BorderSide.Bottom,
BorderColor = System.Drawing.Color.FromArgb(73, 80, 87)
};
var signatureLabel = new XRLabel {
Name = $"receiverSignatureLabel_{annotId}",
Text = signatureInformation,
Multiline = true,
BoundsF = new RectangleF(sigX, labelY, sigWidth, infoHeight),
Font = new DXFont("Open Sans", 8F, DXFontStyle.Regular),
ForeColor = System.Drawing.Color.FromArgb(73, 80, 87),
TextAlignment = TextAlignment.TopLeft
};
bottomMargin.Controls.AddRange(new XRControl[] { signature, signatureLabel });
}
static void RemoveExistingSignatureById(BottomMarginBand bottomMargin, string annotId) {
var controls = bottomMargin.Controls
.Cast<XRControl>()
.Where(c => c.Name == $"receiverSignatureImage_{annotId}" || c.Name == $"receiverSignatureLabel_{annotId}")
.ToArray();
foreach (var c in controls)
bottomMargin.Controls.Remove(c);
}
public void Dispose() {
_dotNetRef?.Dispose();
}
}