From e55f215210af4caf6abeca0159810a514eb3ea55 Mon Sep 17 00:00:00 2001
From: OlgunR <OlgunR@DD-PC-ENT05N>
Date: Wed, 21 Jan 2026 10:21:51 +0100
Subject: [PATCH] Integrate DevExpress Blazor UI components throughout app

Replaced Bootstrap UI with DevExpress components in Catalogs.razor, including forms and data grid. Added DevExpress.Blazor package, styles, and service registration. Updated _Imports.razor for global DevExpress usage. Modernizes UI and improves user experience.
---
 DbFirst.BlazorWasm/DbFirst.BlazorWasm.csproj |   1 +
 DbFirst.BlazorWasm/Pages/Catalogs.razor      | 119 +++++++++----------
 DbFirst.BlazorWasm/Program.cs                |   3 +
 DbFirst.BlazorWasm/_Imports.razor            |   1 +
 DbFirst.BlazorWasm/wwwroot/index.html        |   2 +
 5 files changed, 64 insertions(+), 62 deletions(-)

diff --git a/DbFirst.BlazorWasm/DbFirst.BlazorWasm.csproj b/DbFirst.BlazorWasm/DbFirst.BlazorWasm.csproj
index 570aeb8..67b3338 100644
--- a/DbFirst.BlazorWasm/DbFirst.BlazorWasm.csproj
+++ b/DbFirst.BlazorWasm/DbFirst.BlazorWasm.csproj
@@ -9,6 +9,7 @@
   <ItemGroup>
     <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.22" />
     <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="8.0.22" PrivateAssets="all" />
+    <PackageReference Include="DevExpress.Blazor" Version="24.1.*" />
   </ItemGroup>
 
   <ItemGroup>
diff --git a/DbFirst.BlazorWasm/Pages/Catalogs.razor b/DbFirst.BlazorWasm/Pages/Catalogs.razor
index 5d83a3a..964fe44 100644
--- a/DbFirst.BlazorWasm/Pages/Catalogs.razor
+++ b/DbFirst.BlazorWasm/Pages/Catalogs.razor
@@ -15,40 +15,35 @@ else if (!string.IsNullOrWhiteSpace(infoMessage))
 }
 
 <div class="mb-3">
-    <button class="btn btn-primary" @onclick="StartCreate">Neuen Eintrag anlegen</button>
+    <DxButton RenderStyle="ButtonRenderStyle.Primary" Click="@StartCreate">Neuen Eintrag anlegen</DxButton>
 </div>
 
 @if (showForm)
 {
-    <EditForm Model="formModel" OnValidSubmit="HandleSubmit">
-        <div class="row g-3">
-            <div class="col-md-6">
-                <label class="form-label">Titel</label>
-                <InputText class="form-control" @bind-Value="formModel.CatTitle" disabled="@(isEditing && formModel.UpdateProcedure == 0)" />
-            </div>
-            <div class="col-md-6">
-                <label class="form-label">Kennung</label>
-                <InputText class="form-control" @bind-Value="formModel.CatString" />
-            </div>
-        </div>
-
-        @if (isEditing)
-        {
-            <div class="row g-3 mt-2">
-                <div class="col-md-6">
-                    <label class="form-label">Update-Prozedur</label>
-                    <InputSelect class="form-control" @bind-Value="formModel.UpdateProcedure">
-                        <option value="0">PRTBMY_CATALOG_UPDATE</option>
-                        <option value="1">PRTBMY_CATALOG_SAVE</option>
-                    </InputSelect>
-                </div>
-            </div>
-        }
-
-        <div class="mt-3 d-flex gap-2">
-            <button type="submit" class="btn btn-success">@((isEditing ? "Speichern" : "Anlegen"))</button>
-            <button type="button" class="btn btn-secondary" @onclick="CancelEdit">Abbrechen</button>
-        </div>
+    <EditForm Model="formModel" OnValidSubmit="HandleSubmit" Context="editCtx">
+        <DxFormLayout ColCount="2">
+            <DxFormLayoutItem Caption="Titel" Context="itemCtx">
+                <DxTextBox @bind-Text="formModel.CatTitle" Enabled="@(isEditing ? formModel.UpdateProcedure != 0 : true)" />
+            </DxFormLayoutItem>
+            <DxFormLayoutItem Caption="Kennung" Context="itemCtx">
+                <DxTextBox @bind-Text="formModel.CatString" />
+            </DxFormLayoutItem>
+            @if (isEditing)
+            {
+                <DxFormLayoutItem Caption="Update-Prozedur" Context="itemCtx">
+                    <DxComboBox Data="@procedureOptions"
+                                TextFieldName="Text"
+                                ValueFieldName="Value"
+                                @bind-Value="formModel.UpdateProcedure" />
+                </DxFormLayoutItem>
+            }
+            <DxFormLayoutItem Caption=" " Context="itemCtx">
+                <DxStack Orientation="Orientation.Horizontal" Spacing="8">
+                    <DxButton RenderStyle="ButtonRenderStyle.Success" ButtonType="ButtonType.Submit" SubmitFormOnClick="true" Context="btnCtx">@((isEditing ? "Speichern" : "Anlegen"))</DxButton>
+                    <DxButton RenderStyle="ButtonRenderStyle.Secondary" Click="@CancelEdit" Context="btnCtx">Abbrechen</DxButton>
+                </DxStack>
+            </DxFormLayoutItem>
+        </DxFormLayout>
     </EditForm>
 }
 
@@ -62,38 +57,26 @@ else if (items.Count == 0)
 }
 else
 {
-    <table class="table table-striped">
-        <thead>
-            <tr>
-                <th>Id</th>
-                <th>Titel</th>
-                <th>String</th>
-                <th>Angelegt von</th>
-                <th>Angelegt am</th>
-                <th>Geändert von</th>
-                <th>Geändert am</th>
-                <th></th>
-            </tr>
-        </thead>
-        <tbody>
-            @foreach (var item in items)
-            {
-                <tr>
-                    <td>@item.Guid</td>
-                    <td>@item.CatTitle</td>
-                    <td>@item.CatString</td>
-                    <td>@item.AddedWho</td>
-                    <td>@item.AddedWhen.ToString("g")</td>
-                    <td>@item.ChangedWho</td>
-                    <td>@(item.ChangedWhen.HasValue ? item.ChangedWhen.Value.ToString("g") : string.Empty)</td>
-                    <td class="text-end">
-                        <button class="btn btn-sm btn-outline-primary me-2" @onclick="(() => StartEdit(item))">Bearbeiten</button>
-                        <button class="btn btn-sm btn-outline-danger" @onclick="(() => DeleteCatalog(item.Guid))">Löschen</button>
-                    </td>
-                </tr>
-            }
-        </tbody>
-    </table>
+    <DxGrid Data="@items" TItem="CatalogReadDto" KeyFieldName="@nameof(CatalogReadDto.Guid)" ShowFilterRow="true" PageSize="10" CssClass="mb-4">
+        <Columns>
+            <DxGridDataColumn FieldName="@nameof(CatalogReadDto.Guid)" Caption="Id" Width="140px" />
+            <DxGridDataColumn FieldName="@nameof(CatalogReadDto.CatTitle)" Caption="Titel" />
+            <DxGridDataColumn FieldName="@nameof(CatalogReadDto.CatString)" Caption="String" />
+            <DxGridDataColumn FieldName="@nameof(CatalogReadDto.AddedWho)" Caption="Angelegt von" />
+            <DxGridDataColumn FieldName="@nameof(CatalogReadDto.AddedWhen)" Caption="Angelegt am" />
+            <DxGridDataColumn FieldName="@nameof(CatalogReadDto.ChangedWho)" Caption="Geändert von" />
+            <DxGridDataColumn FieldName="@nameof(CatalogReadDto.ChangedWhen)" Caption="Geändert am" />
+            <DxGridDataColumn Caption="" Width="220px">
+                <CellDisplayTemplate Context="cell">
+                    @{ var item = (CatalogReadDto)cell.DataItem; }
+                    <div style="white-space: nowrap;">
+                        <DxButton RenderStyle="ButtonRenderStyle.Secondary" Size="ButtonSize.Small" Click="@(() => StartEdit(item))">Bearbeiten</DxButton>
+                        <DxButton RenderStyle="ButtonRenderStyle.Danger" Size="ButtonSize.Small" Click="@(() => DeleteCatalog(item.Guid))">Löschen</DxButton>
+                    </div>
+                </CellDisplayTemplate>
+            </DxGridDataColumn>
+        </Columns>
+    </DxGrid>
 }
 
 @code {
@@ -106,6 +89,12 @@ else
     private string? errorMessage;
     private string? infoMessage;
 
+    private readonly List<ProcedureOption> procedureOptions = new()
+    {
+        new() { Value = 0, Text = "PRTBMY_CATALOG_UPDATE" },
+        new() { Value = 1, Text = "PRTBMY_CATALOG_SAVE" }
+    };
+
     protected override async Task OnInitializedAsync()
     {
         await LoadCatalogs();
@@ -223,4 +212,10 @@ else
             errorMessage = $"Fehler beim Löschen: {ex.Message}";
         }
     }
+
+    private sealed class ProcedureOption
+    {
+        public int Value { get; set; }
+        public string Text { get; set; } = string.Empty;
+    }
 }
diff --git a/DbFirst.BlazorWasm/Program.cs b/DbFirst.BlazorWasm/Program.cs
index c70848c..73e3696 100644
--- a/DbFirst.BlazorWasm/Program.cs
+++ b/DbFirst.BlazorWasm/Program.cs
@@ -2,11 +2,14 @@ using Microsoft.AspNetCore.Components.Web;
 using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
 using DbFirst.BlazorWasm;
 using DbFirst.BlazorWasm.Services;
+using DevExpress.Blazor;
 
 var builder = WebAssemblyHostBuilder.CreateDefault(args);
 builder.RootComponents.Add<App>("#app");
 builder.RootComponents.Add<HeadOutlet>("head::after");
 
+builder.Services.AddDevExpressBlazor();
+
 var apiBaseUrl = builder.Configuration["ApiBaseUrl"] ?? builder.HostEnvironment.BaseAddress;
 builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(apiBaseUrl) });
 builder.Services.AddScoped<CatalogApiClient>();
diff --git a/DbFirst.BlazorWasm/_Imports.razor b/DbFirst.BlazorWasm/_Imports.razor
index 99ead6c..fb7bcf1 100644
--- a/DbFirst.BlazorWasm/_Imports.razor
+++ b/DbFirst.BlazorWasm/_Imports.razor
@@ -10,3 +10,4 @@
 @using DbFirst.BlazorWasm.Layout
 @using DbFirst.BlazorWasm.Models
 @using DbFirst.BlazorWasm.Services
+@using DevExpress.Blazor
diff --git a/DbFirst.BlazorWasm/wwwroot/index.html b/DbFirst.BlazorWasm/wwwroot/index.html
index d925b4f..0e994e1 100644
--- a/DbFirst.BlazorWasm/wwwroot/index.html
+++ b/DbFirst.BlazorWasm/wwwroot/index.html
@@ -6,6 +6,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>DbFirst.BlazorWasm</title>
     <base href="/" />
+    <link rel="stylesheet" href="_content/DevExpress.Blazor.Themes/bootstrap-external.bs5.min.css" />
+    <link rel="stylesheet" href="_content/DevExpress.Blazor.Themes/icons.css" />
     <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
     <link rel="stylesheet" href="css/app.css" />
     <link rel="icon" type="image/png" href="favicon.png" />