troogs/duempelkas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor dialog components to use form-container for improved layout and styling; update button styles for consistency

Browse Source
This commit is contained in:
troogs
2026-04-03 08:57:55 +02:00
parent c376c70fec
commit a02b0e9436
9 changed files with 114 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/Duempelkas.App/Components/Dialogs/AddAccountDialog.razor
View File

@@ -1,14 +1,14 @@
<div class="dialog-backdrop" @onclick="Cancel">
<div class="dialog-content" @onclick:stopPropagation="true">
<h5 class="mb-3">Neues Konto</h5>
<div class="mb-3">
<div class="form-container">
<label class="form-label">Kontoname</label>
<input type="text" class="form-control" @bind="name" @bind:event="oninput"
placeholder="z.B. Girokonto" />
</div>
<div class="d-flex justify-content-end gap-2">
<button class="btn btn-success" @onclick="Save" disabled="@string.IsNullOrWhiteSpace(name)"><i class="bi bi-check-lg"></i> Erstellen</button>
<button class="btn btn-outline-secondary" @onclick="Cancel"><i class="bi bi-x-lg"></i> Abbrechen</button>
<button class="btn btn-primary" @onclick="Save" disabled="@string.IsNullOrWhiteSpace(name)"><i class="bi bi-check-lg"></i> Erstellen</button>
</div>
</div>
</div>

26
src/Duempelkas.App/Components/Dialogs/AddEntryDialog.razor
View File

@@ -3,34 +3,32 @@
<div class="dialog-backdrop" @onclick="Cancel">
<div class="dialog-content" @onclick:stopPropagation="true">
<h5>@(EditEntry != null ? "Eintrag bearbeiten" : "Neuer Eintrag")</h5>
@if (EditEntry == null)
{
<div class="mb-3">
<div class="form-container">
@if(EditEntry == null) {
<label class="form-label">Art</label>
<select class="form-select" @bind="entryType">
<select @bind="entryType">
<option value="@EntryType.Income">Einnahme</option>
<option value="@EntryType.Expense">Ausgabe</option>
</select>
</div>
}
<div class="mb-3">
}
<label class="form-label">Datum</label>
<input type="date" class="form-control" @bind="date" />
</div>
<div class="mb-3">
<input type="date" @bind="date" />
<label class="form-label">Bezeichnung</label>
<input type="text" class="form-control" @bind="title" placeholder="Beschreibung" />
</div>
<div class="mb-3">
<label class="form-label">Betrag (€)</label>
<input type="number" class="form-control" @bind="amount" step="0.01" min="0.01" />
</div>
<div class="d-flex justify-content-end gap-2">
<button class="btn btn-outline-secondary" @onclick="Cancel"><i class="bi bi-x-lg"></i> Abbrechen</button>
<button class="btn btn-primary" @onclick="Save"
<button class="btn btn-success" @onclick="Save"
disabled="@(string.IsNullOrWhiteSpace(title) || amount <= 0)">
<i class="bi bi-check-lg"></i> @(EditEntry != null ? "Speichern" : "Hinzufügen")
</button>
<button class="btn btn-outline-secondary" @onclick="Cancel"><i class="bi bi-x-lg"></i> Abbrechen</button>
</div>
</div>
</div>

14
src/Duempelkas.App/Components/Dialogs/AddTransferDialog.razor
View File

@@ -5,7 +5,7 @@
<div class="dialog-content" @onclick:stopPropagation="true">
<h5 class="mb-3">@(EditEntry != null ? "Umbuchung bearbeiten" : "Neue Umbuchung")</h5>
<div class="mb-3">
<div class="form-container">
<label class="form-label">Zielkonto</label>
<select class="form-select" @bind="targetAccountId">
<option value="0">— Auswählen —</option>
@@ -14,25 +14,21 @@
<option value="@acc.Id">@acc.Name</option>
}
</select>
</div>
<div class="mb-3">
<label class="form-label">Datum</label>
<input type="date" class="form-control" @bind="date" />
</div>
<div class="mb-3">
<label class="form-label">Bezeichnung</label>
<input type="text" class="form-control" @bind="title" placeholder="Beschreibung der Umbuchung" />
</div>
<div class="mb-3">
<label class="form-label">Betrag (€)</label>
<input type="number" class="form-control" @bind="amount" step="0.01" min="0.01" />
</div>
<div class="d-flex justify-content-end gap-2">
<button class="btn btn-outline-secondary" @onclick="Cancel"><i class="bi bi-x-lg"></i> Abbrechen</button>
<button class="btn btn-primary" @onclick="Save"
<button class="btn btn-success" @onclick="Save"
disabled="@(!CanSave)"><i class="bi bi-arrow-left-right"></i> @(EditEntry != null ? "Speichern" : "Umbuchen")</button>
<button class="btn btn-outline-secondary" @onclick="Cancel"><i class="bi bi-x-lg"></i> Abbrechen</button>
</div>
</div>
</div>

2
src/Duempelkas.App/Components/Dialogs/ConfirmDialog.razor
View File

@@ -3,8 +3,8 @@
<h5>@Title</h5>
<p>@Message</p>
<div class="d-flex justify-content-end gap-2">
<button class="btn btn-outline-secondary" @onclick="Cancel"><i class="bi bi-x-lg"></i> @CancelText</button>
<button class="@ConfirmButtonClass" @onclick="Confirm"><i class="@ConfirmIconClass"></i> @ConfirmText</button>
<button class="btn btn-outline-secondary" @onclick="Cancel"><i class="bi bi-x-lg"></i> @CancelText</button>
</div>
</div>
</div>

4
src/Duempelkas.App/Components/Dialogs/EditCarryoverDialog.razor
View File

@@ -1,13 +1,13 @@
<div class="dialog-backdrop" @onclick="Cancel">
<div class="dialog-content" @onclick:stopPropagation="true">
<h5 class="mb-3">Übertrag bearbeiten</h5>
<div class="mb-3">
<div class="form-container">
<label class="form-label">Übertrag (€)</label>
<input type="number" class="form-control" step="0.01" @bind="amount" />
</div>
<div class="d-flex justify-content-end gap-2">
<button class="btn btn-success" @onclick="Save"><i class="bi bi-check-lg"></i> Speichern</button>
<button class="btn btn-outline-secondary" @onclick="Cancel"><i class="bi bi-x-lg"></i> Abbrechen</button>
<button class="btn btn-primary" @onclick="Save"><i class="bi bi-check-lg"></i> Speichern</button>
</div>
</div>
</div>

10
src/Duempelkas.App/Components/Dialogs/EditNameDialog.razor
View File

@@ -1,19 +1,21 @@
<div class="dialog-backdrop" @onclick="Cancel">
<div class="dialog-content" @onclick:stopPropagation="true">
<h5 class="mb-3">Kontoname bearbeiten</h5>
<div class="mb-3">
<label class="form-label">Kontoname</label>
<h5 class="mb-3">@DialogTitle</h5>
<div class="form-container">
<label class="form-label">@NameLabel</label>
<input type="text" class="form-control" @bind="name" @bind:event="oninput" />
</div>
<div class="d-flex justify-content-end gap-2">
<button class="btn btn-success" @onclick="Save" disabled="@string.IsNullOrWhiteSpace(name)"><i class="bi bi-check-lg"></i> Speichern</button>
<button class="btn btn-outline-secondary" @onclick="Cancel"><i class="bi bi-x-lg"></i> Abbrechen</button>
<button class="btn btn-primary" @onclick="Save" disabled="@string.IsNullOrWhiteSpace(name)"><i class="bi bi-check-lg"></i> Speichern</button>
</div>
</div>
</div>
@code {
[Parameter] public string CurrentName { get; set; } = string.Empty;
[Parameter] public string DialogTitle { get; set; } = "Kontoname bearbeiten";
[Parameter] public string NameLabel { get; set; } = "Kontoname";
[Parameter] public EventCallback<string> OnSave { get; set; }
[Parameter] public EventCallback OnCancel { get; set; }

4
src/Duempelkas.App/Pages/Accounts/AccountDetail.razor
View File

@@ -130,6 +130,8 @@
Message="@($"Soll \"{confirmDeleteEntryTitle}\" wirklich gelöscht werden?")"
ConfirmText="Ja, löschen"
CancelText="Nein, abbrechen"
ConfirmButtonClass="btn btn-danger"
ConfirmIconClass="bi bi-trash"
OnConfirm="HandleConfirmDelete"
OnCancel="CancelDeleteConfirm" />
}
@@ -140,6 +142,8 @@
Message="@($"Soll \"{confirmRestoreEntryTitle}\" wiederhergestellt werden?")"
ConfirmText="Ja, wiederherstellen"
CancelText="Nein, abbrechen"
ConfirmButtonClass="btn btn-warning"
ConfirmIconClass="bi bi-arrow-clockwise"
OnConfirm="HandleConfirmRestore"
OnCancel="CancelRestoreConfirm" />
}

35
src/Duempelkas.App/Pages/Dashboard.razor
View File

@@ -1,9 +1,17 @@
@page "/"
@inject IAccountService AccountService
@inject ISettingsService SettingsService
<div class="container-fluid">
<div class="d-flex justify-content-between align-items-center mb-4">
<h2>Übersicht</h2>
<div class="d-flex align-items-center flex-grow-1" style="min-width: 0;">
<h2 class="mb-0 mt-0" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
@DisplayClubName
<button class="btn-edit-pen" @onclick="() => showEditClubName = true" title="Vereinsname bearbeiten">
<i class="bi bi-pencil"></i>
</button>
</h2>
</div>
<div class="d-flex gap-2">
<button class="btn btn-primary" @onclick="() => showAddAccount = true">
<i class="bi bi-plus-lg"></i> Neues Konto
@@ -38,12 +46,25 @@
<AddAccountDialog OnSave="HandleAccountCreated" OnCancel="() => showAddAccount = false" />
}
@if (showEditClubName)
{
<EditNameDialog CurrentName="clubName"
DialogTitle="Vereinsname bearbeiten"
NameLabel="Vereinsname"
OnSave="HandleSaveClubName"
OnCancel="() => showEditClubName = false" />
}
@code {
private List<AccountSummaryDto>? accounts;
private bool showAddAccount;
private bool showEditClubName;
private string clubName = string.Empty;
private string DisplayClubName => string.IsNullOrWhiteSpace(clubName) ? "Mein Verein" : clubName;
protected override async Task OnInitializedAsync()
{
await LoadClubName();
await LoadAccounts();
}
@@ -52,10 +73,22 @@
accounts = await AccountService.GetAllAccountsAsync();
}
private async Task LoadClubName()
{
clubName = await SettingsService.GetClubNameAsync() ?? string.Empty;
}
private async Task HandleAccountCreated(string name)
{
await AccountService.CreateAccountAsync(name);
showAddAccount = false;
await LoadAccounts();
}
private async Task HandleSaveClubName(string newName)
{
await SettingsService.SetClubNameAsync(newName);
showEditClubName = false;
await LoadClubName();
}
}