Updated tags and creators pages.

2026-04-20 00:36:53 -04:00
parent c203b2cbdb
commit da33973229
2 changed files with 118 additions and 40 deletions
--- a/JSMR.UI.Blazor/Pages/Creators.razor
+++ b/JSMR.UI.Blazor/Pages/Creators.razor
@@ -5,7 +5,9 @@
@using JSMR.Application.Creators.Queries.Search
@using JSMR.Application.Creators.Queries.Search.Contracts
@using JSMR.UI.Blazor.Components
+@using JSMR.UI.Blazor.Filters
@using JSMR.UI.Blazor.Services
+@using Microsoft.AspNetCore.WebUtilities

 <PageTitle>Creators</PageTitle>

@@ -24,7 +26,9 @@
                 OnChange="HandleTableChange">
    <ColumnDefinitions>
        <AntDesign.PropertyColumn Property="c => c.Name" Title="Name" Sortable="true" SorterMultiple="4" />
-        <AntDesign.PropertyColumn Property="c => c.VoiceWorkCount" Title="Voice Works" Format="n0" HeaderStyle="width: 14em" Sortable="true" SorterMultiple="4" />
+        <AntDesign.PropertyColumn Property="c => c.VoiceWorkCount" Title="Voice Works" Format="n0" HeaderStyle="width: 10em" Sortable="true" SorterMultiple="4">
+            <AntDesign.Button Size="AntDesign.ButtonSize.Small" Type="AntDesign.ButtonType.Link" OnClick="@(e => NavigateToVoiceWorkSearch(context))" Style="display:flex;justify-self:flex-end;">@context.VoiceWorkCount.ToString("n0")</AntDesign.Button>
+        </AntDesign.PropertyColumn>
        <AntDesign.PropertyColumn Property="c => c.Favorite" Title="Favorite" HeaderStyle="width: 8em" Sortable="true" SortDirections="new[] { AntDesign.SortDirection.Descending }" SorterMultiple="4">
            @if (context.Favorite)
            {
@@ -74,6 +78,9 @@
 </style>

@code {
+    [Inject]
+    protected NavigationManager NavigationManager { get; set; } = default!;
+
    public string? Keywords { get; set; }
    public int PageNumber { get; set; } = 1;
    public int PageSize { get; set; } = 100;
@@ -200,4 +207,18 @@

        return finalSorts;
    }
+
+    private void NavigateToVoiceWorkSearch(CreatorSearchItem item)
+    {
+        VoiceWorkFilterState state = new()
+        {
+            CreatorIds = [item.CreatorId]
+        };
+
+        //string basePath = new Uri(NavigationManager.Uri).GetLeftPart(UriPartial.Path);
+        string basePath = new Uri(NavigationManager.Uri).GetLeftPart(UriPartial.Authority);
+        string uri = QueryHelpers.AddQueryString($"{basePath}/voiceworks", state.ToQuery());
+
+        NavigationManager.NavigateTo(uri);
+    }
 }
--- a/JSMR.UI.Blazor/Pages/Tags.razor
+++ b/JSMR.UI.Blazor/Pages/Tags.razor
@@ -1,60 +1,100 @@
@page "/tags"
@inject VoiceWorksClient Client
@inject IJSRuntime JS
+@using AntDesign
@using JSMR.Application.Common.Search
@using JSMR.Application.Tags.Queries.Search
@using JSMR.Application.Tags.Queries.Search.Contracts
@using JSMR.UI.Blazor.Components
+@using JSMR.UI.Blazor.Filters
@using JSMR.UI.Blazor.Services
+@using Microsoft.AspNetCore.WebUtilities

 <PageTitle>Tags</PageTitle>

-<h1>Tags</h1>
+<div class="fdsfds">
+@* <h1>Tags</h1> *@

-<MudTextField T="string" Value="Keywords" ValueChanged="OnKeywordsChanged" Immediate="true" DebounceInterval="500" Label="Filter" Variant="MudBlazor.Variant.Text" Adornment="@Adornment.Start" AdornmentIcon="@Icons.Material.Outlined.Search" />
-
-@* <AntDesign.Input @bind-Value="Keywords" DebounceMilliseconds="500" Placeholder="Filter">
-    <Prefix>
-        <AntDesign.Icon Type="@AntDesign.IconType.Outline.Search" />
-    </Prefix>
-</AntDesign.Input> *@
-
-    <AntDesign.Table
-        Responsive
-        DataSource="@(searchResults?.Items ?? Enumerable.Empty<TagSearchItem>())"
-        Total="@(searchResults?.TotalItems ?? 0)"
-        TItem="TagSearchItem"
-        Loading="LoadingData"
-        HidePagination="@true"
-        RemoteDataSource="@true"
-        RowKey="x=>x.TagId"
-        OnChange="HandleTableChange">
-        <ColumnDefinitions>
-            <AntDesign.PropertyColumn Property="c => c.Name" Title="Name" Sortable SorterMultiple="5" />
-            <AntDesign.PropertyColumn Property="c => c.EnglishName" Title="English Name" Sortable SorterMultiple="5" />
-            <AntDesign.PropertyColumn Property="c => c.VoiceWorkCount" Title="Voice Works" Format="n0" HeaderStyle="width: 14em" Sortable SorterMultiple="5" />
-            <AntDesign.PropertyColumn Property="c => c.Favorite" Title="Favorite" HeaderStyle="width: 8em" Sortable SortDirections="new[] { AntDesign.SortDirection.Descending }" SorterMultiple="5">
-                @if (context.Favorite)
-                {
-                    <AntDesign.Tag Color="AntDesign.TagColor.PurpleInverse">Favorite</AntDesign.Tag>
-                }
-            </AntDesign.PropertyColumn>
-            <AntDesign.PropertyColumn Property="c => c.Blacklisted" Title="Blacklisted" HeaderStyle="width: 9em" Sortable SortDirections="new[] { AntDesign.SortDirection.Descending }" SorterMultiple="5">
-                @if (context.Blacklisted)
-                {
-                    <AntDesign.Tag Color="AntDesign.TagColor.RedInverse">Blacklisted</AntDesign.Tag>
-                }
-            </AntDesign.PropertyColumn>
-        </ColumnDefinitions>
-    </AntDesign.Table>
+@* <MudTextField T="string" Value="Keywords" ValueChanged="OnKeywordsChanged" Immediate="true" DebounceInterval="500" Label="Filter" Variant="MudBlazor.Variant.Text" Adornment="@Adornment.Start" AdornmentIcon="@Icons.Material.Outlined.Search" />
+ *@
+    <AntDesign.Card Title=@("Tags") Class="ant-blurred-card">
+    <Extra>
+        <AntDesign.Input TValue="string" Value="Keywords" ValueChanged="OnKeywordsChanged" DebounceMilliseconds="500" Placeholder="Filter">
+            <Prefix>
+                <AntDesign.Icon Type="@AntDesign.IconType.Outline.Search" />
+            </Prefix>
+        </AntDesign.Input>
+    </Extra>
+    <Body>
+        <Space Direction="SpaceDirection.Vertical" Size="@($"2em")">
+            @* <SpaceItem>
+                <AntDesign.Input TValue="string" Value="Keywords" ValueChanged="OnKeywordsChanged" DebounceMilliseconds="500" Placeholder="Filter">
+                    <Prefix>
+                        <AntDesign.Icon Type="@AntDesign.IconType.Outline.Search" />
+                    </Prefix>
+                </AntDesign.Input>
+            </SpaceItem> *@
+            <SpaceItem>
+                <AntDesign.Table Responsive
+                                 DataSource="@(searchResults?.Items ?? Enumerable.Empty<TagSearchItem>())"
+                                 Total="@(searchResults?.TotalItems ?? 0)"
+                                 TItem="TagSearchItem"
+                                 Loading="LoadingData"
+                                 HidePagination="@false"
+                                 PageSize="PageSize"
+                                 PageIndex="PageNumber"
+                                 PaginationPosition="bottomCenter"
+                                 RemoteDataSource="@true"
+                                 RowKey="x=>x.TagId"
+                                 OnChange="HandleTableChange">
+                    <ColumnDefinitions>
+                        <AntDesign.PropertyColumn Property="c => c.Name" Title="Name" Sortable SorterMultiple="5" />
+                        <AntDesign.PropertyColumn Property="c => c.EnglishName" Title="English Name" Sortable SorterMultiple="5" />
+                        <AntDesign.PropertyColumn Property="c => c.VoiceWorkCount" Title="Voice Works" Format="n0" HeaderStyle="width: 10em" Sortable SorterMultiple="5">
+                            <AntDesign.Button Size="AntDesign.ButtonSize.Small" Type="AntDesign.ButtonType.Link" OnClick="@(e => NavigateToVoiceWorkSearch(context))" Style="display:flex;justify-self:flex-end;">@context.VoiceWorkCount.ToString("n0")</AntDesign.Button>
+                        </AntDesign.PropertyColumn>
+                        <AntDesign.PropertyColumn Property="c => c.Favorite" Title="Favorite" HeaderStyle="width: 8em" Sortable SortDirections="new[] { AntDesign.SortDirection.Descending }" SorterMultiple="5">
+                            @if (context.Favorite)
+                            {
+                                <AntDesign.Tag Color="AntDesign.TagColor.PurpleInverse">Favorite</AntDesign.Tag>
+                            }
+                        </AntDesign.PropertyColumn>
+                        <AntDesign.PropertyColumn Property="c => c.Blacklisted" Title="Blacklisted" HeaderStyle="width: 9em" Sortable SortDirections="new[] { AntDesign.SortDirection.Descending }" SorterMultiple="5">
+                            @if (context.Blacklisted)
+                            {
+                                <AntDesign.Tag Color="AntDesign.TagColor.RedInverse">Blacklisted</AntDesign.Tag>
+                            }
+                        </AntDesign.PropertyColumn>
+                    </ColumnDefinitions>
+                </AntDesign.Table>
+            </SpaceItem>
+        </Space>
+    </Body>
+ </AntDesign.Card>

 <JPagination PageNumber="PageNumber" PageNumberChanged="OnPageNumberChanged" PageSize="PageSize" PageSizeChanged="OnPageSizeChanged" TotalItems="TotalItems" />
+</div>

 <style>
    .mud-table-root {
        table-layout: fixed;
    }

+    .mud-main-content {
+        background-image: url(https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*ETkNSJ-oUGwAAAAAQ_AAAAgAegCCAQ/original);
+        background-size: contain;
+    }
+
+    .ant-blurred-card {
+        background-color: color-mix(in srgb, #141414 70%, transparent);
+        -webkit-backdrop-filter: blur(12px);
+        backdrop-filter: blur(12px);
+    }
+
+    .ant-table {
+        /* background: inherit; */
+    }
+
    .ant-table table {
        table-layout: fixed;
    }
@@ -72,6 +112,9 @@
 </style>

@code {
+    [Inject]
+    protected NavigationManager NavigationManager { get; set; } = default!;
+
    public string? Keywords { get; set; }
    public int PageNumber { get; set; } = 1;
    public int PageSize { get; set; } = 100;
@@ -146,8 +189,8 @@

    private async Task HandleTableChange(AntDesign.TableModels.QueryModel<TagSearchItem> queryModel)
    {
-        //PageNumber = queryModel.PageIndex;
-        //PageSize = queryModel.PageSize;
+        PageNumber = queryModel.PageIndex;
+        PageSize = queryModel.PageSize;

        _sortOptions = MapSortOptions(queryModel);

@@ -202,4 +245,18 @@

        return finalSorts;
    }
+
+    private void NavigateToVoiceWorkSearch(TagSearchItem item)
+    {
+        VoiceWorkFilterState state = new()
+        {
+            TagIds = [item.TagId]
+        };
+
+        //string basePath = new Uri(NavigationManager.Uri).GetLeftPart(UriPartial.Path);
+        string basePath = new Uri(NavigationManager.Uri).GetLeftPart(UriPartial.Authority);
+        string uri = QueryHelpers.AddQueryString($"{basePath}/voiceworks", state.ToQuery());
+
+        NavigationManager.NavigateTo(uri);
+    }
 }