Add Blazor application layer with UI components and pages
- Service interfaces and DTO models - Dashboard page with account overview - Account detail page with year/entry management - Reusable components: AccountCard, EntryTable, YearSelector - Dialog components: Add/Edit Account, Entry, Transfer, Year - Main layout and routing configuration
This commit is contained in:
29
src/Duempelkas.App/Components/Dialogs/AddAccountDialog.razor
Normal file
29
src/Duempelkas.App/Components/Dialogs/AddAccountDialog.razor
Normal file
@@ -0,0 +1,29 @@
|
||||
<div class="dialog-backdrop" @onclick="Cancel">
|
||||
<div class="dialog-content" @onclick:stopPropagation="true">
|
||||
<h5 class="mb-3">Neues Konto</h5>
|
||||
<div class="mb-3">
|
||||
<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-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>
|
||||
|
||||
@code {
|
||||
[Parameter] public EventCallback<string> OnSave { get; set; }
|
||||
[Parameter] public EventCallback OnCancel { get; set; }
|
||||
|
||||
private string name = string.Empty;
|
||||
|
||||
private async Task Save()
|
||||
{
|
||||
if (!string.IsNullOrWhiteSpace(name))
|
||||
await OnSave.InvokeAsync(name.Trim());
|
||||
}
|
||||
|
||||
private async Task Cancel() => await OnCancel.InvokeAsync();
|
||||
}
|
||||
70
src/Duempelkas.App/Components/Dialogs/AddEntryDialog.razor
Normal file
70
src/Duempelkas.App/Components/Dialogs/AddEntryDialog.razor
Normal file
@@ -0,0 +1,70 @@
|
||||
@inject IEntryService EntryService
|
||||
|
||||
<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">
|
||||
<label class="form-label">Art</label>
|
||||
<select class="form-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">
|
||||
<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"
|
||||
disabled="@(string.IsNullOrWhiteSpace(title) || amount <= 0)">
|
||||
<i class="bi bi-check-lg"></i> @(EditEntry != null ? "Speichern" : "Hinzufügen")
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@code {
|
||||
[Parameter] public int AccountId { get; set; }
|
||||
[Parameter] public EntryDto? EditEntry { get; set; }
|
||||
[Parameter] public EventCallback OnSave { get; set; }
|
||||
[Parameter] public EventCallback OnCancel { get; set; }
|
||||
|
||||
private EntryType entryType = EntryType.Income;
|
||||
private DateTime date = DateTime.Today;
|
||||
private string title = string.Empty;
|
||||
private decimal amount;
|
||||
|
||||
protected override void OnParametersSet()
|
||||
{
|
||||
if (EditEntry != null)
|
||||
{
|
||||
entryType = EditEntry.Type;
|
||||
date = EditEntry.Date;
|
||||
title = EditEntry.Title;
|
||||
amount = EditEntry.Amount;
|
||||
}
|
||||
}
|
||||
|
||||
private async Task Save()
|
||||
{
|
||||
if (EditEntry != null)
|
||||
await EntryService.UpdateEntryAsync(EditEntry.Id, date, title.Trim(), amount);
|
||||
else
|
||||
await EntryService.CreateEntryAsync(AccountId, entryType, date, title.Trim(), amount);
|
||||
await OnSave.InvokeAsync();
|
||||
}
|
||||
|
||||
private async Task Cancel() => await OnCancel.InvokeAsync();
|
||||
}
|
||||
@@ -0,0 +1,78 @@
|
||||
@inject IEntryService EntryService
|
||||
@inject IAccountService AccountService
|
||||
|
||||
<div class="dialog-backdrop" @onclick="Cancel">
|
||||
<div class="dialog-content" @onclick:stopPropagation="true">
|
||||
<h5 class="mb-3">@(EditEntry != null ? "Umbuchung bearbeiten" : "Neue Umbuchung")</h5>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Zielkonto</label>
|
||||
<select class="form-select" @bind="targetAccountId">
|
||||
<option value="0">— Auswählen —</option>
|
||||
@foreach (var acc in accounts.Where(a => a.Id != SourceAccountId))
|
||||
{
|
||||
<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"
|
||||
disabled="@(!CanSave)"><i class="bi bi-arrow-left-right"></i> @(EditEntry != null ? "Speichern" : "Umbuchen")</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@code {
|
||||
[Parameter] public int SourceAccountId { get; set; }
|
||||
[Parameter] public EntryDto? EditEntry { get; set; }
|
||||
[Parameter] public EventCallback OnSave { get; set; }
|
||||
[Parameter] public EventCallback OnCancel { get; set; }
|
||||
|
||||
private List<AccountSummaryDto> accounts = new();
|
||||
private int targetAccountId;
|
||||
private DateTime date = DateTime.Today;
|
||||
private string title = string.Empty;
|
||||
private decimal amount;
|
||||
|
||||
private bool CanSave => targetAccountId > 0 && !string.IsNullOrWhiteSpace(title) && amount > 0;
|
||||
|
||||
protected override async Task OnParametersSetAsync()
|
||||
{
|
||||
if (!accounts.Any())
|
||||
accounts = await AccountService.GetAllAccountsAsync();
|
||||
|
||||
if (EditEntry != null)
|
||||
{
|
||||
targetAccountId = EditEntry.LinkedAccountId ?? 0;
|
||||
date = EditEntry.Date;
|
||||
title = EditEntry.Title;
|
||||
amount = EditEntry.Amount;
|
||||
}
|
||||
}
|
||||
|
||||
private async Task Save()
|
||||
{
|
||||
if (EditEntry != null)
|
||||
await EntryService.UpdateTransferAsync(EditEntry.Id, targetAccountId, date, title.Trim(), amount);
|
||||
else
|
||||
await EntryService.CreateTransferAsync(SourceAccountId, targetAccountId, date, title.Trim(), amount);
|
||||
await OnSave.InvokeAsync();
|
||||
}
|
||||
|
||||
private async Task Cancel() => await OnCancel.InvokeAsync();
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
@* AddYearDialog is no longer used - year management has been removed from the data model. *@
|
||||
22
src/Duempelkas.App/Components/Dialogs/ConfirmDialog.razor
Normal file
22
src/Duempelkas.App/Components/Dialogs/ConfirmDialog.razor
Normal file
@@ -0,0 +1,22 @@
|
||||
<div class="dialog-backdrop" @onclick="Cancel">
|
||||
<div class="dialog-content" @onclick:stopPropagation="true">
|
||||
<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="btn btn-danger" @onclick="Confirm"><i class="bi bi-trash"></i> @ConfirmText</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@code {
|
||||
[Parameter] public string Title { get; set; } = "Bestätigung";
|
||||
[Parameter] public string Message { get; set; } = "Sind Sie sicher?";
|
||||
[Parameter] public string ConfirmText { get; set; } = "Ja, bestätigen";
|
||||
[Parameter] public string CancelText { get; set; } = "Nein, abbrechen";
|
||||
[Parameter] public EventCallback OnConfirm { get; set; }
|
||||
[Parameter] public EventCallback OnCancel { get; set; }
|
||||
|
||||
private async Task Confirm() => await OnConfirm.InvokeAsync();
|
||||
private async Task Cancel() => await OnCancel.InvokeAsync();
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
<div class="dialog-backdrop" @onclick="Cancel">
|
||||
<div class="dialog-content" @onclick:stopPropagation="true">
|
||||
<h5 class="mb-3">Übertrag bearbeiten</h5>
|
||||
<div class="mb-3">
|
||||
<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-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>
|
||||
|
||||
@code {
|
||||
[Parameter] public decimal CurrentAmount { get; set; }
|
||||
[Parameter] public EventCallback<decimal> OnSave { get; set; }
|
||||
[Parameter] public EventCallback OnCancel { get; set; }
|
||||
|
||||
private decimal amount;
|
||||
|
||||
protected override void OnParametersSet() => amount = CurrentAmount;
|
||||
|
||||
private async Task Save() => await OnSave.InvokeAsync(amount);
|
||||
|
||||
private async Task Cancel() => await OnCancel.InvokeAsync();
|
||||
}
|
||||
31
src/Duempelkas.App/Components/Dialogs/EditNameDialog.razor
Normal file
31
src/Duempelkas.App/Components/Dialogs/EditNameDialog.razor
Normal file
@@ -0,0 +1,31 @@
|
||||
<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>
|
||||
<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-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 EventCallback<string> OnSave { get; set; }
|
||||
[Parameter] public EventCallback OnCancel { get; set; }
|
||||
|
||||
private string name = string.Empty;
|
||||
|
||||
protected override void OnParametersSet() => name = CurrentName;
|
||||
|
||||
private async Task Save()
|
||||
{
|
||||
if (!string.IsNullOrWhiteSpace(name))
|
||||
await OnSave.InvokeAsync(name.Trim());
|
||||
}
|
||||
|
||||
private async Task Cancel() => await OnCancel.InvokeAsync();
|
||||
}
|
||||
Reference in New Issue
Block a user