From f070acef414f464ae2edf3fa6d5636725cb83f2a Mon Sep 17 00:00:00 2001 From: James Chapman Date: Sat, 2 Dec 2023 21:46:51 +0000 Subject: [PATCH] Refactor Transactions page to Razor component --- Groceries/Common/_TablePaginator.cshtml | 33 ----- Groceries/Transactions/Index.cshtml | 81 ---------- .../Transactions/TransactionListModel.cs | 10 -- .../Transactions/TransactionsController.cs | 44 +----- Groceries/Transactions/TransactionsPage.razor | 139 ++++++++++++++++++ Groceries/wwwroot/css/main.css | 2 + 6 files changed, 144 insertions(+), 165 deletions(-) delete mode 100644 Groceries/Common/_TablePaginator.cshtml delete mode 100644 Groceries/Transactions/Index.cshtml delete mode 100644 Groceries/Transactions/TransactionListModel.cs create mode 100644 Groceries/Transactions/TransactionsPage.razor diff --git a/Groceries/Common/_TablePaginator.cshtml b/Groceries/Common/_TablePaginator.cshtml deleted file mode 100644 index d745f46..0000000 --- a/Groceries/Common/_TablePaginator.cshtml +++ /dev/null @@ -1,33 +0,0 @@ -@model IListPageModel -@{ - var routeData = new Dictionary( - 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!)))); -} - -
- - Showing @(Model!.Offset + 1) to @(Model.Offset + Model.Count) of @Model.Total results - - -
diff --git a/Groceries/Transactions/Index.cshtml b/Groceries/Transactions/Index.cshtml deleted file mode 100644 index 69ca099..0000000 --- a/Groceries/Transactions/Index.cshtml +++ /dev/null @@ -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, - }; - } -} - -
-

Transactions

- New transaction -
- -
- - - - - - - - @**@ - - - - @foreach (var transaction in Model.Transactions) - { - - - - - - @**@ - - } - -
- - Date - - Store - - Items - - - - Amount - -
- - @transaction.Store@transaction.TotalItems@transaction.TotalAmount.ToString("c")View
- -
diff --git a/Groceries/Transactions/TransactionListModel.cs b/Groceries/Transactions/TransactionListModel.cs deleted file mode 100644 index 18fc46c..0000000 --- a/Groceries/Transactions/TransactionListModel.cs +++ /dev/null @@ -1,10 +0,0 @@ -namespace Groceries.Transactions; - -public record TransactionListModel(string? Sort, string? Dir, ListPageModel Transactions) -{ - public record Transaction(Guid Id, DateTime CreatedAt, string Store) - { - public decimal TotalAmount { get; init; } - public int TotalItems { get; init; } - } -} diff --git a/Groceries/Transactions/TransactionsController.cs b/Groceries/Transactions/TransactionsController.cs index 6ee4806..fb88847 100644 --- a/Groceries/Transactions/TransactionsController.cs +++ b/Groceries/Transactions/TransactionsController.cs @@ -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 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(); } [HttpGet("new")] diff --git a/Groceries/Transactions/TransactionsPage.razor b/Groceries/Transactions/TransactionsPage.razor new file mode 100644 index 0000000..a32a4c8 --- /dev/null +++ b/Groceries/Transactions/TransactionsPage.razor @@ -0,0 +1,139 @@ +@using Groceries.Data +@layout Layout + +@inject AppDbContext DbContext +@inject NavigationManager Navigation +@inject IHttpContextAccessor HttpContextAccessor + +Groceries – Transactions + +
+

Transactions

+ New transaction +
+ +
+ + + + + + + + @* *@ + + + + @foreach (var transaction in transactions) + { + + + + + + @**@ + + } + +
+ + Date + + Store + + Items + + + + Amount + +
+ + @transaction.Store@transaction.TotalItems@transaction.TotalAmount.ToString("c")View
+ +
+ +@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 transactions = ListPageModel.Empty(); + + 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 + { + { "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, + }; + } +} diff --git a/Groceries/wwwroot/css/main.css b/Groceries/wwwroot/css/main.css index a38faca..38410c3 100644 --- a/Groceries/wwwroot/css/main.css +++ b/Groceries/wwwroot/css/main.css @@ -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 {