Updated UI with BitBlazor components.

JSMR.UI.Blazor/Pages/VoiceWorks.razor

@@ -1,6 +1,8 @@
 @page "/voiceworks"
 @using JSMR.Application.Common.Search
 @using JSMR.Application.VoiceWorks.Queries.Search
+@using JSMR.Domain.Enums
+@using JSMR.Domain.ValueObjects
 @using JSMR.UI.Blazor.Components
 @using JSMR.UI.Blazor.Services
 @inject VoiceWorksClient Client
@@ -12,40 +14,109 @@
 
 <div class="search-filter-control-container">
     <div class="search-filter-control-span-4">
-        <MudTextField T="string" Value="Keywords" ValueChanged="OnKeywordsChanged" Immediate="true" DebounceInterval="500" Label="Filter" Variant="Variant.Text" Adornment="@Adornment.Start" AdornmentIcon="@Icons.Material.Outlined.Search" />
+        <JTextBox Label="Keywords" Value="@Keywords" ValueChanged="OnKeywordsChanged" Immediate="true" DebounceInterval="1500" />
+    </div>
+    <div class="search-filter-control-span-4">
+        <BitTextField Label="Keywords" Value="@Keywords" ValueChanged="OnKeywordsChanged" Immediate="true" DebounceTime="500" />
+    </div>
+    <!-- Row 2 -->
+    <div class="search-filter-control-span-1">
+        <BitDropdown Label="Sale Status"
+                     Items="BasicItems"
+                     Placeholder="Select..."
+                     TItem="BitDropdownItem<SaleStatus?>"
+                     TValue="SaleStatus?"
+                     Value="SelectedSaleStatus"
+                     ValueChanged="OnSaleStatusChanged" />
     </div>
     <div class="search-filter-control-span-1">
-        <MudSelect T="string" Value="SelectedSaleStatus" ValueChanged="OnSaleStatusChanged" Label="Sale Status" Variant="Variant.Text">
-            <MudSelectItem Value="@SaleStatus.Available.ToString()">Available</MudSelectItem>
-            <MudSelectItem Value="@SaleStatus.Upcoming.ToString()">Upcoming</MudSelectItem>
-            <MudSelectItem Value="@String.Empty">All</MudSelectItem>
-        </MudSelect>
+        <BitDropdown Label="Circle Status"
+                     Items="CircleStatuses"
+                     Placeholder="Select..."
+                     TItem="BitDropdownItem<CircleStatus?>"
+                     TValue="CircleStatus?"
+                     Value="SelectedCircleStatus"
+                     ValueChanged="OnCircleStatusChanged" />
     </div>
     <div class="search-filter-control-span-1">
-        <MudSelect T="string" Value="SelectedCircleStatus" ValueChanged="OnCircleStatusChanged" Label="Circle Status" Variant="Variant.Text">
-            <MudSelectItem Value="@CircleStatus.NotBlacklisted.ToString()">Not Blacklisted</MudSelectItem>
-            <MudSelectItem Value="@CircleStatus.Favorited.ToString()">Favorite</MudSelectItem>
-            <MudSelectItem Value="@CircleStatus.Blacklisted.ToString()">Blacklisted</MudSelectItem>
-            <MudSelectItem Value="@String.Empty">All</MudSelectItem>
-        </MudSelect>
+        <BitDropdown Label="Tag Status"
+                     Items="TagStatuses"
+                     Placeholder="Select..."
+                     TItem="BitDropdownItem<TagStatus?>"
+                     TValue="TagStatus?"
+                     Value="SelectedTagStatus"
+                     ValueChanged="OnTagStatusChanged" />
     </div>
     <div class="search-filter-control-span-1">
-        <MudSelect T="string" Value="SelectedTagStatus" ValueChanged="OnTagStatusChanged" Label="Tag Status" Dense="true" Variant="Variant.Outlined" Margin="Margin.Dense" Adornment="@Adornment.Start" AdornmentIcon="@Icons.Material.Outlined.Search">
-            <MudSelectItem Value="@TagStatus.NotBlacklisted.ToString()">Not Blacklisted</MudSelectItem>
-            <MudSelectItem Value="@TagStatus.FavoriteExcludeBlacklist.ToString()">Favorite (Exclude Blacklisted)</MudSelectItem>
-            <MudSelectItem Value="@TagStatus.FavoriteIncludeBlacklist.ToString()">Favorite (Include Blacklisted)</MudSelectItem>
-            <MudSelectItem Value="@TagStatus.Blacklisted.ToString()">Blacklisted</MudSelectItem>
-            <MudSelectItem Value="@String.Empty">All</MudSelectItem>
-        </MudSelect>
+        <BitDropdown Label="Creator Status"
+                     Items="CreatorStatuses"
+                     Placeholder="Select..."
+                     TItem="BitDropdownItem<CreatorStatus?>"
+                     TValue="CreatorStatus?"
+                     Value="SelectedCreatorStatus"
+                     ValueChanged="OnCreatorStatusChanged" />
+    </div>
+    <!-- Row 3 -->
+    <div class="search-filter-control-span-2">
+        <BitDropdown Label="Creator Status 2"
+                     Items="CreatorStatuses"
+                     Placeholder="Select..."
+                     TItem="BitDropdownItem<CreatorStatus?>"
+                     TValue="CreatorStatus ?"
+                     Value="SelectedCreatorStatus"
+                     ValueChanged="OnCreatorStatusChanged" />
     </div>
     <div class="search-filter-control-span-1">
-        <MudSelect T="string" Value="SelectedCreatorStatus" ValueChanged="OnCreatorStatusChanged" Label="Creator Status" Dense="true" Variant="Variant.Outlined" Margin="Margin.Dense" Adornment="@Adornment.Start" AdornmentIcon="@Icons.Material.Outlined.Search">
-            <MudSelectItem Value="@CreatorStatus.NotBlacklisted.ToString()">Not Blacklisted</MudSelectItem>
-            <MudSelectItem Value="@CreatorStatus.FavoriteExcludeBlacklist.ToString()">Favorite (Exclude Blacklisted)</MudSelectItem>
-            <MudSelectItem Value="@CreatorStatus.FavoriteIncludeBlacklist.ToString()">Favorite (Include Blacklisted)</MudSelectItem>
-            <MudSelectItem Value="@CreatorStatus.Blacklisted.ToString()">Blacklisted</MudSelectItem>
-            <MudSelectItem Value="@String.Empty">All</MudSelectItem>
-        </MudSelect>
+        <BitCheckbox Label="Show Only Favorite Works" Value="ShowOnlyFavoriteWorks" ValueChanged="OnShowOnlyFavoriteWorksChanged" />
+    </div>
+    <div class="search-filter-control-span-1"></div>
+    <!-- Row 4 -->
+    <div class="search-filter-control-span-2">
+        <BitDropdown Label="Creator Status 2"
+                     Items="CreatorStatuses"
+                     Placeholder="Select..."
+                     TItem="BitDropdownItem<CreatorStatus?>"
+                     TValue="CreatorStatus ?"
+                     Value="SelectedCreatorStatus"
+                     ValueChanged="OnCreatorStatusChanged" />
+    </div>
+    <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"></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="Supported Languages"
+                     MultiSelect
+                     Items="Languages"
+                     Placeholder="Select..."
+                     TItem="BitDropdownItem<Language>"
+                     TValue="Language"
+                     Values="SupportedLanguages"
+                     ValuesChanged="OnSupportedLanguagesChanged" />
+    </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>
 
@@ -58,13 +129,75 @@
 
 @code {
     public string? Keywords { get; set; }
-    public string? SelectedSaleStatus { get; set; } = string.Empty;
-    public string? SelectedCircleStatus { get; set; } = string.Empty;
-    public string? SelectedTagStatus { get; set; } = string.Empty;
-    public string? SelectedCreatorStatus { get; set; } = string.Empty;
+    public SaleStatus? SelectedSaleStatus { get; set; }
+    public CircleStatus? SelectedCircleStatus { get; set; }
+    public TagStatus? SelectedTagStatus { get; set; }
+    public CreatorStatus? SelectedCreatorStatus { 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 PageNumber { get; set; } = 1;
     public int PageSize { get; set; } = 100;
 
+    IEnumerable<Tuple<SaleStatus?, string>> SaleStatuses =
+    [
+        new(SaleStatus.Available, "Available"),
+        new(SaleStatus.Upcoming, "Upcoming"),
+        new(null, "All")
+    ];
+
+    List<BitDropdownItem<SaleStatus?>> BasicItems =
+    [
+        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 }
+    ];
+
     SearchResult<VoiceWorkSearchResult>? searchResults;
 
     protected override async Task OnInitializedAsync()
@@ -85,11 +218,16 @@
                 Criteria = new()
                 {
                     Keywords = Keywords,
-                    SaleStatus = string.IsNullOrWhiteSpace(SelectedSaleStatus) == false ? Enum.Parse<SaleStatus>(SelectedSaleStatus) : null,
-                    CircleStatus = string.IsNullOrWhiteSpace(SelectedCircleStatus) == false ? Enum.Parse<CircleStatus>(SelectedCircleStatus) : null,
-                    TagStatus = string.IsNullOrWhiteSpace(SelectedTagStatus) == false ? Enum.Parse<TagStatus>(SelectedTagStatus) : null,
-                    CreatorStatus = string.IsNullOrWhiteSpace(SelectedCreatorStatus) == false ? Enum.Parse<CreatorStatus>(SelectedCreatorStatus) : null,
-                    //SupportedLanguages = [Domain.Enums.Language.English]
+                    SaleStatus = SelectedSaleStatus,
+                    CircleStatus = SelectedCircleStatus,
+                    TagStatus = SelectedTagStatus,
+                    CreatorStatus = SelectedCreatorStatus,
+                    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
                 },
                 SortOptions =
                 [
@@ -111,30 +249,66 @@
         await UpdateDataAsync(true);
     }
 
-    public async Task OnSaleStatusChanged(string? saleStatus)
+    public async Task OnSaleStatusChanged(SaleStatus? saleStatus)
     {
         SelectedSaleStatus = saleStatus;
         await UpdateDataAsync(true);
     }
 
-    public async Task OnCircleStatusChanged(string? circleStatus)
+    public async Task OnCircleStatusChanged(CircleStatus? circleStatus)
     {
         SelectedCircleStatus = circleStatus;
         await UpdateDataAsync(true);
     }
 
-    public async Task OnTagStatusChanged(string? tagStatus)
+    public async Task OnTagStatusChanged(TagStatus? tagStatus)
     {
         SelectedTagStatus = tagStatus;
         await UpdateDataAsync(true);
     }
 
-    public async Task OnCreatorStatusChanged(string? creatorStatus)
+    public async Task OnCreatorStatusChanged(CreatorStatus? creatorStatus)
     {
         SelectedCreatorStatus = creatorStatus;
         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 OnPageNumberChanged(int newPageNumber)
     {
         PageNumber = newPageNumber;
@@ -149,9 +323,7 @@
 
     private VoiceWorkSortField GetSortField()
     {
-        SaleStatus? saleStatus = string.IsNullOrWhiteSpace(SelectedSaleStatus) == false ? Enum.Parse<SaleStatus>(SelectedSaleStatus) : null;
-
-        switch (saleStatus)
+        switch (SelectedSaleStatus)
         {
             case SaleStatus.Available:
                 return VoiceWorkSortField.ReleaseDate;