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:
parent
84f4990ff4
commit
e22b6f304e
|
|
@ -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)
|
||||
{
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
|
|||
Loading…
Reference in New Issue