You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Server-Panel/Pages/UserListPanel.razor

95 lines
4.0 KiB

@page "/users"
@using AdminPanel.Models
@using System.ComponentModel.DataAnnotations
<PageTitle>User Panel</PageTitle>
<h1>User Panel</h1>
<div id="users-div">
<MudOverlay Visible="IsAddingUser" DarkBackground>
<MudForm id="add-account-form">
<MudTextField T="string"
Label="Name"
@bind-Value="FormAccountName"
Required
Validation="@(VerifyLength(6, 256))"/>
<MudTextField T="string"
Label="Email"
@bind-Value="FormAccountEmail"
Required
Validation="@(new EmailAddressAttribute() { ErrorMessage = "The email address is invalid" })"/>
<MudTextField T="string"
InputType="InputType.Password"
Label="Password"
@bind-Value="FormAccountPassword"
Validation="@(VerifyLength(6, 256))"
Required/>
<MudCheckBox T="bool" Label="Is Administrator" @bind-Value="FormAccountIsAdmin"/>
<MudButton Variant="Variant.Filled" Color="Color.Secondary" OnClick="@(() => IsAddingUser = false)">Cancel</MudButton>
<MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="ConfirmAddAccount">Add Account</MudButton>
</MudForm>
</MudOverlay>
<MudDataGrid
T="User"
@ref="Grid"
ServerData="LoadUsersFromServer"
MultiSelection="true"
ColumnResizeMode="ResizeMode.Column"
RowsPerPage="10"
ReadOnly="false"
EditMode="DataGridEditMode.Form"
@bind-SelectedItems="SelectedItems"
CommittedItemChanges="OnAccountUpdated">
<ToolBarContent>
<div style="display: flex; align-items: center">
<MudIconButton Icon="@Icons.Material.Filled.Add" OnClick="@(() => IsAddingUser = true)" Color="@Color.Success" Class="add-item-btn"/>
<MudText Align="Align.Center">Add Account</MudText>
</div>
<div style="display: flex; align-items: center">
<MudIconButton Icon="@Icons.Material.Filled.Remove" OnClick="RemoveSelection" Color="@Color.Error" Class="remove-item-btn"/>
<MudText Align="Align.Center">Remove Selection</MudText>
</div>
<MudSpacer/>
<MudText>Accounts</MudText>
<MudSpacer/>
<MudTextField
T="string"
@bind-Value="SearchString"
OnKeyDown="@ValidateSearch"
Placeholder="Search an email or a name"
AdornmentIcon="@Icons.Material.Filled.Search"
Immediate
IconSize="Size.Medium"/>
</ToolBarContent>
<Columns>
<SelectColumn T="User"/>
<PropertyColumn Property="x => x.Name" Required/>
<PropertyColumn Property="x => x.Email" Title="Email Address" Required/>
<TemplateColumn Title="Is Administrator">
<CellTemplate>
<MudCheckBox Value="@context.Item!.IsAdmin" ReadOnly/>
</CellTemplate>
<EditTemplate>
<MudText>Is Administrator :</MudText>
<MudCheckBox @bind-Value="context.Item.IsAdmin"/>
</EditTemplate>
</TemplateColumn>
<PropertyColumn Property="x => x.Id" IsEditable="false"/>
<TemplateColumn>
<CellTemplate>
<MudIconButton Size="Size.Small" Icon="@Icons.Material.Outlined.Edit" OnClick="@context.Actions.StartEditingItemAsync"/>
</CellTemplate>
</TemplateColumn>
</Columns>
<PagerContent>
<MudDataGridPager T="User" PageSizeOptions="new[] { 1, 2, 4, 10, 25, 50, 100 }"/>
</PagerContent>
</MudDataGrid>
</div>