Updated to latest mooncore version. Cleaned up some crud controllers and replaced DataTable with the new DataGrid component

Moonlight.Client/UI/Views/Admin/Api/Index.razor

@@ -3,7 +3,9 @@
 @using MoonCore.Helpers
 @using MoonCore.Models
 @using Moonlight.Shared.Http.Responses.Admin.ApiKeys
-@using MoonCore.Blazor.FlyonUi.DataTables
+@using MoonCore.Blazor.FlyonUi.Grid
+@using MoonCore.Blazor.FlyonUi.Grid.Columns
+@using MoonCore.Blazor.FlyonUi.Grid.ToolbarItems
 
 @inject HttpApiClient ApiClient
 @inject AlertService AlertService
@@ -47,48 +49,72 @@
     </div>
 </div>
 
-<div class="mb-5 flex justify-end">
-    <a href="/admin/api/create" class="btn btn-primary">
-        Create
-    </a>
-</div>
+<DataGrid @ref="Grid"
+          TGridItem="ApiKeyResponse"
+          ItemsProvider="ItemsProvider"
+          EnableFiltering="true"
+          EnablePagination="true">
+    <PropertyColumn Field="x => x.Id" Sortable="true" />
+    <PropertyColumn Field="x => x.Description" />
+    <TemplateColumn Sortable="true" Title="Expires At">
+        <td>
+            @Formatter.FormatDate(context.ExpiresAt.UtcDateTime)
+        </td>
+    </TemplateColumn>
+    <TemplateColumn Sortable="true" Title="Created At">
+        <td>
+            @Formatter.FormatDate(context.CreatedAt.UtcDateTime)
+        </td>
+    </TemplateColumn>
+    <TemplateColumn>
+        <td>
+            <div class="flex justify-end">
+                <a href="/admin/api/@(context.Id)" class="text-primary mr-2 sm:mr-3">
+                    <i class="icon-pencil text-base"></i>
+                </a>
 
-<DataTable @ref="Table" TItem="ApiKeyResponse">
-    <Configuration>
-        <Pagination TItem="ApiKeyResponse" ItemSource="LoadData" />
-        
-        <DataTableColumn TItem="ApiKeyResponse" Field="@(x => x.Id)" Name="Id"/>
-        <DataTableColumn TItem="ApiKeyResponse" Field="@(x => x.Description)" Name="Description"/>
-        <DataTableColumn TItem="ApiKeyResponse" Field="@(x => x.ExpiresAt)" Name="Expires at">
-            <ColumnTemplate>
-                @(Formatter.FormatDate(context.ExpiresAt.UtcDateTime))
-            </ColumnTemplate>
-        </DataTableColumn>
-        <DataTableColumn TItem="ApiKeyResponse">
-            <ColumnTemplate>
-                <div class="flex justify-end">
-                    <a href="/admin/api/@(context.Id)" class="text-primary mr-2 sm:mr-3">
-                        <i class="icon-pencil text-base"></i>
-                    </a>
-
-                    <a href="#" @onclick="() => Delete(context)" @onclick:preventDefault
-                       class="text-error">
-                        <i class="icon-trash text-base"></i>
-                    </a>
-                </div>
-            </ColumnTemplate>
-        </DataTableColumn>
-    </Configuration>
-</DataTable>
+                <a href="#" @onclick="() => DeleteAsync(context)" @onclick:preventDefault
+                   class="text-error">
+                    <i class="icon-trash text-base"></i>
+                </a>
+            </div>
+        </td>
+    </TemplateColumn>
+    
+    <TemplateToolbarItem>
+        <a href="/admin/api/create" class="btn btn-primary ms-1.5">
+            Create
+        </a>
+    </TemplateToolbarItem>
+</DataGrid>
 
 @code
 {
-    private DataTable<ApiKeyResponse> Table;
+    private DataGrid<ApiKeyResponse> Grid;
     
-    private async Task<IPagedData<ApiKeyResponse>> LoadData(PaginationOptions options)
-     => await ApiClient.GetJson<PagedData<ApiKeyResponse>>($"api/admin/apikeys?page={options.Page}&pageSize={options.PerPage}");
+    private async Task<DataGridItemResult<ApiKeyResponse>> ItemsProvider(DataGridItemRequest request)
+    {
+        var query = $"?startIndex={request.StartIndex}&count={request.Count}";
 
-    private async Task Delete(ApiKeyResponse apiKeyResponse)
+        if (!string.IsNullOrEmpty(request.SortColumn))
+        {
+            var dir = request.SortDirection == SortState.Descending ? "desc" : "asc";
+            query += $"&orderBy={request.SortColumn}&orderByDir={dir}";
+        }
+
+        if (!string.IsNullOrEmpty(request.Filter))
+            query += $"&filter={request.Filter}";
+        
+        var data = await ApiClient.GetJson<CountedData<ApiKeyResponse>>($"api/admin/apikeys{query}");
+
+        return new()
+        {
+            Items = data.Items,
+            TotalCount = data.TotalCount
+        };
+    }
+
+    private async Task DeleteAsync(ApiKeyResponse apiKeyResponse)
     {
         await AlertService.ConfirmDanger(
             "API Key deletion",
@@ -98,7 +124,7 @@
                 await ApiClient.Delete($"api/admin/apikeys/{apiKeyResponse.Id}");
                 await ToastService.Success("Successfully deleted api key");
 
-                await Table.Refresh();
+                await Grid.RefreshAsync();
             }
         );
     }

Moonlight.Client/UI/Views/Admin/Sys/Customisation/Index.razor

@@ -2,7 +2,9 @@
 
 @using System.Text.Json
 @using Microsoft.AspNetCore.Authorization
-@using MoonCore.Blazor.FlyonUi.DataTables
+@using MoonCore.Blazor.FlyonUi.Grid
+@using MoonCore.Blazor.FlyonUi.Grid.Columns
+@using MoonCore.Blazor.FlyonUi.Grid.ToolbarItems
 @using MoonCore.Blazor.FlyonUi.Helpers
 @using MoonCore.Helpers
 @using MoonCore.Models
@@ -16,6 +18,7 @@
 @inject ThemeService ThemeService
 @inject AlertService AlertService
 @inject ToastService ToastService
+@inject HttpApiClient ApiClient
 @inject DownloadService DownloadService
 @inject ILogger<Index> Logger
 
@@ -25,72 +28,72 @@
     Themes
 </PageSeparator>
 
-<div class="mt-5 flex justify-end">
-    <div>
-        <label for="import-theme" class="btn btn-info me-1">
-            <i class="icon-file-up"></i>
-            Import
-        </label>
-        <InputFile OnChange="Import" id="import-theme" class="hidden" multiple />
-        <a href="/admin/system/customisation/themes/create" class="btn btn-primary">Create</a>
-    </div>
-</div>
+<div class="my-8">
+    <DataGrid TGridItem="ThemeResponse"
+              ItemsProvider="ItemsProvider"
+              EnableFiltering="true"
+              EnablePagination="true">
+        
+        <PropertyColumn Field="x => x.Id" Sortable="true" />
+        <TemplateColumn Title="Name" Sortable="true">
+            <td>
+                <div class="flex items-center">
+                    @context.Name
 
-<div class="my-2.5">
-    <DataTable @ref="Table" TItem="ThemeResponse">
-        <Configuration>
-            <DataTableColumn TItem="ThemeResponse" Field="@(x => x.Id)" Name="Id"/>
-            <DataTableColumn TItem="ThemeResponse" Field="@(x => x.Name)" Name="Name">
-                <ColumnTemplate>
-                    <div class="flex items-center">
-                        @context.Name
-                        
-                        @if (context.IsEnabled)
-                        {
-                            <i class="icon-check text-success ms-2"></i>
-                        }
-                    </div>
-                </ColumnTemplate>
-            </DataTableColumn>
-            <DataTableColumn TItem="ThemeResponse" Field="@(x => x.Author)" Name="Author"/>
-            <DataTableColumn TItem="ThemeResponse" Field="@(x => x.Version)" Name="Version"/>
-            <DataTableColumn TItem="ThemeResponse">
-                <ColumnTemplate>
-                    <div class="flex justify-end">
-                        @if (!string.IsNullOrEmpty(context.DonateUrl))
-                        {
-                            <a href="@context.DonateUrl" target="_blank" class="flex items-center mr-2 sm:mr-3">
-                                <i class="text-accent icon-heart me-1"></i>
-                                <span class="text-accent">Donate</span>
-                            </a>
-                        }
-                        
-                        @if (!string.IsNullOrEmpty(context.UpdateUrl))
-                        {
-                            <a href="#" class="flex items-center mr-2 sm:mr-3">
-                                <i class="text-info icon-refresh-cw me-1"></i>
-                                <span class="text-info">Update</span>
-                            </a>
-                        }
-                        
-                        <a @onclick="() => Export(context)" @onclick:preventDefault href="#" class="flex items-center mr-2 sm:mr-3">
-                            <i class="text-success icon-download me-1"></i>
-                            <span class="text-success">Export</span>
-                        </a>
-                        
-                        <a href="/admin/system/customisation/themes/@(context.Id)" class="mr-2 sm:mr-3">
-                            <i class="icon-pencil text-primary"></i>
+                    @if (context.IsEnabled)
+                    {
+                        <i class="icon-check text-success ms-2"></i>
+                    }
+                </div>
+            </td>
+        </TemplateColumn>
+        <PropertyColumn Field="x => x.Version" Sortable="true" />
+        <PropertyColumn Field="x => x.Author" />
+        
+        <TemplateColumn>
+            <td>
+                <div class="flex justify-end">
+                    @if (!string.IsNullOrEmpty(context.DonateUrl))
+                    {
+                        <a href="@context.DonateUrl" target="_blank" class="flex items-center mr-2 sm:mr-3">
+                            <i class="text-accent icon-heart me-1"></i>
+                            <span class="text-accent">Donate</span>
                         </a>
+                    }
 
-                        <a href="#" @onclick="() => Delete(context)" @onclick:preventDefault>
-                            <i class="icon-trash text-error"></i>
+                    @if (!string.IsNullOrEmpty(context.UpdateUrl))
+                    {
+                        <a href="#" class="flex items-center mr-2 sm:mr-3">
+                            <i class="text-info icon-refresh-cw me-1"></i>
+                            <span class="text-info">Update</span>
                         </a>
-                    </div>
-                </ColumnTemplate>
-            </DataTableColumn>
-            <Pagination TItem="ThemeResponse" PageSize="10" ItemSource="LoadItems"/>
-        </Configuration>
-    </DataTable>
+                    }
+
+                    <a @onclick="() => ExportAsync(context)" @onclick:preventDefault href="#" class="flex items-center mr-2 sm:mr-3">
+                        <i class="text-success icon-download me-1"></i>
+                        <span class="text-success">Export</span>
+                    </a>
+
+                    <a href="/admin/system/customisation/themes/@(context.Id)" class="mr-2 sm:mr-3">
+                        <i class="icon-pencil text-primary"></i>
+                    </a>
+
+                    <a href="#" @onclick="() => DeleteAsync(context)" @onclick:preventDefault>
+                        <i class="icon-trash text-error"></i>
+                    </a>
+                </div>
+            </td>
+        </TemplateColumn>
+
+        <TemplateToolbarItem>
+            <label for="import-theme" class="btn btn-info me-1 ms-1.5">
+                <i class="icon-file-up"></i>
+                Import
+            </label>
+            <InputFile OnChange="ImportAsync" id="import-theme" class="hidden" multiple />
+            <a href="/admin/system/customisation/themes/create" class="btn btn-primary">Create</a>
+        </TemplateToolbarItem>
+    </DataGrid>
 </div>
 
 <PageSeparator Icon="icon-images">
@@ -100,12 +103,31 @@
 
 @code
 {
-    private DataTable<ThemeResponse> Table;
+    private DataGrid<ThemeResponse> Grid;
     
-    private async Task<IPagedData<ThemeResponse>> LoadItems(PaginationOptions options)
-        => await ThemeService.Get(options.Page, options.PerPage);
+    private async Task<DataGridItemResult<ThemeResponse>> ItemsProvider(DataGridItemRequest request)
+    {
+        var query = $"?startIndex={request.StartIndex}&count={request.Count}";
+
+        if (!string.IsNullOrEmpty(request.SortColumn))
+        {
+            var dir = request.SortDirection == SortState.Descending ? "desc" : "asc";
+            query += $"&orderBy={request.SortColumn}&orderByDir={dir}";
+        }
+
+        if (!string.IsNullOrEmpty(request.Filter))
+            query += $"&filter={request.Filter}";
+        
+        var data = await ApiClient.GetJson<CountedData<ThemeResponse>>($"api/admin/system/customisation/themes{query}");
+
+        return new()
+        {
+            Items = data.Items,
+            TotalCount = data.TotalCount
+        };
+    }
     
-    private async Task Import(InputFileChangeEventArgs eventArgs)
+    private async Task ImportAsync(InputFileChangeEventArgs eventArgs)
     {
         if(eventArgs.FileCount < 1)
             return;
@@ -141,7 +163,7 @@
                     continue;
                 }
 
-                var theme = await ThemeService.Create(new CreateThemeRequest()
+                var theme = await ThemeService.CreateAsync(new CreateThemeRequest()
                 {
                     Name = themeTransfer.Name,
                     Author = themeTransfer.Author,
@@ -153,7 +175,7 @@
 
                 await ToastService.Success("Successfully imported theme", theme.Name);
                 
-                await Table.Refresh();
+                await Grid.RefreshAsync();
             }
             catch (Exception e)
             {
@@ -162,7 +184,7 @@
         }
     }
 
-    private async Task Export(ThemeResponse theme)
+    private async Task ExportAsync(ThemeResponse theme)
     {
         var transfer = new ThemeTransferModel()
         {
@@ -184,17 +206,17 @@
         await DownloadService.Download(fileName, json);
     }
 
-    private async Task Delete(ThemeResponse response)
+    private async Task DeleteAsync(ThemeResponse response)
     {
         await AlertService.ConfirmDanger(
             "Theme deletion",
             $"Do you really want to delete the theme: {response.Name}",
             async () =>
             {
-                await ThemeService.Delete(response.Id);
+                await ThemeService.DeleteAsync(response.Id);
 
                 await ToastService.Success("Successfully deleted theme");
-                await Table.Refresh();
+                await Grid.RefreshAsync();
             }
         );
     }

Moonlight.Client/UI/Views/Admin/Sys/Customisation/Themes/Create.razor

@@ -58,7 +58,7 @@
     
     private async Task OnValidSubmit()
     {
-        await ThemeService.Create(Request);
+        await ThemeService.CreateAsync(Request);
         await ToastService.Success("Successfully created theme");
         
         NavigationManager.NavigateTo("/admin/system/customisation");

Moonlight.Client/UI/Views/Admin/Sys/Customisation/Themes/Update.razor

@@ -82,7 +82,7 @@
     
     private async Task Load(LazyLoader _)
     {
-        Response = await ThemeService.Get(Id);
+        Response = await ThemeService.GetAsync(Id);
 
         Request = new()
         {
@@ -98,7 +98,7 @@
     
     private async Task OnValidSubmit()
     {
-        await ThemeService.Update(Id, Request);
+        await ThemeService.UpdateAsync(Id, Request);
         
         await ToastService.Success("Successfully updated theme");
         Navigation.NavigateTo("/admin/system/customisation");

Moonlight.Client/UI/Views/Admin/Sys/Diagnose.razor

@@ -96,7 +96,7 @@
             .ToDictionary(x => x, _ => true);
     }
 
-    private async Task GenerateDiagnose(WButton _)
+    private async Task GenerateDiagnose(WButton button)
     {
         var request = new GenerateDiagnoseRequest();
 

Moonlight.Client/UI/Views/Admin/Users/Index.razor

@@ -3,13 +3,14 @@
 @using MoonCore.Helpers
 @using MoonCore.Models
 @using Moonlight.Shared.Http.Responses.Admin.Users
-@using MoonCore.Blazor.FlyonUi.DataTables
+@using MoonCore.Blazor.FlyonUi.Grid
+@using MoonCore.Blazor.FlyonUi.Grid.Columns
 
 @inject HttpApiClient ApiClient
 @inject AlertService AlertService
 @inject ToastService ToastService
 
-<div class="mb-5">
+<div class="mb-8">
     <PageHeader Title="Users">
         <a href="/admin/users/create" class="btn btn-primary">
             Create
@@ -17,37 +18,57 @@
     </PageHeader>
 </div>
 
-<DataTable @ref="Table" TItem="UserResponse">
-    <Configuration>
-        <Pagination TItem="UserResponse" ItemSource="LoadData" />
-        
-        <DataTableColumn TItem="UserResponse" Field="@(x => x.Id)" Name="Id"/>
-        <DataTableColumn TItem="UserResponse" Field="@(x => x.Username)" Name="Username"/>
-        <DataTableColumn TItem="UserResponse" Field="@(x => x.Email)" Name="Email"/>
-        <DataTableColumn TItem="UserResponse">
-            <ColumnTemplate>
-                <div class="flex justify-end">
-                    <a href="/admin/users/@(context.Id)" class="mr-2 sm:mr-3">
-                        <i class="icon-pencil text-primary"></i>
-                    </a>
+<DataGrid @ref="Grid"
+          TGridItem="UserResponse"
+          ItemsProvider="ItemsProvider"
+          EnableFiltering="true"
+          EnablePagination="true">
+    <PropertyColumn Field="x => x.Id" Sortable="true" />
+    <PropertyColumn Field="x => x.Username" Sortable="true" />
+    <PropertyColumn Field="x => x.Email" Sortable="true" />
+    
+    <TemplateColumn>
+        <td>
+            <div class="flex justify-end">
+                <a href="/admin/users/@(context.Id)" class="mr-2 sm:mr-3">
+                    <i class="icon-pencil text-primary"></i>
+                </a>
 
-                    <a href="#" @onclick="() => Delete(context)" @onclick:preventDefault>
-                        <i class="icon-trash text-error"></i>
-                    </a>
-                </div>
-            </ColumnTemplate>
-        </DataTableColumn>
-    </Configuration>
-</DataTable>
+                <a href="#" @onclick="() => DeleteAsync(context)" @onclick:preventDefault>
+                    <i class="icon-trash text-error"></i>
+                </a>
+            </div>
+        </td>
+    </TemplateColumn>
+</DataGrid>
 
 @code
 {
-    private DataTable<UserResponse> Table;
+    private DataGrid<UserResponse> Grid;
     
-    private async Task<IPagedData<UserResponse>> LoadData(PaginationOptions options)
-     => await ApiClient.GetJson<PagedData<UserResponse>>($"api/admin/users?page={options.Page}&pageSize={options.PerPage}");
+    private async Task<DataGridItemResult<UserResponse>> ItemsProvider(DataGridItemRequest request)
+    {
+        var query = $"?startIndex={request.StartIndex}&count={request.Count}";
 
-    private async Task Delete(UserResponse response)
+        if (!string.IsNullOrEmpty(request.SortColumn))
+        {
+            var dir = request.SortDirection == SortState.Descending ? "desc" : "asc";
+            query += $"&orderBy={request.SortColumn}&orderByDir={dir}";
+        }
+
+        if (!string.IsNullOrEmpty(request.Filter))
+            query += $"&filter={request.Filter}";
+
+        var data = await ApiClient.GetJson<CountedData<UserResponse>>($"api/admin/users{query}");
+
+        return new()
+        {
+            Items = data.Items,
+            TotalCount = data.TotalCount
+        };
+    }
+    
+    private async Task DeleteAsync(UserResponse response)
     {
         await AlertService.ConfirmDanger(
             "User deletion",
@@ -57,7 +78,7 @@
                 await ApiClient.Delete($"api/admin/users/{response.Id}");
                 await ToastService.Success("Successfully deleted user");
 
-                await Table.Refresh();
+                await Grid.RefreshAsync();
             }
         );
     }