Refactor band editor into reusable BandEditor component

Extract band editor UI and logic from CatalogsGrid.razor and MassDataGrid.razor into a new BandEditor.razor component. This centralizes band management features (add/remove bands, edit captions, assign columns, save/reset layout) and reduces code duplication, improving maintainability and reusability. Existing UI and event handling remain functionally unchanged.
This commit is contained in:
OlgunR
2026-04-15 10:57:28 +02:00
parent 7552b34ced
commit 11374347d3
3 changed files with 77 additions and 76 deletions

View File

@@ -24,44 +24,17 @@ else if (items.Count == 0)
}
else
{
<div class="band-editor">
<button class="band-editor-toggle" @onclick="() => bandEditorExpanded = !bandEditorExpanded">
<span class="band-editor-toggle-icon @(bandEditorExpanded ? "expanded" : "")">&#9658;</span>
<span>Layout</span>
</button>
@if (bandEditorExpanded)
{
<div class="band-editor-body">
<div class="band-controls">
<DxButton Text="Band hinzufügen" Click="AddBand" />
<DxButton Text="Layout speichern" Click="SaveLayoutWithFeedbackAsync" Enabled="@CanSaveBandLayout" />
<DxButton Text="Layout zurücksetzen" Click="ResetLayoutWithFeedbackAsync" />
</div>
@foreach (var band in bandLayout.Bands)
{
<div class="band-row">
<DxTextBox Text="@band.Caption" TextChanged="@(value => UpdateBandCaption(band, value))" />
<DxButton Text="Entfernen" Click="@(() => RemoveBand(band))" />
</div>
}
<DxFormLayout CssClass="band-columns" ColCount="2">
@foreach (var column in ColumnDefinitions)
{
<DxFormLayoutItem Caption="@column.Caption">
<DxComboBox Data="@bandOptions"
TData="BandOption"
TValue="string"
TextFieldName="Caption"
ValueFieldName="Id"
Value="@GetColumnBand(column.FieldName)"
ValueChanged="@(value => UpdateColumnBand(column.FieldName, value))"
Width="100%" />
</DxFormLayoutItem>
}
</DxFormLayout>
</div>
}
</div>
<BandEditor Bands="@bandLayout.Bands"
BandOptions="@bandOptions"
Columns="@ColumnDefinitions"
GetColumnBand="GetColumnBand"
CanSave="@CanSaveBandLayout"
OnAddBand="AddBand"
OnSaveLayout="SaveLayoutWithFeedbackAsync"
OnResetLayout="ResetLayoutWithFeedbackAsync"
OnRemoveBand="RemoveBand"
OnBandCaptionChanged="@(args => UpdateBandCaption(args.Band, args.Value))"
OnColumnBandChanged="@(args => UpdateColumnBand(args.FieldName, args.BandId))" />
<div class="grid-section">
<DxGrid Data="@items"