Refactor Transactions page to Razor component
This commit is contained in:
parent
51bff2162e
commit
f070acef41
GPG Key ID:
765FE58130277547
@ -1,33 +0,0 @@
|
|||||||
@model IListPageModel
|
|
||||||
@{
|
|
||||||
var routeData = new Dictionary<string, string>(
|
|
||||||
ViewContext.RouteData.Values
|
|
||||||
.Where(data => data.Value != null)
|
|
||||||
.Select(data => KeyValuePair.Create(data.Key, (string)data.Value!))
|
|
||||||
.Concat(Context.Request.Query.Select(param => KeyValuePair.Create(param.Key, (string)param.Value!))));
|
|
||||||
}
|
|
||||||
|
|
||||||
<div class="table__paginator">
|
|
||||||
<span>
|
|
||||||
Showing @(Model!.Offset + 1) to @(Model.Offset + Model.Count) of @Model.Total results
|
|
||||||
</span>
|
|
||||||
<nav class="button-group">
|
|
||||||
@if (Model.Page == 1)
|
|
||||||
{
|
|
||||||
<span class="link link--disabled">Previous</span>
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
<a class="link" asp-all-route-data="routeData" asp-route-page="@(Model.Page - 1)">Previous</a>
|
|
||||||
}
|
|
||||||
|
|
||||||
@if (Model.Page == Model.LastPage)
|
|
||||||
{
|
|
||||||
<span class="link link--disabled">Next</span>
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
<a class="link" asp-all-route-data="routeData" asp-route-page="@(Model.Page + 1)">Next</a>
|
|
||||||
}
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
@ -1,81 +0,0 @@
|
|||||||
@using Groceries.Transactions
|
|
||||||
@using Microsoft.AspNetCore.Html;
|
|
||||||
@model TransactionListModel
|
|
||||||
@{
|
|
||||||
ViewBag.Title = "Transactions";
|
|
||||||
|
|
||||||
string? GetNextSortDir(string col)
|
|
||||||
{
|
|
||||||
if (col != Model.Sort)
|
|
||||||
{
|
|
||||||
return "asc";
|
|
||||||
}
|
|
||||||
|
|
||||||
return Model.Dir switch
|
|
||||||
{
|
|
||||||
null or "" => "asc",
|
|
||||||
"asc" => "desc",
|
|
||||||
_ => null,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
string? GetSortDir(string col)
|
|
||||||
{
|
|
||||||
if (col != Model.Sort)
|
|
||||||
{
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
return Model.Dir switch
|
|
||||||
{
|
|
||||||
"asc" or "desc" => Model.Dir,
|
|
||||||
_ => null,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
<div class="row">
|
|
||||||
<h1 class="row__fill">Transactions</h1>
|
|
||||||
<a class="button button--primary form-field" asp-action="NewTransaction">New transaction</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<section class="table">
|
|
||||||
<table>
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th scope="col" class="table__header table__header--shaded table__header--sortable">
|
|
||||||
<a asp-route-sort="@(GetNextSortDir("date") != null ? "date" : "")" asp-route-dir="@GetNextSortDir("date")" asp-route-page="1" data-dir="@GetSortDir("date")">
|
|
||||||
Date
|
|
||||||
</a>
|
|
||||||
</th>
|
|
||||||
<th scope="col" class="table__header table__header--shaded" style="width: 100%">Store</th>
|
|
||||||
<th scope="col" class="table__header table__header--shaded table__header--sortable">
|
|
||||||
<a asp-route-sort="@(GetNextSortDir("items") != null ? "items" : "")" asp-route-dir="@GetNextSortDir("items")" asp-route-page="1" data-dir="@GetSortDir("items")">
|
|
||||||
Items
|
|
||||||
</a>
|
|
||||||
</th>
|
|
||||||
<th scope="col" class="table__header table__header--shaded table__header--sortable">
|
|
||||||
<a asp-route-sort="@(GetNextSortDir("amount") != null ? "amount" : "")" asp-route-dir="@GetNextSortDir("amount")" asp-route-page="1" data-dir="@GetSortDir("amount")">
|
|
||||||
Amount
|
|
||||||
</a>
|
|
||||||
</th>
|
|
||||||
@*<th scope="col" class="table__header table__header--shaded"></th>*@
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
@foreach (var transaction in Model.Transactions)
|
|
||||||
{
|
|
||||||
<tr>
|
|
||||||
<td class="table__cell">
|
|
||||||
<time datetime="@transaction.CreatedAt.ToString("o")">@transaction.CreatedAt.ToLongDateString()</time>
|
|
||||||
</td>
|
|
||||||
<td class="table__cell">@transaction.Store</td>
|
|
||||||
<td class="table__cell table__cell--numeric">@transaction.TotalItems</td>
|
|
||||||
<td class="table__cell table__cell--numeric">@transaction.TotalAmount.ToString("c")</td>
|
|
||||||
@*<td class="table__cell">View</td>*@
|
|
||||||
</tr>
|
|
||||||
}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
<partial name="_TablePaginator" model="Model.Transactions" />
|
|
||||||
</section>
|
|
||||||
@ -1,10 +0,0 @@
|
|||||||
namespace Groceries.Transactions;
|
|
||||||
|
|
||||||
public record TransactionListModel(string? Sort, string? Dir, ListPageModel<TransactionListModel.Transaction> Transactions)
|
|
||||||
{
|
|
||||||
public record Transaction(Guid Id, DateTime CreatedAt, string Store)
|
|
||||||
{
|
|
||||||
public decimal TotalAmount { get; init; }
|
|
||||||
public int TotalItems { get; init; }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,6 +1,7 @@
|
|||||||
namespace Groceries.Transactions;
|
namespace Groceries.Transactions;
|
||||||
|
|
||||||
using Groceries.Data;
|
using Groceries.Data;
|
||||||
|
using Microsoft.AspNetCore.Http.HttpResults;
|
||||||
using Microsoft.AspNetCore.Mvc;
|
using Microsoft.AspNetCore.Mvc;
|
||||||
using Microsoft.EntityFrameworkCore;
|
using Microsoft.EntityFrameworkCore;
|
||||||
using System.Text.Json;
|
using System.Text.Json;
|
||||||
@ -16,48 +17,9 @@ public class TransactionsController : Controller
|
|||||||
}
|
}
|
||||||
|
|
||||||
[HttpGet]
|
[HttpGet]
|
||||||
public async Task<IActionResult> Index(int page, string? sort, string? dir)
|
public IResult Index()
|
||||||
{
|
{
|
||||||
var transactionsQuery = dbContext.Transactions
|
return new RazorComponentResult<TransactionsPage>();
|
||||||
.Join(
|
|
||||||
dbContext.TransactionTotals,
|
|
||||||
transaction => transaction.Id,
|
|
||||||
transactionTotal => transactionTotal.TransactionId,
|
|
||||||
(transaction, transactionTotal) => new
|
|
||||||
{
|
|
||||||
transaction.Id,
|
|
||||||
transaction.CreatedAt,
|
|
||||||
Store = string.Concat(transaction.Store!.Retailer!.Name, " ", transaction.Store.Name),
|
|
||||||
TotalAmount = transactionTotal.Total,
|
|
||||||
TotalItems = transaction.Items.Sum(item => item.Quantity),
|
|
||||||
});
|
|
||||||
|
|
||||||
transactionsQuery = sort?.ToLowerInvariant() switch
|
|
||||||
{
|
|
||||||
"date" when dir == "desc" => transactionsQuery.OrderByDescending(transaction => transaction.CreatedAt),
|
|
||||||
"amount" when dir == "desc" => transactionsQuery.OrderByDescending(transaction => transaction.TotalAmount),
|
|
||||||
"items" when dir == "desc" => transactionsQuery.OrderByDescending(transaction => transaction.TotalItems),
|
|
||||||
"date" => transactionsQuery.OrderBy(transaction => transaction.CreatedAt),
|
|
||||||
"amount" => transactionsQuery.OrderBy(transaction => transaction.TotalAmount),
|
|
||||||
"items" => transactionsQuery.OrderBy(transaction => transaction.TotalItems),
|
|
||||||
_ => transactionsQuery.OrderByDescending(transaction => transaction.CreatedAt),
|
|
||||||
};
|
|
||||||
|
|
||||||
var transactions = await transactionsQuery
|
|
||||||
.Select(transaction => new TransactionListModel.Transaction(transaction.Id, transaction.CreatedAt, transaction.Store)
|
|
||||||
{
|
|
||||||
TotalAmount = transaction.TotalAmount,
|
|
||||||
TotalItems = transaction.TotalItems,
|
|
||||||
})
|
|
||||||
.ToListPageModelAsync(page);
|
|
||||||
|
|
||||||
if (transactions.Page != page)
|
|
||||||
{
|
|
||||||
return RedirectToAction(nameof(Index), new { page = transactions.Page });
|
|
||||||
}
|
|
||||||
|
|
||||||
var model = new TransactionListModel(sort, dir, transactions);
|
|
||||||
return View(model);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
[HttpGet("new")]
|
[HttpGet("new")]
|
||||||
|
|||||||
139
Groceries/Transactions/TransactionsPage.razor
Normal file
139
Groceries/Transactions/TransactionsPage.razor
Normal file
@ -0,0 +1,139 @@
|
|||||||
|
@using Groceries.Data
|
||||||
|
@layout Layout
|
||||||
|
|
||||||
|
@inject AppDbContext DbContext
|
||||||
|
@inject NavigationManager Navigation
|
||||||
|
@inject IHttpContextAccessor HttpContextAccessor
|
||||||
|
|
||||||
|
<PageTitle>Groceries – Transactions</PageTitle>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<h1 class="row__fill">Transactions</h1>
|
||||||
|
<a class="button button--primary form-field" href="/transactions/new">New transaction</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<section class="table">
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th scope="col" class="table__header table__header--shaded table__header--sortable">
|
||||||
|
<a href="@GetColumnHeaderUri("date")" data-dir="@GetColumnSortDirection("date")">
|
||||||
|
Date
|
||||||
|
</a>
|
||||||
|
</th>
|
||||||
|
<th scope="col" class="table__header table__header--shaded" style="width: 100%">Store</th>
|
||||||
|
<th scope="col" class="table__header table__header--shaded table__header--sortable">
|
||||||
|
<a href="@GetColumnHeaderUri("items")" data-dir="@GetColumnSortDirection("items")">
|
||||||
|
Items
|
||||||
|
</a>
|
||||||
|
</th>
|
||||||
|
<th scope="col" class="table__header table__header--shaded table__header--sortable">
|
||||||
|
<a href="@GetColumnHeaderUri("amount")" data-dir="@GetColumnSortDirection("amount")">
|
||||||
|
Amount
|
||||||
|
</a>
|
||||||
|
</th>
|
||||||
|
@* <th scope="col" class="table__header table__header--shaded"></th> *@
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
@foreach (var transaction in transactions)
|
||||||
|
{
|
||||||
|
<tr>
|
||||||
|
<td class="table__cell">
|
||||||
|
<time datetime="@transaction.CreatedAt.ToString("o")">@transaction.CreatedAt.ToLongDateString()</time>
|
||||||
|
</td>
|
||||||
|
<td class="table__cell">@transaction.Store</td>
|
||||||
|
<td class="table__cell table__cell--numeric">@transaction.TotalItems</td>
|
||||||
|
<td class="table__cell table__cell--numeric">@transaction.TotalAmount.ToString("c")</td>
|
||||||
|
@*<td class="table__cell">View</td>*@
|
||||||
|
</tr>
|
||||||
|
}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<TablePaginator Model="transactions" />
|
||||||
|
</section>
|
||||||
|
|
||||||
|
@code {
|
||||||
|
[SupplyParameterFromQuery]
|
||||||
|
public int? Page { get; set; }
|
||||||
|
|
||||||
|
[SupplyParameterFromQuery(Name = "sort")]
|
||||||
|
public string? SortColumnName { get; set; }
|
||||||
|
|
||||||
|
[SupplyParameterFromQuery(Name = "dir")]
|
||||||
|
public string? SortDirection { get; set; }
|
||||||
|
|
||||||
|
private record TransactionModel(Guid Id, DateTime CreatedAt, string Store, decimal TotalAmount, int TotalItems);
|
||||||
|
|
||||||
|
private ListPageModel<TransactionModel> transactions = ListPageModel.Empty<TransactionModel>();
|
||||||
|
|
||||||
|
protected override async Task OnParametersSetAsync()
|
||||||
|
{
|
||||||
|
var transactionsQuery = DbContext.Transactions
|
||||||
|
.Join(
|
||||||
|
DbContext.TransactionTotals,
|
||||||
|
transaction => transaction.Id,
|
||||||
|
transactionTotal => transactionTotal.TransactionId,
|
||||||
|
(transaction, transactionTotal) => new
|
||||||
|
{
|
||||||
|
transaction.Id,
|
||||||
|
transaction.CreatedAt,
|
||||||
|
Store = string.Concat(transaction.Store!.Retailer!.Name, " ", transaction.Store.Name),
|
||||||
|
TotalAmount = transactionTotal.Total,
|
||||||
|
TotalItems = transaction.Items.Sum(item => item.Quantity),
|
||||||
|
});
|
||||||
|
|
||||||
|
transactionsQuery = SortColumnName?.ToLowerInvariant() switch
|
||||||
|
{
|
||||||
|
"date" when SortDirection == "desc" => transactionsQuery.OrderByDescending(transaction => transaction.CreatedAt),
|
||||||
|
"amount" when SortDirection == "desc" => transactionsQuery.OrderByDescending(transaction => transaction.TotalAmount),
|
||||||
|
"items" when SortDirection == "desc" => transactionsQuery.OrderByDescending(transaction => transaction.TotalItems),
|
||||||
|
"date" => transactionsQuery.OrderBy(transaction => transaction.CreatedAt),
|
||||||
|
"amount" => transactionsQuery.OrderBy(transaction => transaction.TotalAmount),
|
||||||
|
"items" => transactionsQuery.OrderBy(transaction => transaction.TotalItems),
|
||||||
|
_ => transactionsQuery.OrderByDescending(transaction => transaction.CreatedAt),
|
||||||
|
};
|
||||||
|
|
||||||
|
transactions = await transactionsQuery
|
||||||
|
.Select(transaction => new TransactionModel(
|
||||||
|
transaction.Id,
|
||||||
|
transaction.CreatedAt,
|
||||||
|
transaction.Store,
|
||||||
|
transaction.TotalAmount,
|
||||||
|
transaction.TotalItems))
|
||||||
|
.ToListPageModelAsync(Page.GetValueOrDefault(), cancellationToken: HttpContextAccessor.HttpContext!.RequestAborted);
|
||||||
|
|
||||||
|
if (transactions.Page != Page)
|
||||||
|
{
|
||||||
|
Navigation.NavigateTo(Navigation.GetUriWithQueryParameter("page", transactions.Page));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private string GetColumnHeaderUri(string name)
|
||||||
|
{
|
||||||
|
var nextSortDirecton = name == SortColumnName
|
||||||
|
? SortDirection switch
|
||||||
|
{
|
||||||
|
null or "" => "asc",
|
||||||
|
"asc" => "desc",
|
||||||
|
_ => null,
|
||||||
|
}
|
||||||
|
: "asc";
|
||||||
|
|
||||||
|
return Navigation.GetUriWithQueryParameters(new Dictionary<string, object?>
|
||||||
|
{
|
||||||
|
{ "sort", nextSortDirecton != null ? name : null },
|
||||||
|
{ "dir", nextSortDirecton },
|
||||||
|
{ "page", 1 },
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
private string? GetColumnSortDirection(string name)
|
||||||
|
{
|
||||||
|
return SortDirection switch
|
||||||
|
{
|
||||||
|
"asc" or "desc" when name == SortColumnName => SortDirection,
|
||||||
|
_ => null,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -350,6 +350,8 @@ html:has(.modal[open]) {
|
|||||||
color: inherit;
|
color: inherit;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table__header--sortable a::after {
|
.table__header--sortable a::after {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user