TaikoLocalServer/TaikoWebUI/Pages/Songs.razor

@inject IGameDataService GameDataService
@inject HttpClient Client
@inject LoginService LoginService
@inject IJSRuntime JSRuntime
@inject NavigationManager NavigationManager
@using TaikoWebUI.Utilities;
@using TaikoWebUI.Shared.Models;
@using SharedProject.Enums;

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

<MudBreadcrumbs Items="breadcrumbs" Class="p-0 mb-2"></MudBreadcrumbs>
<MudText Typo="Typo.h4">@Localizer["Key_01"]</MudText>

<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 (LoginService.LoginRequired && (!LoginService.IsLoggedIn || (LoginService.GetLoggedInUser().Baid != Baid && !LoginService.IsAdmin)))
        {
            if (!LoginService.IsLoggedIn)
            {
                NavigationManager.NavigateTo("/Login");
            }
            else
            {
                NavigationManager.NavigateTo("/");
            }
        }
        else
        {
            <MudItem xs="12">
                <MudTable Items="musicMap" Elevation="0" Outlined="true" Filter="@FilterSongs" Striped="true">
                    <ToolBarContent>
                        <MudGrid Spacing="2">
                            <MudItem xs="12" md="8">
                                <MudTextField @bind-Value="Search"
                                              Placeholder="@Localizer["Search by Title or Artist"]"
                                              Variant="Variant.Outlined"
                                              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>
                            <MudTableSortLabel T="MusicDetail" SortBy="context => GameDataService.GetMusicNameBySongId(context.SongId, CurrentLanguage)">
                                Song Title / Artist
                            </MudTableSortLabel>
                        </MudTh>
                    </HeaderContent>
                    <RowTemplate>
                        <MudTd>
                            <a href="@($"/Users/{Baid}/Songs/{context.SongId}")">
                                <MudText Typo="Typo.body2">
                                    @GameDataService.GetMusicNameBySongId(context.SongId, CurrentLanguage)
                                </MudText>
                                <MudText Typo="Typo.caption">
                                    @GameDataService.GetMusicArtistBySongId(context.SongId, CurrentLanguage)
                                </MudText>
							</a>
                        </MudTd>
                    </RowTemplate>
                    <PagerContent>
                        <MudTablePager />
                    </PagerContent>
                </MudTable>
            </MudItem>
        }
    }
</MudGrid>