TaikoLocalServer/TaikoWebUI/Pages/Users.razor

@inject HttpClient Client
@inject AuthService AuthService
@inject NavigationManager NavigationManager
@inject BreadcrumbsStateContainer BreadcrumbsStateContainer

@using TaikoWebUI.Components;

@page "/Users"

<MudGrid Class="my-8">
    @if (!AuthService.LoginRequired || (AuthService.LoginRequired && AuthService.IsAdmin)) {
        <MudItem xs="12">
            <div class="d-flex justify-content-end gap-2">
                <MudInput 
                    @bind-Value="searchTerm" 
                    TextChanged="(async term => { isLoading = true; await OnSearch(term); })"
                    Immediate="true" 
                    FullWidth="true"
                    Clearable="true" 
                    Margin="Margin.Dense" 
                    Label="@Localizer["Search"]" 
                    Placeholder="@Localizer["Search by Name, ID, or Access Code"]" 
                    Variant="Variant.Outlined" 
                    Adornment="Adornment.Start" 
                    AdornmentIcon="@Icons.Material.Filled.Search"
                    Style="width: 100%" />
            </div>
        </MudItem>
        @if (isLoading || response == null)
        {
            // Loading...
            for (uint i = 0; i < pageSize; i++) {
                <MudItem xs="12" md="6" lg="4" xl="3">
                    <MudCard Outlined="true">
                        <MudCardContent>
                            <MudSkeleton Width="30%" Height="42px;" Class="mb-5" />
                            <MudSkeleton Width="80%" />
                            <MudSkeleton Width="100%" />
                        </MudCardContent>
                        <MudCardActions>
                            <MudStack Row="true" Style="width:100%" Spacing="4" Justify="Justify.FlexEnd">
                                <MudSkeleton Width="64px" Height="40px" />
                                <MudSkeleton Width="64px" Height="40px" />
                            </MudStack>
                        </MudCardActions>
                    </MudCard>
                </MudItem>
            }
        } else if (response.Users.Count > 0) {
            foreach (var user in response.Users)
            {
                <MudItem xs="12" md="6" lg="4" xl="3">
                    <UserCard User="user" UserSetting="user.UserSetting" />
                </MudItem>
            }
        } else { // No users in the database
            <MudItem xs="12">
                <MudText Align="Align.Center" Class="my-8">
                    @Localizer["No Data"]
                </MudText>
            </MudItem>
        }
    } else if (AuthService.LoginRequired && !AuthService.IsLoggedIn) {
        // Not logged in, redirect
        NavigationManager.NavigateTo("/Login");
    } else {
        NavigationManager.NavigateTo("/");
    }

    @if (response != null && TotalPages > 1)
    {
        <MudItem xs="12">
            <div class="d-flex flex-column align-center">
                <MudPagination Class="pa-4" Rectangular="true" DisableElevation="true" Count="@TotalPages" Selected="currentPage" SelectedChanged="(page) => OnPageChange(page)" BoundaryCount="1" MiddleCount="3" />
            </div>
        </MudItem>
    }
</MudGrid>