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:
16
src/Duempelkas.App/Components/Accounts/AccountCard.razor
Normal file
16
src/Duempelkas.App/Components/Accounts/AccountCard.razor
Normal file
@@ -0,0 +1,16 @@
|
||||
@inject NavigationManager Navigation
|
||||
|
||||
<div class="card account-card h-100" @onclick="Navigate">
|
||||
<div class="card-body d-flex flex-column justify-content-between">
|
||||
<h5 class="card-title mb-3">@Account.Name</h5>
|
||||
<div class="@(Account.TotalBalance >= 0 ? "amount-positive" : "amount-negative") fs-4">
|
||||
@($"{Account.TotalBalance:N2} €")
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@code {
|
||||
[Parameter] public AccountSummaryDto Account { get; set; } = default!;
|
||||
|
||||
private void Navigate() => Navigation.NavigateTo($"/accounts/{Account.Id}");
|
||||
}
|
||||
12
src/Duempelkas.App/Components/Accounts/AccountCardList.razor
Normal file
12
src/Duempelkas.App/Components/Accounts/AccountCardList.razor
Normal file
@@ -0,0 +1,12 @@
|
||||
<div class="row g-3">
|
||||
@foreach (var account in Accounts)
|
||||
{
|
||||
<div class="col-sm-6 col-md-4 col-lg-3">
|
||||
<AccountCard Account="account" />
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
@code {
|
||||
[Parameter] public List<AccountSummaryDto> Accounts { get; set; } = new();
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
@* AccountHeader is no longer used - header is now inline in AccountDetail.razor *@
|
||||
50
src/Duempelkas.App/Components/Accounts/EntryRow.razor
Normal file
50
src/Duempelkas.App/Components/Accounts/EntryRow.razor
Normal file
@@ -0,0 +1,50 @@
|
||||
<tr class="@GetRowClass()">
|
||||
<td>@Entry.DisplayId</td>
|
||||
<td>@Entry.Date.ToString("dd.MM.yyyy")</td>
|
||||
<td>
|
||||
@Entry.Title
|
||||
@if (Entry.IsTransfer && !string.IsNullOrEmpty(Entry.LinkedAccountName))
|
||||
{
|
||||
<small class="text-muted ms-1">
|
||||
(@(Entry.Type == EntryType.Expense ? "an" : "von") @Entry.LinkedAccountName)
|
||||
</small>
|
||||
}
|
||||
</td>
|
||||
<td class="text-end @(Entry.Type == EntryType.Income ? "amount-positive" : "amount-negative")">
|
||||
@(Entry.Type == EntryType.Income ? "+" : "\u2212")@($"{Entry.Amount:N2} €")
|
||||
</td>
|
||||
<td>
|
||||
@if (Entry.IsDeleted)
|
||||
{
|
||||
<button class="btn btn-outline-success btn-sm" @onclick="() => OnRestore.InvokeAsync(Entry.Id)" title="Wiederherstellen">
|
||||
<i class="bi bi-arrow-counterclockwise"></i>
|
||||
</button>
|
||||
}
|
||||
else
|
||||
{
|
||||
<div class="d-flex gap-1">
|
||||
<button class="btn btn-outline-secondary btn-sm" @onclick="() => OnEdit.InvokeAsync(Entry.Id)" title="Bearbeiten">
|
||||
<i class="bi bi-pencil"></i>
|
||||
</button>
|
||||
<button class="btn btn-outline-danger btn-sm" @onclick="() => OnDelete.InvokeAsync(Entry.Id)" title="Löschen">
|
||||
<i class="bi bi-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@code {
|
||||
[Parameter] public EntryDto Entry { get; set; } = default!;
|
||||
[Parameter] public EventCallback<int> OnDelete { get; set; }
|
||||
[Parameter] public EventCallback<int> OnRestore { get; set; }
|
||||
[Parameter] public EventCallback<int> OnEdit { get; set; }
|
||||
|
||||
private string GetRowClass()
|
||||
{
|
||||
var classes = new List<string>();
|
||||
if (Entry.IsTransfer) classes.Add("entry-row-transfer");
|
||||
if (Entry.IsDeleted) classes.Add("entry-deleted");
|
||||
return string.Join(" ", classes);
|
||||
}
|
||||
}
|
||||
31
src/Duempelkas.App/Components/Accounts/EntryTable.razor
Normal file
31
src/Duempelkas.App/Components/Accounts/EntryTable.razor
Normal file
@@ -0,0 +1,31 @@
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover table-sm align-middle">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th style="width: 100px;">LfdNr</th>
|
||||
<th style="width: 120px;">Datum</th>
|
||||
<th>Bezeichnung</th>
|
||||
<th style="width: 140px;" class="text-end">Betrag</th>
|
||||
<th style="width: 80px;"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach (var entry in Entries)
|
||||
{
|
||||
<EntryRow Entry="entry" OnDelete="OnDeleteEntry" OnRestore="OnRestoreEntry" OnEdit="OnEditEntry" />
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
@if (!Entries.Any())
|
||||
{
|
||||
<div class="text-center py-3 text-muted">Keine Einträge vorhanden.</div>
|
||||
}
|
||||
|
||||
@code {
|
||||
[Parameter] public List<EntryDto> Entries { get; set; } = new();
|
||||
[Parameter] public EventCallback<int> OnDeleteEntry { get; set; }
|
||||
[Parameter] public EventCallback<int> OnRestoreEntry { get; set; }
|
||||
[Parameter] public EventCallback<int> OnEditEntry { get; set; }
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
@* ExportButton is no longer used - export is now inline in AccountDetail.razor *@
|
||||
@@ -0,0 +1 @@
|
||||
@* YearSelector is no longer used - year selection has been removed from the data model. *@
|
||||
Reference in New Issue
Block a user