Minor adjustments to the UI.

2025-11-11 17:10:28 -05:00
parent e2c39cf581
commit 334bbe9ef2
7 changed files with 114 additions and 83 deletions
--- a/JSMR.Api/.config/dotnet-tools.json
+++ b/JSMR.Api/.config/dotnet-tools.json
@@ -0,0 +1,5 @@
+{
+  "version": 1,
+  "isRoot": true,
+  "tools": {}
+}
--- a/JSMR.UI.Blazor/.config/dotnet-tools.json
+++ b/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
+    }
+  }
+}
--- a/JSMR.UI.Blazor/JSMR.UI.Blazor.csproj
+++ b/JSMR.UI.Blazor/JSMR.UI.Blazor.csproj
@@ -1,25 +1,26 @@
 <Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">

-  <PropertyGroup>
-    <TargetFramework>net9.0</TargetFramework>
-    <Nullable>enable</Nullable>
-    <ImplicitUsings>enable</ImplicitUsings>
-    <ServiceWorkerAssetsManifest>service-worker-assets.js</ServiceWorkerAssetsManifest>
-  </PropertyGroup>
+	<PropertyGroup>
+		<TargetFramework>net9.0</TargetFramework>
+		<Nullable>enable</Nullable>
+		<ImplicitUsings>enable</ImplicitUsings>
+		<ServiceWorkerAssetsManifest>service-worker-assets.js</ServiceWorkerAssetsManifest>
+		<RunAOTCompilation>true</RunAOTCompilation>
+	</PropertyGroup>

-  <ItemGroup>
-    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="9.0.10" />
-    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="9.0.10" PrivateAssets="all" />
-    <PackageReference Include="Microsoft.AspNetCore.Mvc.Core" Version="2.3.0" />
-    <PackageReference Include="MudBlazor" Version="8.14.0" />
-  </ItemGroup>
+	<ItemGroup>
+		<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="9.0.10" />
+		<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="9.0.10" PrivateAssets="all" />
+		<PackageReference Include="Microsoft.AspNetCore.Mvc.Core" Version="2.3.0" />
+		<PackageReference Include="MudBlazor" Version="8.14.0" />
+	</ItemGroup>

-  <ItemGroup>
-    <ProjectReference Include="..\JSMR.Application\JSMR.Application.csproj" />
-  </ItemGroup>
+	<ItemGroup>
+		<ProjectReference Include="..\JSMR.Application\JSMR.Application.csproj" />
+	</ItemGroup>

-  <ItemGroup>
-    <ServiceWorker Include="wwwroot\service-worker.js" PublishedContent="wwwroot\service-worker.published.js" />
-  </ItemGroup>
+	<ItemGroup>
+		<ServiceWorker Include="wwwroot\service-worker.js" PublishedContent="wwwroot\service-worker.published.js" />
+	</ItemGroup>

 </Project>
--- a/JSMR.UI.Blazor/Pages/Circles.razor
+++ b/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" />
-            <PropertyColumn Property="x => x.MakerId" Title="Maker Id" HeaderStyle="width: 12em" />
+            <TemplateColumn Title="Name">
+                <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 {
--- a/JSMR.UI.Blazor/Pages/Creators.razor
+++ b/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">
-        <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>
+    <MudTable Items="@searchResults.Items" Style="table-layout: fixed" Virtualize="true">
+        <HeaderContent>
+            <MudTh>Name</MudTh>
+            <MudTh>Voice Works</MudTh>
+            <MudTh>Favorite</MudTh>
+            <MudTh>Blacklisted</MudTh>
+        </HeaderContent>
+        <RowTemplate>
+                <MudTd DataLabel="Name">@context.Name</MudTd>
+                <MudTd DataLabel="Voice Works">@context.VoiceWorkCount</MudTd>
+                <MudTd DataLabel="Favorite">
+                    <MudIconButton Size="@Size.Small" Icon="@Icons.Material.Filled.Favorite" Color="@(context.Favorite? Color.Secondary: Color.Dark)" />
+                </MudTd>
+                <MudTd DataLabel="Blacklisted">
+                    <MudIconButton Size="@Size.Small" Icon="@Icons.Material.Filled.Block" Color="@(context.Blacklisted? Color.Secondary: Color.Dark)" />
+                </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 { 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);
-        }
-    }
+    public string? Keywords { get; set; }
+    public int PageNumber { get; set; } = 1;
+    public int PageSize { get; set; } = 100;

    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);
    }
 }
--- a/JSMR.UI.Blazor/Program.cs
+++ b/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;
-apiBase = "https://localhost:7277";
+string apiBase = builder.Configuration["ApiBaseUrl"] ?? builder.HostEnvironment.BaseAddress;

 Console.WriteLine(apiBase);

--- a/JSMR.UI.Blazor/wwwroot/appsettings.json
+++ b/JSMR.UI.Blazor/wwwroot/appsettings.json