Add scroll-to-item support to MgCardView component

- Introduced `Height`, `ScrollToItem`, and `ItemKeySelector` parameters to MgCardView for scroll targeting and internal scroll area.
- Cards now have stable DOM ids for precise JS-based scrolling.
- Added mgCardView.js with smooth scroll logic; included script in app.
- Updated CSS for scrollable card area.
- Updated MeasuringOut.razor to use new scroll features and fixed time format.
This commit is contained in:
Loretta 2026-03-23 05:32:15 +01:00
parent 84f4990ff4
commit e22b6f304e
3 changed files with 10 additions and 5 deletions

View File

@ -58,8 +58,11 @@
<DxTabPage Text="Napi feladatok">
<div class="p-3">
<MgCardView TItem="OrderDto" Data="@FilteredOrders"
ShowFilterPanel="true"
OnCardClick="NavigateToMeasuringTab">
ShowFilterPanel="true"
OnCardClick="NavigateToMeasuringTab"
ScrollToItem="@SelectedOrder"
ItemKeySelector="o => o.Id"
Height="calc(100vh - 220px)">
<FilterPanel>
<DxTagBox Data="@(Enum.GetValues<MeasuringStatus>())"
NullText="Összes státusz"
@ -73,7 +76,7 @@
<span class="badge @GetOrderStatusBadgeCssClass(context.MeasuringStatus)">@GetOrderStatusText(context.MeasuringStatus)</span>
</div>
<div class="text-muted small mb-2">
<strong>@context.DateOfReceiptOrCreated.ToString("H:mm")</strong> — @context.Customer.Company
<strong>@context.DateOfReceiptOrCreated.ToString("HH:mm")</strong> — @context.Customer.Company
</div>
@foreach (var item in context.OrderItemDtos)
{

View File

@ -26,6 +26,7 @@
<body class="dxbl-theme-fluent">
<Routes @rendermode="InteractiveWebAssembly" />
<script src="_content/AyCode.Blazor.Components/js/mgGridInfoPanel.js"></script>
<script src="_content/AyCode.Blazor.Components/js/mgCardView.js"></script>
<script src="_content/AyCode.Blazor.Components/js/lazyContentObserver.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
<script>

View File

@ -25,8 +25,9 @@
<div id="app">Loading...</div>
<script src="_framework/blazor.webview.js" autostart="false"></script>
<script src="_content/AyCode.Blazor.Components/js/mgGridInfoPanel.js"></script>
<script src="_content/AyCode.Blazor.Components/js/lazyContentObserver.js"></script>
<script src="_content/AyCode.Blazor.Components/js/mgGridInfoPanel.js"></script>
<script src="_content/AyCode.Blazor.Components/js/mgCardView.js"></script>
<script src="_content/AyCode.Blazor.Components/js/lazyContentObserver.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
<script>
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';