Refactor grid editing, info panel, and toolbar system

- Introduce MgEditState enum and expose EditState on IMgGridBase
- Replace event-based syncing state with property-based state
- Redesign MgGridInfoPanel to support both view and edit modes with dynamic DevExpress editors and two-way binding
- Add visual distinction for edit/view modes in info panel
- Replace FruitBankToolbarTemplate with generic MgGridToolbarTemplate; toolbar adapts to grid edit/sync state
- Update all grid usages to use new toolbar
- Improve robustness, error handling, and maintainability throughout grid, info panel, and toolbar code
This commit is contained in:
Loretta 2025-12-17 06:21:21 +01:00
parent b3ddc86639
commit fbe09be307
15 changed files with 170 additions and 162 deletions

View File

@ -14,6 +14,7 @@ using Mono.Cecil;
using Newtonsoft.Json;
using Nop.Core.Domain.Orders;
using System.Runtime.Serialization;
using AyCode.Core.Serializers.Jsons;
namespace FruitBankHybrid.Shared.Tests;

View File

@ -69,7 +69,7 @@
<ToolbarTemplate>
@if (IsMasterGrid)
{
<FruitBankToolbarTemplate Grid="Grid" OnReloadDataClick="() => ReloadDataFromDb(true)"/>
<MgGridToolbarTemplate Grid="Grid" OnReloadDataClick="() => ReloadDataFromDb(true)"/>
}
</ToolbarTemplate>
<GroupSummary>

View File

@ -74,7 +74,7 @@
<ToolbarTemplate>
@if (IsMasterGrid)
{
<FruitBankToolbarTemplate Grid="Grid" OnReloadDataClick="() => ReloadDataFromDb(true)" />
<MgGridToolbarTemplate Grid="Grid" OnReloadDataClick="() => ReloadDataFromDb(true)" />
}
</ToolbarTemplate>
<GroupSummary>

View File

@ -37,7 +37,7 @@
<ToolbarTemplate>
@if (IsMasterGrid)
{
<FruitBankToolbarTemplate Grid="gridOrderItemPallet" OnReloadDataClick="() => ReloadDataFromDb(true)" />
<MgGridToolbarTemplate Grid="gridOrderItemPallet" OnReloadDataClick="() => ReloadDataFromDb(true)" />
}
</ToolbarTemplate>
<GroupSummary>

View File

@ -69,7 +69,7 @@
<ToolbarTemplate>
@if (IsMasterGrid)
{
<FruitBankToolbarTemplate Grid="Grid" OnReloadDataClick="() => ReloadDataFromDb(true)" />
<MgGridToolbarTemplate Grid="Grid" OnReloadDataClick="() => ReloadDataFromDb(true)" />
}
</ToolbarTemplate>
</GridProductDto>

View File

@ -94,7 +94,7 @@
<ToolbarTemplate>
@if (IsMasterGrid)
{
<FruitBankToolbarTemplate Grid="Grid" OnReloadDataClick="() => ReloadDataFromDb(true)">
<MgGridToolbarTemplate Grid="Grid" OnReloadDataClick="() => ReloadDataFromDb(true)">
<ToolbarItemsExtended>
<DxToolbarItem BeginGroup="true">
<Template Context="ctxToolbarItemFileUpload">
@ -116,7 +116,7 @@
</Template>
</DxToolbarItem>*@
</ToolbarItemsExtended>
</FruitBankToolbarTemplate>
</MgGridToolbarTemplate>
}
</ToolbarTemplate>
<GroupSummary>

View File

@ -108,7 +108,7 @@
<ToolbarTemplate>
@if (IsMasterGrid)
{
<FruitBankToolbarTemplate Grid="Grid" OnReloadDataClick="() => ReloadDataFromDb(true)" />
<MgGridToolbarTemplate Grid="Grid" OnReloadDataClick="() => ReloadDataFromDb(true)" />
}
</ToolbarTemplate>
<GroupSummary>

View File

@ -32,7 +32,7 @@
<ToolbarTemplate>
@if (IsMasterGrid)
{
<FruitBankToolbarTemplate Grid="Grid" OnReloadDataClick="() => ReloadDataFromDb(true)" />
<MgGridToolbarTemplate Grid="Grid" OnReloadDataClick="() => ReloadDataFromDb(true)" />
}
</ToolbarTemplate>
</GridGenericAttributeBase>

View File

@ -64,7 +64,7 @@
<ToolbarTemplate>
@if (IsMasterGrid)
{
<FruitBankToolbarTemplate Grid="Grid" OnReloadDataClick="() => ReloadDataFromDb(true)" />
<MgGridToolbarTemplate Grid="Grid" OnReloadDataClick="() => ReloadDataFromDb(true)" />
}
</ToolbarTemplate>
</GridPartnerBase>

View File

@ -46,7 +46,7 @@
<ToolbarTemplate>
@if (IsMasterGrid)
{
<FruitBankToolbarTemplate Grid="Grid" OnReloadDataClick="() => ReloadDataFromDb(true)" />
<MgGridToolbarTemplate Grid="Grid" OnReloadDataClick="() => ReloadDataFromDb(true)" />
}
</ToolbarTemplate>
@* <GroupSummary>

View File

@ -55,7 +55,7 @@
<ToolbarTemplate>
@if (IsMasterGrid)
{
<FruitBankToolbarTemplate Grid="Grid" OnReloadDataClick="() => ReloadDataFromDb(true)" />
<MgGridToolbarTemplate Grid="Grid" OnReloadDataClick="() => ReloadDataFromDb(true)" />
}
</ToolbarTemplate>
</GridShippingBase>

View File

@ -46,7 +46,7 @@
<ToolbarTemplate>
@if (IsMasterGrid)
{
<FruitBankToolbarTemplate Grid="Grid" OnReloadDataClick="() => ReloadDataFromDb(true)" />
<MgGridToolbarTemplate Grid="Grid" OnReloadDataClick="() => ReloadDataFromDb(true)" />
}
</ToolbarTemplate>
</GridStockTakingItemBase>

View File

@ -1,4 +1,5 @@
using AyCode.Core.Extensions;
using AyCode.Blazor.Components.Components.Grids;
using AyCode.Core.Extensions;
using AyCode.Core.Loggers;
using AyCode.Utils.Extensions;
using DevExpress.Blazor;
@ -13,12 +14,18 @@ using System.Reflection;
namespace FruitBankHybrid.Shared.Components;
public class MgGridBase : DxGrid
public class MgGridBase : DxGrid, IMgGridBase
{
private bool _isFirstInitializeParameterCore;
private bool _isFirstInitializeParameters;
public bool PreRendered { get; set; }
/// <inheritdoc />
public bool IsSyncing => false;
/// <inheritdoc />
public MgEditState EditState { get; private set; } = MgEditState.None;
[Inject] public required IEnumerable<IAcLogWriterClientBase> LogWriters { get; set; }
[Inject] public required FruitBankSignalRClient FruitBankSignalRClient { get; set; }
[Inject] public required LoggedInModel LoggedInModel { get; set; }

View File

@ -1,148 +0,0 @@
@using AyCode.Blazor.Components.Components.Grids
@using AyCode.Core.Loggers;
@using AyCode.Core.Extensions
@using AyCode.Core.Helpers
@using AyCode.Utils.Extensions
@using FruitBank.Common.Dtos
@using FruitBank.Common.Entities
@using FruitBank.Common.Models
@using FruitBankHybrid.Shared.Components.Grids.ShippingItems
@using FruitBankHybrid.Shared.Databases
@using FruitBankHybrid.Shared.Services.Loggers;
@using FruitBankHybrid.Shared.Services.SignalRs
@implements IDisposable
@inject IEnumerable<IAcLogWriterClientBase> LogWriters
@inject FruitBankSignalRClient FruitBankSignalRClient
@inject LoggedInModel LoggedInModel;
<ToolbarBase @ref="Toolbar" Grid="Grid" ItemRenderStyleMode="ToolbarRenderStyleMode.Plain">
<DxToolbarItem Text="New" Click="NewItem_Click" IconCssClass="grid-toolbar-new" Enabled="LoggedInModel.IsAdministrator" />
<DxToolbarItem Text="Edit" Click="EditItem_Click" IconCssClass="grid-toolbar-edit" Enabled="@(LoggedInModel.IsAdministrator && EditItemsEnabled)" />
<DxToolbarItem Text="Delete" Click="DeleteItem_Click" IconCssClass="grid-toolbar-delete" Enabled="@(LoggedInModel.IsDeveloper && EditItemsEnabled)" />
<DxToolbarItem Text="Column Chooser" BeginGroup="true" Click="ColumnChooserItem_Click" IconCssClass="grid-toolbar-column-chooser" />
<DxToolbarItem Text="Export" IconCssClass="grid-toolbar-export" Enabled="@(LoggedInModel.IsAdministrator && EditItemsEnabled)">
<Items>
<DxToolbarItem Text="To CSV" Click="ExportCsvItem_Click" />
<DxToolbarItem Text="To XLSX" Click="ExportXlsxItem_Click" />
<DxToolbarItem Text="To XLS" Click="ExportXlsItem_Click" />
<DxToolbarItem Text="To PDF" Click="ExportPdfItem_Click" />
</Items>
</DxToolbarItem>
<DxToolbarItem Text="Reload data" BeginGroup="true" Click="ReloadData_Click" Enabled="@BtnReloadDataEnabled" />
<DxToolbarItem BeginGroup="true">
</DxToolbarItem>
@ToolbarItemsExtended
</ToolbarBase>
@code {
[Parameter] public IGrid Grid { get; set; }
[Parameter] public RenderFragment? ToolbarItemsExtended { get; set; }
[Parameter] public EventCallback<ToolbarItemClickEventArgs> OnReloadDataClick { get; set; }
public ToolbarBase Toolbar { get; set; }
const string ExportFileName = "ExportResult";
private bool _isReloadInProgress;
private bool _isGridSyncing;
private IMgGridBase? _mgGrid;
/// <summary>
/// Reload button is enabled only when no sync operation is in progress
/// </summary>
public bool BtnReloadDataEnabled => !_isReloadInProgress && !_isGridSyncing;
public bool EditItemsEnabled { get; set; } = true;
private LoggerClient<GridShippingItemTemplate> _logger;
protected override void OnInitialized()
{
_logger = new LoggerClient<GridShippingItemTemplate>(LogWriters.ToArray());
}
protected override void OnParametersSet()
{
// Subscribe to grid syncing state changes if Grid implements IMgGridBase
if (Grid is IMgGridBase mgGrid && !ReferenceEquals(_mgGrid, mgGrid))
{
// Unsubscribe from previous grid
if (_mgGrid != null)
{
_mgGrid.OnSyncingStateChanged -= OnGridSyncingStateChanged;
}
_mgGrid = mgGrid;
_mgGrid.OnSyncingStateChanged += OnGridSyncingStateChanged;
// Get initial syncing state
_isGridSyncing = _mgGrid.IsSyncing;
}
}
private void OnGridSyncingStateChanged(bool isSyncing)
{
_isGridSyncing = isSyncing;
InvokeAsync(StateHasChanged);
}
public void Dispose()
{
if (_mgGrid != null)
{
_mgGrid.OnSyncingStateChanged -= OnGridSyncingStateChanged;
}
}
async Task ReloadData_Click(ToolbarItemClickEventArgs e)
{
_isReloadInProgress = true;
try
{
await OnReloadDataClick.InvokeAsync();
}
finally
{
_isReloadInProgress = false;
}
}
async Task NewItem_Click()
{
EditItemsEnabled = false;
await Grid.StartEditNewRowAsync();
}
async Task EditItem_Click()
{
EditItemsEnabled = false;
await Grid.StartEditRowAsync(Grid.GetFocusedRowIndex());
}
void DeleteItem_Click()
{
EditItemsEnabled = false;
Grid.ShowRowDeleteConfirmation(Grid.GetFocusedRowIndex());
}
void ColumnChooserItem_Click(ToolbarItemClickEventArgs e)
{
Grid.ShowColumnChooser();
}
async Task ExportXlsxItem_Click()
{
await Grid.ExportToXlsxAsync(ExportFileName);
}
async Task ExportXlsItem_Click()
{
await Grid.ExportToXlsAsync(ExportFileName);
}
async Task ExportCsvItem_Click()
{
await Grid.ExportToCsvAsync(ExportFileName);
}
async Task ExportPdfItem_Click()
{
await Grid.ExportToPdfAsync(ExportFileName);
}
}

View File

@ -0,0 +1,148 @@
@using AyCode.Blazor.Components.Components.Grids
@using AyCode.Core.Loggers;
@using AyCode.Core.Extensions
@using AyCode.Core.Helpers
@using AyCode.Utils.Extensions
@using FruitBank.Common.Dtos
@using FruitBank.Common.Entities
@using FruitBank.Common.Models
@using FruitBankHybrid.Shared.Components.Grids.ShippingItems
@using FruitBankHybrid.Shared.Databases
@using FruitBankHybrid.Shared.Services.Loggers;
@using FruitBankHybrid.Shared.Services.SignalRs
@inject IEnumerable<IAcLogWriterClientBase> LogWriters
@inject FruitBankSignalRClient FruitBankSignalRClient
@inject LoggedInModel LoggedInModel;
<ToolbarBase @ref="Toolbar" Grid="Grid" ItemRenderStyleMode="ToolbarRenderStyleMode.Plain">
<DxToolbarItem Text="New" Click="NewItem_Click" IconCssClass="grid-toolbar-new"
Visible="@(!IsEditing)" Enabled="@(!IsSyncing)" />
<DxToolbarItem Text="Edit" Click="EditItem_Click" IconCssClass="grid-toolbar-edit"
Visible="@(!IsEditing)" Enabled="@(HasFocusedRow && !IsSyncing)" />
<DxToolbarItem Text="Delete" Click="DeleteItem_Click" IconCssClass="grid-toolbar-delete"
Visible="@(!IsEditing)" Enabled="@(LoggedInModel.IsDeveloper && HasFocusedRow && !IsSyncing)" />
<DxToolbarItem Text="Save" Click="SaveItem_Click" IconCssClass="grid-toolbar-save"
Visible="@IsEditing" RenderStyle="ButtonRenderStyle.Primary" />
<DxToolbarItem Text="Cancel" Click="CancelEdit_Click" IconCssClass="grid-toolbar-cancel"
Visible="@IsEditing" RenderStyle="ButtonRenderStyle.Secondary" />
@if (!OnlyGridEditTools)
{
<DxToolbarItem Text="Column Chooser" BeginGroup="true" Click="ColumnChooserItem_Click" IconCssClass="grid-toolbar-column-chooser"
Visible="@(!IsEditing)"/>
<DxToolbarItem Text="Export" IconCssClass="grid-toolbar-export"
Visible="@(!IsEditing)" Enabled="@(LoggedInModel.IsAdministrator && HasFocusedRow)">
<Items>
<DxToolbarItem Text="To CSV" Click="ExportCsvItem_Click"/>
<DxToolbarItem Text="To XLSX" Click="ExportXlsxItem_Click"/>
<DxToolbarItem Text="To XLS" Click="ExportXlsItem_Click"/>
<DxToolbarItem Text="To PDF" Click="ExportPdfItem_Click"/>
</Items>
</DxToolbarItem>
<DxToolbarItem Text="Reload data" BeginGroup="true" Click="ReloadData_Click"
Visible="@(!IsEditing)" Enabled="@(!IsSyncing && !_isReloadInProgress)"/>
<DxToolbarItem BeginGroup="true">
</DxToolbarItem>
@ToolbarItemsExtended
}
</ToolbarBase>
@code {
[Parameter] public bool OnlyGridEditTools { get; set; } = false;
[Parameter] public IMgGridBase Grid { get; set; } = null!;
[Parameter] public RenderFragment? ToolbarItemsExtended { get; set; }
[Parameter] public EventCallback<ToolbarItemClickEventArgs> OnReloadDataClick { get; set; }
public ToolbarBase Toolbar { get; set; } = null!;
const string ExportFileName = "ExportResult";
private bool _isReloadInProgress;
/// <summary>
/// Whether the grid is currently in edit mode (New or Edit)
/// </summary>
private bool IsEditing => Grid?.EditState != MgEditState.None;
/// <summary>
/// Whether the grid is currently syncing data
/// </summary>
private bool IsSyncing => Grid?.IsSyncing ?? false;
/// <summary>
/// Whether there is a focused row in the grid
/// </summary>
private bool HasFocusedRow => Grid?.GetFocusedRowIndex() >= 0;
private LoggerClient<GridShippingItemTemplate> _logger = null!;
protected override void OnInitialized()
{
_logger = new LoggerClient<GridShippingItemTemplate>(LogWriters.ToArray());
}
async Task ReloadData_Click(ToolbarItemClickEventArgs e)
{
_isReloadInProgress = true;
try
{
await OnReloadDataClick.InvokeAsync(e);
}
finally
{
_isReloadInProgress = false;
}
}
async Task NewItem_Click()
{
await Grid.StartEditNewRowAsync();
}
async Task EditItem_Click()
{
await Grid.StartEditRowAsync(Grid.GetFocusedRowIndex());
}
void DeleteItem_Click()
{
Grid.ShowRowDeleteConfirmation(Grid.GetFocusedRowIndex());
}
async Task SaveItem_Click()
{
await Grid.SaveChangesAsync();
}
async Task CancelEdit_Click()
{
await Grid.CancelEditAsync();
}
void ColumnChooserItem_Click(ToolbarItemClickEventArgs e)
{
Grid.ShowColumnChooser();
}
async Task ExportXlsxItem_Click()
{
await Grid.ExportToXlsxAsync(ExportFileName);
}
async Task ExportXlsItem_Click()
{
await Grid.ExportToXlsAsync(ExportFileName);
}
async Task ExportCsvItem_Click()
{
await Grid.ExportToCsvAsync(ExportFileName);
}
async Task ExportPdfItem_Click()
{
await Grid.ExportToPdfAsync(ExportFileName);
}
}