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

Improve Catalogs page layout with spacing and styling

Browse Source 
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.
This commit is contained in:
OlgunR
2026-01-21 10:26:12 +01:00
parent e55f215210
commit 05964eb02e
1 changed files with 53 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,11 @@
@page "/catalogs" @page "/catalogs"
@inject CatalogApiClient Api @inject CatalogApiClient Api
<style>
.action-panel { margin-bottom: 16px; }
.grid-section { margin-top: 12px; }
</style>
<PageTitle>Catalogs</PageTitle> <PageTitle>Catalogs</PageTitle>
<h1>Catalogs</h1> <h1>Catalogs</h1>
@@ -20,31 +25,33 @@ else if (!string.IsNullOrWhiteSpace(infoMessage))
@if (showForm) @if (showForm)
{ {
<EditForm Model="formModel" OnValidSubmit="HandleSubmit" Context="editCtx"> <div class="action-panel">
<DxFormLayout ColCount="2"> <EditForm Model="formModel" OnValidSubmit="HandleSubmit" Context="editCtx">
<DxFormLayoutItem Caption="Titel" Context="itemCtx"> <DxFormLayout ColCount="2">
<DxTextBox @bind-Text="formModel.CatTitle" Enabled="@(isEditing ? formModel.UpdateProcedure != 0 : true)" /> <DxFormLayoutItem Caption="Titel" Context="itemCtx">
</DxFormLayoutItem> <DxTextBox @bind-Text="formModel.CatTitle" Enabled="@(isEditing ? formModel.UpdateProcedure != 0 : true)" />
<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>
} <DxFormLayoutItem Caption="Kennung" Context="itemCtx">
<DxFormLayoutItem Caption=" " Context="itemCtx"> <DxTextBox @bind-Text="formModel.CatString" />
<DxStack Orientation="Orientation.Horizontal" Spacing="8"> </DxFormLayoutItem>
<DxButton RenderStyle="ButtonRenderStyle.Success" ButtonType="ButtonType.Submit" SubmitFormOnClick="true" Context="btnCtx">@((isEditing ? "Speichern" : "Anlegen"))</DxButton> @if (isEditing)
<DxButton RenderStyle="ButtonRenderStyle.Secondary" Click="@CancelEdit" Context="btnCtx">Abbrechen</DxButton> {
</DxStack> <DxFormLayoutItem Caption="Update-Prozedur" Context="itemCtx">
</DxFormLayoutItem> <DxComboBox Data="@procedureOptions"
</DxFormLayout> TextFieldName="Text"
</EditForm> 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) @if (isLoading)
@@ -57,26 +64,28 @@ else if (items.Count == 0)
} }
else else
{ {
<DxGrid Data="@items" TItem="CatalogReadDto" KeyFieldName="@nameof(CatalogReadDto.Guid)" ShowFilterRow="true" PageSize="10" CssClass="mb-4"> <div class="grid-section">
<Columns> <DxGrid Data="@items" TItem="CatalogReadDto" KeyFieldName="@nameof(CatalogReadDto.Guid)" ShowFilterRow="true" PageSize="10" CssClass="mb-4">
<DxGridDataColumn FieldName="@nameof(CatalogReadDto.Guid)" Caption="Id" Width="140px" /> <Columns>
<DxGridDataColumn FieldName="@nameof(CatalogReadDto.CatTitle)" Caption="Titel" /> <DxGridDataColumn FieldName="@nameof(CatalogReadDto.Guid)" Caption="Id" Width="140px" />
<DxGridDataColumn FieldName="@nameof(CatalogReadDto.CatString)" Caption="String" /> <DxGridDataColumn FieldName="@nameof(CatalogReadDto.CatTitle)" Caption="Titel" />
<DxGridDataColumn FieldName="@nameof(CatalogReadDto.AddedWho)" Caption="Angelegt von" /> <DxGridDataColumn FieldName="@nameof(CatalogReadDto.CatString)" Caption="String" />
<DxGridDataColumn FieldName="@nameof(CatalogReadDto.AddedWhen)" Caption="Angelegt am" /> <DxGridDataColumn FieldName="@nameof(CatalogReadDto.AddedWho)" Caption="Angelegt von" />
<DxGridDataColumn FieldName="@nameof(CatalogReadDto.ChangedWho)" Caption="Geändert von" /> <DxGridDataColumn FieldName="@nameof(CatalogReadDto.AddedWhen)" Caption="Angelegt am" />
<DxGridDataColumn FieldName="@nameof(CatalogReadDto.ChangedWhen)" Caption="Geändert am" /> <DxGridDataColumn FieldName="@nameof(CatalogReadDto.ChangedWho)" Caption="Geändert von" />
<DxGridDataColumn Caption="" Width="220px"> <DxGridDataColumn FieldName="@nameof(CatalogReadDto.ChangedWhen)" Caption="Geändert am" />
<CellDisplayTemplate Context="cell"> <DxGridDataColumn Caption="" Width="220px">
@{ var item = (CatalogReadDto)cell.DataItem; } <CellDisplayTemplate Context="cell">
<div style="white-space: nowrap;"> @{ var item = (CatalogReadDto)cell.DataItem; }
<DxButton RenderStyle="ButtonRenderStyle.Secondary" Size="ButtonSize.Small" Click="@(() => StartEdit(item))">Bearbeiten</DxButton> <div style="white-space: nowrap;">
<DxButton RenderStyle="ButtonRenderStyle.Danger" Size="ButtonSize.Small" Click="@(() => DeleteCatalog(item.Guid))">Löschen</DxButton> <DxButton RenderStyle="ButtonRenderStyle.Secondary" Size="ButtonSize.Small" Click="@(() => StartEdit(item))">Bearbeiten</DxButton>
</div> <DxButton RenderStyle="ButtonRenderStyle.Danger" Size="ButtonSize.Small" Click="@(() => DeleteCatalog(item.Guid))">Löschen</DxButton>
</CellDisplayTemplate> </div>
</DxGridDataColumn> </CellDisplayTemplate>
</Columns> </DxGridDataColumn>
</DxGrid> </Columns>
</DxGrid>
</div>
} }
@code { @code {