Enhance grid UI and refactor boot overlay logic
- Updated `MappingProfile.cs` to add detailed mapping for `Envelope` to `EnvelopeDto`, including `EnvelopeTypeTitle`. - Added a grid persistence hint banner in `EnvelopeSenderPage.razor` with an SVG icon and German message. - Introduced three new columns (`EnvelopeTypeTitle`, `AddedWhen`, `ChangedWhen`) to the grid in `EnvelopeSenderPage.razor`. - Refactored boot overlay removal logic in `App.razor` into a reusable function `sfRemoveBootOverlay`. - Simplified event handling for overlay removal and fallback logic in `App.razor`. - Adjusted `.sender-grid-wrapper` padding in `sender-page.css` and added styles for the new grid persistence hint banner.
This commit is contained in:
@@ -28,7 +28,9 @@ public class MappingProfile : Profile
|
||||
CreateMap<DocReceiverElement, DocReceiverElementDto>();
|
||||
CreateMap<DocumentStatus, DocumentStatusDto>();
|
||||
CreateMap<EmailTemplate, EmailTemplateDto>();
|
||||
CreateMap<Envelope, EnvelopeDto>();
|
||||
CreateMap<Envelope, EnvelopeDto>()
|
||||
.ForMember(dest => dest.EnvelopeTypeTitle,
|
||||
opt => opt.MapFrom(src => src.Type != null ? src.Type.Title : null));
|
||||
CreateMap<Document, DocumentDto>();
|
||||
CreateMap<History, HistoryDto>().ForMember(dest => dest.ActionDate, opt => opt.MapFrom(src => src.ChangedWhen));
|
||||
CreateMap<History, HistoryCreateDto>().ForMember(dest => dest.ActionDate, opt => opt.MapFrom(src => src.ChangedWhen));
|
||||
|
||||
@@ -147,6 +147,15 @@
|
||||
</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"
|
||||
@@ -210,8 +219,14 @@
|
||||
</div>
|
||||
}
|
||||
}
|
||||
</CellDisplayTemplate>
|
||||
</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;">
|
||||
@@ -312,6 +327,12 @@
|
||||
}
|
||||
</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;">
|
||||
|
||||
@@ -44,23 +44,16 @@
|
||||
<script src="js/signflow-theme.js"></script>
|
||||
<script src="_framework/blazor.web.js"></script>
|
||||
<script>
|
||||
// Remove the boot overlay once Blazor has started and enhanced navigation is active.
|
||||
Blazor.addEventListener('enhancedload', function onFirstLoad() {
|
||||
var overlay = document.getElementById('sf-boot-overlay');
|
||||
if (overlay) overlay.style.opacity = '0';
|
||||
setTimeout(function () { if (overlay) overlay.remove(); }, 250);
|
||||
Blazor.removeEventListener('enhancedload', onFirstLoad);
|
||||
});
|
||||
// Also remove when WASM circuit is ready (for non-enhanced pages like /sender)
|
||||
document.addEventListener('blazor-circuit-connected', function () {
|
||||
function sfRemoveBootOverlay() {
|
||||
var overlay = document.getElementById('sf-boot-overlay');
|
||||
if (overlay) { overlay.style.opacity = '0'; setTimeout(function () { if (overlay) overlay.remove(); }, 250); }
|
||||
}, { once: true });
|
||||
}
|
||||
// Remove on every enhanced navigation (covers both WASM and Server render modes).
|
||||
Blazor.addEventListener('enhancedload', sfRemoveBootOverlay);
|
||||
// Also remove when WASM circuit is ready (for non-enhanced pages like /sender)
|
||||
document.addEventListener('blazor-circuit-connected', sfRemoveBootOverlay, { once: true });
|
||||
// Fallback: remove after 4s regardless
|
||||
setTimeout(function () {
|
||||
var overlay = document.getElementById('sf-boot-overlay');
|
||||
if (overlay) overlay.remove();
|
||||
}, 4000);
|
||||
setTimeout(sfRemoveBootOverlay, 4000);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
|
||||
@@ -199,7 +199,20 @@
|
||||
}
|
||||
|
||||
.sender-grid-wrapper {
|
||||
padding: 1.5rem 2rem 2rem;
|
||||
padding: 0 2rem 2rem; /* top padding removed — hint banner provides top spacing */
|
||||
}
|
||||
|
||||
/* ── Grid persistence hint banner ─────────────────────────────────────────── */
|
||||
.sf-grid-persistence-hint {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 6px 2rem;
|
||||
font-size: 0.72rem;
|
||||
color: rgba(126, 34, 206, 0.65);
|
||||
background: rgba(126, 34, 206, 0.04);
|
||||
border-bottom: 1px solid rgba(126, 34, 206, 0.08);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/* Hide DevExpress empty cells */
|
||||
|
||||
Reference in New Issue
Block a user