Improved ManageUsers Page layout

Wave/Components/Pages/ManageUsers.razor

@@ -2,6 +2,7 @@
 @using Microsoft.AspNetCore.Authorization
 @using Microsoft.AspNetCore.Identity
 @using Wave.Data
+@using Humanizer
 
 @rendermode InteractiveServer
 @attribute [Authorize(Policy = "RoleAssignPermissions")]
@@ -11,31 +12,33 @@
 
 <PageTitle>@(TitlePrefix + Localizer["Title"])</PageTitle>
 
-<h1 class="text-3xl lg:text-5xl font-light mb-6">@Localizer["Title"]</h1>
+<h1 class="text-3xl lg:text-5xl font-light mb-6">@Localizer["Title"]</h1> 
 
 <section class="mb-3 overflow-x-auto">
-	<h3 class="text-xl lg:text-3xl mb-2">
+    <h3 class="text-xl lg:text-3xl mb-2">
-		@Localizer["Authors"]
+        @Localizer[CurrentRole.ToString().Pluralize()]
-		<!-- TODO:: implement -->
+    </h3>
-		<button class="btn btn-sm btn-square btn-ghost text-success">
+    <div class="flex gap-2">
-			<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+        <InputSelect class="select select-bordered select-sm w-full max-w-xs" Value="CurrentRole"
-				<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v6m3-3H9m12 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+                     ValueExpression="() => CurrentRole"
-			</svg>
+                     TValue="Role" ValueChanged="async c => await LoadAsync(c)">
-		</button>
+            @foreach (var role in Enum.GetValues<Role>()) {
-	</h3>
+                <option value="@role">@Localizer[role.ToString()]</option>
-	<UserTable Users="Authors" RemoveCallback="@(async u => await Remove(u, "Author"))" />
+            }
-</section>
+        </InputSelect>
-<section class="mb-3 overflow-x-auto">
+        <button class="btn btn-sm btn-square btn-ghost text-success">
-	<h3 class="text-xl lg:text-3xl mb-2">@Localizer["Reviewers"]</h3>
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
-	<UserTable Users="Reviewers" RemoveCallback="@(async u => await Remove(u, "Reviewer"))" />
+                <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v6m3-3H9m12 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
-</section>
+            </svg>
-<section class="mb-3 overflow-x-auto">
+        </button>
-	<h3 class="text-xl lg:text-3xl mb-2">@Localizer["Moderators"]</h3>
+    </div>
-	<UserTable Users="Moderators" RemoveCallback="@(async u => await Remove(u, "Moderator"))" />
+    @if (Busy) {
-</section>
+        <div class="flex place-content-center">
-<section class="mb-3 overflow-x-auto">
+            <span class="loading loading-spinner loading-lg"></span>
-	<h3 class="text-xl lg:text-3xl mb-2">@Localizer["Administrators"]</h3>
+        </div>
-	<UserTable Users="Admins" RemoveCallback="@(async u => await Remove(u, "Admin"))" />
+    } else {
+        <UserTable Users="Users" RemoveCallback="@(async u => await RemoveAsync(u, CurrentRole))"/>
+    }
 </section>
 
 <ToastComponent @ref="Toast" />
@@ -43,35 +46,45 @@
 @code {
 	[CascadingParameter(Name = "TitlePrefix")]
 	private string TitlePrefix { get; set; } = default!;
-
 	public ToastComponent Toast { get; set; } = null!;
 
-	private IList<ApplicationUser> Authors { get; set; } = new List<ApplicationUser>();
-	private IList<ApplicationUser> Reviewers { get; set; } = new List<ApplicationUser>();
-	private IList<ApplicationUser> Moderators { get; set; } = new List<ApplicationUser>();
-	private IList<ApplicationUser> Admins { get; set; } = new List<ApplicationUser>();
-	
 	[CascadingParameter]
 	private Task<AuthenticationState> AuthenticationState { get; set; } = default!;
 	private ApplicationUser? User { get; set; }
+    private Role CurrentRole { get; set; } = Role.Admin;
+    private List<ApplicationUser> Users { get; } = [];
+	private bool Busy { get; set; }
 
 	protected override async Task OnAfterRenderAsync(bool firstRender) {
 		if (!firstRender) return;
 		var state = await AuthenticationState;
 		User = await UserManager.GetUserAsync(state.User);
+        await LoadAsync(CurrentRole);
+    }
 
-		Authors = await UserManager.GetUsersInRoleAsync("Author");
+    private async Task LoadAsync(Role role) {
-		Reviewers = await UserManager.GetUsersInRoleAsync("Reviewer");
+        try {
-		Moderators = await UserManager.GetUsersInRoleAsync("Moderator");
+            Busy = true;
-		Admins = await UserManager.GetUsersInRoleAsync("Admin");
+            var users = await UserManager.GetUsersInRoleAsync(role.ToString());
-	}
+            Users.Clear();
+            CurrentRole = role;
+            Users.AddRange(users);
+        } finally {
+            Busy = false;
+        }
+        await InvokeAsync(StateHasChanged);
+    }
 
-	private async Task Remove(ApplicationUser user, string role) {
+	private async Task RemoveAsync(ApplicationUser user, Role role) {
 		if (User is null) return;
 		if (user.Id == User.Id) {
 			Toast.ShowError(Localizer["Error_EditSelf"]);
 			return;
 		}
-		await UserManager.RemoveFromRoleAsync(user, role);
+		await UserManager.RemoveFromRoleAsync(user, role.ToString());
 	}
+
+    private enum Role {
+        Author, Reviewer, Moderator, Admin
+    }
 }

Wave/Resources/Components/Pages/ManageUsers.de-DE.resx

@@ -110,7 +110,7 @@
     <data name="Moderators" xml:space="preserve">
         <value>Moderator*innen</value>
     </data>
-    <data name="Administrators" xml:space="preserve">
+    <data name="Admins" xml:space="preserve">
         <value>Administrator*innen</value>
     </data>
     <data name="Error_EditSelf" xml:space="preserve">

Wave/Resources/Components/Pages/ManageUsers.resx

@@ -110,7 +110,7 @@
     <data name="Moderators" xml:space="preserve">
         <value>Moderators</value>
     </data>
-    <data name="Administrators" xml:space="preserve">
+    <data name="Admins" xml:space="preserve">
         <value>Administrators</value>
     </data>
     <data name="Error_EditSelf" xml:space="preserve">