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

Compare commits

base: AppStd:6b89f7bd7213ce5202ad391f9dca3aebb97a726a
Branches Tags
AppStd:main
...
compare: AppStd:05964eb02eb2f1790cc1c81de23ce39b84270b0d
Branches Tags
AppStd:main

2 Commits
6b89f7bd72 ... 05964eb02e

Author SHA1 Message Date
OlgunR
05964eb02e Improve Catalogs page layout with spacing and styling 
Added CSS classes for better spacing between form and grid.
Wrapped form in .action-panel and grid in .grid-section divs
to enhance visual separation. No functional changes made.
 2026-01-21 10:26:12 +01:00
OlgunR
e55f215210 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.
 2026-01-21 10:21:51 +01:00
5 changed files with 74 additions and 63 deletions
Expand all files Collapse all files

1
DbFirst.BlazorWasm/DbFirst.BlazorWasm.csproj
View File

@@ -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>

130
DbFirst.BlazorWasm/Pages/Catalogs.razor
View File

@@ -1,6 +1,11 @@
@page "/catalogs"
@inject CatalogApiClient Api
<style>
.action-panel { margin-bottom: 16px; }
.grid-section { margin-top: 12px; }
</style>
<PageTitle>Catalogs</PageTitle>
<h1>Catalogs</h1>
@@ -15,41 +20,38 @@ 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>
<div class="action-panel">
<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>
</div>
}
@if (isLoading)
@@ -62,38 +64,28 @@ 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>
<div class="grid-section">
<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>
</div>
}
@code {
@@ -106,6 +98,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 +221,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;
}
}

3
DbFirst.BlazorWasm/Program.cs
View File

@@ -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>();

1
DbFirst.BlazorWasm/_Imports.razor
View File

@@ -10,3 +10,4 @@
@using DbFirst.BlazorWasm.Layout
@using DbFirst.BlazorWasm.Models
@using DbFirst.BlazorWasm.Services
@using DevExpress.Blazor

2
DbFirst.BlazorWasm/wwwroot/index.html
View File

@@ -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" />