jamsch0/groceries
1
0
Fork 0
Code Issues Pull Requests Actions Packages Activity

Refactor Items page to Razor component

Browse Source
This commit is contained in:
James Chapman 2023-12-02 20:52:01 +00:00
parent f1d65f590f
commit 51bff2162e
Signed by: jamsch0
GPG Key ID: 765FE58130277547
14 changed files with 109 additions and 418 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
Groceries/Common/TurboControllerExtensions.cs
View File

@ -1,32 +0,0 @@
namespace Groceries.Common;
using Microsoft.AspNetCore.Mvc;
public static class TurboControllerExtensions
{
public static TurboStreamResult TurboStream(
this Controller controller,
TurboStreamAction action,
string target,
object? model)
{
return controller.TurboStream(action, target, null, model);
}
public static TurboStreamResult TurboStream(
this Controller controller,
TurboStreamAction action,
string target,
string? viewName,
object? model)
{
controller.ViewData.Model = model;
return new TurboStreamResult(action, target)
{
ViewName = viewName,
ViewData = controller.ViewData,
TempData = controller.TempData,
};
}
}

19
Groceries/Common/TurboHttpRequestExtensions.cs
View File

@ -1,19 +0,0 @@
namespace Groceries.Common;
public static class TurboHttpRequestExtensions
{
public static bool IsTurboFrameRequest(this HttpRequest request)
{
return request.Headers.ContainsKey("Turbo-Frame");
}
public static bool IsTurboFrameRequest(this HttpRequest request, string frameId)
{
return request.Headers.TryGetValue("Turbo-Frame", out var values) && values.Contains(frameId);
}
public static bool AcceptsTurboStream(this HttpRequest request)
{
return request.GetTypedHeaders().Accept.Any(value => value.MediaType == "text/vnd.turbo-stream.html");
}
}

182
Groceries/Common/TurboStreamResult.cs
View File

@ -1,182 +0,0 @@
namespace Groceries.Common;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.Controllers;
using Microsoft.AspNetCore.Mvc.Infrastructure;
using Microsoft.AspNetCore.Mvc.ModelBinding;
using Microsoft.AspNetCore.Mvc.Rendering;
using Microsoft.AspNetCore.Mvc.ViewEngines;
using Microsoft.AspNetCore.Mvc.ViewFeatures;
using Microsoft.Extensions.Options;
using System.Diagnostics;
using System.Globalization;
public enum TurboStreamAction
{
Append,
Prepend,
Replace,
Update,
Remove,
Before,
After,
}
public class TurboStreamResult : ActionResult, IStatusCodeActionResult
{
public TurboStreamResult(TurboStreamAction action, string target)
{
Action = action;
Target = target;
}
public TurboStreamAction Action { get; set; }
public string Target { get; set; }
public string ContentType => "text/vnd.turbo-stream.html";
/// <summary>
/// Gets or sets the HTTP status code.
/// </summary>
public int? StatusCode { get; set; }
/// <summary>
/// Gets or sets the name or path of the partial view that is rendered to the response.
/// </summary>
/// <remarks>
/// When <c>null</c>, defaults to <see cref="ControllerActionDescriptor.ActionName"/>.
/// </remarks>
public string? ViewName { get; set; }
/// <summary>
/// Gets the view data model.
/// </summary>
public object? Model => ViewData.Model;
/// <summary>
/// Gets or sets the <see cref="ViewDataDictionary"/> for this result.
/// </summary>
public ViewDataDictionary ViewData { get; set; } = null!;
/// <summary>
/// Gets or sets the <see cref="ITempDataDictionary"/> for this result.
/// </summary>
public ITempDataDictionary TempData { get; set; } = null!;
/// <summary>
/// Gets or sets the <see cref="IViewEngine"/> used to locate views.
/// </summary>
/// <remarks>
/// When <c>null</c>, an instance of <see cref="ICompositeViewEngine"/> from
/// <c>ActionContext.HttpContext.RequestServices</c> is used.
/// </remarks>
public IViewEngine? ViewEngine { get; set; }
/// <inheritdoc/>
public override Task ExecuteResultAsync(ActionContext context)
{
var services = context.HttpContext.RequestServices;
var executor = services.GetRequiredService<IActionResultExecutor<TurboStreamResult>>();
return executor.ExecuteAsync(context, this);
}
}
public class TurboStreamResultExecutor : PartialViewResultExecutor, IActionResultExecutor<TurboStreamResult>
{
public TurboStreamResultExecutor(
IOptions<MvcViewOptions> viewOptions,
IHttpResponseStreamWriterFactory writerFactory,
ICompositeViewEngine viewEngine,
ITempDataDictionaryFactory tempDataFactory,
DiagnosticListener diagnosticListener,
ILoggerFactory loggerFactory,
IModelMetadataProvider modelMetadataProvider)
: base(viewOptions, writerFactory, viewEngine, tempDataFactory, diagnosticListener, loggerFactory, modelMetadataProvider)
{
}
/// <inheritdoc/>
public Task ExecuteAsync(ActionContext context, TurboStreamResult result)
{
var viewEngine = result.ViewEngine ?? ViewEngine;
var viewName = result.ViewName ?? GetActionName(context)!;
var viewEngineResult = viewEngine.GetView(executingFilePath: null, viewPath: viewName, isMainPage: false);
var originalViewEngineResult = viewEngineResult;
if (!viewEngineResult.Success)
{
viewEngineResult = viewEngine.FindView(context, viewName, isMainPage: false);
}
viewEngineResult.EnsureSuccessful(originalViewEngineResult.SearchedLocations);
var action = result.Action.ToString().ToLowerInvariant();
var preContent = result.Action switch
{
TurboStreamAction.Remove => $"<turbo-stream action=\"{action}\">\n",
_ => $"<turbo-stream action=\"{action}\" target=\"{result.Target}\">\n<template>\n",
};
var postContent = result.Action switch
{
TurboStreamAction.Remove => "</turbo-stream>",
_ => "</template>\n</turbo-stream>",
};
result.ViewData["RenderingToTurboStream"] = true;
using var view = new WrapperView(viewEngineResult.View, preContent, postContent);
return ExecuteAsync(context, view, result.ViewData, result.TempData, result.ContentType, result.StatusCode);
}
private static string? GetActionName(ActionContext context)
{
const string actionNameKey = "action";
if (!context.RouteData.Values.TryGetValue(actionNameKey, out var routeValue))
{
return null;
}
string? normalizedValue = null;
if (context.ActionDescriptor.RouteValues.TryGetValue(actionNameKey, out var value) && !string.IsNullOrEmpty(value))
{
normalizedValue = value;
}
var stringRouteValue = Convert.ToString(routeValue, CultureInfo.InvariantCulture);
if (string.Equals(normalizedValue, stringRouteValue, StringComparison.OrdinalIgnoreCase))
{
return normalizedValue;
}
return stringRouteValue;
}
}
public sealed class WrapperView : IDisposable, IView
{
private readonly IView innerView;
private readonly string preContent;
private readonly string postContent;
public WrapperView(IView innerView, string preContent, string postContent)
{
this.innerView = innerView;
this.preContent = preContent;
this.postContent = postContent;
}
public string Path => string.Empty;
public void Dispose()
{
(innerView as IDisposable)?.Dispose();
}
public async Task RenderAsync(ViewContext context)
{
context.Writer.Write(preContent);
await innerView.RenderAsync(context);
context.Writer.Write(postContent);
}
}

12
Groceries/Common/_TurboStream.cshtml
View File

@ -1,12 +0,0 @@
<turbo-stream action="@ViewBag.Action" target="@ViewBag.Target">
@if (ViewBag.Action != "remove")
{
<template>
@RenderBody()
</template>
}
else
{
IgnoreBody();
}
</turbo-stream>

2
Groceries/Components/TablePaginator.razor
View File

@ -26,7 +26,7 @@
</div> </div>
@code { @code {
[Parameter] [Parameter, EditorRequired]
public required IListPageModel Model { get; set; } public required IListPageModel Model { get; set; }
private int FirstItem => Model.Count > 0 ? Model.Offset + 1 : 0; private int FirstItem => Model.Count > 0 ? Model.Offset + 1 : 0;

9
Groceries/HttpRequestExtensions.cs Normal file
View File

@ -0,0 +1,9 @@
namespace Groceries;
public static class HttpRequestExtensions
{
public static bool IsTurboFrameRequest(this HttpRequest request, string frameId)
{
return request.Headers.TryGetValue("Turbo-Frame", out var values) && values.Contains(frameId);
}
}

25
Groceries/Items/EditItem.cshtml
View File

@ -1,25 +0,0 @@
@using Groceries.Data
@model Item
@{
Layout = ViewBag.RenderingToTurboStream == true ? null : "_Modal";
ViewBag.Title = "Edit Item";
}
<h1>Edit Item</h1>
<form asp-action="EditItem" method="post">
<div class="form-field">
<div class="form-field__control input">
<input class="input__control" name="brand" value="@Model.Brand" placeholder="Brand" />
</div>
</div>
<div class="form-field">
<div class="form-field__control input">
<input class="input__control" name="name" value="@Model.Name" placeholder="Name" />
</div>
</div>
<button class="button button--flat" type="reset" data-action="modal#close">Cancel</button>
<button class="button button--flat">Save</button>
</form>

55
Groceries/Items/Index.cshtml
View File

@ -1,55 +0,0 @@
@using Groceries.Items
@model ItemListModel
@{
ViewBag.Title = "Items";
}
<div class="row">
<h1 class="row__fill">Items</h1>
<form method="get" data-controller="search-form" data-turbo-frame="table" data-turbo-action="advance">
<input type="hidden" name="page" value="1" />
<div class="form-field">
<div class="form-field__control input">
<div class="input__inset">
@* Search icon *@
<svg class="icon icon--sm" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0V0z" fill="none" /><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" /></svg>
</div>
<input class="input__control" type="search" name="search" value="@Model.Search" placeholder="Search" autocomplete="off" data-action="search-form#input" />
<button class="input__addon button" data-search-form-target="button">Search</button>
</div>
</div>
</form>
</div>
<turbo-frame id="table" target="_top">
<section class="table">
<table>
<thead>
<tr>
<th scope="col" class="table__header table__header--shaded">Brand</th>
<th scope="col" class="table__header table__header--shaded" style="width: 100%">Name</th>
<th scope="col" class="table__header table__header--shaded">Last Purchased</th>
<th scope="col" class="table__header table__header--shaded">Barcode</th>
@*<th scope="col" class="table__header table__header--shaded"></th>*@
</tr>
</thead>
<tbody>
@foreach (var item in Model.Items)
{
<tr>
<td class="table__cell">@item.Brand</td>
<td class="table__cell">@item.Name</td>
<td class="table__cell">
<time datetime="@item.LastPurchasedAt?.ToString("o")">@item.LastPurchasedAt?.ToLongDateString()</time>
</td>
<td class="table__cell table__cell--icon" style="width: fit-content">@(item.HasBarcode ? "✓" : "")</td>
@*<td class="table__cell">
<a class="link" asp-action="EditItem" asp-route-id="@item.Id">Edit</a>
</td>*@
</tr>
}
</tbody>
</table>
<partial name="_TablePaginator" model="Model.Items" />
</section>
</turbo-frame>

10
Groceries/Items/ItemListModel.cs
View File

@ -1,10 +0,0 @@
namespace Groceries.Items;
public record ItemListModel(string? Search, ListPageModel<ItemListModel.Item> Items)
{
public record Item(Guid Id, string Brand, string Name)
{
public bool HasBarcode { get; init; }
public DateTime? LastPurchasedAt { get; init; }
}
}

80
Groceries/Items/ItemsController.cs
View File

@ -1,86 +1,14 @@
namespace Groceries.Items; namespace Groceries.Items;
using Groceries.Common; using Microsoft.AspNetCore.Http.HttpResults;
using Groceries.Data;
using Microsoft.AspNetCore.Mvc; using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;
[Route("/items")] [Route("/items")]
public class ItemsController : Controller public class ItemsController : ControllerBase
{ {
private readonly AppDbContext dbContext;
public ItemsController(AppDbContext dbContext)
{
this.dbContext = dbContext;
}
[HttpGet] [HttpGet]
public async Task<IActionResult> Index(int page, string? search) public IResult Index()
{ {
var itemsQuery = dbContext.Items.AsQueryable(); return new RazorComponentResult<ItemsPage>();
if (!string.IsNullOrEmpty(search))
{
var searchPattern = $"%{search}%";
itemsQuery = itemsQuery.Where(item => EF.Functions.ILike(item.Brand + ' ' + item.Name, searchPattern));
}
var items = await itemsQuery
.OrderBy(item => item.Brand)
.ThenBy(item => item.Name)
.GroupJoin(
dbContext.ItemPurchases.Where(purchase => purchase.IsLastPurchase),
item => item.Id,
lastPurchase => lastPurchase.ItemId,
(item, lastPurchase) => new { item, lastPurchase })
.SelectMany(
group => group.lastPurchase.DefaultIfEmpty(),
(group, lastPurchase) => new ItemListModel.Item(group.item.Id, group.item.Brand, group.item.Name)
{
HasBarcode = group.item.Barcodes.Count != 0,
LastPurchasedAt = lastPurchase != null ? lastPurchase.CreatedAt : null,
})
.ToListPageModelAsync(page, cancellationToken: HttpContext.RequestAborted);
if (items.Page != page)
{
return RedirectToAction(nameof(Index), new { page = items.Page, search });
}
var model = new ItemListModel(search, items);
return View(model);
}
[HttpGet("{id}")]
public async Task<IActionResult> EditItem(Guid id)
{
var item = await dbContext.Items
.SingleOrDefaultAsync(item => item.Id == id, HttpContext.RequestAborted);
if (item == null)
{
return NotFound();
}
return View(item);
}
[HttpPost("{id}")]
public async Task<IActionResult> EditItem(Guid id, string brand, string name)
{
var item = await dbContext.Items
.SingleOrDefaultAsync(item => item.Id == id, HttpContext.RequestAborted);
if (item == null)
{
return NotFound();
}
if (Request.AcceptsTurboStream())
{
return this.TurboStream(TurboStreamAction.Replace, "modal-body", item);
}
return RedirectToAction(nameof(EditItem));
} }
} }

95
Groceries/Items/ItemsPage.razor Normal file
View File

@ -0,0 +1,95 @@
@using Groceries.Data
@using Microsoft.EntityFrameworkCore
@layout Layout
@inject AppDbContext DbContext
@inject NavigationManager Navigation
@inject IHttpContextAccessor HttpContextAccessor
<PageTitle>Groceries &ndash; Items</PageTitle>
<div class="row">
<h1 class="row__fill">Items</h1>
<SearchForm data-turbo-frame="table" data-turbo-action="advance">
<input type="hidden" name="page" value="1" />
</SearchForm>
</div>
<turbo-frame id="table" target="top">
<section class="table">
<table>
<thead>
<tr>
<th scope="col" class="table__header table__header--shaded">Brand</th>
<th scope="col" class="table__header table__header--shaded" style="width: 100%">Name</th>
<th scope="col" class="table__header table__header--shaded">Last Purchased</th>
<th scope="col" class="table__header table__header--shaded">Barcode</th>
@*<th scope="col" class="table__header table__header--shaded"></th>*@
</tr>
</thead>
<tbody>
@foreach (var item in items)
{
<tr>
<td class="table__cell">@item.Brand</td>
<td class="table__cell">@item.Name</td>
<td class="table__cell">
<time datetime="@item.LastPurchasedAt?.ToString("o")">@item.LastPurchasedAt?.ToLongDateString()</time>
</td>
<td class="table__cell table__cell--icon" style="width: fit-content">@(item.HasBarcode ? "✓" : "")</td>
@*<td class="table__cell">
<a class="link" href="/items/edit/@item.Id">Edit</a>
</td>*@
</tr>
}
</tbody>
</table>
<TablePaginator Model="items" />
</section>
</turbo-frame>
@code {
[SupplyParameterFromQuery]
public int? Page { get; set; }
[SupplyParameterFromQuery]
public string? Search { get; set; }
private record ItemModel(Guid Id, string Brand, string Name, bool HasBarcode, DateTime? LastPurchasedAt);
private ListPageModel<ItemModel> items = ListPageModel.Empty<ItemModel>();
protected override async Task OnParametersSetAsync()
{
var itemsQuery = DbContext.Items.AsQueryable();
if (!string.IsNullOrEmpty(Search))
{
var searchPattern = $"%{Search}%";
itemsQuery = itemsQuery.Where(item => EF.Functions.ILike(item.Brand + ' ' + item.Name, searchPattern));
}
items = await itemsQuery
.OrderBy(item => item.Brand)
.ThenBy(item => item.Name)
.GroupJoin(
DbContext.ItemPurchases.Where(purchase => purchase.IsLastPurchase),
item => item.Id,
lastPurchase => lastPurchase.ItemId,
(item, lastPurchase) => new { item, lastPurchase })
.SelectMany(
group => group.lastPurchase.DefaultIfEmpty(),
(group, lastPurchase) => new ItemModel(
group.item.Id,
group.item.Brand,
group.item.Name,
group.item.Barcodes.Count != 0,
lastPurchase != null ? lastPurchase.CreatedAt : null))
.ToListPageModelAsync(Page.GetValueOrDefault(), cancellationToken: HttpContextAccessor.HttpContext!.RequestAborted);
if (items.Page != Page)
{
Navigation.NavigateTo(Navigation.GetUriWithQueryParameter("page", items.Page));
}
}
}

4
Groceries/Program.cs
View File

@ -1,9 +1,7 @@
using DbUp; using DbUp;
using Groceries.Common;
using Groceries.Data; using Groceries.Data;
using Microsoft.AspNetCore.DataProtection; using Microsoft.AspNetCore.DataProtection;
using Microsoft.AspNetCore.HttpOverrides; using Microsoft.AspNetCore.HttpOverrides;
using Microsoft.AspNetCore.Mvc.Infrastructure;
using Microsoft.AspNetCore.Mvc.Razor; using Microsoft.AspNetCore.Mvc.Razor;
using Microsoft.EntityFrameworkCore; using Microsoft.EntityFrameworkCore;
@ -59,8 +57,6 @@ builder.Services.AddDistributedMemoryCache();
builder.Services.AddHttpContextAccessor(); builder.Services.AddHttpContextAccessor();
builder.Services.AddSession(); builder.Services.AddSession();
builder.Services.AddSingleton<IActionResultExecutor<TurboStreamResult>, TurboStreamResultExecutor>();
builder.Services.AddDbContextPool<AppDbContext>(options => options builder.Services.AddDbContextPool<AppDbContext>(options => options
.EnableDetailedErrors(env.IsDevelopment()) .EnableDetailedErrors(env.IsDevelopment())
.EnableSensitiveDataLogging(env.IsDevelopment()) .EnableSensitiveDataLogging(env.IsDevelopment())

1
Groceries/Stores/StoresController.cs
View File

@ -1,6 +1,5 @@
namespace Groceries.Stores; namespace Groceries.Stores;
using Groceries.Common;
using Groceries.Data; using Groceries.Data;
using Microsoft.AspNetCore.Http.HttpResults; using Microsoft.AspNetCore.Http.HttpResults;
using Microsoft.AspNetCore.Mvc; using Microsoft.AspNetCore.Mvc;

1
Groceries/Transactions/TransactionsController.cs
View File

@ -1,6 +1,5 @@
namespace Groceries.Transactions; namespace Groceries.Transactions;
using Groceries.Common;
using Groceries.Data; using Groceries.Data;
using Microsoft.AspNetCore.Mvc; using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore; using Microsoft.EntityFrameworkCore;