brister/jsmr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Updated UI. Fixed circle search performance.
All checks were successful
ci / build-test (push) Successful in 1m43s
Details
ci / publish-image (push) Has been skipped
Details

Browse Source
This commit is contained in:
Brian Bicknell
2025-11-10 18:55:46 -05:00
parent 840bec72d2
commit 9cd9230cec
43 changed files with 1105 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files

282
JSMR.UI.Blazor/Pages/Circles.razor
View File

@@ -1,57 +1,265 @@
@page "/circles"
@using JSMR.Application.Circles.Queries.Search
@using JSMR.Application.Common.Search
@using JSMR.UI.Blazor.Components
@using JSMR.UI.Blazor.Services
@inject VoiceWorksClient Client
@inject IJSRuntime JS
@inject HttpClient Http
<PageTitle>Circles</PageTitle>
<h1>Circles</h1>
<p>This component demonstrates fetching data from the server.</p>
<div class="search-filter-control-container">
<div class="search-filter-control-span-3">
<MudTextField @bind-Value="Keywords" Placeholder="Circle Name or Maker Id" Immediate="true" DebounceInterval="500" Variant="Variant.Outlined" Margin="Margin.Dense" Adornment="@Adornment.End" AdornmentIcon="@Icons.Material.Outlined.Search" />
</div>
<div class="search-filter-control-span-1">
<MudSelect @bind-Value="SelectedCircleStatus" Placeholder="Circle Status" Dense="true" Variant="Variant.Outlined" Margin="Margin.Dense">
<MudSelectItem Value="@CircleStatus.NotBlacklisted.ToString()">Not Blacklisted</MudSelectItem>
<MudSelectItem Value="@CircleStatus.Favorited.ToString()">Favorite</MudSelectItem>
<MudSelectItem Value="@CircleStatus.Blacklisted.ToString()">Blacklisted</MudSelectItem>
<MudSelectItem Value="@CircleStatus.Spam.ToString()">Spam</MudSelectItem>
<MudSelectItem Value="@String.Empty">All</MudSelectItem>
</MudSelect>
</div>
</div>
@* @if (forecasts == null)
@if (searchResults is null)
{
<p><em>Loading...</em></p>
<p>Loading…</p>
}
else if (searchResults.Items.Length == 0)
{
<p>No results.</p>
}
else
{
<table class="table">
<thead>
<tr>
<th>Date</th>
<th aria-label="Temperature in Celsius">Temp. (C)</th>
<th aria-label="Temperature in Farenheit">Temp. (F)</th>
<th>Summary</th>
</tr>
</thead>
<tbody>
@foreach (var forecast in forecasts)
{
<tr>
<td>@forecast.Date.ToShortDateString()</td>
<td>@forecast.TemperatureC</td>
<td>@forecast.TemperatureF</td>
<td>@forecast.Summary</td>
</tr>
}
</tbody>
</table>
} *@
<MudDataGrid Items="@searchResults.Items" Style="table-layout: fixed">
<Columns>
<TemplateColumn HeaderStyle="width: 12em">
<CellTemplate>
<JImage ContainerClass="j-circle-image-container-mini" ImageClass="j-circle-image-mini" Source="@ImageUrlProvider.GetImageURL(context.Item.LatestProductId, context.Item.LatestVoiceWorkHasImage ?? false, context.Item.LatestVoiceWorkSalesDate, "main")" />
</CellTemplate>
</TemplateColumn>
<PropertyColumn Property="x => x.Name" Title="Name" />
<PropertyColumn Property="x => x.MakerId" Title="Maker Id" HeaderStyle="width: 12em" />
<TemplateColumn Title="Status" HeaderStyle="width: 10em">
<CellTemplate>
@if (context.Item.Favorite)
{
<MudChip T="string" Label="true" Color="Color.Info" Style="width: 100%">Favorite</MudChip>
}
else if (context.Item.Blacklisted)
{
<MudChip T="string" Label="true" Color="Color.Warning" Style="color:black; width: 100%">Blacklisted</MudChip>
}
else if (context.Item.Spam)
{
<MudChip T="string" Label="true" Color="Color.Error" Style="width: 100%">Spam</MudChip>
}
else
{
<MudChip T="string" Label="true" Style="width: 100%">Normal</MudChip>
}
</CellTemplate>
</TemplateColumn>
<TemplateColumn Title="Rating" HeaderStyle="width: 8em">
<CellTemplate>
@if (context.Item.Releases > 0)
{
<div class="circle-star-container">
<div class="circle-star @GetStarRatingClass(context.Item)"></div>
</div>
}
</CellTemplate>
</TemplateColumn>
<PropertyColumn Property="x => x.Downloads" Title="Downloads" HeaderStyle="width: 12em" />
<PropertyColumn Property="x => x.Releases" Title="Releases" HeaderStyle="width: 12em" />
<PropertyColumn Property="x => x.Pending" Title="Pending" HeaderStyle="width: 12em" />
<TemplateColumn Title="First Release Date" HeaderStyle="width: 14em">
<CellTemplate>
<MudText>@context.Item.FirstReleaseDate?.ToString("MMMM d, yyyy")</MudText>
</CellTemplate>
</TemplateColumn>
<TemplateColumn Title="Latest Release Date" HeaderStyle="width: 14em">
<CellTemplate>
<MudText>@context.Item.LatestReleaseDate?.ToString("MMMM d, yyyy")</MudText>
</CellTemplate>
</TemplateColumn>
</Columns>
</MudDataGrid>
@* <div class="items-container circle-items-container">
@foreach (var item in searchResults.Items)
{
<MudPaper Outlined="true">
<JImage @key="item.CircleId" ContainerClass="j-circle-image-container" ImageClass="j-circle-image" Source="@ImageUrlProvider.GetImageURL(item.LatestProductId, item.LatestVoiceWorkHasImage ?? false, item.LatestVoiceWorkSalesDate, "main")" />
<MudText Typo="Typo.h6">@item.Name</MudText>
<div>@item.Releases</div>
<div>@item.Pending</div>
@if (item.Releases > 0)
{
<div class="circle-star-container">
<div class="circle-star @GetStarRatingClass(item)"></div>
</div>
}
<div>@item.Downloads</div>
<MudChip T="string" Variant="Variant.Outlined" Icon="@Icons.Material.Filled.Download" Color="Color.Info">@item.Downloads.ToString("n0")</MudChip>
<div>@item.FirstReleaseDate?.ToString("MMMM d, yyyy")</div>
<div>@item.LatestReleaseDate?.ToString("MMMM d, yyyy")</div>
<MudIconButton Size="@Size.Small" Icon="@Icons.Material.Filled.Favorite" Color="@(item.Favorite? Color.Secondary: Color.Dark)" />
<MudIconButton Size="@Size.Small" Icon="@Icons.Material.Filled.Block" Color="@(item.Blacklisted? Color.Secondary: Color.Dark)" />
<MudIconButton Size="@Size.Small" Icon="@Icons.Material.Filled.RestoreFromTrash" Color="@(item.Spam? Color.Secondary: Color.Dark)" />
</MudPaper>
}
</div> *@
<JPagination @bind-PageNumber="PageNumber" @bind-PageSize="pageSize" @bind-TotalItems="searchResults.TotalItems" />
@* <MudPagination ShowFirstButton="true" ShowLastButton="true" Count="@((int)Math.Ceiling((decimal)searchResults.TotalItems / (decimal)100))" @bind-Selected="@PageNumber" Class="j-pager" /> *@
}
<style>
.mud-table-root {
table-layout: fixed;
}
.j-pager {
position: fixed;
bottom: 0;
left: 0;
right: 0;
justify-content: center;
z-index: 2;
background: var(--mud-palette-background);
padding: .5em 1em;
}
</style>
@code {
// private WeatherForecast[]? forecasts;
private string? keywords;
// protected override async Task OnInitializedAsync()
// {
// forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("sample-data/weather.json");
// }
public string? Keywords
{
get { return keywords; }
set
{
keywords = value;
_ = UpdateDataAsync(true);
}
}
// public class WeatherForecast
// {
// public DateOnly Date { get; set; }
private string circleStatus = string.Empty;
// public int TemperatureC { get; set; }
public string SelectedCircleStatus
{
get { return circleStatus; }
set
{
circleStatus = value;
_ = UpdateDataAsync(true);
}
}
// public string? Summary { get; set; }
private int pageNumber = 1;
// public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
// }
public int PageNumber
{
get { return pageNumber; }
set
{
pageNumber = value;
_ = UpdateDataAsync(false);
}
}
int pageSize = 100;
SearchResult<CircleSearchItem>? searchResults;
protected override Task OnInitializedAsync()
{
_ = LoadCirclesAsync();
return Task.CompletedTask;
}
private async Task LoadCirclesAsync()
{
SearchCirclesRequest request = new(
Options: new()
{
PageNumber = PageNumber,
PageSize = pageSize,
Criteria = new()
{
Name = Keywords,
Status = string.IsNullOrWhiteSpace(SelectedCircleStatus) == false ? Enum.Parse<CircleStatus>(SelectedCircleStatus) : null
},
SortOptions =
[
new(CircleSortField.Name, Application.Common.Search.SortDirection.Ascending)
]
}
);
await JS.InvokeVoidAsync("pageHelpers.scrollToTop");
var result = await Client.SearchAsync(request);
searchResults = result?.Results ?? new();
await InvokeAsync(StateHasChanged);
}
private async Task UpdateDataAsync(bool resetPageNumber)
{
if (resetPageNumber)
pageNumber = 1;
await LoadCirclesAsync();
}
private string GetStarRatingClass(CircleSearchItem item)
{
double averageDownloads = item.Downloads / item.Releases;
if (averageDownloads < 100)
{
return "circle-star-poor";
}
if (averageDownloads < 250)
{
return "circle-star-below-average";
}
if (averageDownloads < 500)
{
return "circle-star-average";
}
if (averageDownloads < 1000)
{
return "circle-star-above-average";
}
if (averageDownloads < 2000)
{
return "circle-star-popular";
}
if (averageDownloads < 4000)
{
return "circle-star-super-popular";
}
if (averageDownloads < 8000)
{
return "circle-star-ultra-popular";
}
return "circle-star-god-tier";
}
}