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

Refactor tables to Razor components

Browse Source
This commit is contained in:
James Chapman 2023-12-10 20:36:48 +00:00
parent fd05501fad
commit 8223568ed6
Signed by: jamsch0
GPG Key ID: 765FE58130277547
15 changed files with 624 additions and 417 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
Groceries/Components/Align.cs Normal file
View File

@ -0,0 +1,8 @@
namespace Groceries.Components;
public enum Align
{
Start,
Center,
End,
}

49
Groceries/Components/DataSort.cs Normal file
View File

@ -0,0 +1,49 @@
namespace Groceries.Components;
using System.Linq.Expressions;
public static class DataSort
{
public static DataSort<TItem> By<TItem, TResult>(Expression<Func<TItem, TResult>> expression, string key)
=> new((source, desc) => desc ? source.OrderByDescending(expression) : source.OrderBy(expression), key);
public static DataSort<TItem> ByDescending<TItem, TResult>(Expression<Func<TItem, TResult>> expression, string key)
=> new((source, desc) => desc ? source.OrderBy(expression) : source.OrderByDescending(expression), key);
}
public class DataSort<TItem>
{
private readonly Func<IQueryable<TItem>, bool, IOrderedQueryable<TItem>> first;
private readonly List<Func<IOrderedQueryable<TItem>, bool, IOrderedQueryable<TItem>>> thens = [];
internal DataSort(Func<IQueryable<TItem>, bool, IOrderedQueryable<TItem>> first, string key)
{
this.first = first;
Key = key;
}
public string Key { get; }
public DataSort<TItem> ThenBy<TResult>(Expression<Func<TItem, TResult>> expression)
{
thens.Add((source, desc) => desc ? source.ThenByDescending(expression) : source.ThenBy(expression));
return this;
}
public DataSort<TItem> ThenByDescending<TResult>(Expression<Func<TItem, TResult>> expression)
{
thens.Add((source, desc) => desc ? source.ThenBy(expression) : source.ThenByDescending(expression));
return this;
}
internal IOrderedQueryable<TItem> Apply(IQueryable<TItem> source, bool descending)
{
var ordered = first(source, descending);
foreach (var then in thens)
{
ordered = then(ordered, descending);
}
return ordered;
}
}

27
Groceries/Components/PaginationState.cs Normal file
View File

@ -0,0 +1,27 @@
namespace Groceries.Components;
public class PaginationState
{
private int itemCount;
public int PageSize { get; set; } = 10;
public int CurrentPage { get; internal set; }
public int TotalItemCount { get; internal set; }
public int ItemCount
{
get => itemCount;
internal set
{
itemCount = value;
ItemCountChanged?.Invoke(this, EventArgs.Empty);
}
}
public int Offset => (CurrentPage - 1) * PageSize;
public int LastPage => ((TotalItemCount - 1) / PageSize) + 1;
internal event EventHandler? ItemCountChanged;
public override int GetHashCode()
=> HashCode.Combine(PageSize, CurrentPage, ItemCount, TotalItemCount);
}

71
Groceries/Components/PropertyTableColumn.cs Normal file
View File

@ -0,0 +1,71 @@
namespace Groceries.Components;
using Humanizer;
using Microsoft.AspNetCore.Components;
using System.Linq.Expressions;
public class PropertyTableColumn<TItem, TProp> : TableColumn<TItem>
{
private Expression<Func<TItem, TProp>>? lastAssignedProperty;
private Func<TItem, TProp>? compiledPropertyExpression;
private Func<TItem, string?>? cellTextFunc;
private DataSort<TItem>? sortBy;
[Parameter, EditorRequired]
public required Expression<Func<TItem, TProp>> Property { get; set; }
[Parameter]
public RenderFragment<TProp>? ChildContent { get; set; }
[Parameter]
public string? Format { get; set; }
[Parameter]
public override bool Sortable { get; set; }
public override DataSort<TItem>? SortBy
{
get => sortBy;
set => throw new NotSupportedException();
}
protected internal override RenderFragment<TItem> CellContent
=> ChildContent != null
? item => ChildContent(compiledPropertyExpression!(item))
: item => builder => builder.AddContent(0, cellTextFunc?.Invoke(item));
protected override void OnParametersSet()
{
if (Title is null && Property.Body is MemberExpression memberExpression)
{
Title = memberExpression.Member.Name;
}
if (Align is null && (typeof(TProp) == typeof(int) || typeof(TProp) == typeof(decimal)))
{
Align = Components.Align.End;
}
if (lastAssignedProperty == Property)
{
return;
}
lastAssignedProperty = Property;
compiledPropertyExpression = Property.Compile();
if (ChildContent == null)
{
if (!string.IsNullOrEmpty(Format) &&
typeof(IFormattable).IsAssignableFrom(Nullable.GetUnderlyingType(typeof(TProp)) ?? typeof(TProp)))
{
cellTextFunc = item => ((IFormattable?)compiledPropertyExpression(item))?.ToString(Format, null);
}
else
{
cellTextFunc = item => compiledPropertyExpression(item)?.ToString();
}
}
sortBy = DataSort.By(Property, key: Title.Camelize());
}
}

207
Groceries/Components/Table.razor Normal file
View File

@ -0,0 +1,207 @@
@using Microsoft.EntityFrameworkCore
@using Microsoft.EntityFrameworkCore.Query
@typeparam TItem
@attribute [CascadingTypeParameter(nameof(TItem))]
@inject NavigationManager Navigation
<table>
<CascadingValue IsFixed="true" Value="this">@ChildContent</CascadingValue>
<thead>
<tr>
@foreach (var column in columns)
{
<th scope="col"
class="@GetHeaderClass(column)"
style="@(column.Fill ? "width: 100%" : null)"
aria-sort="@GetAriaSortValue(column)"
>
@if (column.Sortable)
{
<a href="@GetUriForColumnSort(column)">@column.HeaderContent</a>
}
else
{
@column.HeaderContent
}
</th>
}
</tr>
</thead>
<tbody>
@foreach (var item in currentPageItems)
{
<tr>
@foreach (var column in columns)
{
<td class="@GetCellClass(column)">
@column.CellContent(item)
</td>
}
</tr>
}
</tbody>
@if (FooterContent != null)
{
<tfoot>@FooterContent</tfoot>
}
</table>
@code {
private readonly List<TableColumn<TItem>> columns = [];
private TItem[] currentPageItems = [];
private IQueryable<TItem>? lastAssignedItems;
private int? lastLoadedPaginationStateHash;
[Parameter, EditorRequired]
public required IQueryable<TItem> Items { get; set; }
[Parameter]
public PaginationState? Pagination { get; set; }
[Parameter]
public string? HeaderClass { get; set; }
[Parameter]
public string? CellClass { get; set; }
[Parameter]
public RenderFragment? ChildContent { get; set; }
[Parameter]
public RenderFragment? FooterContent { get; set; }
[SupplyParameterFromQuery(Name = "page")]
private int CurrentPage { get; set; }
[SupplyParameterFromQuery(Name = "sort")]
private string? SortKey { get; set; }
[SupplyParameterFromQuery(Name = "desc")]
private bool SortDescending { get; set; }
protected override async Task OnParametersSetAsync()
{
var dataSourceHasChanged = Items != lastAssignedItems;
if (dataSourceHasChanged)
{
lastAssignedItems = Items;
}
if (Pagination != null)
{
Pagination.CurrentPage = CurrentPage;
}
if (dataSourceHasChanged || Pagination?.GetHashCode() != lastLoadedPaginationStateHash)
{
await LoadDataAsync();
}
}
internal void AddColumn(TableColumn<TItem> column)
{
columns.Add(column);
StateHasChanged();
}
private async Task LoadDataAsync()
{
await LoadDataCoreAsync();
lastLoadedPaginationStateHash = Pagination?.GetHashCode();
}
private async Task LoadDataCoreAsync()
{
if (Pagination?.CurrentPage < 1)
{
Pagination.CurrentPage = 1;
NavigateToCurrentPage();
return;
}
var totalCount = Items.Provider is IAsyncQueryProvider
? await Items.CountAsync()
: Items.Count();
var itemsQuery = Items;
if (SortKey != null &&
columns
.Select(column => column.SortBy)
.SingleOrDefault(sortBy => sortBy?.Key == SortKey) is DataSort<TItem> sortBy)
{
itemsQuery = sortBy.Apply(itemsQuery, SortDescending);
}
if (Pagination != null)
{
Pagination.TotalItemCount = totalCount;
if (Pagination.LastPage < Pagination.CurrentPage)
{
Pagination.CurrentPage = Pagination.LastPage;
NavigateToCurrentPage();
return;
}
itemsQuery = itemsQuery
.Skip(Pagination.Offset)
.Take(Pagination.PageSize);
}
currentPageItems = Items.Provider is IAsyncQueryProvider
? await itemsQuery.ToArrayAsync()
: itemsQuery.ToArray();
if (Pagination != null)
{
Pagination.ItemCount = currentPageItems.Length;
}
StateHasChanged();
}
private void NavigateToCurrentPage()
{
Navigation.NavigateTo(Navigation.GetUriWithQueryParameter("page", Pagination!.CurrentPage));
}
private string? GetAriaSortValue(TableColumn<TItem> column)
=> column.Sortable && SortKey == column.SortBy!.Key
? (SortDescending ? "descending" : "ascending")
: null;
private string GetHeaderClass(TableColumn<TItem> column)
{
string?[] classes = [
"table__header",
column.Sortable ? "table__header--sortable" : null,
HeaderClass,
];
return string.Join(' ', classes.Where(c => c != null));
}
private string GetCellClass(TableColumn<TItem> column)
{
string?[] classes = [
"table__cell",
column.Align switch
{
Align.Center => "table__cell--align-center",
Align.End => "table__cell--align-end",
_ => null,
},
CellClass,
];
return string.Join(' ', classes.Where(c => c != null));
}
private string GetUriForColumnSort(TableColumn<TItem> column)
=> Navigation.GetUriWithQueryParameters(new Dictionary<string, object?>
{
{ "page", 1 },
{ "sort", SortKey == column.SortBy!.Key && SortDescending ? null : column.SortBy.Key},
{ "desc", SortKey != column.SortBy!.Key || SortDescending ? null : "true" },
});
}

36
Groceries/Components/TableColumn.cs Normal file
View File

@ -0,0 +1,36 @@
namespace Groceries.Components;
using Microsoft.AspNetCore.Components;
public abstract class TableColumn<TItem> : ComponentBase
{
[CascadingParameter]
private Table<TItem> Table { get; set; } = default!;
[Parameter]
public string? Title { get; set; }
[Parameter]
public Align? Align { get; set; }
[Parameter]
public bool Fill { get; set; }
[Parameter]
public RenderFragment HeaderContent { get; set; }
public abstract bool Sortable { get; set; }
public abstract DataSort<TItem>? SortBy { get; set; }
protected internal abstract RenderFragment<TItem> CellContent { get; }
public TableColumn()
{
HeaderContent = builder => builder.AddContent(0, Title);
}
protected override void OnInitialized()
{
Table.AddColumn(this);
}
}

28
Groceries/Components/TablePaginator.razor
View File

@ -1,34 +1,42 @@
@inject NavigationManager Navigation
<div class="table__paginator">
<footer class="table__paginator">
<span>
Showing @FirstItem to @LastItem of @Model.Total results
Showing @FirstItem to @LastItem of @State.TotalItemCount results
</span>
<nav class="button-group">
@if (Model.Page == 1)
@if (State.CurrentPage == 1)
{
<span class="link link--disabled">Previous</span>
}
else
{
<a class="link" href="@Navigation.GetUriWithQueryParameter("page", Model.Page - 1)">Previous</a>
<a class="link" href="@GetUriForPage(State.CurrentPage - 1)">Previous</a>
}
@if (Model.Page == Model.LastPage)
@if (State.CurrentPage == State.LastPage)
{
<span class="link link--disabled">Next</span>
}
else
{
<a class="link" href="@Navigation.GetUriWithQueryParameter("page", Model.Page + 1)">Next</a>
<a class="link" href="@GetUriForPage(State.CurrentPage + 1)">Next</a>
}
</nav>
</div>
</footer>
@code {
[Parameter, EditorRequired]
public required IListPageModel Model { get; set; }
public required PaginationState State { get; set; }
private int FirstItem => Model.Count > 0 ? Model.Offset + 1 : 0;
private int LastItem => Model.Offset + Model.Count;
private int FirstItem => State.TotalItemCount > 0 ? State.Offset + 1 : 0;
private int LastItem => State.Offset + State.ItemCount;
protected override void OnParametersSet()
{
State.ItemCountChanged += (_, _) => StateHasChanged();
}
private string GetUriForPage(int page)
=> Navigation.GetUriWithQueryParameter("page", page);
}

20
Groceries/Components/TemplateTableColumn.cs Normal file
View File

@ -0,0 +1,20 @@
namespace Groceries.Components;
using Microsoft.AspNetCore.Components;
public class TemplateTableColumn<TItem> : TableColumn<TItem>
{
[Parameter]
public RenderFragment<TItem> ChildContent { get; set; } = _ => _ => { };
[Parameter]
public override DataSort<TItem>? SortBy { get; set; }
public override bool Sortable
{
get => SortBy != null;
set => throw new NotSupportedException();
}
protected internal override RenderFragment<TItem> CellContent => ChildContent;
}

108
Groceries/Items/ItemsPage.razor
View File

@ -2,65 +2,55 @@
@using Microsoft.EntityFrameworkCore
@layout Layout
@inject AppDbContext DbContext
@inject NavigationManager Navigation
@inject IHttpContextAccessor HttpContextAccessor
<PageTitle>Groceries &ndash; Items</PageTitle>
<div class="row">
<header 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>
<search title="Items">
<SearchForm data-turbo-frame="table" data-turbo-action="advance">
<input type="hidden" name="page" value="1" />
</SearchForm>
</search>
</header>
<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" />
<Table Items="items" Pagination="pagination" HeaderClass="table__header--shaded">
<PropertyTableColumn Property="i => i.Brand" Sortable="true" />
<PropertyTableColumn Property="i => i.Name" Fill="true" Sortable="true" />
<PropertyTableColumn Property="i => i.LastPurchasedAt" Title="Last Purchased" Sortable="true">
<time datetime="@context?.ToString("o")">@context?.ToLongDateString()</time>
</PropertyTableColumn>
<PropertyTableColumn Property="i => i.HasBarcode" Title="Barcode" Align="Align.Center" Sortable="true">
<span class="icon icon--sm">@(context ? "✓" : "")</span>
</PropertyTableColumn>
@* <TemplateTableColumn>
<a class="link" href="/items/edit/@context.Id">Edit</a>
</TemplateTableColumn> *@
</Table>
<TablePaginator State="pagination" />
</section>
</turbo-frame>
@code {
[SupplyParameterFromQuery]
public int? Page { get; set; }
private record ItemModel
{
public Guid Id { get; init; }
public required string Brand { get; init; }
public required string Name { get; init; }
public bool HasBarcode { get; init; }
public DateTime? LastPurchasedAt { get; init; }
}
private IQueryable<ItemModel> items = null!;
private PaginationState pagination = new();
[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()
protected override void OnParametersSet()
{
var itemsQuery = DbContext.Items.AsQueryable();
if (!string.IsNullOrEmpty(Search))
@ -69,27 +59,23 @@
itemsQuery = itemsQuery.Where(item => EF.Functions.ILike(item.Brand + ' ' + item.Name, searchPattern));
}
items = await itemsQuery
.OrderBy(item => item.Brand)
.ThenBy(item => item.Name)
items = itemsQuery
.GroupJoin(
DbContext.ItemPurchases.Where(purchase => purchase.IsLastPurchase),
item => item.Id,
lastPurchase => lastPurchase.ItemId,
(item, lastPurchase) => new { item, lastPurchase })
purchase => purchase.ItemId,
(item, purchases) => new { item, purchases })
.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));
}
group => group.purchases.DefaultIfEmpty(),
(group, lastPurchase) => new ItemModel
{
Id = group.item.Id,
Brand = group.item.Brand,
Name = group.item.Name,
HasBarcode = group.item.Barcodes.Count != 0,
LastPurchasedAt = lastPurchase != null ? lastPurchase.CreatedAt : null,
})
.OrderBy(item => item.Brand)
.ThenBy(item => item.Name);
}
}

88
Groceries/ListPageModel.cs
View File

@ -1,88 +0,0 @@
namespace Groceries;
using Microsoft.EntityFrameworkCore;
using System.Collections;
public interface IListPageModel
{
int Offset { get; }
int Page { get; }
int PageSize { get; }
int LastPage { get; }
int Total { get; }
int Count { get; }
}
public record ListPageModel<TItem> : IListPageModel, IReadOnlyCollection<TItem>
{
public ListPageModel(IList<TItem> items)
{
Items = items;
}
public int Offset { get; init; }
public int Page { get; init; }
public int PageSize { get; init; }
public int LastPage { get; init; }
public int Total { get; init; }
public IList<TItem> Items { get; init; }
public int Count => Items.Count;
public IEnumerator<TItem> GetEnumerator()
{
return Items.GetEnumerator();
}
IEnumerator IEnumerable.GetEnumerator()
{
return Items.GetEnumerator();
}
}
public static class ListPageModel
{
public static ListPageModel<TItem> Empty<TItem>()
{
return new ListPageModel<TItem>(Array.Empty<TItem>());
}
}
public static class ListPageModelExtensions
{
public static async Task<ListPageModel<TItem>> ToListPageModelAsync<TItem>(
this IQueryable<TItem> query,
int page,
int pageSize = 10,
CancellationToken cancellationToken = default)
{
if (page < 1)
{
return new ListPageModel<TItem>(Array.Empty<TItem>()) { Page = 1 };
}
var total = await query.CountAsync(cancellationToken);
var lastPage = Math.Max(1, (int)Math.Ceiling((float)total / pageSize));
if (page > lastPage)
{
return new ListPageModel<TItem>(Array.Empty<TItem>()) { Page = lastPage };
}
var offset = (page - 1) * pageSize;
var items = await query
.Skip(offset)
.Take(pageSize)
.ToArrayAsync(cancellationToken);
return new ListPageModel<TItem>(items)
{
Offset = offset,
Page = page,
PageSize = pageSize,
LastPage = lastPage,
Total = total,
};
}
}

91
Groceries/Stores/StoresPage.razor
View File

@ -2,79 +2,68 @@
@using Microsoft.EntityFrameworkCore
@layout Layout
@inject AppDbContext DbContext
@inject NavigationManager Navigation
@inject IHttpContextAccessor HttpContextAccessor
<PageTitle>Groceries &ndash; Stores</PageTitle>
<div class="row">
<header class="row">
<h1 class="row__fill">Stores</h1>
<SearchForm data-turbo-frame="table" data-turbo-action="advance">
<input type="hidden" name="page" value="1" />
</SearchForm>
<search title="Stores">
<SearchForm data-turbo-frame="table" data-turbo-action="advance">
<input type="hidden" name="page" value="1" />
</SearchForm>
</search>
<a class="button button--primary" href="/stores/new" data-turbo-frame="modal">New store</a>
</div>
</header>
<turbo-frame id="table" target="top">
<turbo-frame id="table" target="_top">
<section class="table">
<table>
<thead>
<tr>
<th scope="col" class="table__header table__header--shaded">Retailer</th>
<th scope="col" class="table__header table__header--shaded" style="width: 100%">Name</th>
<th scope="col" class="table__header table__header--shaded">Transactions</th>
<th scope="col" class="table__header table__header--shaded"></th>
</tr>
</thead>
<tbody>
@foreach (var store in stores)
{
<tr>
<td class="table__cell">@store.Retailer</td>
<td class="table__cell">@store.Name</td>
<td class="table__cell table__cell--numeric">@store.TransactionsCount</td>
<td class="table__cell">
<a class="link" href="/stores/edit/@store.Id" data-turbo-frame="modal">Edit</a>
</td>
</tr>
}
</tbody>
</table>
<TablePaginator Model="stores" />
<Table Items="stores" Pagination="pagination" HeaderClass="table__header--shaded">
<PropertyTableColumn Property="s => s.Retailer" Sortable="true" />
<PropertyTableColumn Property="s => s.Name" Fill="true" Sortable="true" />
<PropertyTableColumn Property="s => s.TransactionsCount" Title="Transactions" Sortable="true" />
<TemplateTableColumn Context="store">
<a class="link" href="/stores/edit/@store.Id" data-turbo-frame="modal">Edit</a>
</TemplateTableColumn>
</Table>
<TablePaginator State="pagination" />
</section>
</turbo-frame>
@code {
[SupplyParameterFromQuery]
public int? Page { get; set; }
private record StoreModel
{
public Guid Id { get; init; }
public required string Retailer { get; init; }
public required string Name { get; init; }
public int TransactionsCount { get; init; }
}
private IQueryable<StoreModel> stores = null!;
private PaginationState pagination = new();
[SupplyParameterFromQuery]
public string? Search { get; set; }
private record StoreModel(Guid Id, string Retailer, string Name, int TransactionsCount);
private ListPageModel<StoreModel> stores = ListPageModel.Empty<StoreModel>();
protected override async Task OnParametersSetAsync()
protected override void OnParametersSet()
{
var storesQuery = DbContext.Stores.AsQueryable();
if (!string.IsNullOrEmpty(Search))
{
var searchPattern = $"%{Search}%";
storesQuery = storesQuery.Where(store => EF.Functions.ILike(store.Retailer!.Name + ' ' + store.Name, searchPattern));
storesQuery = storesQuery
.Where(store => EF.Functions.ILike(store.Retailer!.Name + ' ' + store.Name, searchPattern));
}
stores = await storesQuery
.OrderBy(store => store.Retailer!.Name)
.ThenBy(store => store.Name)
.Select(store => new StoreModel(store.Id, store.Retailer!.Name, store.Name, store.Transactions!.Count()))
.ToListPageModelAsync(Page.GetValueOrDefault(), cancellationToken: HttpContextAccessor.HttpContext!.RequestAborted);
if (stores.Page != Page)
{
Navigation.NavigateTo(Navigation.GetUriWithQueryParameter("page", stores.Page));
}
stores = storesQuery
.Select(store => new StoreModel
{
Id = store.Id,
Retailer = store.Retailer!.Name,
Name = store.Name,
TransactionsCount = store.Transactions!.Count(),
})
.OrderBy(store => store.Retailer)
.ThenBy(store => store.Name);
}
}

73
Groceries/Transactions/NewTransactionItemsPage.razor
View File

@ -2,7 +2,6 @@
@using Microsoft.EntityFrameworkCore
@layout Layout
@inject AppDbContext DbContext
<PageTitle>Groceries &ndash; New Transaction</PageTitle>
@ -14,57 +13,45 @@
</div>
<form method="post">
<div class="card form-field">
<section class="card form-field">
<div class="card__header row">
<h2 class="row__fill">Items</h2>
<a class="button button--primary" href="/transactions/new/items/new" autofocus data-turbo-frame="modal">New item</a>
<a class="button button--primary" href="/transactions/new/items/new" autofocus data-turbo-frame="modal">
New item
</a>
</div>
<div class="card__content card__content--table">
<table>
<thead>
<tr>
<th scope="col" class="table__header" style="width: 100%">Name</th>
<th scope="col" class="table__header">Price</th>
<th scope="col" class="table__header"><abbr title="Quantity">Qty</abbr></th>
<th scope="col" class="table__header">Amount</th>
<th scope="col" class="table__header"></th>
</tr>
</thead>
<tbody>
@foreach (var item in Transaction.Items)
{
<tr>
<td class="table__cell table__cell--compact">
@itemNames.GetValueOrDefault(item.ItemId)
</td>
<td class="table__cell table__cell--compact table__cell--numeric">
@item.Price.ToString("c")
</td>
<td class="table__cell table__cell--compact table__cell--numeric">
@item.Quantity
</td>
<td class="table__cell table__cell--compact table__cell--numeric">
@item.Amount.ToString("c")
</td>
<td class="table__cell table__cell--compact">
<a class="link" href="/transactions/new/items/edit/@item.ItemId" data-turbo-frame="modal">Edit</a>
</td>
</tr>
}
</tbody>
<tfoot>
<Table Items="Transaction.Items.AsQueryable()" CellClass="table__cell--compact">
<ChildContent>
<TemplateTableColumn Title="Name" Fill="true" Context="item">
@itemNames.GetValueOrDefault(item.ItemId)
</TemplateTableColumn>
<PropertyTableColumn Property="i => i.Price" Format="c" />
<PropertyTableColumn Property="i => i.Quantity">
<HeaderContent>
<abbr title="Quantity">Qty</abbr>
</HeaderContent>
</PropertyTableColumn>
<PropertyTableColumn Property="i => i.Amount" Format="c" />
<TemplateTableColumn Context="item">
<a class="link" href="/transactions/new/items/edit/@item.ItemId" data-turbo-frame="modal">
Edit
</a>
</TemplateTableColumn>
</ChildContent>
<FooterContent>
<tr>
<td class="table__cell table__cell--compact table__cell--total" colspan="3">Subtotal</td>
<td class="table__cell table__cell--compact table__cell--numeric table__cell--total">
<td class="table__cell table__cell--compact table__cell--total table__cell--align-end">
@Transaction.Items.Sum(item => item.Amount).ToString("c")
</td>
<td class="table__cell table__cell--compact"></td>
</tr>
</tfoot>
</table>
</FooterContent>
</Table>
</div>
</div>
</section>
<div class="row">
<button class="button button--primary" type="submit" disabled="@(Transaction.Items.Count == 0)">Next</button>
@ -73,12 +60,12 @@
</form>
@code {
[Parameter]
public required Transaction Transaction { get; set; }
private string store = string.Empty;
private Dictionary<Guid, string> itemNames = new();
[Parameter]
public required Transaction Transaction { get; set; }
protected override async Task OnParametersSetAsync()
{
store = await DbContext.Stores

64
Groceries/Transactions/NewTransactionPromotionsPage.razor
View File

@ -2,7 +2,6 @@
@using Microsoft.EntityFrameworkCore
@layout Layout
@inject AppDbContext DbContext
<PageTitle>Groceries &ndash; New Transaction</PageTitle>
@ -14,55 +13,42 @@
</div>
<form method="post">
<div class="card form-field">
<div class="card__header row">
<section class="card form-field">
<header class="card__header row">
<h2 class="row__fill">Promotions</h2>
<a class="button button--primary" href="/transactions/new/promotions/new" autofocus data-turbo-frame="modal">
New promotion
</a>
</div>
</header>
<div class="card__content card__content--table">
<table>
<thead>
<tr>
<th scope="col" class="table__header" style="width: 100%">Name</th>
<th scope="col" class="table__header">Items</th>
<th scope="col" class="table__header">Amount</th>
<th scope="col" class="table__header"></th>
</tr>
</thead>
<tbody>
@foreach (var promotion in Transaction.Promotions)
{
<tr>
<td class="table__cell table__cell--compact">
@promotion.Name
</td>
<td class="table__cell table__cell--compact table__cell--numeric">
@promotion.Items.Sum(item => Transaction.Items.Single(i => i.ItemId == item.Id).Quantity)
</td>
<td class="table__cell table__cell--compact table__cell--numeric">
@((-promotion.Amount).ToString("c"))
</td>
<td class="table__cell table__cell--compact">
<a class="link" href="/transactions/new/promotions/edit/@promotion.Id" data-turbo-frame="modal">Edit</a>
</td>
</tr>
}
</tbody>
<tfoot>
<Table Items="Transaction.Promotions.AsQueryable()" CellClass="table__cell--compact">
<ChildContent>
<PropertyTableColumn Property="p => p.Name" Fill="true" />
<TemplateTableColumn Title="Items" Align="Align.End" Context="promotion">
@promotion.Items.Sum(item => Transaction.Items.Single(i => i.ItemId == item.Id).Quantity)
</TemplateTableColumn>
<PropertyTableColumn Property="p => p.Amount" Context="amount">
@((-amount).ToString("c"))
</PropertyTableColumn>
<TemplateTableColumn Context="promotion">
<a class="link" href="/transactions/new/promotions/edit/@promotion.Id" data-turbo-frame="modal">
Edit
</a>
</TemplateTableColumn>
</ChildContent>
<FooterContent>
<tr>
<td class="table__cell table__cell--compact table__cell--total" colspan="2">Total</td>
<td class="table__cell table__cell--compact table__cell--numeric table__cell--total">
<td class="table__cell table__cell--compact table__cell--total table__cell--align-end">
@Transaction.Total.ToString("c")
</td>
<td class="table__cell table__cell--compact"></td>
</tr>
</tfoot>
</table>
</FooterContent>
</Table>
</div>
</div>
</section>
<div class="row">
<button class="button button--primary" type="submit" disabled="@(Transaction.Items.Count == 0)">Save</button>
@ -71,11 +57,11 @@
</form>
@code {
private string store = string.Empty;
[Parameter]
public required Transaction Transaction { get; set; }
private string store = string.Empty;
protected override async Task OnParametersSetAsync()
{
store = await DbContext.Stores

149
Groceries/Transactions/TransactionsPage.razor
View File

@ -1,139 +1,58 @@
@using Groceries.Data
@layout Layout
@layout Layout
@inject AppDbContext DbContext
@inject NavigationManager Navigation
@inject IHttpContextAccessor HttpContextAccessor
<PageTitle>Groceries &ndash; Transactions</PageTitle>
<div class="row">
<header class="row">
<h1 class="row__fill">Transactions</h1>
<a class="button button--primary form-field" href="/transactions/new">New transaction</a>
</div>
</header>
<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" />
<Table Items="transactions" Pagination="pagination" HeaderClass="table__header--shaded">
<PropertyTableColumn Property="t => t.CreatedAt" Title="Date" Sortable="true" Context="createdAt">
<time datetime="@createdAt.ToString("o")">@createdAt.ToLongDateString()</time>
</PropertyTableColumn>
<PropertyTableColumn Property="t => t.Store" Fill="true" Sortable="true" />
<PropertyTableColumn Property="t => t.TotalItems" Title="Items" Sortable="true" />
<PropertyTableColumn Property="t => t.TotalAmount" Title="Amount" Format="c" Sortable="true" />
@* <TemplateTableColumn>
<a class="link" href="/transactions/@context.Id">View</a>
</TemplateTableColumn> *@
</Table>
<TablePaginator State="pagination" />
</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()
private record TransactionModel
{
var transactionsQuery = DbContext.Transactions
public Guid Id { get; init; }
public DateTime CreatedAt { get; init; }
public required string Store { get; init; }
public decimal TotalAmount { get; init; }
public int TotalItems { get; init; }
}
private IQueryable<TransactionModel> transactions = null!;
private PaginationState pagination = new();
protected override void OnParametersSet()
{
transactions = DbContext.Transactions
.Join(
DbContext.TransactionTotals,
transaction => transaction.Id,
transactionTotal => transactionTotal.TransactionId,
(transaction, transactionTotal) => new
(transaction, transactionTotal) => new TransactionModel
{
transaction.Id,
transaction.CreatedAt,
Id = transaction.Id,
CreatedAt = 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,
};
})
.OrderByDescending(transaction => transaction.CreatedAt);
}
}

22
Groceries/wwwroot/css/main.css
View File

@ -91,11 +91,13 @@ h1, h2, h3, h4, h5, h6 {
.icon {
fill: currentColor;
font-size: 1.5rem;
height: 1.5rem;
width: 1.5rem;
}
.icon--sm {
font-size: 1.25rem;
height: 1.25rem;
width: 1.25rem;
}
@ -359,11 +361,11 @@ html:has(.modal[open]) {
margin-left: 0.3rem;
}
.table__header--sortable a[data-dir=asc]::after {
.table__header--sortable[aria-sort=ascending] a::after {
content: "\25B2";
}
.table__header--sortable a[data-dir=desc]::after {
.table__header--sortable[aria-sort=descending] a::after {
content: "\25BC";
}
@ -379,19 +381,19 @@ html:has(.modal[open]) {
white-space: nowrap;
}
.table__cell--align-center {
text-align: center;
}
.table__cell--align-end {
text-align: end;
}
.table__cell--compact {
line-height: 1rem;
padding-block: 0.75rem;
}
.table__cell--icon {
font-size: 1.25rem;
}
.table__cell--numeric {
text-align: end;
}
.table__cell--total {
font-weight: 600;
text-transform: uppercase;