Simplified and enhnaced voice work page.

JSMR.UI.Blazor/Pages/VoiceWorks.razor

@@ -1,452 +1,114 @@
 @page "/voiceworks"
 @using JSMR.Application.Common.Search
-@using JSMR.Application.Creators.Queries.Search
-@using JSMR.Application.Enums
-@using JSMR.Application.Tags.Queries.Search
 @using JSMR.Application.VoiceWorks.Queries.Search
-@using JSMR.Domain.Enums
-@using JSMR.Domain.ValueObjects
 @using JSMR.UI.Blazor.Components
+@using JSMR.UI.Blazor.Filters
 @using JSMR.UI.Blazor.Services
+@using Microsoft.AspNetCore.WebUtilities
 @inject VoiceWorksClient Client
 @inject IJSRuntime JS
+@inject NavigationManager NavigationManager
+@implements IAsyncDisposable;
 
 <PageTitle>Voice Works</PageTitle>
 
 <h3>Voice Works</h3>
 
-<div class="search-filter-control-container">
-    @* <div class="search-filter-control-span-4">
-        <JTextBox Label="Keywords" Value="@Keywords" ValueChanged="OnKeywordsChanged" Immediate="true" DebounceInterval="1500" />
-    </div> *@
-    <div class="search-filter-control-span-2">
-        <BitTextField Prefix="Keywords" Value="@Keywords" ValueChanged="OnKeywordsChanged" Immediate="true" DebounceTime="500" />
-    </div>
-    <div class="search-filter-control-span-1">
-        <BitDropdown Prefix="Languages"
-                     MultiSelect
-                     Items="Languages"
-                     Placeholder="Select..."
-                     TItem="BitDropdownItem<Language>"
-                     TValue="Language"
-                     Values="SupportedLanguages"
-                     ValuesChanged="OnSupportedLanguagesChanged" />
-    </div>
-    <div class="search-filter-control-span-1">
-        <BitDropdown Prefix="Locale"
-                     Items="Locales"
-                     Placeholder="Select..."
-                     TItem="BitDropdownItem<Locale>"
-                     TValue="Locale"
-                     Value="Locale"
-                     ValueChanged="OnLocaleChanged" />
-    </div>
-    <!-- Row 2 -->
-    <div class="search-filter-control-span-1">
-        <BitDropdown Prefix="Sale Status"
-                     Items="SaleStatuses"
-                     Placeholder="Select..."
-                     TItem="BitDropdownItem<SaleStatus?>"
-                     TValue="SaleStatus?"
-                     Value="SelectedSaleStatus"
-                     ValueChanged="OnSaleStatusChanged" />
-    </div>
-    <div class="search-filter-control-span-1">
-        <BitDropdown Prefix="Circles"
-                     Items="CircleStatuses"
-                     Placeholder="Select..."
-                     TItem="BitDropdownItem<CircleStatus?>"
-                     TValue="CircleStatus?"
-                     Value="SelectedCircleStatus"
-                     ValueChanged="OnCircleStatusChanged" />
-    </div>
-    <div class="search-filter-control-span-1">
-        <BitDropdown Prefix="Tags"
-                     Items="TagStatuses"
-                     Placeholder="Select..."
-                     TItem="BitDropdownItem<TagStatus?>"
-                     TValue="TagStatus?"
-                     Value="SelectedTagStatus"
-                     ValueChanged="OnTagStatusChanged" />
-    </div>
-    <div class="search-filter-control-span-1">
-        <BitDropdown Prefix="Creators"
-                     Items="CreatorStatuses"
-                     Placeholder="Select..."
-                     TItem="BitDropdownItem<CreatorStatus?>"
-                     TValue="CreatorStatus?"
-                     Value="SelectedCreatorStatus"
-                     ValueChanged="OnCreatorStatusChanged" />
-    </div>
-    <!-- Row 3 -->
-    <div class="search-filter-control-span-2">
-        <BitDropdown Prefix="Tags"
-                     Items="Tags"
-                     MultiSelect
-                     Virtualize
-                     ShowSearchBox
-                     AutoFocusSearchBox
-                     Chips
-                     Placeholder="Select..."
-                     TItem="BitDropdownItem<int>"
-                     TValue="int"
-                     Values="SelectedTagIds"
-                     ValuesChanged="OnTagIdsChanged" />
-    </div>
-    <div class="search-filter-control-span-1">
-        <BitCheckbox Label="Include All Tags" Value="IncludeAllTags" ValueChanged="OnIncludeAllTagsChanged" />
-    </div>
-    <div class="search-filter-control-span-1"></div>
-    <!-- Row 4 -->
-    <div class="search-filter-control-span-2">
-        <BitDropdown Prefix="Creators"
-                     Items="Creators"
-                     MultiSelect
-                     Virtualize
-                     ShowSearchBox
-                     AutoFocusSearchBox
-                     Chips
-                     Placeholder="Select..."
-                     TItem="BitDropdownItem<int>"
-                     TValue="int"
-                     Values="SelectedCreatorIds"
-                     ValuesChanged="OnCreatorIdsChanged" />
-    </div>
-    <div class="search-filter-control-span-1">
-        <BitCheckbox Label="Include All Creators" Value="IncludeAllCreators" ValueChanged="OnIncludeAllCreatorsChanged" />
-    </div>
-    <div class="search-filter-control-span-1"></div>
-    <!-- Row 5 -->
-    <div class="search-filter-control-span-1">
-        <BitCheckbox Label="Show Only Favorite Works" Value="ShowOnlyFavoriteWorks" ValueChanged="OnShowOnlyFavoriteWorksChanged" />
-    </div>
-    <div class="search-filter-control-span-1">
-        <BitCheckbox Label="Show Only Invalid Works" Value="ShowOnlyInvalidWorks" ValueChanged="OnShowOnlyInvalidWorksChanged" />
-    </div>
-    <div class="search-filter-control-span-2"></div>
-    <div class="search-filter-control-span-1">
-        <BitDropdown Label="Age Ratings"
-                     MultiSelect
-                     Items="AgeRatings"
-                     Placeholder="Select..."
-                     TItem="BitDropdownItem<AgeRating>"
-                     TValue="AgeRating"
-                     Values="SelectedAgeRatings"
-                     ValuesChanged="OnAgeRatingsChanged" />
-    </div>
-    <div class="search-filter-control-span-1">
-        <BitDatePicker Label="Release Date Start" ShowClearButton="true" Value="ReleaseDateStart" ValueChanged="OnReleaseDateStartChanged" />
-    </div>
-    <div class="search-filter-control-span-1">
-        <BitDatePicker Label="Release Date End" ShowClearButton="true" Value="ReleaseDateEnd" ValueChanged="OnReleaseDateEndChanged" />
-    </div>
-    @* <div class="search-filter-control-span-1">
-        <BitSlider Label="Downloads" Min="0" Max="100000" Value="MinDownloads" ValueChanged="OnMinDownloadsChanged" />
-    </div> *@
-</div>
+<VoiceWorkFilters Value="@FilterState" ValueChanged="OnFilterStateChanged" />
 
 <JProductCollection Products="searchResults?.Items"></JProductCollection>
 
 @if (searchResults is not null)
 {
-    <JPagination PageNumber="PageNumber" PageNumberChanged="OnPageNumberChanged" PageSize="PageSize" PageSizeChanged="OnPageSizeChanged" @bind-TotalItems="searchResults.TotalItems" />
+    <JPagination PageNumber="@FilterState.PageNumber"
+                 PageNumberChanged="@(pageNumber => OnFilterStateChanged(FilterState with { PageNumber = pageNumber }))"
+                 PageSize="@FilterState.PageSize"
+                 PageSizeChanged="@(pageSize => OnFilterStateChanged(FilterState with { PageSize = pageSize, PageNumber = 1 }))"
+                 @bind-TotalItems="searchResults.TotalItems" />
 }
 
 @code {
-    public string? Keywords { get; set; }
-    public Locale Locale { get; set; } = Locale.English;
-    public SaleStatus? SelectedSaleStatus { get; set; }
-    public CircleStatus? SelectedCircleStatus { get; set; }
-    public TagStatus? SelectedTagStatus { get; set; }
-    public CreatorStatus? SelectedCreatorStatus { get; set; }
-    public int[] SelectedTagIds { get; set; } = [];
-    public bool IncludeAllTags { get; set; }
-    public int[] SelectedCreatorIds { get; set; } = [];
-    public bool IncludeAllCreators { get; set; }
-    public bool ShowOnlyFavoriteWorks { get; set; }
-    public bool ShowOnlyInvalidWorks { get; set; }
-    public IEnumerable<Language> SupportedLanguages { get; set; } = [];
-    public IEnumerable<AgeRating> SelectedAgeRatings { get; set; } = [];
-    public DateTimeOffset? ReleaseDateStart { get; set; }
-    public DateTimeOffset? ReleaseDateEnd { get; set; }
-    public int MinDownloads { get; set; }
-    public int PageNumber { get; set; } = 1;
-    public int PageSize { get; set; } = 100;
-
-    List<BitDropdownItem<Locale>> Locales =
-    [
-        new() { Text = "Japanese", Value = Locale.Japanese },
-        new() { Text = "English", Value = Locale.English }
-    ];
-
-    List<BitDropdownItem<SaleStatus?>> SaleStatuses =
-    [
-        new() { Text = "Available", Value = SaleStatus.Available },
-        new() { Text = "Upcoming", Value = SaleStatus.Upcoming },
-        new() { Text = "All", Value = null }
-    ];
-
-    List<BitDropdownItem<CircleStatus?>> CircleStatuses =
-    [
-        new() { Text = "Not Blacklisted", Value = CircleStatus.NotBlacklisted },
-        new() { Text = "Favorites", Value = CircleStatus.Favorited },
-        new() { Text = "Blacklisted", Value = CircleStatus.Blacklisted },
-        new() { Text = "All", Value = null }
-    ];
-
-    List<BitDropdownItem<TagStatus?>> TagStatuses =
-    [
-        new() { Text = "Not Blacklisted", Value = TagStatus.NotBlacklisted },
-        new() { Text = "Favorites (Exclude Blacklisted)", Value = TagStatus.FavoriteExcludeBlacklist },
-        new() { Text = "Favorites (Include Blacklisted)", Value = TagStatus.FavoriteIncludeBlacklist },
-        new() { Text = "Blacklisted", Value = TagStatus.Blacklisted },
-        new() { Text = "All", Value = null }
-    ];
-
-    List<BitDropdownItem<CreatorStatus?>> CreatorStatuses =
-    [
-        new() { Text = "Not Blacklisted", Value = CreatorStatus.NotBlacklisted },
-        new() { Text = "Favorites (Exclude Blacklisted)", Value = CreatorStatus.FavoriteExcludeBlacklist },
-        new() { Text = "Favorites (Include Blacklisted)", Value = CreatorStatus.FavoriteIncludeBlacklist },
-        new() { Text = "Blacklisted", Value = CreatorStatus.Blacklisted },
-        new() { Text = "All", Value = null }
-    ];
-
-    List<BitDropdownItem<Language>> Languages =
-    [
-        new() { Text = "Japanese", Value = Language.Japanese },
-        new() { Text = "English", Value = Language.English },
-        new() { Text = "Chinese (Traditional)", Value = Language.ChineseTraditional },
-        new() { Text = "Chinese (Simplified)", Value = Language.ChineseSimplified },
-        new() { Text = "Korean", Value = Language.Korean }
-    ];
-
-    List<BitDropdownItem<AgeRating>> AgeRatings =
-    [
-        new() { Text = "All Ages", Value = AgeRating.AllAges },
-        new() { Text = "R15", Value = AgeRating.R15 },
-        new() { Text = "R18", Value = AgeRating.R18 }
-    ];
-
-    List<BitDropdownItem<int>> Tags = [];
-    List<BitDropdownItem<int>> Creators = [];
+    private bool _isAlive = true;
+    private CancellationTokenSource _cts = new();
 
+    VoiceWorkFilterState FilterState = new();
     SearchResult<VoiceWorkSearchResult>? searchResults;
 
     protected override async Task OnInitializedAsync()
     {
-        await UpdateDataAsync(true);
-        await GetTags();
-        await GetCreators();
+        NavigationManager.LocationChanged += OnLocationChanged;
+
+        FilterState = VoiceWorkFilterState.FromQuery(new Uri(NavigationManager.Uri).Query);
+        await RunSearchAsync();
     }
 
-    private async Task GetTags()
+    private async void OnLocationChanged(object? sender, LocationChangedEventArgs e)
     {
-        SearchTagsRequest request = new(
-            Options: new()
-            {
-                PageNumber = 1,
-                PageSize = 99999
-            }
-        );
-
-        SearchTagsResponse? response = await Client.SearchAsync(request);
-
-        if (response is null)
+        if (!_isAlive)
             return;
 
-        Tags = response.Results.Items
-            .OrderByDescending(x => x.Favorite)
-            .ThenBy(x => x.EnglishName ?? x.Name)
-            .Select(x => new BitDropdownItem<int>() { Text = x.EnglishName ?? x.Name, Value = x.TagId }).ToList();
-    }
-
-    private async Task GetCreators()
-    {
-        SearchCreatorsRequest request = new(
-            Options: new()
-            {
-                PageNumber = 1,
-                PageSize = 99999
-            }
-        );
-
-        SearchCreatorsResponse? response = await Client.SearchAsync(request);
-
-        if (response is null)
+        if (!IsThisPage(e.Location))
             return;
 
-        Creators = response.Results.Items.Select(x => new BitDropdownItem<int>() { Text = x.Name, Value = x.CreatorId }).ToList();
+        // Parse query from the new URL and update state if it actually changed.
+        string query = NavigationManager.ToAbsoluteUri(e.Location).Query;
+        VoiceWorkFilterState next = VoiceWorkFilterState.FromQuery(query);
+
+        if (next != FilterState)
+        {
+            FilterState = next;
+            await RunSearchAsync();
+            await InvokeAsync(StateHasChanged);
+        }
     }
 
-    private async Task UpdateDataAsync(bool resetPageNumber)
+    private bool IsThisPage(string absoluteUri)
+    {
+        string baseRelativePath = NavigationManager.ToBaseRelativePath(absoluteUri);
+
+        return baseRelativePath.StartsWith("voiceworks", StringComparison.OrdinalIgnoreCase);
+    }
+
+    async Task OnFilterStateChanged(VoiceWorkFilterState next)
+    {
+        if (next == FilterState)
+            return;
+
+        UpdateUrl(next, false);
+    }
+
+    void UpdateUrl(VoiceWorkFilterState next, bool replace)
+    {
+        string basePath = new Uri(NavigationManager.Uri).GetLeftPart(UriPartial.Path);
+        string uri = QueryHelpers.AddQueryString(basePath, next.ToQuery());
+
+        NavigationManager.NavigateTo(uri, replace: replace);
+    }
+
+    async Task RunSearchAsync()
     {
         await JS.InvokeVoidAsync("pageHelpers.scrollToTop");
 
-        if (resetPageNumber)
-            PageNumber = 1;
-
-        SearchVoiceWorksRequest request = new(
-            Options: new()
-            {
-                Criteria = new()
-                {
-                    Keywords = Keywords,
-                    Locale = Locale,
-                    SaleStatus = SelectedSaleStatus,
-                    CircleStatus = SelectedCircleStatus,
-                    TagStatus = SelectedTagStatus,
-                    CreatorStatus = SelectedCreatorStatus,
-                    TagIds = [.. SelectedTagIds],
-                    IncludeAllTags = IncludeAllTags,
-                    CreatorIds = [.. SelectedCreatorIds],
-                    IncludeAllCreators = IncludeAllCreators,
-                    ShowFavoriteVoiceWorks = ShowOnlyFavoriteWorks,
-                    ShowInvalidVoiceWorks = ShowOnlyInvalidWorks,
-                    SupportedLanguages = [.. SupportedLanguages],
-                    AgeRatings = [.. SelectedAgeRatings],
-                    ReleaseDateStart = ReleaseDateStart != null ? DateOnly.FromDateTime(ReleaseDateStart.Value.Date) : null,
-                    ReleaseDateEnd = ReleaseDateEnd != null ? DateOnly.FromDateTime(ReleaseDateEnd.Value.Date) : null,
-                    //MinDownloads = MinDownloads
-                },
-                SortOptions =
-                [
-                    new(GetSortField(), Application.Common.Search.SortDirection.Descending)
-                ],
-                PageNumber = PageNumber,
-                PageSize = PageSize
-            }
-        );
-
-        SearchVoiceWorksResponse? response = await Client.SearchAsync(request);
-
-        searchResults = response?.Results;
-    }
-
-    public async Task OnKeywordsChanged(string? newKeywords)
-    {
-        Keywords = newKeywords;
-        await UpdateDataAsync(true);
-    }
-
-    public async Task OnLocaleChanged(Locale locale)
-    {
-        Locale = locale;
-        await UpdateDataAsync(true);
-    }
-
-    public async Task OnSaleStatusChanged(SaleStatus? saleStatus)
-    {
-        SelectedSaleStatus = saleStatus;
-        await UpdateDataAsync(true);
-    }
-
-    public async Task OnCircleStatusChanged(CircleStatus? circleStatus)
-    {
-        SelectedCircleStatus = circleStatus;
-        await UpdateDataAsync(true);
-    }
-
-    public async Task OnTagStatusChanged(TagStatus? tagStatus)
-    {
-        SelectedTagStatus = tagStatus;
-        await UpdateDataAsync(true);
-    }
-
-    public async Task OnCreatorStatusChanged(CreatorStatus? creatorStatus)
-    {
-        SelectedCreatorStatus = creatorStatus;
-        await UpdateDataAsync(true);
-    }
-
-    public async Task OnTagIdsChanged(IEnumerable<int> tagIds)
-    {
-        SelectedTagIds = [..tagIds];
-        await UpdateDataAsync(true);
-    }
-
-    public async Task OnIncludeAllTagsChanged(bool includeAllTags)
-    {
-        IncludeAllTags = includeAllTags;
-        await UpdateDataAsync(true);
-    }
-
-    public async Task OnCreatorIdsChanged(IEnumerable<int> creatorIds)
-    {
-        SelectedCreatorIds = [..creatorIds];
-        await UpdateDataAsync(true);
-    }
-
-    public async Task OnIncludeAllCreatorsChanged(bool includeAllCreators)
-    {
-        IncludeAllCreators = includeAllCreators;
-        await UpdateDataAsync(true);
-    }
-
-    public async Task OnSupportedLanguagesChanged(IEnumerable<Language> languages)
-    {
-        SupportedLanguages = languages;
-        await UpdateDataAsync(true);
-    }
-
-    public async Task OnAgeRatingsChanged(IEnumerable<AgeRating> ageRatings)
-    {
-        SelectedAgeRatings = ageRatings;
-        await UpdateDataAsync(true);
-    }
-
-    public async Task OnShowOnlyFavoriteWorksChanged(bool showOnlyFavoriteWorks)
-    {
-        ShowOnlyFavoriteWorks = showOnlyFavoriteWorks;
-        await UpdateDataAsync(true);
-    }
-
-    public async Task OnShowOnlyInvalidWorksChanged(bool showOnlyInvalidWorks)
-    {
-        ShowOnlyInvalidWorks = showOnlyInvalidWorks;
-        await UpdateDataAsync(true);
-    }
-
-    public async Task OnReleaseDateStartChanged(DateTimeOffset? releaseDateStart)
-    {
-        ReleaseDateStart = releaseDateStart;
-        await UpdateDataAsync(true);
-    }
-
-    public async Task OnReleaseDateEndChanged(DateTimeOffset? releaseDateEnd)
-    {
-        ReleaseDateEnd = releaseDateEnd;
-        await UpdateDataAsync(true);
-    }
-
-    public async Task OnMinDownloadsChanged(double minDownloads)
-    {
-        MinDownloads = (int)minDownloads;
-        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 VoiceWorkSortField GetSortField()
-    {
-        switch (SelectedSaleStatus)
+        try
         {
-            case SaleStatus.Available:
-                return VoiceWorkSortField.ReleaseDate;
-            case SaleStatus.Upcoming:
-                return VoiceWorkSortField.ExpectedReleaseDate;
-            default:
-                return VoiceWorkSortField.AnyReleaseDate;
+            _cts.Cancel();
+            _cts = new();
+
+            SearchVoiceWorksResponse? response = await Client.SearchAsync(FilterState.ToSearchRequest(), _cts.Token);
+            searchResults = response?.Results;
+        }
+        catch (OperationCanceledException)
+        {
+            
         }
     }
+
+    public async ValueTask DisposeAsync()
+    {
+        _isAlive = false;
+        NavigationManager.LocationChanged -= OnLocationChanged;
+        _cts.Cancel();
+        _cts.Dispose();
+        await Task.CompletedTask;
+    }
 }