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

8
JSMR.UI.Blazor/App.razor
View File

@@ -1,4 +1,8 @@
<Router AppAssembly="@typeof(App).Assembly">
<HeadContent>
<RadzenTheme Theme="material-dark" />
</HeadContent>
<Router AppAssembly="@typeof(App).Assembly">
<Found Context="routeData">
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
<FocusOnNavigate RouteData="@routeData" Selector="h1" />
@@ -9,4 +13,4 @@
<p role="alert">Sorry, there's nothing at this address.</p>
</LayoutView>
</NotFound>
</Router>
</Router>

2
JSMR.UI.Blazor/Components/JPagination.razor
View File

@@ -4,7 +4,7 @@
</div>
<MudPagination class="pager" ShowFirstButton="true" ShowLastButton="true" Count="@((int)Math.Ceiling((decimal)TotalItems / (decimal)PageSize))" Selected="@PageNumber" SelectedChanged="OnSelectedChanged" />
<div class="page-sizes">
<MudSelect T="int" Value="PageSize" ValueChanged="OnPageSizeChanged" Dense="true" Variant="Variant.Outlined" Margin="Margin.Dense">
<MudSelect T="int" Value="PageSize" ValueChanged="OnPageSizeChanged" Dense="true" Variant="MudBlazor.Variant.Outlined" Margin="Margin.Dense">
@foreach (int value in PageSizes)
{
<MudSelectItem Value="@value">@value</MudSelectItem>

49
JSMR.UI.Blazor/Components/JProduct.razor
View File

@@ -1,8 +1,9 @@
@using JSMR.Application.VoiceWorks.Queries.Search
@using JSMR.Domain.Enums
@using JSMR.UI.Blazor.Services
@using System.Globalization
<div class="j-card j-voice-work-card">
<div class=@GetCardClasses(Product)>
<div class="j-voice-work-image-container">
<JImage OverlayClass="j-voice-work-image-overlay" ImageClass="j-voice-work-image" Source="@ImageUrlProvider.GetImageUrl(Product, "main")"></JImage>
</div>
@@ -15,14 +16,14 @@
<MudChip T="string"
Href=@($"https://www.dlsite.com/maniax/circle/profile/=/maker_id/{Product.MakerId}.html")
Target="_blank"
Variant="Variant.Filled"
Variant="MudBlazor.Variant.Filled"
Icon="@Icons.Material.Outlined.Circle">@Product.Maker</MudChip>
@foreach (var creator in Product.Creators)
{
<MudChip T="string"
Href=@($"https://www.dlsite.com/maniax/fsr/=/keyword_creater/{creator.Name}")
Target="_blank"
Variant="Variant.Filled"
Variant="MudBlazor.Variant.Filled"
Icon="@Icons.Material.Filled.Person">@creator.Name</MudChip>
}
</span>
@@ -53,12 +54,26 @@
}
@* <div class="j-icon-2 j-icon-2-flag-@GetFlagClassSuffix(Product)"></div> *@
<div class="j-spacer"></div>
@if (Product.HasTrial || Product.HasChobit)
{
<div class="j-trial-container">
<div class="j-icon j-icon-headphones"></div>
</div>
}
<div class="j-product-indicators">
@if (Product.IsValid != true)
{
<div class="j-product-indicator j-product-indicator-invalid">
<div class="j-icon j-icon-warning-fill"></div>
</div>
}
@if (Product.Favorite)
{
<div class="j-product-indicator j-product-indicator-favorite">
<div class="j-icon j-icon-heart-fill"></div>
</div>
}
@if (Product.HasTrial || Product.HasChobit)
{
<div class="j-trial-container">
<div class="j-icon j-icon-headphones"></div>
</div>
}
</div>
</div>
</div>
@@ -66,6 +81,22 @@
[Parameter]
public required VoiceWorkSearchResult Product { get; set; }
private string GetCardClasses(VoiceWorkSearchResult voiceWork)
{
List<string> classNames = ["j-card", "j-voice-work-card"];
if (voiceWork.Status == (byte)VoiceWorkStatus.NewRelease)
{
classNames.Add("type-sale");
}
else if (voiceWork.Status == (byte)VoiceWorkStatus.NewAndUpcoming)
{
classNames.Add("type-new");
}
return string.Join(" ", classNames);
}
private string GetReleaseDateText(VoiceWorkSearchResult voiceWork)
{
if (voiceWork.SalesDate.HasValue)

75
JSMR.UI.Blazor/Components/JTextBox.razor Normal file
View File

@@ -0,0 +1,75 @@
<RadzenStack Orientation="Radzen.Orientation.Vertical" Gap=".5em">
@if (string.IsNullOrWhiteSpace(Label) == false)
{
<RadzenLabel @bind-Text=Label Component="DropDownTextValueProperties" />
}
<RadzenTextBox class="j-input j-textbox" Value="@currentValue" Immediate="@Immediate" ValueChanged="@OnInnerValueChanged" Change="@OnInnerChange" />
</RadzenStack>
@code {
[Parameter]
public required string Label { get; set; }
[Parameter]
public string? Value { get; set; }
[Parameter]
public EventCallback<string?> ValueChanged { get; set; }
[Parameter]
public bool Immediate { get; set; }
[Parameter]
public int DebounceInterval { get; set; } = 300;
/// <summary>If true, also emit immediately on blur/Enter (in addition to debounced typing).</summary>
[Parameter]
public bool EmitOnCommit { get; set; } = false;
private string? currentValue;
private CancellationTokenSource? cancellationTokenSource;
protected override void OnParametersSet()
{
currentValue = Value;
}
private void OnInnerValueChanged(string? newValue)
{
currentValue = newValue;
_ = DebounceEmitAsync();
//Task.Run(DebounceEmitAsync);
}
private async Task DebounceEmitAsync()
{
cancellationTokenSource?.Cancel();
cancellationTokenSource?.Dispose();
cancellationTokenSource = new();
try
{
await Task.Delay(DebounceInterval, cancellationTokenSource.Token);
await ValueChanged.InvokeAsync(currentValue);
}
catch (TaskCanceledException)
{
}
}
private async Task OnInnerChange(object? _)
{
if (EmitOnCommit)
{
cancellationTokenSource?.Cancel();
await ValueChanged.InvokeAsync(currentValue);
}
}
public void Dispose()
{
cancellationTokenSource?.Cancel();
cancellationTokenSource?.Dispose();
}
}

4
JSMR.UI.Blazor/JSMR.UI.Blazor.csproj
View File

@@ -1,4 +1,4 @@
<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
<PropertyGroup>
<TargetFramework>net9.0</TargetFramework>
@@ -9,10 +9,12 @@
</PropertyGroup>
<ItemGroup>
<PackageReference Include="Bit.BlazorUI" Version="10.1.0" />
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="9.0.10" />
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="9.0.10" PrivateAssets="all" />
<PackageReference Include="Microsoft.AspNetCore.Mvc.Core" Version="2.3.0" />
<PackageReference Include="MudBlazor" Version="8.14.0" />
<PackageReference Include="Radzen.Blazor" Version="8.3.2" />
</ItemGroup>
<ItemGroup>

1
JSMR.UI.Blazor/Layout/MainLayout.razor
View File

@@ -32,6 +32,7 @@
<MudSnackbarProvider />
</MudLayout>
<RadzenComponents @rendermode="RenderMode.InteractiveAuto" />
@code{
private bool _open = false;

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;

4
JSMR.UI.Blazor/Program.cs
View File

@@ -1,8 +1,10 @@
using Bit.BlazorUI;
using JSMR.UI.Blazor;
using JSMR.UI.Blazor.Services;
using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using MudBlazor.Services;
using Radzen;
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
@@ -14,6 +16,8 @@ Console.WriteLine(apiBase);
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(apiBase) });
builder.Services.AddMudServices();
builder.Services.AddRadzenComponents();
builder.Services.AddBitBlazorUIServices();
builder.Services.AddScoped<VoiceWorksClient>();

5
JSMR.UI.Blazor/_Imports.razor
View File

@@ -8,4 +8,7 @@
@using Microsoft.JSInterop
@using JSMR.UI.Blazor
@using JSMR.UI.Blazor.Layout
@using MudBlazor
@using MudBlazor
@using Radzen
@using Radzen.Blazor
@using Bit.BlazorUI

85
JSMR.UI.Blazor/wwwroot/css/app.css
View File

@@ -150,6 +150,11 @@ code {
grid-column: span 4;
}
.search-filter-control {
display: flex;
align-items: center;
}
.items-container {
display: grid;
grid-column-gap: 1.2em;
@@ -335,6 +340,16 @@ code {
background-image: var(--card-background-image);
}
/* Input */
.j-input {
background: rgb(0,20,34);
border: 1px solid #304562;
}
.j-textbox {
}
/* Image */
.j-image-container {
@@ -357,6 +372,7 @@ code {
}
.j-voice-work-card {
position: relative;
display: flex;
gap: 1rem;
background-image: linear-gradient(0deg, rgb(30, 53, 69), rgb(39, 59, 73));
@@ -367,6 +383,36 @@ code {
border-right-color: rgb(72, 88, 99);
}
.j-voice-work-card[class*="type-sale"]::before {
background-image: url(../images/web/common/icon_sale_status_01.png);
width: 72px;
height: 72px;
position: absolute;
display: block;
top: 0;
left: 0;
z-index: 2;
content: "";
background-position: 0 -432px;
background-size: cover;
pointer-events: none;
}
.j-voice-work-card[class*="type-new"]::before {
background-image: url(../images/web/common/icon_sale_status_01.png);
width: 72px;
height: 72px;
position: absolute;
display: block;
top: 0;
left: 0;
z-index: 2;
content: "";
background-position: 0 -504px;
background-size: cover;
pointer-events: none;
}
.j-voice-work-image-container {
width: 240px;
width: 300px;
@@ -482,6 +528,29 @@ code {
height: 16px;
}
.j-product-indicators {
display: flex;
gap: .5rem;
}
.j-product-indicator {
border-width: 1px;
border-style: solid;
border-image: none;
padding: 0.5rem;
border-radius: 100%;
border-color: var(--product-title-text-color);
}
.j-product-indicator-favorite {
border-color: #f04885;
background: #f048852b;
}
.j-product-indicator-favorite > .j-icon {
background-color: #f04885;
}
/* Tags */
.j-tags {
display: flex;
@@ -542,6 +611,22 @@ code {
mask-image: url("../svg/headphones.svg");
}
.j-icon-heart {
mask-image: url("../svg/heart.svg");
}
.j-icon-heart-fill {
mask-image: url("../svg/heart-fill.svg");
}
.j-icon-warning {
mask-image: url("../svg/warning.svg");
}
.j-icon-warning-fill {
mask-image: url("../svg/warning-fill.svg");
}
.j-icon-2 {
background-repeat: no-repeat;
background-position: center;

41
JSMR.UI.Blazor/wwwroot/css/bit-blazor.css Normal file
View File

@@ -0,0 +1,41 @@
.bit-tfl-inp,
.bit-drp-wrp,
.bit-dtp-wrp {
border: 1px solid var(--input-border-color);
background-color: var(--input-background-color);
transition: background-color .2s,color .2s,border-color .2s,box-shadow .2s;
padding: .25rem .5rem;
}
.bit-tfl-fgp {
border: 1px solid var(--input-border-color);
}
.bit-tfl-inp:hover,
.bit-drp-wrp:hover {
border: 1px solid var(--input-hover-border-color);
background-color: var(--input-background-color);
}
.bit-tfl-inp:focus,
.bit-drp-wrp:focus {
background-color: var(--input-background-color);
border: 1px solid var(--input-focus-border-color);
box-shadow: var(--input-focus-box-shadow);
}
/* DropDownList */
.bit-drp-cal {
background-color: var(--input-background-color);
}
.bit-drp-itm:hover {
color: #ffffffde;
background: rgba(255,255,255,.03);
}
.bit-drp-sel,
.bit-drp-sel:hover {
color: #ffffffde;
background: rgba(100,181,246,.16);
}

0
JSMR.UI.Blazor/wwwroot/css/jsmr-mud-blazor.css → JSMR.UI.Blazor/wwwroot/css/mud-blazor.css
View File

48
JSMR.UI.Blazor/wwwroot/css/radzen.css Normal file
View File

@@ -0,0 +1,48 @@
.rz-timespanpicker > .rz-inputtext.j-input,
.rz-colorpicker.j-input,
.rz-lookup-search input.j-input,
.rz-numeric.j-input,
.rz-datepicker > .rz-inputtext.j-input,
.rz-multiselect, .rz-dropdown.j-input,
.mask.j-input,
.rz-textarea.j-input,
.rz-textbox.j-input {
border: 1px solid var(--input-border-color);
background-color: var(--input-background-color);
transition: background-color .2s,color .2s,border-color .2s,box-shadow .2s;
padding: .25rem .5rem;
}
.j-input.rz-form-field:hover .rz-form-field-content,
.j-input.rz-autocomplete:hover:not(.rz-state-disabled),
.j-input.rz-timespanpicker > .rz-inputtext:not(:disabled):not(.rz-state-disabled):hover,
.j-input.rz-colorpicker:not(:disabled):not(.rz-state-disabled):hover,
.j-input.rz-lookup-search input:not(:disabled):not(.rz-state-disabled):hover,
.j-input.rz-numeric:not(:disabled):not(.rz-state-disabled):hover,
.j-input.rz-datepicker > .rz-inputtext:not(:disabled):not(.rz-state-disabled):hover,
.j-input.rz-multiselect:not(:disabled):not(.rz-state-disabled):hover,
.j-input.rz-dropdown:not(:disabled):not(.rz-state-disabled):hover,
.j-input.mask:not(:disabled):not(.rz-state-disabled):hover,
.j-input.rz-textarea:not(:disabled):not(.rz-state-disabled):hover,
.j-input.rz-textbox:not(:disabled):not(.rz-state-disabled):hover {
border: 1px solid var(--input-hover-border-color);
background-color: var(--input-background-color);
}
.j-input.rz-form-field.rz-state-focused .rz-form-field-content,
.j-input.rz-numeric:focus-within:not(.rz-state-disabled),
.j-input.rz-autocomplete:focus-within:not(.rz-state-disabled),
.j-input.rz-timespanpicker > .rz-inputtext:not(:disabled):not(.rz-state-disabled):focus,
.j-input.rz-colorpicker:not(:disabled):not(.rz-state-disabled):focus,
.j-input.rz-lookup-search input:not(:disabled):not(.rz-state-disabled):focus,
.j-input.rz-numeric:not(:disabled):not(.rz-state-disabled):focus,
.j-input.rz-datepicker > .rz-inputtext:not(:disabled):not(.rz-state-disabled):focus,
.j-input.rz-multiselect:not(:disabled):not(.rz-state-disabled):focus,
.j-input.rz-dropdown:not(:disabled):not(.rz-state-disabled):focus,
.j-input.mask:not(:disabled):not(.rz-state-disabled):focus,
.j-input.rz-textarea:not(:disabled):not(.rz-state-disabled):focus,
.j-input.rz-textbox:not(:disabled):not(.rz-state-disabled):focus {
background-color: var(--input-background-color);
border: 1px solid var(--input-focus-border-color);
box-shadow: var(--input-focus-box-shadow);
}

2
JSMR.UI.Blazor/wwwroot/css/theme-base.css
View File

@@ -5,5 +5,5 @@ body {
}
label {
font-weight: 600;
font-weight: 500;
}

5
JSMR.UI.Blazor/wwwroot/css/theme-frozen.css
View File

@@ -34,6 +34,11 @@
--card-border-left-color: #212630;
--card-border-right-color: #212531;
--card-border-bottom-color: #212530;
--input-border-color: #304562;
--input-hover-border-color: #64b5f6;
--input-background-color: rgb(0,20,34);
--input-focus-border-color: #64b5f6;
--input-focus-box-shadow: 0 0 0 1px #93cbf9;
}
/*

10
JSMR.UI.Blazor/wwwroot/index.html
View File

@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<html lang="en" bit-theme-system>
<head>
<meta charset="utf-8" />
@@ -16,9 +16,14 @@
<!-- Important: Increment the version parameter whenever you update MudBlazor to prevent caching issues -->
<script src="_content/MudBlazor/MudBlazor.min.js?v=1"></script>
<script src="_content/Bit.BlazorUI/scripts/bit.blazorui.js"></script>
<script src="js/site.js"></script>
<link rel="stylesheet" href="css/jsmr-mud-blazor.css" />
<link rel="stylesheet" href="css/mud-blazor.css" />
<link rel="stylesheet" href="css/radzen.css" />
<link href="_content/Bit.BlazorUI/styles/bit.blazorui.css" rel="stylesheet" />
<link rel="stylesheet" href="css/bit-blazor.css" />
<link rel="stylesheet" href="css/app.css" />
<link rel="stylesheet" href="css/theme-base.css" />
<link rel="stylesheet" href="css/theme-frozen.css" />
@@ -46,6 +51,7 @@
</div>
<script src="_framework/blazor.webassembly.js"></script>
<script>navigator.serviceWorker.register('service-worker.js');</script>
<script src="_content/Radzen.Blazor/Radzen.Blazor.min.js"></script>
</body>
</html>

3
JSMR.UI.Blazor/wwwroot/svg/warning-fill.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-exclamation-triangle-fill" viewBox="0 0 16 16">
<path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5m.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 396 B

4
JSMR.UI.Blazor/wwwroot/svg/warning.svg Normal file
View File

@@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-exclamation-triangle" viewBox="0 0 16 16">
<path d="M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .063.016.15.15 0 0 1 .054.057l6.857 11.667c.036.06.035.124.002.183a.2.2 0 0 1-.054.06.1.1 0 0 1-.066.017H1.146a.1.1 0 0 1-.066-.017.2.2 0 0 1-.054-.06.18.18 0 0 1 .002-.183L7.884 2.073a.15.15 0 0 1 .054-.057m1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767z"/>
<path d="M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 636 B

2
JSMR.sln
View File

@@ -1,7 +1,7 @@

Microsoft Visual Studio Solution File, Format Version 12.00
# Visual Studio Version 18
VisualStudioVersion = 18.0.11205.157 d18.0
VisualStudioVersion = 18.0.11205.157
MinimumVisualStudioVersion = 10.0.40219.1
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "JSMR.Domain", "JSMR.Domain\JSMR.Domain.csproj", "{BC16F228-63B0-4EE6-9B96-19A38A31C125}"
EndProject