lanpartytools
/
LANCommander
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 17 Activity

Fix styling for Settings pages. Use loading indicator on users and avoid blocking UI thread while loading them

blazor
Pat Hartl 2023-03-03 17:34:27 -06:00
parent 830edf3e55
commit 7b6fd7cb0f
3 changed files with 71 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
LANCommander/Pages/Settings/General.razor
View File

@ -4,23 +4,24 @@
@inject SettingService SettingService @inject SettingService SettingService
@inject IMessageService MessageService @inject IMessageService MessageService
<Card Title="General"> <PageHeader Title="General" />
<Body>
<Text>IGDB Credentials</Text> <div style="padding: 0 24px;">
<Text>In order to use IGDB metadata, you need a Twitch developer account. <a href="https://api-docs.igdb.com/#account-creation" target="_blank">Click here</a> for more details.</Text> <Text>IGDB Credentials</Text>
<Form Model="Settings"> <Text>In order to use IGDB metadata, you need a Twitch developer account. <a href="https://api-docs.igdb.com/#account-creation" target="_blank">Click here</a> for more details.</Text>
<FormItem Label="Client ID"> <Form Model="Settings" Layout="@FormLayout.Vertical">
<Input @bind-Value="context.IGDBClientId" /> <FormItem Label="Client ID">
</FormItem> <Input @bind-Value="context.IGDBClientId" />
<FormItem Label="Client Secret"> </FormItem>
<InputPassword @bind-Value="context.IGDBClientSecret" /> <FormItem Label="Client Secret">
</FormItem> <InputPassword @bind-Value="context.IGDBClientSecret" />
<FormItem> </FormItem>
<Button OnClick="Save" Icon="@IconType.Fill.Save">Save</Button> <FormItem>
</FormItem> <Button OnClick="Save" Icon="@IconType.Fill.Save">Save</Button>
</Form> </FormItem>
</Body> </Form>
</Card> </div>
@code { @code {
private LANCommanderSettings Settings; private LANCommanderSettings Settings;

20
LANCommander/Pages/Settings/SettingsLayout.razor
View File

@ -1,15 +1,21 @@
@inherits LayoutComponentBase @inherits LayoutComponentBase
@layout MainLayout @layout MainLayout
<GridRow> <Layout Class="site-layout-background" Style="padding: 24px 0;">
<GridCol Span="6"> <Sider Class="site-layout-background" Width="200">
<Menu Mode=@MenuMode.Vertical> <Menu Mode=@MenuMode.Inline Style="height: 100%">
<MenuItem RouterLink="/Settings/General">General</MenuItem> <MenuItem RouterLink="/Settings/General">General</MenuItem>
<MenuItem RouterLink="/Settings/Users">Users</MenuItem> <MenuItem RouterLink="/Settings/Users">Users</MenuItem>
</Menu> </Menu>
</GridCol> </Sider>
<GridCol Span="18"> <Content>
@Body @Body
</GridCol> </Content>
</GridRow> </Layout>
<style>
.site-layout-background {
background: #fff;
}
</style>

70
LANCommander/Pages/Settings/Users.razor
View File

@ -5,41 +5,48 @@
@inject RoleManager<Role> RoleManager @inject RoleManager<Role> RoleManager
@inject IMessageService MessageService @inject IMessageService MessageService
<Card Title="Users"> <PageHeader Title="Users" />
<Body>
<Table TItem="UserViewModel" DataSource="@UserList"> <div style="padding: 0 24px;">
<PropertyColumn Property="u => u.UserName" /> <Table TItem="UserViewModel" DataSource="@UserList" Loading="@(Loading)">
<PropertyColumn Property="u => u.Roles"> <PropertyColumn Property="u => u.UserName" Title="Username" />
@String.Join(", ", context.Roles) <PropertyColumn Property="u => u.Roles">
</PropertyColumn> @String.Join(", ", context.Roles)
<PropertyColumn Property="u => u.SavesSize"> </PropertyColumn>
@ByteSizeLib.ByteSize.FromBytes(context.SavesSize) <PropertyColumn Property="u => u.SavesSize" Title="Saves">
</PropertyColumn> @ByteSizeLib.ByteSize.FromBytes(context.SavesSize)
<ActionColumn> </PropertyColumn>
<Space> <ActionColumn>
<SpaceItem> <Space Style="display: flex; justify-content: end">
@if (!context.Roles.Any(r => r == "Administrator")) <SpaceItem>
{ @if (!context.Roles.Any(r => r == "Administrator"))
<Button OnClick="() => PromoteUser(context)">Promote</Button> {
} <Button OnClick="() => PromoteUser(context)" Type="@ButtonType.Primary">Promote</Button>
else }
{ else
<Button OnClick="() => DemoteUser(context)">Demote</Button> {
} <Button OnClick="() => DemoteUser(context)" Danger>Demote</Button>
</SpaceItem> }
</Space> </SpaceItem>
</ActionColumn> </Space>
</Table> </ActionColumn>
</Body> </Table>
</Card> </div>
@code { @code {
private ICollection<UserViewModel> UserList { get; set; } ICollection<UserViewModel> UserList { get; set; }
private string Search { get; set; }
bool Loading = true;
protected override async Task OnInitializedAsync() protected override async Task OnInitializedAsync()
{ {
await RefreshUserList(); UserList = new List<UserViewModel>();
}
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
await RefreshUserList();
} }
private async Task RefreshUserList() private async Task RefreshUserList()
@ -63,6 +70,9 @@
SavesSize = saveSize SavesSize = saveSize
}); });
} }
Loading = false;
StateHasChanged();
} }
private async Task PromoteUser(UserViewModel user) private async Task PromoteUser(UserViewModel user)