Implemented roles and action timestamps. Added oermissions selector and interfaces

Moonlight.Frontend/UI/Admin/Components/PermissionSelector.razor

@@ -0,0 +1,85 @@
+@using Moonlight.Frontend.Interfaces
+@using Moonlight.Frontend.Models
+@using ShadcnBlazor.Extras.Common
+@using ShadcnBlazor.Accordions
+@using ShadcnBlazor.Checkboxes
+@using ShadcnBlazor.Labels
+
+@inject IEnumerable<IPermissionProvider> Providers
+
+<LazyLoader Load="LoadAsync">
+    <Accordion ClassName="flex w-full flex-col gap-2 overflow-y-auto max-h-80 scrollbar-thin"
+               Type="AccordionType.Multiple">
+        @foreach (var category in Categories)
+        {
+            <AccordionItem
+                ClassName="rounded-lg border bg-background px-4 last:border-b"
+                Value="@category.Name"
+                @key="category.Name">
+                <AccordionTrigger className="group hover:no-underline [&>svg]:hidden">
+                    <div class="flex w-full items-center gap-3">
+                        <div class="relative size-4 shrink-0">
+                            <DynamicComponent Type="category.Icon" Parameters="IconParameters"/>
+                        </div>
+                        <span class="flex-1 text-left">@category.Name</span>
+                    </div>
+                </AccordionTrigger>
+                <AccordionContent ClassName="ps-7">
+                    <div class="grid gap-3 grid-cols-2">
+                        @foreach (var permission in category.Permissions)
+                        {
+                            <div class="flex flex-row gap-x-2">
+                                @if (Permissions.Contains(permission.Identifier))
+                                {
+                                    <Checkbox ValueChanged="b => HandleToggle(permission.Identifier, b)"
+                                              DefaultValue="true"
+                                              id="@permission.Identifier"/>
+                                }
+                                else
+                                {
+                                    <Checkbox ValueChanged="b => HandleToggle(permission.Identifier, b)"
+                                              DefaultValue="false"
+                                              id="@permission.Identifier"/>
+                                }
+                                <Label for="@permission.Identifier">@permission.Name</Label>
+                            </div>
+                        }
+                    </div>
+                </AccordionContent>
+            </AccordionItem>
+        }
+    </Accordion>
+</LazyLoader>
+
+@code
+{
+    [Parameter] public List<string> Permissions { get; set; } = new();
+
+    private static readonly Dictionary<string, object> IconParameters = new()
+    {
+        ["ClassName"] = "absolute inset-0 size-4 text-muted-foreground"
+    };
+
+    private readonly List<PermissionCategory> Categories = new();
+
+    private async Task LoadAsync(LazyLoader _)
+    {
+        foreach (var provider in Providers)
+        {
+            Categories.AddRange(
+                await provider.GetPermissionsAsync()
+            );
+        }
+    }
+
+    private void HandleToggle(string permission, bool toggle)
+    {
+        if (toggle)
+        {
+            if (!Permissions.Contains(permission))
+                Permissions.Add(permission);
+        }
+        else
+            Permissions.Remove(permission);
+    }
+}

Moonlight.Frontend/UI/Admin/Modals/CreateRoleDialog.razor

@@ -0,0 +1,83 @@
+@using Moonlight.Frontend.UI.Admin.Components
+@using Moonlight.Shared.Http.Requests.Roles
+@using ShadcnBlazor.Buttons
+@using ShadcnBlazor.Dialogs
+@using ShadcnBlazor.Extras.Common
+@using ShadcnBlazor.Extras.FormHandlers
+@using ShadcnBlazor.Inputs
+@using ShadcnBlazor.Labels
+
+@inherits ShadcnBlazor.Extras.Dialogs.DialogBase
+
+<DialogHeader>
+    <DialogTitle>
+        Create new role
+    </DialogTitle>
+    <DialogDescription>
+        Create a new role by giving it a name, a description and the permissions it should grant to its members
+    </DialogDescription>
+</DialogHeader>
+
+<FormHandler @ref="FormHandler" Model="Request" OnValidSubmit="SubmitAsync">
+    <div class="flex flex-col gap-6">
+
+        <FormValidationSummary/>
+
+        <div class="grid gap-2">
+            <Label for="roleName">Name</Label>
+            <InputField
+                @bind-Value="Request.Name"
+                id="roleName"
+                placeholder="My fancy role"/>
+        </div>
+
+        <div class="grid gap-2">
+            <Label for="roleDescription">Description</Label>
+            <textarea
+                @bind="Request.Description"
+                id="roleDescription"
+                maxlength="100"
+                class="border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm"
+                placeholder="Describe what the role should be used for">
+                
+            </textarea>
+        </div>
+        
+        <div class="grid gap-2">
+            <Label>Permissions</Label>
+            <PermissionSelector Permissions="Permissions" />
+        </div>
+    </div>
+</FormHandler>
+
+<DialogFooter ClassName="justify-end gap-x-1">
+    <WButtom OnClick="_ => FormHandler.SubmitAsync()">Save changes</WButtom>
+</DialogFooter>
+
+@code
+{
+    [Parameter] public Func<CreateRoleRequest, Task> OnSubmit { get; set; }
+
+    private CreateRoleRequest Request;
+    private List<string> Permissions;
+    private FormHandler FormHandler;
+
+    protected override void OnInitialized()
+    {
+        Request = new()
+        {
+            Permissions = []
+        };
+        
+        Permissions = new();
+    }
+
+    private async Task SubmitAsync()
+    {
+        Request.Permissions = Permissions.ToArray();
+        
+        await OnSubmit.Invoke(Request);
+
+        await CloseAsync();
+    }
+}

Moonlight.Frontend/UI/Admin/Modals/UpdateRoleDialog.razor

@@ -0,0 +1,82 @@
+@using Moonlight.Frontend.Mappers
+@using Moonlight.Frontend.UI.Admin.Components
+@using Moonlight.Shared.Http.Requests.Roles
+@using Moonlight.Shared.Http.Responses.Admin
+@using ShadcnBlazor.Buttons
+@using ShadcnBlazor.Dialogs
+@using ShadcnBlazor.Extras.Common
+@using ShadcnBlazor.Extras.FormHandlers
+@using ShadcnBlazor.Inputs
+@using ShadcnBlazor.Labels
+
+@inherits ShadcnBlazor.Extras.Dialogs.DialogBase
+
+<DialogHeader>
+    <DialogTitle>
+        Update @Role.Name
+    </DialogTitle>
+    <DialogDescription>
+        Update name, description and the permissions the role should grant to its members
+    </DialogDescription>
+</DialogHeader>
+
+<FormHandler @ref="FormHandler" Model="Request" OnValidSubmit="SubmitAsync">
+    <div class="flex flex-col gap-6">
+
+        <FormValidationSummary/>
+
+        <div class="grid gap-2">
+            <Label for="roleName">Name</Label>
+            <InputField
+                @bind-Value="Request.Name"
+                id="roleName"
+                placeholder="My fancy role"/>
+        </div>
+
+        <div class="grid gap-2">
+            <Label for="roleDescription">Description</Label>
+            <textarea
+                @bind="Request.Description"
+                id="roleDescription"
+                maxlength="100"
+                class="border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm"
+                placeholder="Describe what the role should be used for">
+                
+            </textarea>
+        </div>
+        
+        <div class="grid gap-2">
+            <Label>Permissions</Label>
+            <PermissionSelector Permissions="Permissions" />
+        </div>
+    </div>
+</FormHandler>
+
+<DialogFooter ClassName="justify-end gap-x-1">
+    <WButtom OnClick="_ => FormHandler.SubmitAsync()">Save changes</WButtom>
+</DialogFooter>
+
+@code
+{
+    [Parameter] public Func<UpdateRoleRequest, Task> OnSubmit { get; set; }
+    [Parameter] public RoleResponse Role { get; set; }
+    
+    private UpdateRoleRequest Request;
+    private List<string> Permissions;
+    private FormHandler FormHandler;
+
+    protected override void OnInitialized()
+    {
+        Request = RoleMapper.MapToUpdate(Role);
+        Permissions = Role.Permissions.ToList();
+    }
+
+    private async Task SubmitAsync()
+    {
+        Request.Permissions = Permissions.ToArray();
+        
+        await OnSubmit.Invoke(Request);
+
+        await CloseAsync();
+    }
+}

Moonlight.Frontend/UI/Admin/Views/Sys/Index.razor

@@ -19,6 +19,10 @@
             <KeyIcon />
             API & API Keys
         </TabsTrigger>
+        <TabsTrigger Value="roles">
+            <UsersRoundIcon />
+            Roles
+        </TabsTrigger>
         <TabsTrigger Value="diagnose">
             <HeartPulseIcon />
             Diagnose
@@ -42,6 +46,9 @@
             </CardFooter>
         </Card>
     </TabsContent>
+    <TabsContent Value="roles">
+        <Roles />
+    </TabsContent>
     <TabsContent Value="diagnose">
         <Diagnose />
     </TabsContent>

Moonlight.Frontend/UI/Admin/Views/Sys/Roles.razor

@@ -0,0 +1,137 @@
+@using LucideBlazor
+@using Moonlight.Frontend.UI.Admin.Modals
+@using Moonlight.Shared.Http.Requests
+@using Moonlight.Shared.Http.Requests.Roles
+@using Moonlight.Shared.Http.Responses
+@using Moonlight.Shared.Http.Responses.Admin
+@using ShadcnBlazor.DataGrids
+@using ShadcnBlazor.Buttons
+@using ShadcnBlazor.Dropdowns
+@using ShadcnBlazor.Extras.AlertDialogs
+@using ShadcnBlazor.Extras.Dialogs
+@using ShadcnBlazor.Extras.Toasts
+@using ShadcnBlazor.Tabels
+
+@inject HttpClient HttpClient
+@inject DialogService DialogService
+@inject ToastService ToastService
+@inject AlertDialogService AlertDialogService
+
+<div class="flex flex-row justify-end mt-5">
+    <div class="flex flex-row gap-x-1.5">
+        <Button @onclick="CreateAsync">
+            <PlusIcon/>
+            Create
+        </Button>
+    </div>
+</div>
+
+<div class="mt-3">
+    <DataGrid @ref="Grid" TGridItem="RoleResponse" Loader="LoadAsync" PageSize="10" ClassName="bg-card">
+        <PropertyColumn Field="u => u.Id"/>
+        <PropertyColumn IsFilterable="true" Identifier="@nameof(RoleResponse.Name)" Field="r => r.Name"/>
+        <PropertyColumn Title="Description" Field="r => r.Description"/>
+        <PropertyColumn Title="Members" Field="r => r.MemberCount"/>
+        <TemplateColumn>
+            <CellTemplate>
+                <TableCell>
+                    <div class="flex flex-row items-center justify-end me-3">
+                        <DropdownMenu>
+                            <DropdownMenuTrigger>
+                                <Slot Context="dropdownSlot">
+                                    <Button Size="ButtonSize.IconSm" Variant="ButtonVariant.Ghost" @attributes="dropdownSlot">
+                                        <EllipsisIcon/>
+                                    </Button>
+                                </Slot>
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent SideOffset="2">
+                                <DropdownMenuItem OnClick="() => EditAsync(context)">
+                                    Edit
+                                    <DropdownMenuShortcut>
+                                        <PenIcon/>
+                                    </DropdownMenuShortcut>
+                                </DropdownMenuItem>
+                                <DropdownMenuItem OnClick="() => DeleteAsync(context)" Variant="DropdownMenuItemVariant.Destructive">
+                                    Delete
+                                    <DropdownMenuShortcut>
+                                        <TrashIcon/>
+                                    </DropdownMenuShortcut>
+                                </DropdownMenuItem>
+                            </DropdownMenuContent>
+                        </DropdownMenu>
+                    </div>
+                </TableCell>
+            </CellTemplate>
+        </TemplateColumn>
+    </DataGrid>
+</div>
+
+@code
+{
+    private DataGrid<RoleResponse> Grid;
+
+    private async Task<DataGridResponse<RoleResponse>> LoadAsync(DataGridRequest<RoleResponse> request)
+    {
+        var query = $"?startIndex={request.StartIndex}&length={request.Length}";
+        var filterOptions = request.Filters.Count > 0 ? new FilterOptions(request.Filters) : null;
+
+        var response = await HttpClient.GetFromJsonAsync<PagedData<RoleResponse>>(
+            $"api/admin/roles{query}&filterOptions={filterOptions}",
+            Constants.SerializerOptions
+        );
+
+        return new DataGridResponse<RoleResponse>(response!.Data, response.TotalLength);
+    }
+
+    private async Task CreateAsync()
+    {
+        await DialogService.LaunchAsync<CreateRoleDialog>(parameters =>
+        {
+            parameters[nameof(CreateRoleDialog.OnSubmit)] = async Task (CreateRoleRequest request) =>
+            {
+                await HttpClient.PostAsJsonAsync(
+                    "api/admin/roles",
+                    request,
+                    Constants.SerializerOptions
+                );
+                
+                await ToastService.SuccessAsync("Role creation", $"Role {request.Name} has been successfully created");
+                await Grid.RefreshAsync();
+            };
+        });
+    }
+
+    private async Task EditAsync(RoleResponse role)
+    {
+        await DialogService.LaunchAsync<UpdateRoleDialog>(parameters =>
+        {
+            parameters[nameof(UpdateRoleDialog.Role)] = role;
+            parameters[nameof(UpdateRoleDialog.OnSubmit)] = async Task (UpdateRoleRequest request) =>
+            {
+                await HttpClient.PatchAsJsonAsync(
+                    $"api/admin/roles/{role.Id}",
+                    request,
+                    Constants.SerializerOptions
+                );
+                
+                await ToastService.SuccessAsync("Role update", $"Role {request.Name} has been successfully updated");
+                await Grid.RefreshAsync();
+            };
+        });
+    }
+
+    private async Task DeleteAsync(RoleResponse role)
+    {
+        await AlertDialogService.ConfirmDangerAsync(
+            $"Deletion of role {role.Name}",
+            $"Do you really want to delete the role {role.Name} with {role.MemberCount} members? This action cannot be undone",
+            async () =>
+            {
+                await HttpClient.DeleteAsync($"api/admin/roles/{role.Id}");
+                await ToastService.SuccessAsync("User deletion", $"Successfully deleted role {role.Name}");
+
+                await Grid.RefreshAsync();
+            }
+        );
+    }
+}