Files
EnvelopeGenerator/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Components/Sender/PdfFileDropZone.razor
TekH b65098fafb Improve document upload UX and refactor wizard layout
Enhanced the `CreateEnvelopeWizardPopup` component:
- Added a new grid layout (`sender-create-wizard__body-layout`) to separate main content and side panel.
- Introduced a collapsible side panel for document upload and preview.
- Replaced old upload logic with `PdfFileDropZone` and added support for displaying document metadata (name, size) and replacement hints.
- Added asynchronous document preview rendering with `EnsureDocumentPreviewPreparedAsync`.

Localization updates:
- Added new localized strings for document upload hints in `de-DE`, `en-US`, and `fr-FR`.

CSS updates:
- Styled the new layout and side panel with transitions.
- Updated `PdfFileDropZone` styles for different states (e.g., document uploaded).

Refactored code for better maintainability and improved user feedback during document upload and preview preparation.
2026-11-10 19:29:33 +01:00

131 lines
3.3 KiB
Plaintext

@using Microsoft.AspNetCore.Components.Forms
<div class="sender-pdf-dropzone @DropZoneClass">
<div class="sender-pdf-dropzone__content">
@if (HasDocument)
{
@if (!string.IsNullOrWhiteSpace(DocumentName))
{
<div class="sender-pdf-dropzone__doc-name">@DocumentName</div>
}
@if (!string.IsNullOrWhiteSpace(DocumentSizeText))
{
<div class="sender-pdf-dropzone__doc-size">@DocumentSizeText</div>
}
@if (!string.IsNullOrWhiteSpace(UploadedHintText))
{
<div class="sender-pdf-dropzone__hint">@UploadedHintText</div>
}
}
else if (!string.IsNullOrWhiteSpace(CurrentActionText))
{
<div class="sender-pdf-dropzone__hint">@CurrentActionText</div>
}
</div>
<InputFile OnChange="OnFileSelectedAsync"
accept="@Accept"
disabled="@Disabled"
@ondragenter="OnDragEnter"
@ondragleave="OnDragLeave"
@ondragover="OnDragOver"
@ondrop="OnDrop"
class="sender-pdf-dropzone__input" />
</div>
@code {
[Parameter]
public bool Disabled { get; set; }
[Parameter]
public bool HasDocument { get; set; }
[Parameter]
public string Accept { get; set; } = ".pdf";
[Parameter]
public string UploadText { get; set; } = "PDF hochladen";
[Parameter]
public string ReplaceText { get; set; } = "PDF ersetzen";
[Parameter]
public string DragDropHintText { get; set; } = "Datei hierhin ziehen oder klicken";
[Parameter]
public string? DocumentName { get; set; }
[Parameter]
public string? DocumentSizeText { get; set; }
[Parameter]
public string UploadedHintText { get; set; } = "Zum Ersetzen klicken oder eine Datei hierher ziehen.";
[Parameter]
public EventCallback<InputFileChangeEventArgs> FileSelected { get; set; }
private int _dragDepth;
private bool _isDragActive;
private string CurrentActionText => HasDocument ? ReplaceText : UploadText;
private string DropZoneClass
{
get
{
if (Disabled)
return "sender-pdf-dropzone--disabled";
if (HasDocument)
return "sender-pdf-dropzone--has-document";
return _isDragActive ? "sender-pdf-dropzone--drag-active" : string.Empty;
}
}
private void OnDragEnter(DragEventArgs _)
{
if (Disabled)
return;
_dragDepth++;
_isDragActive = true;
}
private void OnDragLeave(DragEventArgs _)
{
if (Disabled)
return;
_dragDepth = Math.Max(0, _dragDepth - 1);
if (_dragDepth == 0)
_isDragActive = false;
}
private void OnDragOver(DragEventArgs _)
{
if (Disabled)
return;
_isDragActive = true;
}
private void OnDrop(DragEventArgs _)
{
_dragDepth = 0;
_isDragActive = false;
}
private async Task OnFileSelectedAsync(InputFileChangeEventArgs args)
{
_dragDepth = 0;
_isDragActive = false;
if (Disabled)
return;
if (FileSelected.HasDelegate)
await FileSelected.InvokeAsync(args);
}
}