Adam
/
FruitBankHybridApp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
FruitBankHybrid.Shared/Pages/MeasuringOut.razor
View File

@ -59,7 +59,10 @@
<div class="p-3"> <div class="p-3">
<MgCardView TItem="OrderDto" Data="@FilteredOrders" <MgCardView TItem="OrderDto" Data="@FilteredOrders"
ShowFilterPanel="true" ShowFilterPanel="true"
OnCardClick="NavigateToMeasuringTab"> OnCardClick="NavigateToMeasuringTab"
ScrollToItem="@SelectedOrder"
ItemKeySelector="o => o.Id"
Height="calc(100vh - 220px)">
<FilterPanel> <FilterPanel>
<DxTagBox Data="@(Enum.GetValues<MeasuringStatus>())" <DxTagBox Data="@(Enum.GetValues<MeasuringStatus>())"
NullText="Összes státusz" NullText="Összes státusz"
@ -73,7 +76,7 @@
<span class="badge @GetOrderStatusBadgeCssClass(context.MeasuringStatus)">@GetOrderStatusText(context.MeasuringStatus)</span> <span class="badge @GetOrderStatusBadgeCssClass(context.MeasuringStatus)">@GetOrderStatusText(context.MeasuringStatus)</span>
</div> </div>
<div class="text-muted small mb-2"> <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> </div>
@foreach (var item in context.OrderItemDtos) @foreach (var item in context.OrderItemDtos)
{ {

1
FruitBankHybrid.Web/Components/App.razor
View File

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

1
FruitBankHybrid/wwwroot/index.html
View File

@ -26,6 +26,7 @@
<script src="_framework/blazor.webview.js" autostart="false"></script> <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/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="_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 src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
<script> <script>