diff --git a/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Components/Sender/CreateEnvelopeWizardPopup.razor b/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Components/Sender/CreateEnvelopeWizardPopup.razor index 89a0bd10..847673af 100644 --- a/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Components/Sender/CreateEnvelopeWizardPopup.razor +++ b/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Components/Sender/CreateEnvelopeWizardPopup.razor @@ -114,7 +114,7 @@ } else if (_recentReceiverSuggestions.Count > 0) { -
+
@foreach (var suggestion in _recentReceiverSuggestions) {
@if (_receivers.Count == 0) @@ -169,22 +173,47 @@ } else { -
- @foreach (var receiver in _receivers) - { -
-
-
@receiver.FullName
-
@receiver.EmailAddress
+
+ + + +
+ @if (tagContext.DataItem is CreateEnvelopeWizardReceiver receiver) + { + @receiver.FullName + @receiver.EmailAddress + } + else + { + @tagContext.DisplayText + } +
- -
- } + + +
+
+
} } @@ -289,6 +318,7 @@ private string _receiverName = string.Empty; private string _receiverEmail = string.Empty; private readonly List _receivers = []; + private IEnumerable _receiverTags = []; private readonly List _recentReceiverSuggestions = []; private bool _isLoadingRecentSuggestions; private bool _recentSuggestionsLoaded; @@ -330,6 +360,9 @@ { _isVisible = Visible; + if (_selectedEnvelopeTypeId is null && EnvelopeTypes.Count > 0) + _selectedEnvelopeTypeId = GetDefaultEnvelopeTypeId(); + if (Visible && !_previousVisible) ResetWizardState(); @@ -411,6 +444,7 @@ } _receivers.Add(new CreateEnvelopeWizardReceiver(fullName, email)); + _receiverTags = _receivers.Select(x => x.EmailAddress).ToList(); _receiverName = string.Empty; _receiverEmail = string.Empty; _validationMessage = null; @@ -423,6 +457,17 @@ return Task.CompletedTask; _receivers.Remove(receiver); + _receiverTags = _receivers.Select(x => x.EmailAddress).ToList(); + _validationMessage = null; + return Task.CompletedTask; + } + + private Task OnReceiverTagsChanged() + { + var selectedEmails = _receiverTags.ToHashSet(StringComparer.OrdinalIgnoreCase); + + _receivers.RemoveAll(x => !selectedEmails.Contains(x.EmailAddress)); + _receiverTags = _receivers.Select(x => x.EmailAddress).ToList(); _validationMessage = null; return Task.CompletedTask; } @@ -613,7 +658,7 @@ _isLoadingRecentSuggestions = true; try { - var suggestions = await ReceiverService.GetRecentReceiverSuggestionsAsync(); + var suggestions = await ReceiverService.GetRecentReceiverSuggestionsAsync(20); _recentReceiverSuggestions.Clear(); _recentReceiverSuggestions.AddRange(suggestions); _recentSuggestionsLoaded = true; @@ -644,6 +689,9 @@ { if (_currentStep == 0) { + if (_selectedEnvelopeTypeId is null && EnvelopeTypes.Count > 0) + _selectedEnvelopeTypeId = GetDefaultEnvelopeTypeId(); + if (string.IsNullOrWhiteSpace(_title)) { _validationMessage = L("SenderEditor_Validation_TitleRequired", "Bitte geben Sie einen Titel ein."); @@ -711,6 +759,7 @@ _receiverName = string.Empty; _receiverEmail = string.Empty; _receivers.Clear(); + _receiverTags = []; _recentReceiverSuggestions.Clear(); _isLoadingRecentSuggestions = false; _recentSuggestionsLoaded = false; diff --git a/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Services/ReceiverService.cs b/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Services/ReceiverService.cs index e11a058f..5ee5f20a 100644 --- a/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Services/ReceiverService.cs +++ b/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Services/ReceiverService.cs @@ -32,7 +32,7 @@ public class ReceiverService(IHttpClientFactory httpClientFactory) /// Fetches recent receiver suggestions for the authenticated sender. /// Calls GET /api/EnvelopeReceiver/recent-suggestions?take={take}. /// - public async Task> GetRecentReceiverSuggestionsAsync(int take = 5, CancellationToken cancel = default) + public async Task> GetRecentReceiverSuggestionsAsync(int take = 20, CancellationToken cancel = default) { using var http = httpClientFactory.CreateClient("EnvelopeGenerator.Server"); var url = $"/api/EnvelopeReceiver/recent-suggestions?take={take}"; diff --git a/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/sender-page.css b/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/sender-page.css index 5aac5f3f..3c78e7ee 100644 --- a/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/sender-page.css +++ b/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/sender-page.css @@ -1271,10 +1271,31 @@ justify-content: flex-end; } -.sender-create-wizard__add-receiver-btn.dxbl-btn { - min-width: 210px; +.sender-create-wizard__add-receiver-btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 0.4rem; + min-height: 36px; + min-width: 220px; font-weight: 700; - box-shadow: 0 8px 18px rgba(14, 116, 144, 0.22); + font-size: 0.84rem; + border: 1px solid rgba(14, 116, 144, 0.28); + border-radius: 8px; + background: rgba(236, 254, 255, 0.95); + color: #0f766e; + box-shadow: 0 6px 14px rgba(14, 116, 144, 0.15); + padding: 0.45rem 0.9rem; +} + +.sender-create-wizard__add-receiver-btn:hover:not(:disabled) { + background: rgba(207, 250, 254, 1); + color: #0f766e; +} + +.sender-create-wizard__add-receiver-btn:disabled { + opacity: 0.58; + cursor: not-allowed; } .sender-create-wizard__suggestions { @@ -1291,12 +1312,17 @@ .sender-create-wizard__suggestion-list { display: flex; - flex-wrap: wrap; + flex-wrap: nowrap; + overflow-x: auto; + overflow-y: hidden; + white-space: nowrap; gap: 0.45rem; + padding-bottom: 0.25rem; } .sender-create-wizard__suggestion-item { - display: inline-flex; + display: flex; + flex: 0 0 auto; flex-direction: column; align-items: flex-start; gap: 0.12rem; @@ -1308,6 +1334,54 @@ min-width: 0; } +.sender-create-wizard__receiver-tagbox-wrap { + display: flex; + flex-direction: column; + gap: 0.35rem; +} + +.sender-create-wizard__receiver-tagbox { + width: 100%; +} + +.sender-create-wizard__receiver-tag { + display: inline-flex; + align-items: center; + gap: 0.4rem; + padding: 0.18rem 0.45rem; + border-radius: 999px; + background: rgba(236, 254, 255, 0.95); + border: 1px solid rgba(14, 116, 144, 0.25); +} + +.sender-create-wizard__receiver-tag-name { + font-weight: 700; +} + +.sender-create-wizard__receiver-tag-email { + color: #64748b; + font-size: 0.78rem; +} + +.sender-create-wizard__receiver-tag-remove { + border: 0; + background: transparent; + color: #0f766e; + font-size: 0.76rem; + font-weight: 700; + line-height: 1; + padding: 0; + width: 1rem; + height: 1rem; + cursor: pointer; +} + +.sender-create-wizard__tagbox-empty { + height: 0; + padding: 0; + margin: 0; +} + .sender-create-wizard__suggestion-item:disabled { opacity: 0.58; }