Add phone number support for receivers in UI

Added functionality to display a receiver's phone number in the
sender-receiver chip if provided. Introduced a new input field
in the receiver popup for entering an optional phone number.

Updated the `ReceiverDraft` model and `_receivers` list to
include and store phone numbers. Modified methods to handle
phone number input and saving. Added CSS styles for displaying
the phone number in the sender-receiver chip.
This commit is contained in:
2026-07-01 17:16:15 +02:00
parent 3ff3373b27
commit bbbfa4de01
2 changed files with 34 additions and 2 deletions

View File

@@ -74,6 +74,10 @@
<div class="sender-receiver-chip__body">
<div class="sender-receiver-chip__name">@receiver.FullName</div>
<div class="sender-receiver-chip__email">@receiver.Email</div>
@if (!string.IsNullOrWhiteSpace(receiver.PhoneNumber))
{
<div class="sender-receiver-chip__phone">@receiver.PhoneNumber</div>
}
</div>
<button class="pdf-toolbar__btn pdf-toolbar__btn--signature-change sender-toolbar-action-btn sender-toolbar-action-btn--compact"
@@ -279,6 +283,16 @@
CssClass="w-100" />
</div>
<div class="sender-receiver-popup__field">
<div class="sender-receiver-popup__label">Telefonnummer (optional)</div>
<DxTextBox Text="@_receiverDraftPhoneNumber"
TextChanged="OnReceiverPhoneNumberChanged"
NullText="+49 170 1234567"
ClearButtonDisplayMode="DataEditorClearButtonDisplayMode.Auto"
BindValueMode="BindValueMode.OnInput"
CssClass="w-100" />
</div>
<div class="sender-receiver-popup__field">
<div class="sender-receiver-popup__label">E-Mail-Adresse</div>
<div @onkeydown="OnReceiverEmailKeyDownAsync">
@@ -357,6 +371,7 @@
bool _receiverPopupVisible;
string _receiverDraftName = string.Empty;
string _receiverDraftEmail = string.Empty;
string _receiverDraftPhoneNumber = string.Empty;
string? _selectedReceiverEmailSuggestion;
string? _receiverPopupValidationMessage;
bool _isReceiverEmailSearchRunning;
@@ -476,6 +491,7 @@
{
_receiverDraftName = string.Empty;
_receiverDraftEmail = string.Empty;
_receiverDraftPhoneNumber = string.Empty;
_selectedReceiverEmailSuggestion = null;
_receiverPopupValidationMessage = null;
_receiverEmailSuggestions.Clear();
@@ -496,6 +512,12 @@
_receiverPopupValidationMessage = null;
}
void OnReceiverPhoneNumberChanged(string? value)
{
_receiverDraftPhoneNumber = value ?? string.Empty;
_receiverPopupValidationMessage = null;
}
async Task OnReceiverEmailKeyDownAsync(KeyboardEventArgs e)
{
if (_receiverEmailSuggestions.Count == 0)
@@ -605,6 +627,7 @@
{
var fullName = _receiverDraftName.Trim();
var email = _receiverDraftEmail.Trim();
var phoneNumber = _receiverDraftPhoneNumber.Trim();
if (string.IsNullOrWhiteSpace(fullName))
{
@@ -630,7 +653,7 @@
return Task.CompletedTask;
}
_receivers.Add(new ReceiverDraft(Guid.NewGuid(), fullName, email));
_receivers.Add(new ReceiverDraft(Guid.NewGuid(), fullName, email, phoneNumber));
CloseAddReceiverPopup();
return Task.CompletedTask;
}
@@ -656,5 +679,5 @@
record OverlayCoords(double RelX, double RelY, double ContainerW, double ContainerH);
record ReceiverDraft(Guid Id, string FullName, string Email);
record ReceiverDraft(Guid Id, string FullName, string Email, string PhoneNumber);
}

View File

@@ -735,6 +735,15 @@ body.resizing {
text-overflow: ellipsis;
}
.sender-receiver-chip__phone {
margin-top: 0.15rem;
font-size: 0.72rem;
color: #64748b;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sender-receiver-popup .dxbl-modal {
border-radius: 18px;
}