TaikoLocalServer/TaikoWebUI/Pages/SongList.razor

@using Blazored.LocalStorage
@using TaikoWebUI.Utilities;

@inject IGameDataService GameDataService
@inject HttpClient Client
@inject AuthService AuthService
@inject ILocalStorageService LocalStorage
@inject NavigationManager NavigationManager
@inject BreadcrumbsStateContainer BreadcrumbsStateContainer

@page "/Users/{baid:int}/Songs"

<MudGrid Class="my-8">
    @if (response is null)
    {
        <MudContainer Style="display:flex;margin:50px 0;align-items:center;justify-content:center;">
            <MudProgressCircular Indeterminate="true" Size="Size.Large" Color="Color.Primary" />
        </MudContainer>
    }
    else
    {
        @if (AuthService.LoginRequired && (!AuthService.IsLoggedIn || (AuthService.GetLoggedInBaid() != Baid && !AuthService.IsAdmin)))
        {
            NavigationManager.NavigateTo(AuthService.IsLoggedIn ? "/" : "/Login");
        }
        else
        {
            <MudItem xs="12">
                <MudTable Items="musicDetailDictionary.Values" Elevation="0" RowsPerPage="25" Outlined="true" Filter="@FilterSongs" Breakpoint=Breakpoint.None>
                    <ToolBarContent>
                        <MudGrid Spacing="2">
                            <MudItem xs="12" md="8">
                                <MudTextField @bind-Value="Search"
                                              Placeholder="@Localizer["Search by Title or Artist"]"
                                              Variant="Variant.Outlined"
                                              Clearable="true"
                                              Immediate="true"
                                              Margin="Margin.Dense"
                                              Adornment="Adornment.Start"
                                              AdornmentIcon="@Icons.Material.Filled.Search"
                                              IconSize="Size.Medium" />
                            </MudItem>
                            <MudItem xs="12" md="4">
                                <MudSelect @bind-Value="GenreFilter" T="string" Label="@Localizer["Filter by Genre"]" Variant="Variant.Outlined" Margin="Margin.Dense" Clearable="true">
                                    @foreach (var genre in Enum.GetValues(typeof(SongGenre)))
                                    {
                                        var genreValue = (SongGenre)genre;
                                        <MudSelectItem Value="@genreValue.ToString()" Label="@Localizer[$"Key_{genreValue}"]">
                                            @ScoreUtils.GetGenreTitle(genreValue)
                                        </MudSelectItem>
                                    }
                                </MudSelect>
                            </MudItem>
                        </MudGrid>
                    </ToolBarContent>
                    <HeaderContent>
                        <MudTh Style="width: 400px">
                            <MudTableSortLabel T="MusicDetail" SortBy="context => GameDataService.GetMusicNameBySongId(musicDetailDictionary, context.SongId, SongNameLanguage)">
                                @Localizer["Song Title / Artist"]
                            </MudTableSortLabel>
                        </MudTh>
                        <MudTh Style="width: 150px;">
                            <MudTableSortLabel T="MusicDetail" SortBy="context => context.Genre">
                                @Localizer["Genre"]
                            </MudTableSortLabel>
                        </MudTh>
                        @foreach (var difficulty in Enum.GetValues<Difficulty>())
                        {
                            @if (difficulty is not Difficulty.None)
                            {
                                <MudTh>
                                    <MudTableSortLabel T="MusicDetail" SortBy="context => GameDataService.GetMusicStarLevel(musicDetailDictionary, context.SongId, difficulty)">
                                        <img src="@ScoreUtils.GetDifficultyIcon(difficulty)" alt="@ScoreUtils.GetDifficultyTitle(difficulty)" style="@Constants.ICON_STYLE" />
                                    </MudTableSortLabel>
                                </MudTh>
                            }
                        }
                    </HeaderContent>
                    <RowTemplate>
                        <MudTd Style="text-align: initial !important;">
                            <MudStack Row="true" Justify="Justify.SpaceBetween" AlignItems="AlignItems.Center">
                                <div style="margin: 4px;">
                                    <MudToggleIconButton Toggled="@context.IsFavorite"
                                                         ToggledChanged="@(async () => await OnFavoriteToggled(context))"
                                                         Icon="@Icons.Material.Filled.FavoriteBorder" Color="@Color.Secondary"
                                                         ToggledIcon="@Icons.Material.Filled.Favorite" ToggledColor="@Color.Secondary"
                                                         Size="Size.Small"
                                                         ToggledSize="Size.Small"
                                                         Title="Add to favorites" ToggledTitle="Remove from favorites" />
                                </div>
                                <div style="width:400px">
                                    <a href="@($"/Users/{Baid}/Songs/{context.SongId}")">
                                        <MudText Typo="Typo.body2" Style="font-weight:bold">@GameDataService.GetMusicNameBySongId(musicDetailDictionary, context.SongId, SongNameLanguage)</MudText>
                                        <MudText Typo="Typo.caption">@GameDataService.GetMusicArtistBySongId(musicDetailDictionary, context.SongId, SongNameLanguage)</MudText>
                                    </a>
                                </div>
                            </MudStack>
                        </MudTd>
                        <MudTd>
                            <MudChip Style="@ScoreUtils.GetGenreStyle(context.Genre)" Size="Size.Small">
                                @ScoreUtils.GetGenreTitle(context.Genre)
                            </MudChip>
                        </MudTd>
                        @foreach (var difficulty in Enum.GetValues<Difficulty>())
                        {
                            @if (difficulty is not Difficulty.None)
                            {
                                var starLevel = GameDataService.GetMusicStarLevel(musicDetailDictionary, context.SongId, difficulty);
                                <MudTd>
                                    @if (starLevel > 0)
                                    {
                                        <MudStack Style="display: inline-flex !important;" Row="true" Spacing="1" AlignItems="AlignItems.Center">
                                            <MudIcon Icon="@Icons.Material.Filled.Star" Size="Size.Small" />
                                            <MudText Typo="Typo.caption" Style="line-height:1;margin-top:2px;margin-right:2px;">@starLevel</MudText>
                                        </MudStack>
                                    }
                                    else
                                    {
                                        <MudText Typo="Typo.body2" Style="font-weight:bold">
                                            -
                                        </MudText>
                                    }
                                </MudTd>
                            }
                        }
                    </RowTemplate>
                    <PagerContent>
                        <MudTablePager RowsPerPageString=@Localizer["Rows Per Page"] />
                    </PagerContent>
                </MudTable>
            </MudItem>
        }
    }
</MudGrid>