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

Refactor Stores page to Razor components

Browse Source
This commit is contained in:
James Chapman 2023-12-02 20:31:32 +00:00
parent d8c6e502a8
commit f1d65f590f
Signed by: jamsch0
GPG Key ID: 765FE58130277547
12 changed files with 266 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
Groceries/Common/_LayoutSidebar.cshtml
View File

@ -11,30 +11,40 @@
</header>
<nav class="sidebar__body">
<ul>
<li class="sidebar__item @(controller == "Home" ? "sidebar__item--active" : "")">
@* dashboard squares icon *@
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19 5v2h-4V5h4M9 5v6H5V5h4m10 8v6h-4v-6h4M9 17v2H5v-2h4M21 3h-8v6h8V3zM11 3H3v10h8V3zm10 8h-8v10h8V11zm-10 4H3v6h8v-6z"/></svg>
<a class="sidebar__link" asp-controller="Home" asp-action="Index">Dashboard</a>
<li>
<a class="sidebar__item @(controller == "Home" ? "sidebar__item--active" : "")" asp-controller="Home" asp-action="Index">
@* dashboard squares icon *@
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19 5v2h-4V5h4M9 5v6H5V5h4m10 8v6h-4v-6h4M9 17v2H5v-2h4M21 3h-8v6h8V3zM11 3H3v10h8V3zm10 8h-8v10h8V11zm-10 4H3v6h8v-6z"/></svg>
Dashboard
</a>
</li>
<li class="sidebar__item @(controller == "Lists" ? "sidebar__item--active" : "")">
@* receipt long icon *@
<svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" viewBox="0 0 24 24"><path d="M0,0h24v24H0V0z" fill="none"/><g><path d="M19.5,3.5L18,2l-1.5,1.5L15,2l-1.5,1.5L12,2l-1.5,1.5L9,2L7.5,3.5L6,2v14H3v3c0,1.66,1.34,3,3,3h12c1.66,0,3-1.34,3-3V2 L19.5,3.5z M15,20H6c-0.55,0-1-0.45-1-1v-1h10V20z M19,19c0,0.55-0.45,1-1,1s-1-0.45-1-1v-3H8V5h11V19z"/><rect height="2" width="6" x="9" y="7"/><rect height="2" width="2" x="16" y="7"/><rect height="2" width="6" x="9" y="10"/><rect height="2" width="2" x="16" y="10"/></g></svg>
<a class="sidebar__link" asp-controller="Lists" asp-action="Index" asp-route-page="1">Lists</a>
<li>
<a class="sidebar__item @(controller == "Lists" ? "sidebar__item--active" : "")" asp-controller="Lists" asp-action="Index" asp-route-page="1">
@* receipt long icon *@
<svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" viewBox="0 0 24 24"><path d="M0,0h24v24H0V0z" fill="none"/><g><path d="M19.5,3.5L18,2l-1.5,1.5L15,2l-1.5,1.5L12,2l-1.5,1.5L9,2L7.5,3.5L6,2v14H3v3c0,1.66,1.34,3,3,3h12c1.66,0,3-1.34,3-3V2 L19.5,3.5z M15,20H6c-0.55,0-1-0.45-1-1v-1h10V20z M19,19c0,0.55-0.45,1-1,1s-1-0.45-1-1v-3H8V5h11V19z"/><rect height="2" width="6" x="9" y="7"/><rect height="2" width="2" x="16" y="7"/><rect height="2" width="6" x="9" y="10"/><rect height="2" width="2" x="16" y="10"/></g></svg>
Lists
</a>
</li>
<li class="sidebar__item @(controller == "Transactions" ? "sidebar__item--active" : "")">
@* shopping cart icon *@
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M15.55 13c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.37-.66-.11-1.48-.87-1.48H5.21l-.94-2H1v2h2l3.6 7.59-1.35 2.44C4.52 15.37 5.48 17 7 17h12v-2H7l1.1-2h7.45zM6.16 6h12.15l-2.76 5H8.53L6.16 6zM7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zm10 0c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/></svg>
<a class="sidebar__link" asp-controller="Transactions" asp-action="Index" asp-route-page="1">Transactions</a>
<li>
<a class="sidebar__item @(controller == "Transactions" ? "sidebar__item--active" : "")" asp-controller="Transactions" asp-action="Index" asp-route-page="1">
@* shopping cart icon *@
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M15.55 13c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.37-.66-.11-1.48-.87-1.48H5.21l-.94-2H1v2h2l3.6 7.59-1.35 2.44C4.52 15.37 5.48 17 7 17h12v-2H7l1.1-2h7.45zM6.16 6h12.15l-2.76 5H8.53L6.16 6zM7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zm10 0c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/></svg>
Transactions
</a>
</li>
<li class="sidebar__item @(controller == "Items" ? "sidebar__item--active" : "")">
@* category shapes icon *@
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 2l-5.5 9h11L12 2zm0 3.84L13.93 9h-3.87L12 5.84zM17.5 13c-2.49 0-4.5 2.01-4.5 4.5s2.01 4.5 4.5 4.5 4.5-2.01 4.5-4.5-2.01-4.5-4.5-4.5zm0 7c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5zM3 21.5h8v-8H3v8zm2-6h4v4H5v-4z"/></svg>
<a class="sidebar__link" asp-controller="Items" asp-action="Index" asp-route-page="1">Items</a>
<li>
<a class="sidebar__item @(controller == "Items" ? "sidebar__item--active" : "")" asp-controller="Items" asp-action="Index" asp-route-page="1">
@* category shapes icon *@
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 2l-5.5 9h11L12 2zm0 3.84L13.93 9h-3.87L12 5.84zM17.5 13c-2.49 0-4.5 2.01-4.5 4.5s2.01 4.5 4.5 4.5 4.5-2.01 4.5-4.5-2.01-4.5-4.5-4.5zm0 7c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5zM3 21.5h8v-8H3v8zm2-6h4v4H5v-4z"/></svg>
Items
</a>
</li>
<li class="sidebar__item @(controller == "Stores" ? "sidebar__item--active" : "")">
@* store building icon *@
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M18.36 9l.6 3H5.04l.6-3h12.72M20 4H4v2h16V4zm0 3H4l-1 5v2h1v6h10v-6h4v6h2v-6h1v-2l-1-5zM6 18v-4h6v4H6z"/></svg>
<a class="sidebar__link" asp-controller="Stores" asp-action="Index" asp-route-page="1">Stores</a>
<li>
<a class="sidebar__item" href="/stores?page=1">
@* store building icon *@
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M18.36 9l.6 3H5.04l.6-3h12.72M20 4H4v2h16V4zm0 3H4l-1 5v2h1v6h10v-6h4v6h2v-6h1v-2l-1-5zM6 18v-4h6v4H6z"/></svg>
Stores
</a>
</li>
</ul>
</nav>

30
Groceries/Components/Layout.razor Normal file
View File

@ -0,0 +1,30 @@
@inherits LayoutComponentBase
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="color-scheme" content="light dark" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="/css/main.css" asp-append-version="true" data-turbo-track="reload" />
<script type="module" src="/js/main.js" asp-append-version="true" data-turbo-track="reload"></script>
<script type="module" src="/lib/hotwired/turbo/dist/turbo.es2017-esm.js"></script>
<HeadOutlet />
</head>
<body>
<Sidebar />
<main class="main-content">
@*<turbo-frame id="main" target="_top">*@
@Body
@*</turbo-frame>*@
</main>
<dialog class="modal" data-controller="modal" data-action="turbo:frame-load->modal#open turbo:before-cache@document->modal#close popstate@window->modal#close">
<turbo-frame id="modal" data-modal-target="frame"></turbo-frame>
</dialog>
</body>
</html>

24
Groceries/Components/SearchForm.razor Normal file
View File

@ -0,0 +1,24 @@
<form method="get" data-controller="search-form" @attributes="AdditionalAttributes">
@ChildContent
<div class="form-field">
<div class="ford-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="@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>
@code {
[SupplyParameterFromQuery]
public string? Search { get; set; }
[Parameter]
public RenderFragment? ChildContent { get; set; }
[Parameter(CaptureUnmatchedValues = true)]
public Dictionary<string, object>? AdditionalAttributes { get; set; }
}

59
Groceries/Components/Sidebar.razor Normal file
View File

@ -0,0 +1,59 @@
<input class="sidebar__toggle" id="sidebarToggle" type="checkbox" role="button" data-turbo-permanent />
<label for="sidebarToggle">Menu</label>
<section class="sidebar">
<header class="sidebar__header">
Groceries
</header>
<nav class="sidebar__body">
<ul>
<li>
<NavLink class="sidebar__item" href="/" Match="NavLinkMatch.All">
@* dashboard squares icon *@
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19 5v2h-4V5h4M9 5v6H5V5h4m10 8v6h-4v-6h4M9 17v2H5v-2h4M21 3h-8v6h8V3zM11 3H3v10h8V3zm10 8h-8v10h8V11zm-10 4H3v6h8v-6z"/></svg>
Dashboard
</NavLink>
</li>
<li>
<NavLink class="sidebar__item" href="/" Match="NavLinkMatch.All">
@* receipt long icon *@
<svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" viewBox="0 0 24 24"><path d="M0,0h24v24H0V0z" fill="none"/><g><path d="M19.5,3.5L18,2l-1.5,1.5L15,2l-1.5,1.5L12,2l-1.5,1.5L9,2L7.5,3.5L6,2v14H3v3c0,1.66,1.34,3,3,3h12c1.66,0,3-1.34,3-3V2 L19.5,3.5z M15,20H6c-0.55,0-1-0.45-1-1v-1h10V20z M19,19c0,0.55-0.45,1-1,1s-1-0.45-1-1v-3H8V5h11V19z"/><rect height="2" width="6" x="9" y="7"/><rect height="2" width="2" x="16" y="7"/><rect height="2" width="6" x="9" y="10"/><rect height="2" width="2" x="16" y="10"/></g></svg>
Lists
</NavLink>
</li>
<li>
<NavLink class="sidebar__item" href="/transactions?page=1">
@* shopping cart icon *@
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M15.55 13c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.37-.66-.11-1.48-.87-1.48H5.21l-.94-2H1v2h2l3.6 7.59-1.35 2.44C4.52 15.37 5.48 17 7 17h12v-2H7l1.1-2h7.45zM6.16 6h12.15l-2.76 5H8.53L6.16 6zM7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zm10 0c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/></svg>
Transactions
</NavLink>
</li>
<li>
<NavLink class="sidebar__item" href="/items?page=1">
@* category shapes icon *@
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 2l-5.5 9h11L12 2zm0 3.84L13.93 9h-3.87L12 5.84zM17.5 13c-2.49 0-4.5 2.01-4.5 4.5s2.01 4.5 4.5 4.5 4.5-2.01 4.5-4.5-2.01-4.5-4.5-4.5zm0 7c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5zM3 21.5h8v-8H3v8zm2-6h4v4H5v-4z"/></svg>
Items
</NavLink>
</li>
<li>
<NavLink class="sidebar__item" href="/stores?page=1">
@* store building icon *@
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M18.36 9l.6 3H5.04l.6-3h12.72M20 4H4v2h16V4zm0 3H4l-1 5v2h1v6h10v-6h4v6h2v-6h1v-2l-1-5zM6 18v-4h6v4H6z"/></svg>
Stores
</NavLink>
</li>
</ul>
</nav>
@*<div class="slide-toggle">
<label class="slide-toggle__option">
<svg class="icon icon--sm" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" viewBox="0 0 24 24"><rect fill="none" height="24" width="24"/><path d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"/></svg>
Light
<input class="slide-toggle__control" type="radio" name="colorScheme" value="light" />
</label>
<label class="slide-toggle__option">
<svg class="icon icon--sm" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" viewBox="0 0 24 24"><rect fill="none" height="24" width="24"/><path d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"/></svg>
Dark
<input class="slide-toggle__control" type="radio" name="colorScheme" value="dark" />
</label>
</div>*@
</section>

34
Groceries/Components/TablePaginator.razor Normal file
View File

@ -0,0 +1,34 @@
@inject NavigationManager Navigation
<div class="table__paginator">
<span>
Showing @FirstItem to @LastItem of @Model.Total results
</span>
<nav class="button-group">
@if (Model.Page == 1)
{
<span class="link link--disabled">Previous</span>
}
else
{
<a class="link" href="@Navigation.GetUriWithQueryParameter("page", Model.Page - 1)">Previous</a>
}
@if (Model.Page == Model.LastPage)
{
<span class="link link--disabled">Next</span>
}
else
{
<a class="link" href="@Navigation.GetUriWithQueryParameter("page", Model.Page + 1)">Next</a>
}
</nav>
</div>
@code {
[Parameter]
public required IListPageModel Model { get; set; }
private int FirstItem => Model.Count > 0 ? Model.Offset + 1 : 0;
private int LastItem => Model.Offset + Model.Count;
}

1
Groceries/Program.cs
View File

@ -56,6 +56,7 @@ builder.Services
.AddSessionStateTempDataProvider();
builder.Services.AddDistributedMemoryCache();
builder.Services.AddHttpContextAccessor();
builder.Services.AddSession();
builder.Services.AddSingleton<IActionResultExecutor<TurboStreamResult>, TurboStreamResultExecutor>();

52
Groceries/Stores/Index.cshtml
View File

@ -1,52 +0,0 @@
@using Groceries.Stores
@model StoreListModel
@{
ViewBag.Title = "Stores";
}
<div class="row">
<h1 class="row__fill">Stores</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 input--leading-inset input--trailing-addon">
<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>
<a class="button button--primary" asp-action="NewStore" data-turbo-frame="modal">New store</a>
</div>
<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 Model.Stores)
{
<tr>
<td class="table__cell">@store.Retailer</td>
<td class="table__cell">@store.Name</td>
<td class="table__cell table__cell--numeric">@store.TotalTransactions</td>
<td class="table__cell">
<a class="link" asp-action="EditStore" asp-route-id="@store.Id" data-turbo-frame="modal">Edit</a>
</td>
</tr>
}
</tbody>
</table>
<partial name="_TablePaginator" model="Model.Stores" />
</section>
</turbo-frame>

9
Groceries/Stores/StoreListModel.cs
View File

@ -1,9 +0,0 @@
namespace Groceries.Stores;
public record StoreListModel(string? Search, ListPageModel<StoreListModel.Store> Stores)
{
public record Store(Guid Id, string Retailer, string Name)
{
public int TotalTransactions { get; init; }
}
}

27
Groceries/Stores/StoresController.cs
View File

@ -2,6 +2,7 @@ namespace Groceries.Stores;
using Groceries.Common;
using Groceries.Data;
using Microsoft.AspNetCore.Http.HttpResults;
using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;
@ -16,31 +17,9 @@ public class StoresController : Controller
}
[HttpGet]
public async Task<IActionResult> Index(int page, string? search)
public IResult Index()
{
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));
}
var stores = await storesQuery
.OrderBy(store => store.Retailer!.Name)
.ThenBy(store => store.Name)
.Select(store => new StoreListModel.Store(store.Id, store.Retailer!.Name, store.Name)
{
TotalTransactions = store.Transactions!.Count(),
})
.ToListPageModelAsync(page, cancellationToken: HttpContext.RequestAborted);
if (stores.Page != page)
{
return RedirectToAction(nameof(Index), new { page = stores.Page, search });
}
var model = new StoreListModel(search, stores);
return View(model);
return new RazorComponentResult<StoresPage>();
}
[HttpGet("new")]

80
Groceries/Stores/StoresPage.razor Normal file
View File

@ -0,0 +1,80 @@
@using Groceries.Data
@using Microsoft.EntityFrameworkCore
@layout Layout
@inject AppDbContext DbContext
@inject NavigationManager Navigation
@inject IHttpContextAccessor HttpContextAccessor
<PageTitle>Groceries &ndash; Stores</PageTitle>
<div 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>
<a class="button button--primary" href="/stores/new" data-turbo-frame="modal">New store</a>
</div>
<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" />
</section>
</turbo-frame>
@code {
[SupplyParameterFromQuery]
public int? Page { get; set; }
[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()
{
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));
}
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));
}
}
}

3
Groceries/_Imports.razor Normal file
View File

@ -0,0 +1,3 @@
@using Groceries.Components
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web

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

@ -201,18 +201,14 @@ h1, h2, h3, h4, h5, h6 {
border-radius: 0.375rem;
color: rgb(107, 114, 128);
font-weight: 500;
text-decoration: none;
}
.sidebar__item--active {
.sidebar__item--active, .sidebar__item.active {
background-color: rgb(243, 244, 246);
color: rgb(75, 85, 99);
}
.sidebar__link {
color: inherit;
text-decoration: none;
}
/*@media (prefers-color-scheme: dark) {
.sidebar {
border-color: rgb(75, 85, 99);