Added quickgrid to Users page

FritzAndFriends · Jul 2, 2024 · 0b1b595 · 0b1b595
1 parent 234eafb
commit 0b1b595
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 33 deletions.
diff --git a/src/TagzApp.Blazor/Components/Admin/Pages/Users.razor b/src/TagzApp.Blazor/Components/Admin/Pages/Users.razor
@@ -1,5 +1,6 @@
 @page "/admin/users"
 @using Gravatar
+@using Microsoft.AspNetCore.Components.QuickGrid
 @using Microsoft.AspNetCore.Identity
 @using Microsoft.EntityFrameworkCore
 @attribute [Authorize(Roles = RolesAndPolicies.Role.Admin)]
@@ -14,45 +15,64 @@
 
 <h3>User Roles Management</h3>
 
-@if (AppConfig.SingleUserMode) {
- <div>You're in Single User Mode
+@if (AppConfig.SingleUserMode)
+{
+	<div>
+		You're in Single User Mode
 
-    <p class="alert alert-primary" role="alert">Converting to Multi-User Mode is a one-way operation that cannot be reversed.  You will need to register as a new user and login with that user immediately to be granted Admin access.  After that, you can add more users with various roles.
-   </p>
+		<p class="alert alert-primary" role="alert">
+			Converting to Multi-User Mode is a one-way operation that cannot be reversed.  You will need to register as a new user and login with that user immediately to be granted Admin access.  After that, you can add more users with various roles.
+		</p>
 
-	<button type="button" class="btn btn-danger" @onclick="ConvertUserMode">Change to Multi-User Mode</button>
+		<button type="button" class="btn btn-danger" @onclick="ConvertUserMode">Change to Multi-User Mode</button>
 
- </div>
-} else {
-<table>
-	<tr>
-		@*<th>User ID</th>*@
-		<th style="width:20em; padding-left: 85px;">Name</th>
-		<th>User Email</th>
-		<th>Action</th>
-	</tr>
-	@foreach (var user in UserList.OrderBy(u => u.DisplayName))
-	{
+	</div>
+}
+else
+{
+	<QuickGrid Items="UserList" TGridItem="TagzAppUser" >
+		<TemplateColumn Title="Name" Class="UserGridNameColumn" Align="Align.Left">
+			<ItemTemplate>
+				<img class="gravatar" title="Gravatar" src="@context.Email.ToGravatar()" />
+				@context.DisplayName
+			</ItemTemplate>
+		</TemplateColumn>
+		<PropertyColumn Title="User Email" Property="u => u.Email"></PropertyColumn>
+		<TemplateColumn Title="Action">
+			<ItemTemplate>
+				<span style="cursor: pointer" class="link-primary nav-link" @onclick="@(() => AssignRoles(context))">Assign Roles</span>
+			</ItemTemplate>
+		</TemplateColumn>
+	</QuickGrid>
+
+@* 	<table>
 		<tr>
-			<td>
-				<img class="gravatar" title="Gravatar" src="@user.Email.ToGravatar()" />
-				@user.DisplayName
-			</td>
-			<td>@user.Email</td>
-			<td><span style="cursor: pointer" class="link-primary nav-link" @onclick="@(() => AssignRoles(user))">Assign Roles</span></td>
+			<th style="width:20em; padding-left: 85px;">Name</th>
+			<th>User Email</th>
+			<th>Action</th>
 		</tr>
-	}
-</table>
-
-<ManageRoles @ref="ManageRolesDialog" CurrentUser="SelectedUser" OnComplete="CloseManageRoles" />
+		@foreach (var user in UserList.OrderBy(u => u.DisplayName))
+		{
+			<tr>
+				<td>
+					<img class="gravatar" title="Gravatar" src="@user.Email.ToGravatar()" />
+					@user.DisplayName
+				</td>
+				<td>@user.Email</td>
+				<td><span style="cursor: pointer" class="link-primary nav-link" @onclick="@(() => AssignRoles(user))">Assign Roles</span></td>
+			</tr>
+		}
+	</table>
+ *@
+	<ManageRoles @ref="ManageRolesDialog" CurrentUser="SelectedUser" OnComplete="CloseManageRoles" />
 }
 
 @code {
 
 	[CascadingParameter]
 	private HttpContext HttpContext { get; set; } = default!;
 
-	private List<TagzAppUser> UserList { get; set; } = [];
+	private IQueryable<TagzAppUser> UserList { get; set; }
 
 	private TagzAppUser SelectedUser { get; set; } = new();
 
@@ -63,7 +83,7 @@
 
 		if (AppConfig.SingleUserMode) return;
 
-		UserList = await UserManager.Users.ToListAsync();
+		UserList = UserManager.Users;
 	}
 
 	private async Task AssignRoles(TagzAppUser user)
@@ -77,15 +97,16 @@
 		SelectedUser = null;
 	}
 
-  private async Task ConvertUserMode()
-  {
+	private async Task ConvertUserMode()
+	{
 		var accepted = await Js.InvokeAsync<bool>("confirm", "Are you sure you would like to convert to multi-user mode?  This is a one-way operation and cannot be reversed");
-		if (accepted) {
+		if (accepted)
+		{
 			AppConfig.SingleUserMode = false;
-   		await AppConfig.SaveConfiguration(ConfigureTagzAppFactory.Current);
+			await AppConfig.SaveConfiguration(ConfigureTagzAppFactory.Current);
 			Program.Restart();
 			NavigationManager.NavigateTo("/");
 		}
-  }
+	}
 
 }
diff --git a/src/TagzApp.Blazor/Program.cs b/src/TagzApp.Blazor/Program.cs
@@ -73,6 +73,7 @@ private static async Task StartWebsite(string[] args)
 				.AddInteractiveWebAssemblyComponents();
 
 		await builder.AddTagzAppSecurity(configure, builder.Configuration);
+		builder.Services.AddQuickGridEntityFrameworkAdapter();
 
 		//		await Console.Out.WriteLineAsync($">> TagzApp configured: {ConfigureTagzAppFactory.IsConfigured}");
 

diff --git a/src/TagzApp.Blazor/TagzApp.Blazor.csproj b/src/TagzApp.Blazor/TagzApp.Blazor.csproj
@@ -56,6 +56,8 @@
 		<PackageReference Include="Microsoft.AspNetCore.Authentication.Google" Version="8.0.6" />
 		<PackageReference Include="Microsoft.AspNetCore.Authentication.MicrosoftAccount" Version="8.0.6" />
 		<PackageReference Include="Markdig" Version="0.37.0" />
+		<PackageReference Include="Microsoft.AspNetCore.Components.QuickGrid" Version="8.0.6" />
+		<PackageReference Include="Microsoft.AspNetCore.Components.QuickGrid.EntityFrameworkAdapter" Version="8.0.6" />
 		<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Server" Version="8.0.6" />
 		<PackageReference Include="Microsoft.AspNetCore.Diagnostics.EntityFrameworkCore" Version="8.0.6" />
 		<PackageReference Include="Microsoft.AspNetCore.Identity.EntityFrameworkCore" Version="8.0.6" />

diff --git a/src/TagzApp.Blazor/wwwroot/css/site.css b/src/TagzApp.Blazor/wwwroot/css/site.css
@@ -669,3 +669,9 @@ a {
 	background-size: contain;
 	filter: brightness(0) invert(1);
 }
+
+/* User grid */
+.UserGridNameColumn {
+	width: 20em;
+	padding-left: 85px;
+}