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;
|
||||
|
||||
using Groceries.Data;
|
||||
using Microsoft.AspNetCore.Http.HttpResults;
|
||||
using Microsoft.AspNetCore.Mvc;
|
||||
using Microsoft.EntityFrameworkCore;
|
||||
using System.Text.Json;
|
||||
@ -16,48 +17,9 @@ public class TransactionsController : Controller
|
||||
}
|
||||
|
||||
[HttpGet]
|
||||
public async Task<IActionResult> Index(int page, string? sort, string? dir)
|
||||
public IResult Index()
|
||||
{
|
||||
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 = 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);
|
||||
return new RazorComponentResult<TransactionsPage>();
|
||||
}
|
||||
|
||||
[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;
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.table__header--sortable a::after {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user