Updated UI. Fixed circle search performance.

2025-11-10 18:55:46 -05:00
parent 840bec72d2
commit 9cd9230cec
43 changed files with 1105 additions and 164 deletions
--- a/JSMR.UI.Blazor/Pages/Creators.razor
+++ b/JSMR.UI.Blazor/Pages/Creators.razor
@@ -1,18 +1,122 @@
@page "/creators"
+@inject VoiceWorksClient Client
+@inject IJSRuntime JS
+@using JSMR.Application.Common.Search
+@using JSMR.Application.Creators.Queries.Search
+@using JSMR.Application.Creators.Queries.Search.Contracts
+@using JSMR.UI.Blazor.Services

 <PageTitle>Creators</PageTitle>

 <h1>Creators</h1>

-<p role="status">Current count: @currentCount</p>
+<MudTextField @bind-Value="Keywords" Immediate="true" DebounceInterval="500" Label="Filter" Variant="Variant.Text" Adornment="@Adornment.Start" AdornmentIcon="@Icons.Material.Outlined.Search" />

-<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
+@if (searchResults is null)
+{
+    <p>Loading…</p>
+}
+else if (searchResults.Items.Length == 0)
+{
+    <p>No results.</p>
+}
+else
+{
+    <MudDataGrid Items="@searchResults.Items" Style="table-layout: fixed">
+        <Columns>
+            <PropertyColumn Property="x => x.Name" Title="Name" />
+            <PropertyColumn Property="x => x.VoiceWorkCount" Title="Voice Works" HeaderStyle="width: 14em" />
+            <TemplateColumn Title="Favorite" HeaderStyle="width: 8em">
+                <CellTemplate>
+                    <MudIconButton Size="@Size.Small" Icon="@Icons.Material.Filled.Favorite" Color="@(context.Item.Favorite? Color.Secondary: Color.Dark)" />
+                </CellTemplate>
+            </TemplateColumn>
+            <TemplateColumn Title="Blacklisted" HeaderStyle="width: 8em">
+                <CellTemplate>
+                    <MudIconButton Size="@Size.Small" Icon="@Icons.Material.Filled.Block" Color="@(context.Item.Blacklisted? Color.Secondary: Color.Dark)" />
+                </CellTemplate>
+            </TemplateColumn>
+        </Columns>
+    </MudDataGrid>
+
+    <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 int currentCount = 0;
+    private string? keywords;

-    private void IncrementCount()
+    public string? Keywords
    {
-        currentCount++;
+        get { return keywords; }
+        set
+        {
+            keywords = value;
+            _ = LoadTagsAsync();
+        }
    }
-}
+
+    private int pageNumber = 1;
+
+    public int PageNumber
+    {
+        get { return pageNumber; }
+        set
+        {
+            pageNumber = value;
+            _ = LoadTagsAsync();
+        }
+    }
+
+    int pageSize = 100;
+    SearchResult<CreatorSearchItem>? searchResults;
+
+    protected override Task OnInitializedAsync()
+    {
+        _ = LoadTagsAsync();
+
+        return Task.CompletedTask;
+    }
+
+    private async Task LoadTagsAsync()
+    {
+        SearchCreatorsRequest request = new(
+            Options: new()
+            {
+                PageNumber = PageNumber,
+                PageSize = pageSize,
+                Criteria = new()
+                {
+                    Name = Keywords
+                },
+                SortOptions =
+                [
+                    new(CreatorSortField.Name, Application.Common.Search.SortDirection.Ascending)
+                ]
+            }
+        );
+
+        await JS.InvokeVoidAsync("pageHelpers.scrollToTop");
+        var result = await Client.SearchAsync(request);
+
+        searchResults = result?.Results ?? new();
+
+        await InvokeAsync(StateHasChanged);
+    }
+}