1
0
mirror of synced 2024-12-18 09:25:56 +01:00
TaikoLocalServer/TaikoWebUI/Pages/Users.razor

78 lines
3.1 KiB
Plaintext

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