Minor adjustments to the UI.

JSMR.Api/.config/dotnet-tools.json

@@ -0,0 +1,5 @@
+{
+  "version": 1,
+  "isRoot": true,
+  "tools": {}
+}

JSMR.UI.Blazor/.config/dotnet-tools.json

@@ -0,0 +1,13 @@
+{
+  "version": 1,
+  "isRoot": true,
+  "tools": {
+    "dotnet-ef": {
+      "version": "9.0.10",
+      "commands": [
+        "dotnet-ef"
+      ],
+      "rollForward": false
+    }
+  }
+}

JSMR.UI.Blazor/JSMR.UI.Blazor.csproj

@@ -5,6 +5,7 @@
 		<Nullable>enable</Nullable>
 		<ImplicitUsings>enable</ImplicitUsings>
 		<ServiceWorkerAssetsManifest>service-worker-assets.js</ServiceWorkerAssetsManifest>
+		<RunAOTCompilation>true</RunAOTCompilation>
 	</PropertyGroup>
 
 	<ItemGroup>

JSMR.UI.Blazor/Pages/Circles.razor

@@ -43,8 +43,20 @@ else
                     <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" />
+            <TemplateColumn Title="Name">
-            <PropertyColumn Property="x => x.MakerId" Title="Maker Id" HeaderStyle="width: 12em" />
+                <CellTemplate>
+                    <div class="circle-name-container">
+                        <div class="circle-name">@context.Item.Name</div>
+                    </div>
+                </CellTemplate>
+            </TemplateColumn>
+            @* <TemplateColumn Title="Maker Id">
+                <CellTemplate>
+                    <MudChip T="string" Label="true" Class="maker-id">@context.Item.MakerId</MudChip>
+                </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)
@@ -78,7 +90,7 @@ else
             <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">
+            @* <TemplateColumn Title="First Release Date" HeaderStyle="width: 14em">
                 <CellTemplate>
                     <MudText>@context.Item.FirstReleaseDate?.ToString("MMMM d, yyyy")</MudText>
                 </CellTemplate>
@@ -87,7 +99,7 @@ else
                 <CellTemplate>
                     <MudText>@context.Item.LatestReleaseDate?.ToString("MMMM d, yyyy")</MudText>
                 </CellTemplate>
-            </TemplateColumn>
+            </TemplateColumn> *@
         </Columns>
     </MudDataGrid>
 
@@ -136,6 +148,21 @@ else
         background: var(--mud-palette-background);
         padding: .5em 1em;
     }
+
+    .circle-name-container {
+        display: inline-flex;
+        flex-direction: column;
+        gap: .5rem;
+    }
+
+    .circle-name {
+        font-size: 1.2rem;
+        font-weight: 600;
+    }
+
+    .maker-id {
+        margin: 0;
+    }
 </style>
 
 @code {

JSMR.UI.Blazor/Pages/Creators.razor

@@ -11,7 +11,7 @@
 
 <h1>Creators</h1>
 
-<MudTextField @bind-Value="Keywords" Immediate="true" DebounceInterval="500" Label="Filter" Variant="Variant.Text" Adornment="@Adornment.Start" AdornmentIcon="@Icons.Material.Outlined.Search" />
+<MudTextField T="string" Value="Keywords" ValueChanged="OnKeywordsChanged" Immediate="true" DebounceInterval="500" Label="Filter" Variant="Variant.Text" Adornment="@Adornment.Start" AdornmentIcon="@Icons.Material.Outlined.Search" />
 
 @if (searchResults is null)
 {
@@ -23,24 +23,26 @@ else if (searchResults.Items.Length == 0)
 }
 else
 {
-    <MudDataGrid Items="@searchResults.Items" Style="table-layout: fixed">
+    <MudTable Items="@searchResults.Items" Style="table-layout: fixed" Virtualize="true">
-        <Columns>
+        <HeaderContent>
-            <PropertyColumn Property="x => x.Name" Title="Name" />
+            <MudTh>Name</MudTh>
-            <PropertyColumn Property="x => x.VoiceWorkCount" Title="Voice Works" HeaderStyle="width: 14em" />
+            <MudTh>Voice Works</MudTh>
-            <TemplateColumn Title="Favorite" HeaderStyle="width: 8em">
+            <MudTh>Favorite</MudTh>
-                <CellTemplate>
+            <MudTh>Blacklisted</MudTh>
-                    <MudIconButton Size="@Size.Small" Icon="@Icons.Material.Filled.Favorite" Color="@(context.Item.Favorite? Color.Secondary: Color.Dark)" />
+        </HeaderContent>
-                </CellTemplate>
+        <RowTemplate>
-            </TemplateColumn>
+                <MudTd DataLabel="Name">@context.Name</MudTd>
-            <TemplateColumn Title="Blacklisted" HeaderStyle="width: 8em">
+                <MudTd DataLabel="Voice Works">@context.VoiceWorkCount</MudTd>
-                <CellTemplate>
+                <MudTd DataLabel="Favorite">
-                    <MudIconButton Size="@Size.Small" Icon="@Icons.Material.Filled.Block" Color="@(context.Item.Blacklisted? Color.Secondary: Color.Dark)" />
+                    <MudIconButton Size="@Size.Small" Icon="@Icons.Material.Filled.Favorite" Color="@(context.Favorite? Color.Secondary: Color.Dark)" />
-                </CellTemplate>
+                </MudTd>
-            </TemplateColumn>
+                <MudTd DataLabel="Blacklisted">
-        </Columns>
+                    <MudIconButton Size="@Size.Small" Icon="@Icons.Material.Filled.Block" Color="@(context.Blacklisted? Color.Secondary: Color.Dark)" />
-    </MudDataGrid>
+                </MudTd>
+        </RowTemplate>
+    </MudTable>
 
-    <JPagination @bind-PageNumber="PageNumber" @bind-PageSize="PageSize" @bind-TotalItems="searchResults.TotalItems" />
+    <JPagination PageNumber="PageNumber" PageNumberChanged="OnPageNumberChanged" PageSize="PageSize" PageSizeChanged="OnPageSizeChanged" @bind-TotalItems="searchResults.TotalItems" />
 }
 
 <style>
@@ -61,55 +63,39 @@ else
 </style>
 
 @code {
-    private string? keywords;
+    public string? Keywords { get; set; }
-
+    public int PageNumber { get; set; } = 1;
-    public string? Keywords
+    public int PageSize { get; set; } = 100;
-    {
-        get { return keywords; }
-        set
-        {
-            keywords = value;
-            _ = UpdateDataAsync(true);
-        }
-    }
-
-    private int pageNumber = 1;
-
-    public int PageNumber
-    {
-        get { return pageNumber; }
-        set
-        {
-            pageNumber = value;
-            _ = UpdateDataAsync(false);
-        }
-    }
-
-    int pageSize = 100;
-
-    public int PageSize
-    {
-        get { return pageSize; }
-        set
-        {
-            pageSize = value;
-            _ = UpdateDataAsync(true);
-        }
-    }
 
     SearchResult<CreatorSearchItem>? searchResults;
 
-    protected override Task OnInitializedAsync()
+    protected override async Task OnInitializedAsync()
     {
-        _ = LoadCreatorsAsync();
+        await UpdateDataAsync(true);
+    }
 
-        return Task.CompletedTask;
+    public async Task OnKeywordsChanged(string? newKeywords)
+    {
+        Keywords = newKeywords;
+        await UpdateDataAsync(true);
+    }
+
+    public async Task OnPageNumberChanged(int newPageNumber)
+    {
+        PageNumber = newPageNumber;
+        await UpdateDataAsync(false);
+    }
+
+    public async Task OnPageSizeChanged(int newPageSize)
+    {
+        PageSize = newPageSize;
+        await UpdateDataAsync(true);
     }
 
     private async Task UpdateDataAsync(bool resetPageNumber)
     {
         if (resetPageNumber)
-            pageNumber = 1;
+            PageNumber = 1;
 
         await LoadCreatorsAsync();
     }
@@ -120,7 +106,7 @@ else
             Options: new()
             {
                 PageNumber = PageNumber,
-                PageSize = pageSize,
+                PageSize = PageSize,
                 Criteria = new()
                 {
                     Name = Keywords
@@ -137,6 +123,6 @@ else
 
         searchResults = result?.Results ?? new();
 
-        await InvokeAsync(StateHasChanged);
+        //await InvokeAsync(StateHasChanged);
     }
 }

JSMR.UI.Blazor/Program.cs

@@ -8,8 +8,7 @@ var builder = WebAssemblyHostBuilder.CreateDefault(args);
 builder.RootComponents.Add<App>("#app");
 builder.RootComponents.Add<HeadOutlet>("head::after");
 
-var apiBase = builder.Configuration["ApiBaseUrl"] ?? builder.HostEnvironment.BaseAddress;
+string apiBase = builder.Configuration["ApiBaseUrl"] ?? builder.HostEnvironment.BaseAddress;
-apiBase = "https://localhost:7277";
 
 Console.WriteLine(apiBase);