From fd6f66684cf58ae279610eb60fb34404bba0a4b4 Mon Sep 17 00:00:00 2001
From: Jon Welfringer <7365166+W6HBR@users.noreply.github.com>
Date: Thu, 19 Dec 2024 12:53:40 -0800
Subject: [PATCH] [Enh] Update PermissionGrid.razor to be visually consistent
 with other edit screens

- Adds role description column to display to be more informational.
- Moves checkbox controls to the left side and role name/descriptions to the right.
- The movement of the checkbox controls is more consistent with the layout of controls on the Page, User, Profile and Role Management pages (e.g. action controls on left, description to the right).
- This also makes it easier to visually align the controls with the name/description on full screen monitors.
---
 .../Modules/Controls/PermissionGrid.razor     | 20 +++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/Oqtane.Client/Modules/Controls/PermissionGrid.razor b/Oqtane.Client/Modules/Controls/PermissionGrid.razor
index 6bd700bd..42272a02 100644
--- a/Oqtane.Client/Modules/Controls/PermissionGrid.razor
+++ b/Oqtane.Client/Modules/Controls/PermissionGrid.razor
@@ -15,22 +15,24 @@
             <table class="table table-borderless">
                 <tbody>
                     <tr>
-                        <th scope="col">@Localizer["Role"]</th>
                         @foreach (var permissionname in _permissionnames)
                         {
 							<th style="text-align: center; width: 1px;">@((MarkupString)DisplayPermissionName(permissionname).Replace(" ", "<br />"))</th>
 						}
+                        <th scope="col">@Localizer["Role"]</th>
+                        <th scope="col">@Localizer["Description"]</th>
                     </tr>
                     @foreach (Role role in _roles)
                     {
                         <tr>
-                            <td>@role.Name</td>
                             @foreach (var permissionname in _permissionnames)
                             {
                                 <td style="text-align: center;">
 									<TriStateCheckBox Value=@GetPermissionValue(permissionname, role.Name, -1) Disabled="@GetPermissionDisabled(permissionname, role.Name)" OnChange="@(e => PermissionChanged(e, permissionname, role.Name, -1))" />
                                 </td>
                             }
+                            <td>@role.Name</td>
+                            <td>@role.Description</td>
                         </tr>
                     }
                 </tbody>
@@ -49,24 +51,26 @@
                 <table class="table table-borderless">
                     <thead>
                         <tr>
+                            @foreach (var permissionname in _permissionnames)
+                            {
+                                <th style="text-align: center; width: 1px;">@((MarkupString)DisplayPermissionName(permissionname).Replace(" ", "<br />"))</th>
+                            }
                             <th scope="col">@Localizer["User"]</th>
-								@foreach (var permissionname in _permissionnames)
-								{
-									<th style="text-align: center; width: 1px;">@((MarkupString)DisplayPermissionName(permissionname).Replace(" ", "<br />"))</th>
-								}
-							</tr>
+                            <th scope="col">@Localizer["Display Name"]</th>
+                        </tr>
                     </thead>
                     <tbody>
                         @foreach (User user in _users)
                         {
                             <tr>
-                                <td>@user.DisplayName</td>
                                 @foreach (var permissionname in _permissionnames)
                                 {
                                     <td style="text-align: center; width: 1px;">
 										<TriStateCheckBox Value=@GetPermissionValue(permissionname, "", user.UserId) Disabled="@GetPermissionDisabled(permissionname, "")" OnChange="@(e => PermissionChanged(e, permissionname, "", user.UserId))" />
                                     </td>
                                 }
+                                <td>@user.Username</td>
+                                <td>@user.DisplayName</td>
                             </tr>
                         }
                     </tbody>