Updated the usage of mooncore components

MoonlightServers.Frontend/UI/Views/Admin/Nodes/Create.razor

@@ -1,7 +1,6 @@
 @page "/admin/servers/nodes/create"
 
 @using MoonCore.Blazor.Tailwind.Components
-@using MoonCore.Blazor.Tailwind.Forms
 @using MoonCore.Blazor.Tailwind.Toasts
 @using MoonCore.Helpers
 @using MoonlightServers.Shared.Http.Requests.Admin.Nodes
@@ -11,10 +10,10 @@
 @inject ToastService ToastService
 
 <PageHeader Title="Create Node">
-    <button @onclick="GoBack" type="button" class="btn btn-secondary">
+    <a href="/admin/servers/nodes" class="btn btn-secondary">
         <i class="icon-chevron-left mr-1"></i>
         Back
-    </button>
+    </a>
     <WButton OnClick="_ => Form.Submit()" CssClasses="btn btn-primary">
         <i class="icon-check mr-1"></i>
         Create
@@ -23,12 +22,40 @@
 
 <div class="mt-5">
     <HandleForm @ref="Form" Model="Request" OnValidSubmit="OnSubmit">
-        <GeneratedForm TForm="CreateNodeRequest" Model="Request" OnConfigure="OnConfigure"/>
+        <div class="grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
+            <div class="sm:col-span-2">
+                <label class="block text-sm font-medium leading-6 text-white">Name</label>
+                <div class="mt-2">
+                    <input @bind="Request.Name" type="text" autocomplete="off" class="form-input w-full">
+                </div>
+            </div>
+            <div class="sm:col-span-2">
+                <label class="block text-sm font-medium leading-6 text-white">Fqdn</label>
+                <div class="mt-2">
+                    <input @bind="Request.Fqdn" type="text" autocomplete="off" class="form-input w-full">
+                </div>
+            </div>
+            <div class="sm:col-span-2">
+                <label class="block text-sm font-medium leading-6 text-white">HttpPort</label>
+                <div class="mt-2">
+                    <input @bind="Request.HttpPort" type="number" autocomplete="off" class="form-input w-full">
+                </div>
+            </div>
+            <div class="sm:col-span-2">
+                <label class="block text-sm font-medium leading-6 text-white">FtpPort</label>
+                <div class="mt-2">
+                    <input @bind="Request.FtpPort" type="number" autocomplete="off" class="form-input w-full">
+                </div>
+            </div>
+        </div>
     </HandleForm>
 </div>
 
-@code
+@*
+TODO: EnableTransparentMode, EnableDynamicFirewall
+*@
 
+@code
 {
     private HandleForm Form;
     private CreateNodeRequest Request;
@@ -37,36 +64,12 @@
     {
         Request = new();
     }
-
-    private void OnConfigure(FormConfiguration<CreateNodeRequest> configuration)
-    {
-        configuration.WithField(x => x.Name);
-        configuration.WithField(x => x.Fqdn);
-        
-        configuration.WithField(x => x.HttpPort, fieldConfiguration =>
-        {
-            fieldConfiguration.DefaultValue = 8080;
-        });
-        
-        configuration.WithField(x => x.FtpPort, fieldConfiguration =>
-        {
-            fieldConfiguration.DefaultValue = 2021;
-        });
-
-        var advancedPage = configuration.WithPage("Advanced");
-        
-        advancedPage.WithField(x => x.EnableTransparentMode);
-        advancedPage.WithField(x => x.EnableDynamicFirewall);
-    }
-
+    
     private async Task OnSubmit()
     {
         await ApiClient.Post("api/admin/servers/nodes", Request);
 
-        await ToastService.Success("Successfully created Node");
-        GoBack();
+        await ToastService.Success("Successfully created node");
+        Navigation.NavigateTo("/admin/servers/nodes");
     }
-
-    private void GoBack()
-        => Navigation.NavigateTo(ComponentHelper.GetRouteOfComponent<Index>()!);
 }

MoonlightServers.Frontend/UI/Views/Admin/Nodes/Index.razor

@@ -1,39 +1,45 @@
 @page "/admin/servers/nodes"
 
-@using System.Diagnostics
 @using MoonCore.Blazor.Tailwind.Alerts
-@using MoonCore.Blazor.Tailwind.MinimalCrud
 @using MoonCore.Helpers
 @using MoonCore.Models
-@using MoonCore.Blazor.Tailwind.DataTable
 @using MoonlightServers.Shared.Http.Responses.Admin.Nodes
 @using MoonCore.Blazor.Tailwind.Components
+@using MoonCore.Blazor.Tailwind.Dt
+@using MoonCore.Blazor.Tailwind.Toasts
 @using MoonlightServers.Frontend.Services
 @using MoonlightServers.Shared.Http.Responses.Admin.Nodes.Sys
 
 @inject HttpApiClient ApiClient
 @inject NodeService NodeService
 @inject AlertService AlertService
+@inject ToastService ToastService
 
 <div class="mb-3">
     <NavTabs Index="2" Names="@UiConstants.AdminNavNames" Links="@UiConstants.AdminNavLinks"/>
 </div>
 
-<MinimalCrud TItem="NodeDetailResponse" OnConfigure="OnConfigure">
-    <ChildContent>
-        <DataColumn TItem="NodeDetailResponse" Field="@(x => x.Id)" Title="Id" IsSortable="true"/>
-        <DataColumn TItem="NodeDetailResponse" Field="@(x => x.Name)" Title="Name" IsSortable="true">
-            <Template>
-                @{
-                    var url = ComponentHelper.GetRouteOfComponent<Update>(context.Id)!;
-                }
+<div class="mb-5">
+    <PageHeader Title="Nodes">
+        <a href="/admin/servers/nodes/create" class="btn btn-primary">
+            Create
+        </a>
+    </PageHeader>
+</div>
 
-                <a class="text-primary-500" href="@url">@context.Name</a>
-            </Template>
-        </DataColumn>
-        <DataColumn TItem="NodeDetailResponse" Field="@(x => x.Fqdn)" Title="Fqdn"/>
-        <DataColumn TItem="NodeDetailResponse" Field="@(x => x.Fqdn)" Title="Status">
-            <Template>
+<DataTable TItem="NodeDetailResponse" PageSize="15" LoadItemsPaginatedAsync="LoadData">
+    <Configuration>
+        <DataTableColumn TItem="NodeDetailResponse" Field="@(x => x.Id)" Name="Id"/>
+        <DataTableColumn TItem="NodeDetailResponse" Field="@(x => x.Name)" Name="Name">
+            <ColumnTemplate>
+                <a class="text-primary-500" href="/admin/servers/nodes/update/@(context.Id)">
+                    @context.Name
+                </a>
+            </ColumnTemplate>
+        </DataTableColumn>
+        <DataTableColumn TItem="NodeDetailResponse" Field="@(x => x.Fqdn)" Name="Fqdn"/>
+        <DataTableColumn TItem="NodeDetailResponse" Field="@(x => x.Fqdn)" Name="Status">
+            <ColumnTemplate>
                 <LazyLoader Load="_ => LoadNodeStatus(context.Id)">
                     @{
                         bool isFetched;
@@ -84,48 +90,79 @@
                         </span>
                     }
                 </LazyLoader>
-            </Template>
-        </DataColumn>
-        <DataColumn TItem="NodeDetailResponse"
-                    Title=""
-                    HeadCssClasses="p-2 font-semibold text-left hidden xl:table-cell"
-                    CssClasses="p-2 text-left font-normal hidden xl:table-cell">
-            <Template>
+            </ColumnTemplate>
+        </DataTableColumn>
+        <DataTableColumn TItem="NodeDetailResponse"
+                         HeaderCss="p-2 font-semibold text-left hidden xl:table-cell"
+                         ColumnCss="p-2 text-left font-normal hidden xl:table-cell">
+            <ColumnTemplate>
                 <div>
                     <i class="icon-cpu text-lg me-1 align-middle text-primary-500"></i>
                     <span class="align-middle">33% of 6 Cores</span>
                 </div>
-            </Template>
-        </DataColumn>
-        <DataColumn TItem="NodeDetailResponse"
-                    Title=""
-                    HeadCssClasses="p-2 font-semibold text-left hidden xl:table-cell"
-                    CssClasses="p-2 text-left font-normal hidden xl:table-cell">
-            <Template>
+            </ColumnTemplate>
+        </DataTableColumn>
+        <DataTableColumn TItem="NodeDetailResponse"
+                    HeaderCss="p-2 font-semibold text-left hidden xl:table-cell"
+                    ColumnCss="p-2 text-left font-normal hidden xl:table-cell">
+            <ColumnTemplate>
                 <div>
                     <i class="icon-memory-stick text-lg me-1 align-middle text-primary-500"></i>
                     <span class="align-middle">1.56GB / 64GB</span>
                 </div>
-            </Template>
-        </DataColumn>
-        <DataColumn TItem="NodeDetailResponse"
-                    Title=""
-                    HeadCssClasses="p-2 font-semibold text-left hidden xl:table-cell"
-                    CssClasses="p-2 text-left font-normal hidden xl:table-cell">
-            <Template>
+            </ColumnTemplate>
+        </DataTableColumn>
+        <DataTableColumn TItem="NodeDetailResponse"
+                         HeaderCss="p-2 font-semibold text-left hidden xl:table-cell"
+                         ColumnCss="p-2 text-left font-normal hidden xl:table-cell">
+            <ColumnTemplate>
                 <div>
                     <i class="icon-hard-drive text-lg me-1 align-middle text-primary-500"></i>
                     <span class="align-middle">78.68GB / 1TB</span>
                 </div>
-            </Template>
-        </DataColumn>
-    </ChildContent>
-</MinimalCrud>
+            </ColumnTemplate>
+        </DataTableColumn>
+        <DataTableColumn TItem="NodeDetailResponse">
+            <ColumnTemplate>
+                <div class="flex justify-end">
+                    <a href="/admin/servers/nodes/update/@(context.Id)" class="text-primary-500 mr-2 sm:mr-3">
+                        <i class="icon-pencil text-base"></i>
+                    </a>
+
+                    <a href="#" @onclick="() => Delete(context)" @onclick:preventDefault
+                       class="text-danger-500">
+                        <i class="icon-trash text-base"></i>
+                    </a>
+                </div>
+            </ColumnTemplate>
+        </DataTableColumn>
+    </Configuration>
+</DataTable>
 
 @code
 {
+    private DataTable<NodeDetailResponse> Table;
+
     private Dictionary<int, NodeSystemStatusResponse?> Responses = new();
 
+    private async Task<IPagedData<NodeDetailResponse>> LoadData(PaginationOptions options)
+        => await ApiClient.GetJson<PagedData<NodeDetailResponse>>($"api/admin/servers/nodes?page={options.Page}&pageSize={options.PerPage}");
+
+    private async Task Delete(NodeDetailResponse detailResponse)
+    {
+        await AlertService.ConfirmDanger(
+            "Node deletion",
+            $"Do you really want to delete the node '{detailResponse.Name}'",
+            async () =>
+            {
+                await ApiClient.Delete($"api/admin/servers/nodes/{detailResponse.Id}");
+                await ToastService.Success("Successfully deleted node");
+
+                await Table.Refresh();
+            }
+        );
+    }
+
     private Task LoadNodeStatus(int node)
     {
         Task.Run(async () =>
@@ -165,15 +202,4 @@
 
         await AlertService.Danger("Node error details", message);
     }
-
-    private void OnConfigure(MinimalCrudOptions<NodeDetailResponse> options)
-    {
-        options.Title = "Nodes";
-        options.ItemLoader = async (page, pageSize) =>
-            await ApiClient.GetJson<PagedData<NodeDetailResponse>>($"api/admin/servers/nodes?page={page}&pageSize={pageSize}");
-
-        options.CreateUrl = ComponentHelper.GetRouteOfComponent<Create>();
-        options.UpdateUrl = item => ComponentHelper.GetRouteOfComponent<Update>(item.Id)!;
-        options.DeleteFunction = async item => await ApiClient.Delete($"api/admin/servers/nodes/{item.Id}");
-    }
 }

MoonlightServers.Frontend/UI/Views/Admin/Nodes/Update.razor

@@ -1,7 +1,6 @@
 @page "/admin/servers/nodes/update/{Id:int}"
 
 @using MoonCore.Blazor.Tailwind.Components
-@using MoonCore.Blazor.Tailwind.Forms
 @using MoonCore.Blazor.Tailwind.Toasts
 @using MoonCore.Helpers
 @using MoonlightServers.Shared.Http.Requests.Admin.Nodes
@@ -14,10 +13,10 @@
 
 <LazyLoader Load="Load">
     <PageHeader Title="Update Node">
-        <button @onclick="GoBack" type="button" class="btn btn-secondary">
+        <a href="/admin/servers/nodes" class="btn btn-secondary">
             <i class="icon-chevron-left mr-1"></i>
             Back
-        </button>
+        </a>
         <WButton OnClick="_ => Form.Submit()" CssClasses="btn btn-primary">
             <i class="icon-check mr-1"></i>
             Update
@@ -59,27 +58,11 @@
         Request = Mapper.Map<UpdateNodeRequest>(Node);
     }
 
-    private void OnConfigure(FormConfiguration<UpdateNodeRequest> configuration)
-    {
-        configuration.WithField(x => x.Name);
-        configuration.WithField(x => x.Fqdn);
-        configuration.WithField(x => x.HttpPort);
-        configuration.WithField(x => x.FtpPort);
-        
-        var advancedPage = configuration.WithPage("Advanced");
-        
-        advancedPage.WithField(x => x.EnableTransparentMode);
-        advancedPage.WithField(x => x.EnableDynamicFirewall);
-    }
-
     private async Task OnSubmit()
     {
         await ApiClient.Patch($"api/admin/servers/nodes/{Id}", Request);
 
         await ToastService.Success("Successfully updated Node");
-        GoBack();
+        Navigation.NavigateTo("/admin/servers/nodes");
     }
-
-    private void GoBack()
-        => Navigation.NavigateTo(ComponentHelper.GetRouteOfComponent<Index>()!);
 }