Updated Blazor UI tag/creator views. Altered logic for sorting favorite/blacklisted fields for tags/creators.

JSMR.UI.Blazor/Pages/Creators.razor

@@ -13,37 +13,48 @@
 
 <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" />
 
-@if (searchResults is null)
-{
-    <p>Loading…</p>
-}
-else if (searchResults.Items.Length == 0)
-{
-    <p>No results.</p>
-}
-else
-{
-    <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 PageNumber="PageNumber" PageNumberChanged="OnPageNumberChanged" PageSize="PageSize" PageSizeChanged="OnPageSizeChanged" @bind-TotalItems="searchResults.TotalItems" />
-}
+<AntDesign.Table DataSource="@(searchResults?.Items ?? Enumerable.Empty<CreatorSearchItem>())"
+                 Total="@(searchResults?.TotalItems ?? 0)"
+                 TItem="CreatorSearchItem"
+                 Loading="LoadingData"
+                 HidePagination="@true"
+                 RemoteDataSource="@true"
+                 RowKey="x=>x.CreatorId"
+                 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.Favorite" Title="Favorite" HeaderStyle="width: 8em" Sortable="true" SortDirections="new[] { AntDesign.SortDirection.Descending }" SorterMultiple="4">
+            @if (context.Favorite)
+            {
+                <AntDesign.Tag Color="AntDesign.TagColor.PurpleInverse">Favorite</AntDesign.Tag>
+            }
+        </AntDesign.PropertyColumn>
+        <AntDesign.PropertyColumn Property="c => c.Blacklisted" Title="Blacklisted" HeaderStyle="width: 8em" Sortable="true" SortDirections="new[] { AntDesign.SortDirection.Descending }" SorterMultiple="4">
+            @if (context.Blacklisted)
+            {
+                <AntDesign.Tag Color="AntDesign.TagColor.RedInverse">Blacklisted</AntDesign.Tag>
+            }
+        </AntDesign.PropertyColumn>
+        @* <AntDesign.ActionColumn HeaderStyle="width: 2em">
+            <AntDesign.Dropdown Trigger="@(new AntDesign.Trigger[] { AntDesign.Trigger.Click })">
+                <Overlay>
+                    <AntDesign.Menu>
+                        <AntDesign.MenuItem>
+                            <span>Some Menu Item</span>
+                        </AntDesign.MenuItem>
+                    </AntDesign.Menu>
+                </Overlay>
+                <ChildContent>
+                    <AntDesign.Button Shape="AntDesign.ButtonShape.Circle" Icon="@AntDesign.IconType.Outline.More" Type="AntDesign.ButtonType.Default"></AntDesign.Button>
+                </ChildContent>
+            </AntDesign.Dropdown>
+        </AntDesign.ActionColumn> *@
+    </ColumnDefinitions>
+</AntDesign.Table>
+
+<JPagination PageNumber="PageNumber" PageNumberChanged="OnPageNumberChanged" PageSize="PageSize" PageSizeChanged="OnPageSizeChanged" TotalItems="TotalItems" />
 
 <style>
     .mud-table-root {
@@ -66,12 +77,15 @@ else
     public string? Keywords { get; set; }
     public int PageNumber { get; set; } = 1;
     public int PageSize { get; set; } = 100;
+    public int TotalItems => searchResults?.TotalItems ?? 0;
+
+    public bool LoadingData { get; set; }
 
     SearchResult<CreatorSearchItem>? searchResults;
 
     protected override async Task OnInitializedAsync()
     {
-        await UpdateDataAsync(true);
+        //await UpdateDataAsync(true);
     }
 
     public async Task OnKeywordsChanged(string? newKeywords)
@@ -102,6 +116,8 @@ else
 
     private async Task LoadCreatorsAsync()
     {
+        LoadingData = true;
+
         SearchCreatorsRequest request = new(
             Options: new()
             {
@@ -111,10 +127,7 @@ else
                 {
                     Name = Keywords
                 },
-                SortOptions =
-                [
-                    new(CreatorSortField.Name, Application.Common.Search.SortDirection.Ascending)
-                ]
+                SortOptions = [.. _sortOptions]
             }
         );
 
@@ -123,6 +136,68 @@ else
 
         searchResults = result?.Results ?? new();
 
+        LoadingData = false;
+
         //await InvokeAsync(StateHasChanged);
     }
+
+    private List<SortOption<CreatorSortField>> _sortOptions =
+    [
+        new(CreatorSortField.Name, Application.Common.Search.SortDirection.Ascending)
+    ];
+
+    private async Task HandleTableChange(AntDesign.TableModels.QueryModel<CreatorSearchItem> queryModel)
+    {
+        //PageNumber = queryModel.PageIndex;
+        //PageSize = queryModel.PageSize;
+
+        _sortOptions = MapSortOptions(queryModel);
+
+        await LoadCreatorsAsync();
+    }
+
+    private List<SortOption<CreatorSortField>> MapSortOptions(AntDesign.TableModels.QueryModel<CreatorSearchItem> queryModel)
+    {
+        var requestedSorts = queryModel.SortModel
+            .Select(sort => new
+            {
+                Field = sort.FieldName switch
+                {
+                    nameof(CreatorSearchItem.Favorite) => CreatorSortField.Favorite,
+                    nameof(CreatorSearchItem.Blacklisted) => CreatorSortField.Blacklisted,
+                    nameof(CreatorSearchItem.VoiceWorkCount) => CreatorSortField.VoiceWorkCount,
+                    nameof(CreatorSearchItem.Name) => CreatorSortField.Name,
+                    _ => (CreatorSortField?)null
+                },
+                Direction = sort.SortDirection switch
+                {
+                    AntDesign.SortDirection.Ascending => Application.Common.Search.SortDirection.Ascending,
+                    AntDesign.SortDirection.Descending => Application.Common.Search.SortDirection.Descending,
+                    _ => (Application.Common.Search.SortDirection?)null
+                }
+            })
+            .Where(x => x.Field is not null && x.Direction is not null)
+            .ToDictionary(x => x.Field!.Value, x => x.Direction!.Value);
+
+        var finalSorts = new List<SortOption<CreatorSortField>>();
+
+        // Force your preferred precedence
+        if (requestedSorts.TryGetValue(CreatorSortField.Favorite, out var favoriteDir))
+            finalSorts.Add(new(CreatorSortField.Favorite, favoriteDir));
+
+        if (requestedSorts.TryGetValue(CreatorSortField.Blacklisted, out var blacklistedDir))
+            finalSorts.Add(new(CreatorSortField.Blacklisted, blacklistedDir));
+
+        if (requestedSorts.TryGetValue(CreatorSortField.VoiceWorkCount, out var countDir))
+            finalSorts.Add(new(CreatorSortField.VoiceWorkCount, countDir));
+
+        if (requestedSorts.TryGetValue(CreatorSortField.Name, out var nameDir))
+            finalSorts.Add(new(CreatorSortField.Name, nameDir));
+
+        // Default fallback
+        if (finalSorts.Count == 0)
+            finalSorts.Add(new(CreatorSortField.Name, Application.Common.Search.SortDirection.Ascending));
+
+        return finalSorts;
+    }
 }