Frontend: Replace BlazorTable with QuickGrid.

Frontend: Refactor History page to be suitable for QuickGrid
Xian55 · Dec 23, 2024 · bf9d008 · bf9d008
1 parent 36e70fe
commit bf9d008
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 34 deletions.
diff --git a/BlazorServer/App.razor b/BlazorServer/App.razor
@@ -24,6 +24,7 @@
     <script src="_content/Frontend/script/d3.v7.min.js"></script>
 
     <link rel="stylesheet" href="_content/Frontend/css/animate-v4.0.0.min.css" />
+    <link rel="stylesheet" href="BlazorServer.styles.css" asp-append-version="true" />
 
     <script>const whTooltips = { colorLinks: true, iconizeLinks: true, renameLinks: true };</script>
     <script src="_content/Frontend/script/power.js"></script>

diff --git a/Core/Session/IGrindSessionDAO.cs b/Core/Session/IGrindSessionDAO.cs
@@ -1,9 +1,10 @@
 using System.Collections.Generic;
+using System.Linq;
 
 namespace Core.Session;
 
 public interface IGrindSessionDAO
 {
-    IEnumerable<GrindSession> Load();
+    IQueryable<GrindSession> Load();
     void Save(GrindSession session);
-}
+}
diff --git a/Core/Session/LocalGrindSessionDAO.cs b/Core/Session/LocalGrindSessionDAO.cs
@@ -21,14 +21,13 @@ public LocalGrindSessionDAO(DataConfig dataConfig)
             Directory.CreateDirectory(dataConfig.ExpHistory);
     }
 
-    public IEnumerable<GrindSession> Load()
+    public IQueryable<GrindSession> Load()
     {
-        List<GrindSession> sessions = Directory.EnumerateFiles(dataConfig.ExpHistory, "*.json")
+        var sessions = Directory.EnumerateFiles(dataConfig.ExpHistory, "*.json")
             .Select(file => DeserializeObject<GrindSession>(File.ReadAllText(file))!)
-            .OrderByDescending(grindingSession => grindingSession.SessionStart)
-            .ToList();
+            .OrderByDescending(s => s.SessionStart);
 
-        if (sessions.Count != 0)
+        if (sessions.Any())
         {
             int[] expList = ExperienceProvider.Get(dataConfig);
             foreach (GrindSession? s in sessions)
@@ -37,7 +36,7 @@ public IEnumerable<GrindSession> Load()
             }
         }
 
-        return sessions;
+        return sessions.AsQueryable();
     }
 
     public void Save(GrindSession session)

diff --git a/Frontend/DependencyInjection.cs b/Frontend/DependencyInjection.cs
@@ -1,5 +1,4 @@
-using BlazorTable;
-using MatBlazor;
+using MatBlazor;
 
 using Microsoft.Extensions.DependencyInjection;
 
@@ -16,8 +15,6 @@ public static IServiceCollection AddFrontend(this IServiceCollection services)
         services.AddRazorComponents()
             .AddInteractiveServerComponents();
 
-        services.AddBlazorTable();
-
         return services;
     }
 }
diff --git a/Frontend/Pages/History.razor b/Frontend/Pages/History.razor
@@ -6,34 +6,76 @@
 
 @if (Sessions.Any())
 {
-    <Table class="table table-dark table-striped table-hover" TableItem="GrindSession" Items="Sessions" PageSize="15" ColumnReorder="true" ShowSearchBar="true">
-        <Column TableItem="GrindSession" Title="Date" Field="@(x => x.SessionStart)" Sortable="true" Filterable="true" Width="10%" DefaultSortColumn="true" DefaultSortDescending="true"></Column>
-        <Column TableItem="GrindSession" Title="Path" Field="@(x => x.PathName)" Sortable="true" Filterable="true" Width="15%"></Column>
-        <Column TableItem="GrindSession" Title="Class" Field="@(x => x.PlayerClass)" Sortable="true" Filterable="true" Width="5%"></Column>
-        <Column TableItem="GrindSession" Title="Duration" Field="@(x => x.TotalTimeInMinutes)" Sortable="true" Filterable="true" Width="5%">
-            <Template>
-                @{
-                    <span>@context.TotalTimeInMinutes minutes</span>
-                }
-            </Template>
-        </Column>
-        <Column TableItem="GrindSession" Title="Level" Field="@(x => x.LevelFrom)" Sortable="true" Filterable="true" Width="5%"></Column>
-        <Column TableItem="GrindSession" Title="Exp" Field="@(x => x.ExpGetInBotSession)" Sortable="true" Filterable="true" Width="5%"></Column>
-        <Column TableItem="GrindSession" Title="Exp/Hour" Field="@(x => x.ExperiencePerHour)" Sortable="true" Filterable="true" Width="5%"></Column>
-        <Column TableItem="GrindSession" Title="Mobs" Field="@(x => x.MobsKilled)" Sortable="true" Filterable="true" Width="5%"></Column>
-        <Column TableItem="GrindSession" Title="Mobs/Min" Field="@(x => x.MobsPerMinute)" Sortable="true" Filterable="true" Width="5%"></Column>
-        <Column TableItem="GrindSession" Title="Death" Field="@(x => x.Death)" Sortable="true" Filterable="true" Width="5%"></Column>
-        <Pager ShowPageNumber="true" ShowTotalCount="true" PageSizes="@pageSize" ShowPageSizes="true"></Pager>
-    </Table>
+    <p>
+        Show:
+        <label><input type="checkbox" @bind="showPath" /> path</label>
+    </p>
+
+    <QuickGrid class="table table-dark table-striped table-hover" Items="Filtered" Pagination="@pagination">
+        <PropertyColumn Title="Start Date" Property="@(x => x.SessionStart)" Sortable="true" IsDefaultSortColumn="true"></PropertyColumn>
+        @if (showPath)
+        {
+            <PropertyColumn Title="Path" Property="@(x => x.PathName)" Sortable="true">
+                <ColumnOptions>
+                    <div class="search-box">
+                        <input type="search" autofocus @bind="pathFilter" @bind:event="oninput" placeholder="Path name..." />
+                    </div>
+                </ColumnOptions>
+            </PropertyColumn>
+        }
+        <PropertyColumn Title="Class" Property="@(x => x.PlayerClass)" Sortable="true">
+            <ColumnOptions>
+                <div class="search-box">
+                    <input type="search" autofocus @bind="classFilter" @bind:event="oninput" placeholder="Class name..." />
+                </div>
+            </ColumnOptions>
+        </PropertyColumn>
+        <PropertyColumn Title="Duration(min)" Property="@(x => x.TotalTimeInMinutes)" Sortable="true" Align="Align.Right"></PropertyColumn>
+        <PropertyColumn Title="Level" Property="@(x => x.LevelFrom)" Sortable="true" Align="Align.Right"></PropertyColumn>
+        <PropertyColumn Title="Exp" Property="@(x => x.ExpGetInBotSession)" Sortable="true" Align="Align.Right"></PropertyColumn>
+        <PropertyColumn Title="Exp/Hour" Property="@(x => x.ExperiencePerHour)" Sortable="true" Align="Align.Right"></PropertyColumn>
+        <PropertyColumn Title="Mobs" Property="@(x => x.MobsKilled)" Sortable="true" Align="Align.Right"></PropertyColumn>
+        <PropertyColumn Title="Mobs/Min" Property="@(x => x.MobsPerMinute)" Sortable="true" Align="Align.Right"></PropertyColumn>
+        <PropertyColumn Title="Death" Property="@(x => x.Death)" Sortable="true" Align="Align.Right"></PropertyColumn>
+    </QuickGrid>
+
+    <Paginator State="@pagination" />
 }
 else
 {
     <div>No previous sessions!</div>
 }
 
 @code {
-    private readonly List<int> pageSize = new() { 15, 25, 50, 100 };
-    private IEnumerable<GrindSession> Sessions = null!;
+
+    PaginationState pagination = new PaginationState { ItemsPerPage = 15 };
+
+    private IQueryable<GrindSession> Sessions = null!;
+
+    private bool showPath = true;
+
+    private string pathFilter = string.Empty;
+    private string classFilter = string.Empty;
+
+    private IQueryable<GrindSession> Filtered
+    {
+        get
+        {
+            var result = Sessions;
+
+            if (!string.IsNullOrEmpty(pathFilter))
+            {
+                result = result.Where(c => c.PathName.Contains(pathFilter, StringComparison.CurrentCultureIgnoreCase));
+            }
+
+            if (!string.IsNullOrEmpty(classFilter))
+            {
+                result = result.Where(c => c.PlayerClass.ToStringF().Contains(classFilter, StringComparison.CurrentCultureIgnoreCase));
+            }
+
+            return result;
+        }
+    }
 
     protected override void OnInitialized()
     {

diff --git a/Frontend/_Imports.razor b/Frontend/_Imports.razor
@@ -13,5 +13,5 @@
 @using SharedLib
 @using Core
 @using Game
-@using BlazorTable
+@using Microsoft.AspNetCore.Components.QuickGrid
 @using static Microsoft.AspNetCore.Components.Web.RenderMode