From 11374347d304df7769449db60f1c398aa50595d2 Mon Sep 17 00:00:00 2001
From: OlgunR <OlgunR@DD-PC-ENT05N>
Date: Wed, 15 Apr 2026 10:57:28 +0200
Subject: [PATCH] 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.
---
 .../Components/BandEditor.razor               | 55 +++++++++++++++++++
 .../Components/CatalogsGrid.razor             | 49 ++++-------------
 .../Components/MassDataGrid.razor             | 49 ++++-------------
 3 files changed, 77 insertions(+), 76 deletions(-)
 create mode 100644 DbFirst.BlazorWebApp/Components/BandEditor.razor

diff --git a/DbFirst.BlazorWebApp/Components/BandEditor.razor b/DbFirst.BlazorWebApp/Components/BandEditor.razor
new file mode 100644
index 0000000..4181492
--- /dev/null
+++ b/DbFirst.BlazorWebApp/Components/BandEditor.razor
@@ -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; }
+}
\ No newline at end of file
diff --git a/DbFirst.BlazorWebApp/Components/CatalogsGrid.razor b/DbFirst.BlazorWebApp/Components/CatalogsGrid.razor
index c8ba429..30f092d 100644
--- a/DbFirst.BlazorWebApp/Components/CatalogsGrid.razor
+++ b/DbFirst.BlazorWebApp/Components/CatalogsGrid.razor
@@ -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"
diff --git a/DbFirst.BlazorWebApp/Components/MassDataGrid.razor b/DbFirst.BlazorWebApp/Components/MassDataGrid.razor
index 5327217..249026f 100644
--- a/DbFirst.BlazorWebApp/Components/MassDataGrid.razor
+++ b/DbFirst.BlazorWebApp/Components/MassDataGrid.razor
@@ -25,44 +25,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="mb-3 page-size-selector">
         <span class="page-size-label">Datensätze je Seite:</span>