brister/jsmr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Updated UI with BitBlazor components.

Browse Source
This commit is contained in:
Brian Bicknell
2025-11-22 14:42:29 -05:00
parent 2418bd0a8f
commit 8490b49354
22 changed files with 552 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
JSMR.UI.Blazor/Pages/Circles.razor
View File

@@ -13,10 +13,10 @@
<div class="search-filter-control-container">
<div class="search-filter-control-span-3">
<MudTextField @bind-Value="Keywords" Placeholder="Circle Name or Maker Id" Immediate="true" DebounceInterval="500" Variant="Variant.Outlined" Margin="Margin.Dense" Adornment="@Adornment.End" AdornmentIcon="@Icons.Material.Outlined.Search" />
<MudTextField @bind-Value="Keywords" Placeholder="Circle Name or Maker Id" Immediate="true" DebounceInterval="500" Variant="MudBlazor.Variant.Outlined" Margin="Margin.Dense" Adornment="@Adornment.End" AdornmentIcon="@Icons.Material.Outlined.Search" />
</div>
<div class="search-filter-control-span-1">
<MudSelect @bind-Value="SelectedCircleStatus" Placeholder="Circle Status" Dense="true" Variant="Variant.Outlined" Margin="Margin.Dense">
<MudSelect @bind-Value="SelectedCircleStatus" Placeholder="Circle Status" Dense="true" Variant="MudBlazor.Variant.Outlined" Margin="Margin.Dense">
<MudSelectItem Value="@CircleStatus.NotBlacklisted.ToString()">Not Blacklisted</MudSelectItem>
<MudSelectItem Value="@CircleStatus.Favorited.ToString()">Favorite</MudSelectItem>
<MudSelectItem Value="@CircleStatus.Blacklisted.ToString()">Blacklisted</MudSelectItem>
@@ -49,19 +49,19 @@ else
@if (item.Favorite)
{
<MudChip T="string" Label="true" Color="Color.Info" Style="width: 100%" Variant="Variant.Outlined">Favorite</MudChip>
<MudChip T="string" Label="true" Color="Color.Info" Style="width: 100%" Variant="MudBlazor.Variant.Outlined">Favorite</MudChip>
}
else if (item.Blacklisted)
{
<MudChip T="string" Label="true" Color="Color.Warning" Style="width: 100%" Variant="Variant.Outlined">Blacklisted</MudChip>
<MudChip T="string" Label="true" Color="Color.Warning" Style="width: 100%" Variant="MudBlazor.Variant.Outlined">Blacklisted</MudChip>
}
else if (item.Spam)
{
<MudChip T="string" Label="true" Color="Color.Error" Style="width: 100%" Variant="Variant.Outlined">Spam</MudChip>
<MudChip T="string" Label="true" Color="Color.Error" Style="width: 100%" Variant="MudBlazor.Variant.Outlined">Spam</MudChip>
}
else
{
<MudChip T="string" Label="true" Style="width: 100%" Variant="Variant.Outlined">Normal</MudChip>
<MudChip T="string" Label="true" Style="width: 100%" Variant="MudBlazor.Variant.Outlined">Normal</MudChip>
}
<div class="circle-star-container">

2
JSMR.UI.Blazor/Pages/Creators.razor
View File

@@ -11,7 +11,7 @@
<h1>Creators</h1>
<MudTextField T="string" Value="Keywords" ValueChanged="OnKeywordsChanged" 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="MudBlazor.Variant.Text" Adornment="@Adornment.Start" AdornmentIcon="@Icons.Material.Outlined.Search" />
@if (searchResults is null)
{

2
JSMR.UI.Blazor/Pages/Tags.razor
View File

@@ -11,7 +11,7 @@
<h1>Tags</h1>
<MudTextField @bind-Value="Keywords" Immediate="true" DebounceInterval="500" Label="Filter" Variant="Variant.Text" Adornment="@Adornment.Start" AdornmentIcon="@Icons.Material.Outlined.Search" />
<MudTextField @bind-Value="Keywords" Immediate="true" DebounceInterval="500" Label="Filter" Variant="MudBlazor.Variant.Text" Adornment="@Adornment.Start" AdornmentIcon="@Icons.Material.Outlined.Search" />
@if (searchResults is null)
{

256
JSMR.UI.Blazor/Pages/VoiceWorks.razor
View File

@@ -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;