AppStd/DbFirst
8
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor band editor into reusable BandEditor component

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

55
DbFirst.BlazorWebApp/Components/BandEditor.razor Normal file
View File

@@ -0,0 +1,55 @@
<div class="band-editor">
<button class="band-editor-toggle" @onclick="() => IsExpanded = !IsExpanded">
<span class="band-editor-toggle-icon @(IsExpanded ? "expanded" : "")">&#9658;</span>
<span>Layout</span>
</button>
@if (IsExpanded)
{
<div class="band-editor-body">
<div class="band-controls">
<DxButton Text="Band hinzufügen" Click="OnAddBand" />
<DxButton Text="Layout speichern" Click="OnSaveLayout" Enabled="@CanSave" />
<DxButton Text="Layout zurücksetzen" Click="OnResetLayout" />
</div>
@foreach (var band in Bands)
{
<div class="band-row">
<DxTextBox Text="@band.Caption" TextChanged="@(value => OnBandCaptionChanged.InvokeAsync((band, value)))" />
<DxButton Text="Entfernen" Click="@(() => OnRemoveBand.InvokeAsync(band))" />
</div>
}
<DxFormLayout CssClass="band-columns" ColCount="2">
@foreach (var column in Columns)
{
<DxFormLayoutItem Caption="@column.Caption">
<DxComboBox Data="@BandOptions"
TData="BandOption"
TValue="string"
TextFieldName="Caption"
ValueFieldName="Id"
Value="@GetColumnBand(column.FieldName)"
ValueChanged="@(value => OnColumnBandChanged.InvokeAsync((column.FieldName, value)))"
Width="100%" />
</DxFormLayoutItem>
}
</DxFormLayout>
</div>
}
</div>
@code {
private bool IsExpanded { get; set; }
[Parameter, EditorRequired] public List<BandDefinition> Bands { get; set; } = new();
[Parameter, EditorRequired] public List<BandOption> BandOptions { get; set; } = new();
[Parameter, EditorRequired] public List<ColumnDefinition> Columns { get; set; } = new();
[Parameter, EditorRequired] public Func<string, string> GetColumnBand { get; set; } = _ => string.Empty;
[Parameter, EditorRequired] public bool CanSave { get; set; }
[Parameter] public EventCallback OnAddBand { get; set; }
[Parameter] public EventCallback OnSaveLayout { get; set; }
[Parameter] public EventCallback OnResetLayout { get; set; }
[Parameter] public EventCallback<BandDefinition> OnRemoveBand { get; set; }
[Parameter] public EventCallback<(BandDefinition Band, string Value)> OnBandCaptionChanged { get; set; }
[Parameter] public EventCallback<(string FieldName, string? BandId)> OnColumnBandChanged { get; set; }
}

49
DbFirst.BlazorWebApp/Components/CatalogsGrid.razor
View File

@@ -24,44 +24,17 @@ else if (items.Count == 0)
} }
else else
{ {
<div class="band-editor"> <BandEditor Bands="@bandLayout.Bands"
<button class="band-editor-toggle" @onclick="() => bandEditorExpanded = !bandEditorExpanded"> BandOptions="@bandOptions"
<span class="band-editor-toggle-icon @(bandEditorExpanded ? "expanded" : "")">&#9658;</span> Columns="@ColumnDefinitions"
<span>Layout</span> GetColumnBand="GetColumnBand"
</button> CanSave="@CanSaveBandLayout"
@if (bandEditorExpanded) OnAddBand="AddBand"
{ OnSaveLayout="SaveLayoutWithFeedbackAsync"
<div class="band-editor-body"> OnResetLayout="ResetLayoutWithFeedbackAsync"
<div class="band-controls"> OnRemoveBand="RemoveBand"
<DxButton Text="Band hinzufügen" Click="AddBand" /> OnBandCaptionChanged="@(args => UpdateBandCaption(args.Band, args.Value))"
<DxButton Text="Layout speichern" Click="SaveLayoutWithFeedbackAsync" Enabled="@CanSaveBandLayout" /> OnColumnBandChanged="@(args => UpdateColumnBand(args.FieldName, args.BandId))" />
<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>
<div class="grid-section"> <div class="grid-section">
<DxGrid Data="@items" <DxGrid Data="@items"

49
DbFirst.BlazorWebApp/Components/MassDataGrid.razor
View File

@@ -25,44 +25,17 @@ else if (items.Count == 0)
else else
{ {
<div class="band-editor"> <BandEditor Bands="@bandLayout.Bands"
<button class="band-editor-toggle" @onclick="() => bandEditorExpanded = !bandEditorExpanded"> BandOptions="@bandOptions"
<span class="band-editor-toggle-icon @(bandEditorExpanded ? "expanded" : "")">&#9658;</span> Columns="@ColumnDefinitions"
<span>Layout</span> GetColumnBand="GetColumnBand"
</button> CanSave="@CanSaveBandLayout"
@if (bandEditorExpanded) OnAddBand="AddBand"
{ OnSaveLayout="SaveLayoutWithFeedbackAsync"
<div class="band-editor-body"> OnResetLayout="ResetLayoutWithFeedbackAsync"
<div class="band-controls"> OnRemoveBand="RemoveBand"
<DxButton Text="Band hinzufügen" Click="AddBand" /> OnBandCaptionChanged="@(args => UpdateBandCaption(args.Band, args.Value))"
<DxButton Text="Layout speichern" Click="SaveLayoutWithFeedbackAsync" Enabled="@CanSaveBandLayout" /> OnColumnBandChanged="@(args => UpdateColumnBand(args.FieldName, args.BandId))" />
<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>
<div class="mb-3 page-size-selector"> <div class="mb-3 page-size-selector">
<span class="page-size-label">Datensätze je Seite:</span> <span class="page-size-label">Datensätze je Seite:</span>